no solo usabilidad: revista sobre personas, diseño y tecnología

1 de Diciembre de 2002

Elementos de navegación y orientación del usuario

Hassan Montero, Yusef
Martín Fernández, Francisco J.

Resumen: Descripción de elementos y herramientas de navegación, analizando su función orientadora.

Introducción

Los elementos de navegación y orientación tienen como función básica informar constantemente al usuario acerca de dónde se encuentra, que relación tiene el nodo web que está visualizando respecto al resto de la arquitectura del website, dónde ha estado y hacia dónde puede ir. El objetivo: no perder al usuario.

No perder al usuario

Las dos formas básicas para no perder al usuario son: que no se 'aburra' y que no se 'pierda' navegando. Si los contenidos o servicios de nuestra web no son del interés del usuario y por esa razón abandona nuestro site, esto no es responsabilidad del arquitecto de la web, y poco puede hacer para solucionarlo. En cambio, si el usuario se 'aburre' navegando porque no encuentra lo que busca (y lo que busca sí se encuentra en la web), es consecuencia de una incorrecta arquitectura de información.

Que el usuario se 'pierda', es decir, que llegue el momento en que no sepa en qué zona de nuestro site se encuentra, o peor aún, que no sepa ni tan siquiera si sigue estando en nuestra web, es responsabilidad del arquitecto web y consecuencia de un mal diseño de las estructuras por parte de éste. A continuación se dan algunas indicaciones para conseguir que nuestros visitantes ni se 'pierdan' ni se 'aburran'.

Coherencia del diseño

La primera regla para indicarle a nuestro usuario que sigue estando en nuestra web es manteniendo una coherencia de diseño, es decir, una uniformidad en la estructura de las páginas que forman nuestro site, y también en lo colores empleados.

Eso no quiere decir que tengamos que mantener la cabecera que mostramos en la home page exactamente igual en todas las páginas del site, pero esta no puede desaparecer. Por ejemplo, podemos disminuir su tamaño para no desperdiciar demasiado espacio visual.

Muchos diseñadores utilizan marcos para que no desaparezca la cabecera, pero esto no es demasiado recomendable, ya que el uso de marcos conlleva problemas de usabilidad.

Con el uso de los colores también debemos mantener cierta uniformidad: si de una página a otra cambian los colores completamente, un usuario (no necesariamente despistado) puede pensar que ha sido reenviado a otra web, es decir, puede sentirse perdido.

Jerarquía Visual

Ya hemos conseguido, en cierta forma, que el usuario sepa que está en nuestra web, pero ¿en qué zona exacta de ésta se encuentra?

Uno de las métodos para solventar este problema es mantener una Jerarquía Visual. Los usuarios (en occidente) leen de izquierda a derecha y de arriba hacia abajo. Esto significa que si mantenemos la jerarquía visual (ver esquema siguiente) podemos indicarle al usuario constantemente dónde está. Cuanto más cerca de la esquina superior izquierda de nuestro lay-out (distribución) coloquemos los elementos, mayor nivel jerárquico tendrán, y conforme los coloquemos más hacia la derecha inferior, menor nivel jerárquico, y por lo tanto serán 'partes de'.

Esquema de jerarquía visual

El elemento que normalmente se coloca en la esquina superior izquierda es el logo de nuestra web, será el elemento de mayor nivel jerárquico, con lo que le indicaremos que el resto de elementos son subelementos de éste. Es decir, que todos serán parte del logo de nuestra web, o lo que es lo mismo, que todos los sublementos son partes de nuestro sitio web. Si colocamos, por ejemplo, una barra de navegación por pestañas debajo del logo, el usuario sabrá en qué sección de nuestra web se encuentra (observando la pestaña que se encuentra seleccionada) y que todos los enlaces y menús de navegación que se encuentren jerárquicamente por debajo de la barra de pestañas serán partes de la pestaña seleccionada. Y así sucesivamente.

Un error bastante común es colocar dos menús de navegación en zonas de jerarquía visual equivalentes, como la zona 2 superior y lateral izquierda. El usuario no sabe qué menú es submenú de cuál, y no querrá leer todos los títulos de los elementos de los dos menús para inferir semánticamente la relación jerárquica entre los dos.

En el esquema siguiente el cuadro gris es claramente subelemento de uno de los dos menús pero, ¿qué menú es un sublemento de cuál?.

Jerarquía entre menús confusa

Tampoco debemos olvidar que para definir una correcta jerarquía visual no sólamente podemos hacer uso del posicionamiento de elementos, también podemos usar el tamaño, el color, o elementos de conexión y separación.

Breadcrumbs

Los breadcrumbs o 'migas de pan' es un elemento muy utilizado para que el usuario no se pierda, indicándole dónde está y la relación jerárquica de ese nodo con el resto de la estructura de la web. Se trata de una especie de Path que suele tener la siguiente forma:

breadcrumbs de Yahoo!: 'Estás en: Inicio > Arte y Cultura > Literatura > Autores'

Se puede (y debe) utilizar junto con una correcta jerarquía visual, y debería tener siempre una forma parecida a la del ejemplo anterior, pues es la más común y a la que el usuario está acostumbrado. Es decir, un texto del tipo 'Usted está aquí:' o 'Estás aquí', y las diferentes secciones (siempre como enlaces) separadas por el símbolo '>'. Aunque se podría utilizar otro símbolo para separar las secciones, habría que asegurarse que denotan 'relación de superioridad jerárquica', como por ejemplo una flecha. Por tanto, utilizar símbolos de separación como '-' ó '|' sería un error, ya que estos símbolos denotan una 'relación de igualdad jerárquica', por lo que suelen utilizarse en menús de navegación y nunca en breadcrumbs.

