¿Las interfaces con pestañas son confusas?

Question

Estamos diseñando un sitio web y nos hemos encontrado con algunos desafíos de la interfaz de usuario que se resolverían perfectamente con una interfaz con pestañas. Los usuarios interactuarán con diferentes elementos del sitio (hay algunas funciones básicas de visualización/edición/copia/pegado disponibles) y tener solo un objeto en una pestaña visible a la vez simplifica bastante las cosas.

Estamos, por supuesto, completamente cómodos con las interfaces con pestañas, pero ¿qué pasa con los usuarios novatos? He buscado en la web para obtener orientación y no he encontrado nada definitivo. ¿Tiene experiencia presentando una interfaz con pestañas para usuarios novatos y tuvieron problemas con ella? O bien, ¿hemos llegado al punto en el que todos se sienten cómodos con las pestañas y podemos usarlas sin reservas?

La usabilidad es importante-- más para este proyecto que la mayoría. Si los usuarios ingenuos se confunden con una interfaz con pestañas, simplemente no funcionará y tendremos que buscar otra forma.

Answer 1

Las pestañas se están convirtiendo en un lugar común lo suficiente como para no preocuparme por usarlas, siempre y cuando las implemente correctamente. Asegúrese de que la pestaña activa sea visualmente distinta de las otras pestañas.

Además, intente crear las pestañas con la mejora progresiva para que el contenido siga allí con JavaScript deshabilitado. Hay dos formas principales de hacerlo:

1. carga cada pestaña, pero la primera que utilizan
   AJAX. Las pestañas en sí deben ser enlaces al contenido que obtiene el AJAX
   .
2. Guarde toda su información en la página , pero ocúltela usando JavaScript. Cuando recorre las pestañas, se completan desde las partes ocultas de de la página.

Un recurso de diseño que puede ser útil es el YUI Design Pattern Library y su sección en tabs.

Answer 2

Creo que mientras las pestañas sean visibles como tales, es comprensible para el usuario. He visto sitios web en los que presentan una barra vertical con enlaces que actúan como pestañas, pero no son inmediatamente visibles para el usuario y lo encuentran muy confuso.

Answer 3

Creo que las personas están acostumbradas a la metáfora (de carpetas, o índices de tarjetas, etc.) de pestañas. Especialmente aquellos que usan la web por cualquier período de tiempo. Creo que, si IE ha adoptado una metáfora, implica una familiaridad común con esa metáfora.

Así que, no, sugeriría que no sean confusas y sugiera que lo haga. Solo, tal vez, publique una introducción de bienvenida/por primera vez (o un destacado enlace de "ayuda" a dicha introducción) para el uso de las pestañas.

Answer 4

Tiendo a estar de acuerdo con lothar y ricebowl: la gente parece estar muy familiarizada con esto en estos días. Lo más importante con cualquier elemento de la GUI es la claridad: el usuario debe saber de manera innata qué sucederá cuando presionen algo (saben que al hacer clic en una pestaña inactiva, se activará); y en la navegación: debe estar muy claro exactamente en qué pestaña se encuentran actualmente. Como dijo lothar, si no es visible de inmediato para el usuario, es muy confuso. Si abordas esos problemas, entonces debería estar bien.

Answer 5

He sido desarrollador de una aplicación de intranet que utilizaba una interfaz con pestañas, generada con HTML y controlada por JavaScript. Esto fue mucho antes de IE7 y Firefox. De hecho, era un poco novedoso en los sitios web en general, también.

Afortunadamente, un desarrollador anterior descubrió que si hacía que pareciera un cuadro de diálogo, incluso si se utilizaba un fondo gris, la gente generalmente entendía la metáfora. También cargamos todo el contenido para todas las pestañas en la carga de página inicial, y teníamos los botones Guardar/Cancelar fuera de la estructura con pestañas. Debido a esto, la mayoría de las personas comprendió de inmediato que podían moverse entre pestañas (usamos JavaScript para ocultar y mostrar los DIV) y guardar guardaría los cambios en todos de ellos.

