El regreso a China coincidió con el evento UXday organizado por el Departamento de Experiencia del Usuario de Baidu. El tema de nuestra discusión grupal fueron los tabúes al usar pestañas.
El tema que tratamos se centró en un punto: ¿cómo lidiar con pestañas masivas?
Primero, repasemos la historia de Tab. La pestaña aquí es un término general para un tipo de elementos interactivos, incluida la navegación en el diseño web y el uso en software de escritorio como los navegadores. Los elementos interactivos llamados pestañas generalmente tienen las dos características siguientes:
Tiene significados tanto de acción como de estado. Una de las razones por las que las pestañas son populares es que son fáciles de operar y al mismo tiempo permiten a los usuarios saber claramente dónde se encuentran actualmente (pestaña).
Desde una perspectiva de arquitectura de la información, el contenido entre pestañas generalmente no se superpone. Y la relación entre pestañas debería ser igual y no debería haber afiliación mutua.
Entonces, en un sentido amplio, la mayoría de los menús de navegación se pueden reducir a pestañas.
En general, se considera que Amazon fue pionero en el uso de pestañas en el diseño web. Creo que muchos de ustedes han leído el artículo de revisión clásico de LukeW: La historia de la navegación por pestañas de Amazon (para la versión china, haga clic aquí). En este artículo, podemos ver que la navegación de Amazon ha evolucionado desde tener sólo dos pestañas: Libro y Música a tener dos filas de pestañas en su punto máximo en el año 2000. Obviamente, cuando aumenta el número de pestañas, el método de interacción de pestañas encuentra algunas dificultades.
Otro ejemplo es el cuadro de diálogo Configuración en Word 2003. Como se muestra en la figura siguiente, cuando hay demasiadas etiquetas y el espacio de visualización es limitado, Microsoft tiene que organizar las etiquetas en dos filas. Un gran problema con esto es que, cuando se selecciona la fila superior de etiquetas, ¿cómo expresar la relación entre el estado seleccionado y la página de contenido actual?
El enfoque de Microsoft ha sido criticado. En la imagen de arriba, cuando el usuario hace clic en la fila superior de etiquetas, la fila superior se intercambia automáticamente con la fila inferior para mantener una estrecha relación entre las etiquetas y la página de contenido. Sin embargo, este enfoque hace que la posición de la etiqueta sea muy inconsistente. Creo que muchas personas tienen la misma experiencia confusa.
En algún otro software, como Firefox 3 (como se muestra a continuación), al hacer clic en la etiqueta de la fila superior, la visualización de la etiqueta solo cambia al estado seleccionado. La ventaja de esto es que se mantiene la coherencia de la posición de la etiqueta, pero. Algunas indicaciones de posición se pierden.
Entonces, si varias filas de etiquetas no son una buena idea, ¿cómo se manejan muchas de ellas?
Una idea obvia es cambiar la disposición de las etiquetas de la disposición horizontal habitual a la disposición vertical. Generalmente esta disposición se encuentra en el lado izquierdo de la vista y puede tener la forma de íconos o texto.
Sin embargo, existen algunos problemas con este enfoque. En primer lugar, si el nombre de la etiqueta es muy largo, ocupará mucho espacio izquierdo valioso, y este espacio resulta ser el foco de atención del usuario en la pantalla y es un campo de batalla para los estrategas militares. Algunos sitios web colocan el texto verticalmente. Este enfoque, especialmente para los sitios web en inglés, es un desastre para la legibilidad. Si se coloca en el lado derecho, puede interferir con la barra de desplazamiento y no es fácil para los usuarios notarlo. En segundo lugar, cuando no hay muchas etiquetas (considerando el número variable de etiquetas), también es un dolor de cabeza poner qué contenido debajo de las etiquetas.
Una idea es que si hay alguna estructura entre las etiquetas, entonces las etiquetas se pueden agrupar. Luego agregue un nivel de navegación. OneNote de Microsoft ha alcanzado la cima en este sentido. Divide la información en tres niveles: cuaderno, sección y página. Cada nivel está representado por pestañas de navegación. El resultado es que los lados superior, izquierdo y derecho de la página están llenos de etiquetas. ... Microsoft es muy bueno manejando muy bien la navegación de etiquetas de tres capas usando gestalt (división a la izquierda), marcado de color (color para sección y blanco para página) y otras técnicas.