'A lo que el usuario esté más acostumbrado' es un factor muy importante dentro del diseño de sitios webs usables. Como señala Jakob Nielsen, tus usuarios pasan la mayor parte de su tiempo visitando otras webs, lo que quiere decir que les será más fácil navegar por tu web cuánto más se parezca ésta al resto.

Los breadcrumbs no indican necesariamente el camino que han seguido los usuarios para llegar a ese nodo web, por dos razones: los usuarios pueden venir redirigidos de otras webs; y además, que el website utilice breadcrumbs no significa que tenga un estructura hipertextual puramente jerárquica. Indican un posible camino desde la home hasta la página actual, y la relación jerárquica entre todos los elementos del breadcrumbs.

¿Dónde ha estado el usuario?
La forma más sencilla de indicarle al usuario dónde ha estado es ofreciendo una tonalidad de color diferente para los enlaces ya visitados. El usuario recuerda las páginas que ha visitado, pero no tiene porqué recordar el nombre de los enlaces que llevaban hacia ellas. De hecho, quizás ni tan siquiera ha utilizado esos enlaces para llegar a esas páginas.

Adelante, Atrás e Inicio

Estos típicos enlaces (casi siempre en forma de iconos) pueden tener mayor o menor utilidad según cómo se haga uso de ellos. No es lo mismo utilizar una barra de navegación (con los iconos 'atrás' y 'adelante') para moverse por un subelemento del site que tenga una estructura secuencial (como un artículo divido en páginas o una presentación secuencial de diapositivas), que utilizar una barra de navegación de este tipo para moverse por el sitio web en sí.

La razón de esto último es sencilla, los sistemas hipertexto, como un website, no tienen ni deben tener una estructura secuencial.

Si aún así quiere utilizar esos iconos para que los usuarios naveguen por su web, recuerde que el icono 'Atrás' debe contener un enlace real a la página anterior, y no una sentencia Jscript del tipo 'window.history.back()'. ¿Por qué? Recuerde que no todos los usuarios han entrado en su sitio web por la puerta principal (home page), algunos vienen redirigidos desde otras webs mediante enlaces profundos (deep linking), o desde motores de búsqueda (falta de control sobre la "retórica de llegada"). Al hacer clic sobre el icono 'Atrás' que usted ha colocado, los usuarios no quieren volver a la página desde la que venían, quieren ir a la página que, dentro de su sitio web, enlazaba con la que están viendo en esos momentos. La redundancia de funciones del navegador es mala.

¿Qué es la redundancia en el diseño web?
La redundancia no es más que ofrecer varias posibilidades diferentes desde una misma interfaz para hacer lo mismo. En este caso repetimos funcionalidades que ya posee el navegador (atrás, adelante...). Un ejemplo es el caso de los 'Favoritos'. Muchas webs ofrecen la posibilidad de ser añadidas a la lista de Favoritos de un usuario mediante un enlace. Esto no tiene sentido alguno, ya que si el usuario sabe lo que son los favoritos, entonces también sabe cómo añadir webs a su lista de favoritos, y cuando quiera hacerlo lo hará desde el correspondiente menú de su navegador, no desde el enlace que ofrezca la web.

El icono típico de 'inicio' (tantas veces con forma de casita), sí es útil para el usuario. En este caso no existe redundancia, ya que el botón de inicio de nuestro navegador no cumple la misma función. Es una buena ayuda para el usuario que se encuentra perdido, ya que con él podrá deshacer su navegación y volver al principio. En el caso de usuarios que no han entrado por la puerta principal de la web (homepage) este icono/enlace ofrece una vía rápida para saber si en el website hay más información que le interesa aparte de la página que esté visualizando en ese momento.

Además, es aconsejable que el logo también cumpla con la función de 'enlace a la home page' cuando se haga clic sobre él.

Mapa del sitio web

El site map, o mapa del sitio web, cumple varias funciones:

Por ello, es una herramienta verdaderamente útil y recomendable a incluir en nuestro proyecto web. El site map puede ser un simple índice en texto/html, o una compleja representación gráfica/multimedia. El acceso a éste se debería colocar en una zona visual de nivel jerárquico alto, y a ser posible este enlace deberíamos mantenerlo en todas las páginas del site.

Compartir:

Facebook Twitter Google LinkedIn

Yusef Hassan Montero

Consultor sobre Experiencia de Usuario y Visualización de Información. Diseñador de interacción en Scimago Lab, Doctor en Documentación (2010) por la Universidad de Granada y editor de la revista No Solo Usabilidad. Escribe habitualmente en su blog sobre diseño de información.

Más información: yusef.es

Francisco Jesús Martín Fernández es Licenciado en Documentación e investigador sobre Usabilidad y Accesibilidad del Centro de Enseñanzas Virtuales de la Universidad de Granada, y editor de NoSoloUsabilidad.
Web Personal: http://www.ugr.es/~chesco

Citación recomendada:

Hassan Montero, Yusef; Martín Fernández, Francisco J. (2002). Elementos de navegación y orientación del usuario. En: No Solo Usabilidad, nš 1, 2002. <nosolousabilidad.com>. ISSN 1886-8592


No Solo Usabilidad - ISSN 1886-8592. Todos los derechos reservados, 2003-2017
email: info (arroba) nosolousabilidad.com