Alberto Fortes, in love with css

(Lo que sigue es un borrador de un epígrafe de una extensa guía de usabilidad. Se admiten comentarios para mejorarla. ;-)

La regla de los tres clics forma parte del folklore de la usabilidad web, y sostiene que cualquier informaciónen un sitio web debe ser accesible desde la página principal en tres o menos clics.
Es una regla a tener en cuenta, aunque sólo en la mente ya que los estudios realizados por el Nielsen Norman Group demuestra su ineficacia cuando la arquitectura de la información se ve forzada para cumplir esta regla. Así pues, esta regla no debe utilizarse si para ello hay que forzar la estructura.
Los estudios del Nielsen Norman Group demuestran que la habilidad de los usuarios para encontrar productos en un sitio de comercio electrónico aumentaba un 600 por cien después de rediseñar un sitio web para que los productos se encontraran a cuatro clics en lugar de tres, ya que los usuarios no tenían que pensar al hacer clic.
El principio base del diseño de interacción será el de no hacer pensar a los usuarios, si por ahorrar pasos, el usuario tiene que interpretar el enlace, entonces la regla de los tres clics se convierte en un error en lugar de una ventaja.
Aquí tiene mucha importancia la miga de pan (breadcrumb) de la web, de forma que el usuario sepa dónde se encuentra en cada momento y cual es la categoría padre de dónde se halla en la actualidad, y pueda volver sobre sus pasos con tan sólo un clic.
Las migas de pan no son exactamente las migas de pan sobre las que Pulgarcito podía desandar el camino recorrido, para ello están ya el botón de atrás o adelante del navegador, son más bien el “Usted está aquí” de un mapa, donde se muestra la situación exacta dentro de la estructura del sitio. De hecho, los usuarios pueden no haber navegado hasta la página actual, sino que pueden haber llegado a través de un enlace o un buscador, de esta manera la miga de pan como flechita de “usted está aquí” de un plano adquiere su verdadero valor.
Una vez más debemos no hacer pensar al usuario y hacer la cosas como él espera que ocurran. La convención es que las migas de pan tengan esta forma:

Como afirma Yusef Hassan, Las migas de pan deben tener siempre esta forma, o al menos una muy parecida, con un texto “Usted está aquí:” o “Estás aquí:” o similar, con las secciones separadas por el símbolo > y con un hipervínculo relativa a la misma. Puede utilizarse cualquier símbolo que denote jerarquía, como una flecha, pero utilizar símbolos que carecen de esta, como | o – es un serio error ya que estos símbolos denotan una relación de igualdad o equivalencia jerárquica, por lo que si bien pueden utilizarse en menús, nunca deben utilizarse en breadcrumbs.
No debemos apartarnos de esta forma de presentación porque es la manera en que un usuario espera encontrarse una miga de pan, nada más verla el usuario dice “mira una miga de pan”, aunque realmente no sepa que este elemento se llama así.
En una prueba real, el usuario Juan, de 26 años, músico de profesión, con estudios medios, usuario medio-avanzado que pasa una media de 4 horas en internet diarias, ha respondido: “Esto es para saber donde estás… para volver a las secciones más rápidamente.”
Se han presentado tres ejemplos:

A)

B)

C)

De los tres ejemplos el óptimo ha sido el primero, el usuario lo ha visto e identificado en seguida. El segundo pese a estar bien posicionado se ha quejado comentando que “no se vé bien, el fondo es muy oscuro”, a pesar de ello lo identificó y supo usarlo. El ejemplo C, presenta un grave problema y de hecho pese a estar bien contrastado el color del texto con el del fondo, el usuario comentó “Se ve mal, no está bien puesto”, simplemente por el hecho de que el usuario espera encontrárselo en la parte derecha de la pantalla (su izquierda), debajo de la barra de navegación principal.
El ejemplo C puede convertirse en una miga de pan ejemplar con sólo posicionarlo bien, y respetar márgenes y rellenos de celda (padding), de forma que guarde una sincronía de la separación de los elementos y su disposición en la cuadrícula, como por ejemplo:

[...]

****
Bibliografía:

NIELSEN, Jakob y LORANGER, Hoa, Usabilidad: prioridad en el diseño web, Anaya Multimedia, Madrid, 2007
GARRET, Jesse James, The Elements of User Experience. User-centered design for the web, New Riders, New York, 2003
KRUG, Steve, No me hagas pensar, Pearson, Madrid, 2001
LYNCH, Patrick y HORTON, Sarah, Manual de estilo web. Principios de diseño básico para la creación de sitios web, Gustavo Gili, barcelona, 2004
WODTKE, Christina, Information Architecture: Blueprints for the web, New riders, new York, 2003
HASSAN MONTERO, Yusef y MARTÍN FERNÁNDEZ, Francisco, Elementos de navegación y orientación del usuario, No Solo Usabilidad journal, nº 1. 1 de Diciembre de 2002. ISSN 1886-8592. (http://www.nosolousabilidad.com/articulos/orientacion_usuario.htm)
GARRIDO, Marcelo, Antes de la usabilidad, dos claves: propósitos y destinatarios., (http://www.capire.info/2008/06/18/antes-de-la-usabilidad-propositos-y-destinatarios)
PRAVIA, Ramón, Migas de pan, (http://simplelogica.net/caoticoneutral/?p=7)