Y tiene que venir otra vez el Sr. Nielsen para decirnos como tenemos que usar los Tabs (Tabs, Used Right) de forma correcta ya que en múltiples ocasiones, los estamos usando en contextos que no son necesarios.
No nos vamos a enrollar más (que es tarde) y vamos directamente a ver estas guidelines:
- Los Tabs, tienen que usarse para cambiar de vistas dentro de un mismo contexto, no para navegar a distintas partes de nuestra aplicación o sitio web
- El contenido que oculta un Tab, tiene que ser una agrupación lógica de información (ya que esta agrupado claro ;-)) de manera que el usuario, pueda predecir o intuir lo que va a encontrar cuando selecciona una pestaña. Si no puedes agrupar de forma clara la información, y estas usando pestañas, las estas usando mal.
- Los usuarios no tienen que sentir que hay que comparar el contenido de dos pestañas distintas. Si es así, otra vez estamos haciendo algo mal, ya que cuando esto ocurre la información no tendría que estar en pestañas. Si todavía crees que esto no es así, ponte en situación de un usuario que está comparando el contenido de dos pestañas y tiene que estar pulsando una u otra continuamente para acceder a la información. Como podrás ver, esto no es muy usable (ni tampoco útil)
- Siempre que tengas 3 o más pestañas deberás marcar la pestaña seleccionada de alguna forma, lo normal será que la «ilumines» como puedas y las no seleccionadas que muestren claramente su estado. Si tienes 2 pestañas pasa de esto, ya que el usuario no sabrá donde está.
Para marcar la pestaña, puedes usar una tipo más grande, un cambio de color o lo que creas que es mejor, pero que parezca SIEMPRE que está por encima o delante de las demás. - Las pestañas no seleccionadas (como ya he dicho) tienen que verse claramente y sobre todo se tiene que destacar su estado como tal, pero ten cuidado y que no parezca que están deshabilitadas ya que si es así, el usuario, nunca va a pinchar en ella y por lo tanto no accederá a un contenido que puede ser relevante para él.
- Puedes intentar conectar el contenido de la pestaña con la información por medio del color. Por ejemplo, puedes usar un color x para el literal de la pestaña y el mismo para los elementos gráficos de la pestaña. Esto enfatizara el contenido con la pestaña seleccionada.
- El texto que se muestra en los Tabs tiene que ser corto, conciso y lo suficiente significativo como para que (como ya hemos dicho) el usuario pueda imaginar que hay detrás de ella. Intenta no usar más de dos palabras, ya que si es así, quizá esa información no tenga que ir en una pestaña
- Evita poner mayúsculas en los Tabs ya que siempre dificulta la lectura (quizá a David Carson no le parece tan mal). Lo que puedes hacer es poner la inicial en mayúscula.
Las guidelines que se definieron para Microsoft Windows Vista, recomiendan capitalizar únicamente la primera palabra (en caso de haber varias claro), mientras que las Apple Human Interface Guidelines, recomiendan poner en mayúsculas las iníciales de todas las palabras. La verdad da un poco igual, pero eso sí elige uno de los dos patrones y con él hasta el final. - Intenta tener únicamente una fila de pestañas ya que si tienes dos, seguramente la información es demasiado compleja como para mostrarla de esta manera.
Ten en cuenta que si hay dos filas de pestañas, al usuario le costara saber en cual esta (si no fíjate en los diálogos de propiedades de Windows XP y versiones anteriores ;-)) - Si usas pestañas, por favor ponlas siempre en la parte superior de la página ya que en los laterales no siempre son efectivas (aunque a veces sí, si no fijaros en las de OneNote) y en la parte inferior de la página nunca, ya que raramente son vistas por el usuario.
- La respuesta cuando clickas en un Tab tiene que ser rápida de manera que el usuario comprenda que hay una conexión entre ellas. Lo más útil para este caso, es el javascript seguramente pero ahora no estamos hablando de tecnología si no de filosofía :-D.
- Y para terminar, procura que la parte más importante del contenido mostrado en el conjunto de las pestañas, se muestre de forma inicial ya que así te aseguras que al usuario le llegue siempre.
Buenos ejemplos del uso de pestañas.
Un buen ejemplo
y ahora otro buen ejemplo
y esto es todo amigos, a dormir que mañana hay que ir al tajo.
Salud.
A deshoras 