En este boletín pretendemos incluir todas aquellas normas básicas que hay que respetar al organizar un sitio web. Se trata de información genérica que ha de servir de guia, no un libro de normas a seguir al pie de la letra en todos los casos.
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 significa 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".
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?.
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 o Ruta hasta la página actual
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 Ruta (Path) que suele tener la forma de una lista separada por barras. Cada barra separa un paso en la `profundidad` del arbol de navegación bajo la que se encuentra la información que estamos visitando.
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.
Acceso a 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 de accesos 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.
Fuente: No Solo Usabilidad. Revista Multidisciplinar de diseño y tecnología.
