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.
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:
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.
Usuarios que han visto este tema también han visto...
- ¿El éxito de mi web?, ¡pero si es muy fácil!
- 2006, el año que volvieron las adquisiciones en Internet
- El proceso de diseño de un sitio web
- 10 razones para usar CSS
- Plan de marketing en Internet - Qué es lo que hay que concretar
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2011 Factoría de Internet S.L.. Todos los derechos reservados.