Si desea desviarse de una metáfora tan obvia, entonces necesita hacer algunos estudios de usabilidad.

Answer 6

Una interfaz de pestañas bien implementada no debe confundir a los usuarios.

De acuerdo con lo que otros han dicho, una de las cosas más importantes para considerar con las pestañas, o cualquier otra interfaz de navegación, es que sea obvia donde se encuentran actualmente en el esquema de navegación.

¡Otro punto importante es no romper el navegador! Muchas implementaciones de AJAX o javascript rompen el botón Atrás. Esta es una pequeña molestia para algunos y una gran inconveniencia para otros. Asegúrate de considerar a tu público objetivo aquí.

Personalmente prefiero el método oldschool de no precargar todas las pestañas, pero teniendo cada pestaña como su propia página y usando una metodología de plantillas para administrar la interfaz de navegación, ya sea tabbled o de otro modo. Esto mantiene el historial del navegador y funciona bien con o sin javascipt.

Answer 7

Tendría que estar en desacuerdo con los que están a favor de las pestañas. En una prueba de diseño que hicimos para un sitio web de bastante tráfico (más de 1mil únicos en el momento), encontramos que las pestañas no se han utilizado. Las pestañas estaban claramente marcadas, ubicadas a la derecha del área de contenido principal. Basándome en esa experiencia, sugeriría buscar una alternativa o, como staticscan sugirió ejecutar las pruebas de usabilidad para descubrir cuáles funcionan.

Answer 8

No crea que puede decidir a priori qué es útil y qué no. Hacer pruebas de usabilidad

"Se tarda sólo cinco usuarios para destapar el 80 por ciento de los problemas de usabilidad de alto nivel" Jakob Nielsen

pruebas de usabilidad Google y empezar a aprender. No es dificil.

Answer 9

En su excelente libro "No me hacen pensar" (Sensible.com), Steve Krug trata sobre las ventajas de la utilización de una interfaz con pestañas:

• Son evidentes
• Son difíciles de
pierdas
• -Están mancha de
• Ellos sugieren un espacio físico

Él pasa a describir las claves para su ccessful pestañas como se demuestra por Amazon.com:

• Se dibujan correctamente
• Ellos fueron codificados por colores
• Hubo una pestaña seleccionada cuando entre en el sitio.

Obviamente, él proporciona detalles para cada uno de estos ítems del libro (no lo plagearé aquí). Definitivamente vale la pena mirar el libro si desea directrices para crear sitios web tanto para principiantes como para expertos.

Answer 10

Las pestañas, etc. son solo herramientas. Cómo decidimos diseñarlos y usarlos es lo que determina su efectividad.

Lo que trato de tener en cuenta es:

1) mantenerlo cerca. Las cosas que más utilizamos deben estar en la parte delantera o cerca de la parte superior tanto como sea posible y enterrar el resto en función de la frecuencia con que se utilizan/ajustan.

2) Bastante fácil de usar para mamá. Todas las interfaces son confusas si no se presentan de manera clara y lógica.

3) Organice cómo se usa, no cómo cree que tiene sentido. * A menudo utilizo pestañas para dividir los pasos en un proceso o para dividir áreas como opciones básicas/avanzadas. Agrupo basándose en la similitud o el uso en función de lo que funciona mejor

4) Manténgalos pocos De cualquier manera Trato de permanecer por debajo de los 7-10 vitrocerámicas como el cerebro humano tiene dificultades para saltar más allá de 7-10 dígitos, así que supongo lo mismo para los datos. Los Accordianos verticales también pueden ser algo en lo que quieras mirar.

También he insertado pestañas dentro de las pestañas antes. Funciona bien pero solo una capa profunda la mayor parte del tiempo.

Answer 11

Sólo quería señalar SmashingMagazine tiene unas nuevas pestañas artículo showcasing: Showcase of Tabs

Answer 12

Otro recurso para pestañas es un artículo reciente sobre rompiendo mag: http://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation/