Usabilidad web: Menús, enlaces y navegación en páginas web

Por DEX

junio 26, 2016

Para que la visita de tus potenciales clientes sea cómoda, debes planificar los contenidos y estructura de los menús y enlaces internos de tus páginas web.

Anteriormente hemos comentado lo importante que es organizar correctamente los contenidos de un sitio web. Hoy te explicamos cómo debes diseñar la óptima estructura de navegación que hará que tus visitantes se sientan como en casa en tus páginas web.

¿Cómo diseñar la navegación por tus páginas web?

Es fundamental que la navegación sea fácil e intuitiva. El visitante debe moverse en tu sitio web de forma natural y muy cómoda, sin tener que “aprender su manejo”.
Debes incluir un menú de navegación que facilite acceder a la página de inicio y a las secciones.
Los textos o imágenes enlazados a otras páginas deben representar claramente el contenido al que apuntan, para que tus visitantes sepan dónde van a ir si hacen clic en ellos.
Los mapas del sitio (lista de enlaces a todas las páginas del dominio) son una buena forma de mostrar la totalidad del contenido de tu sitio web y ofrecer un acceso rápido.
Si tienes varias páginas web diferentes que hablen de un mismo tema, será muy útil incluir enlaces para navegación secuencial (siguiente-anterior); así facilitarás que tus visitantes las lean en el orden adecuado. Además, el número de páginas que visita cada internauta es un factor de posicionamiento SEO.
Cuando tu sitio web contiene muchas páginas, será muy útil programar un buscador interno, que facilite el acceso cómodo a la información.
La navegación basada en mapas de imágenes, enlaces gráficos, menús desplegables, flash u otros sistemas que no funcionan en todos los dispositivos y navegadores, es importante crear un menú de navegación adicional basado exclusivamente en enlaces de texto normales (HTML).
En dispositivos táctiles, como smartphones y tabletas, es buena idea colocar los menús cerca de los dedos del usuario (p.ej. a los laterales o abajo). Si el menú principal está en la parte superior, como es habitual, la mano del usuario puede tapar el contenido.
En páginas con mucho contenido (muy largas), conviene repetir los elementos de navegación en la parte inferior (el pie de página), para no obligar al visitante a subir hasta arriba para continuar su navegación. También se puede usar la típica “flecha arriba” que al ser pulsada, mueve la pantalla a la parte superior de la página, donde suelen colocarse los menús principales.

¿Cómo deben ser los enlaces de las páginas web?

Es fundamental que sean muy fácilmente identificables y diferentes de las demás imágenes y textos (p.ej: destacándolos con subrayado, un color diferente, dándoles aspecto de botón, efecto rollover –que cambia al pasar el ratón por encima–, cursor en forma de mano…).
Los enlaces deben ser suficientemente grandes para que sea cómodo pulsarlos sin activar otros adyacentes. Este requisito es mucho más importante en dispositivos táctiles como tabletas y teléfonos móviles. De lo contrario, un visitante se sentirá frustrado si al intentar pulsar un enlace, acaba accediendo a una página que no deseaba consultar porque los enlaces están demasiado cerca y son muy pequeños.
Debes incluir enlaces destacados a los contenidos más interesantes para los usuarios (las páginas más visitadas, promociones…). Y a aquellos que, desde el punto de vista de tu negocio, más te interese promocionar (contacto, registro, pedidos…).
Aplica un aspecto visual distinto a los enlaces ya visitados para que el usuario tenga claro que ya ha consultado dichas páginas.
Los textos de los enlaces deben incluir palabras que definan claramente el contenido de la página a la que apuntan. Así no confundiremos al visitante, que sabrá qué va a ver si hace clic en ellos.
Es conveniente que el texto del enlace coincida (al menos parcialmente) con el título visible de la página a la que apunta. De este modo, el visitante sabe que ha llegado al contenido que quería consultar.
Es interesante ocultar los enlaces que apuntan a la misma página en la que están (ej: en la portada productos.html, desactiva los enlaces a productos.html), o bien desactivarlos o cambiar su color o aspecto, para que el visitante sepa que no necesita hacerles clic porque ya está viendo esa página.
Puedes dar pistas sobre el destino del enlace usando el atributo title de HTML que muestra en la pantalla un mensaje (tooltip) al apuntar al objeto con el ratón.