El documento aborda elementos esenciales del diseño web, como la navegación y los vínculos de hipertexto, destacando la importancia de una estructura clara y consistente para facilitar la experiencia del usuario. Se enfatiza que menús lógicos y un diseño coherente son cruciales para evitar confusiones y mejorar la usabilidad del sitio. Además, se discuten errores comunes en la navegación y la influencia de los nombres de enlaces en la percepción del usuario sobre el sitio.

1. DISEÑO Y ADMINISTRACIÓN WEB
Facultad de Estudios Superiores Acatlán
División de Diseño y Edificación
Licenciatura en Diseño Gráfico
Ramón Patiño Trejo
diseñador gráfico
designoacatlan@gmail.com
designoacatlan.blogspot.mx

2. Tema VIII: Navegación y elementos de diseño web.
HOME / HEADER / CONTENT / SIDEBAR / FOOTER

3. Elementos de vínculo de hipertexto
La base del funcionamiento de la web la constituyen los elementos de vínculo de hipertexto que mediante enlaces permiten al usuario navegar en la información de las páginas y los contenidos en la dirección correcta.
Se considera que la información más relevante siempre se encuentra a un clic de distancia, bien organizada y estructurada.
Sin embargo, en la realidad diseñar vínculos con menús claros y concisos requiere de un arduo trabajo.

4. Navegación principal y subnavegación
La navegación global de un sitio web parte de una categorización contundente del contenido del mismo, otorgando una estructura persistente y consistente.
Los usuarios tienden a agrupar por asociación el sistema de navegación principal horizontal superior con otro sistema de subnavegación horizontal contiguo por su cercanía, o en su defecto, al vertical lateral más cercano.
Un a vez que el usuario centra su atención al sistema de subnavegación, no repara en si el menú principal de navegación ha cambiado sutil o drásticamente.

5. Navegación consistente y persistente
Un diseño coherente en todas y cada una de las páginas de un sitio siguiendo las directrices básicas establecidas en su arquitectura de la información, otorga confianza al usuario, tanto para ignorarlas como para obviarlas, ya que sabe que las opciones estarán ahí en cualquier momento, en caso de necesitarlas posteriormente, a lo que Jakob Nielsen y Kara Pernice denominan “omisión selectiva”.
“Cuando un menú se ubica y tiene el estilo que se espera de él, los usuarios pueden utilizar la omisión selectiva para ignorarlo cuando no lo necesitan. Pero cuando los menús desaparecen, cambian erráticamente o tienen u aspecto atípico, los usuarios a menudo malgastan fijaciones en ellos”.

6. Navegación por categorías
Los menús de un sitio web se organizan de diferentes maneras: bien sea por tipo de productos, por tareas de los usuarios, por las experiencias de los usuarios o por cualquier otro aspecto que tenga sentido para el sitio en concreto.
Muchos menús combinan diferentes categorías, siempre y cuando las opciones sean lógicas y coherentes.

7. Errores de navegación
“La gente espera que el sistema de navegación sea coherente a lo largo del sitio. Cuando no es así, decimos que el sistema de navegación se desvanece. Esto confunde a los usuarios, que deben volver a empezar desde el principio”.
[…]
“Cuando los usuarios regresan al sistema global de navegación o utilizan el botón BACK (atrás) en sus navegadores, a menudo significa que el sistema de subnavegación les ha dejado perplejos”.
(Jakob Nielsen & Kara Pernice “Técnicas de Eyetracking para Usabilidad Web”, Anaya Multimedia, 2010.)

8. Nombres, marcas y marketing

Las personas en ocasiones leen cosas en un vínculo con un nombre elegido de manera desafortunada. Basta una sola opción de menú para marcar la tónica de la opinión del usuario sobre un sitio web entero.

Las marcas y el marketing en los menús confunden a los usuarios, en la mayoría de los casos, lo mejor es eliminar todo signo de marcas y marketing de los nombres de menús y de vínculos.

9. La herramienta de navegación inferior
La herramienta de navegación inferior con vínculos de una página alberga, en la mayoría de los casos, información administrativa u operativa sobre la empresa, tales como funciones, direcciones e información de contacto, políticas de privacidad, ayuda y el mapa de sitio.
Usualmente la herramienta de navegación tiene un texto de tamaño más pequeño y de color ligeramente más claro que el resto de la página, pero suficientemente visible.
La ubicación y el aspecto de la herramienta de navegación ayuda a las personas a diferenciarla del sistema de navegación global.

10. Vínculos y encabezados

Un vínculo es una promesa a los usuarios de llevarles a donde quieren llegar.

Un buen vínculo o encabezado debe ser fácilmente comprensible y cubrir las necesidades de los usuarios.

En lugar de crear vínculos y botones adicionales para un tema, es útil convertir las propias palabras del texto que orienten y proporcionen información.

Cuando se trate de vínculos no orientativos ni informativas, es preferible utilizar un palabra específica como “buscar” o “enviar”, en lugar de “leer más”.

11. Botones

Los botones provocan una acción cuando se hace clic sobre ellos, se utilizan mayormente en las aplicaciones, formularios y procesos de trabajo.

Cualquier estilo de botón puede funcionar siempre que parezca que se puede hacer clic sobre él, que no distraiga y que coincida con el diseño del sitio.

Si ya hay demasiados botones en la página, es común optar por botones que parecen vínculos, siempre y cuando se coloquen de manera efectiva y se utilice un texto descriptivo de la acción.

12. Vínculos que parecen botones
Se utilizan normalmente como encabezados de página.
Los indicadores que permiten hacer clic sobre un elemento son:

Elementos visuales: pequeños recuadros, bordes, sombras o bicelados.

Los botones grandes tienen una pequeña flecha o ícono con el texto dentro o cercano al mismo.

Elementos verbales: tienen un texto que indica acción, con pocas palabras.

Ubicación: aparecen justo después de un campo desplegable o al final de un formulario o aplicación.

13. Falsos botones
Los elementos de progreso, estado o de información no deberían diseñarse para tener un aspecto similar al de los botones en los que se puede hacer clic.
Muchas veces más de un problema de diseño puede generar dificultades de usabilidad:

Pistas falsas: elementos equivocados atraen la atención.

Disponibilidad pobre: la falta de claridad sobre que elementos son susceptibles de hacer clic sobre ellos.

Ilusión de que la página está completa: los elementos de la zona visible de la página parecen indicar el final de la misma, cuando aún hay más contenido.

Aire informativo deficiente: la pobre priorización de la información no da pistas de lo que sigue.

14. Rastros de migas
Los rastros de migas, son las pistas de navegación que muestran a los visitantes dónde se encuentran dentro de un sitio web, sobre todo tratándose de sistemas de arquitectura de la información compleja.
La mayoría de las personas utiliza los rastros de migas sólo para lo que realmente sirven: para llevar un seguimiento de dónde se encuentran.
Comúnmente son sencillas y contextuales y constituyen un atajo a través de todo el ruido del diseño.

15. Búsquedas

La navegación y la arquitectura de la información presentan los desafíos más difíciles para los diseñadores web. La navegación representa demasiado para los usuarios.

Las palabras que se utilicen en vínculos, botones y menús pueden influir en el comportamiento de los usuarios y la valoración global del sitio web.

La terminología, el aspecto y las sensaciones que generan los elementos de navegación deben ser los esperados, para que los usuarios estén en posibilidades de ser más productivos y felices.