La regla de los tres clics y las migas de pan

(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:

miga de pan

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)
buildinginclusion

B)
bajista.com

C)
musikproduktiv

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:

musikproductive 2

[...]

****
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)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

8 thoughts on “La regla de los tres clics y las migas de pan

  1. Hola Alberto, no estoy muy de acuerdo contigo y he enlazado a tu entrada desde mi blog, donde comento tu enfoque en relación al migas de pan… Saludos y felicidades por el blog.

  2. muy buen ejemplo el tercero. Basta con alinear las migas a la derecha, para que pierda su forma estándar y sea muy difícil identificarla. Te copio el ejemplo para un presentación que tengo que hacer :)

  3. Andreas, la cita que comentas en tu blog, sobre el simil de Pulgarcito, la he tomado De Ramón Pravía, el lo explica con detalle en una antigua entrada de su blog, puedes verla en: http://simplelogica.net/caoticoneutral/?p=7
    Gracias por el enlace.

    Yusef, gracias!! yo a tí si que te estoy citando bastante en el manuaito, maestro ;-)

  4. Si somos rigurosos Andreas tiene razón y un breadcum (por definición del término) debería ser:

    refer < history (-n).. < history (-1) < here

    Eso es lo que hace exactamente el anterior y siguiente del navegador.

    Pragmáticamente es de mayor ayuda y utilidad una señalización para jerarquizar el contenido, aunque muchas veces un buen menú con pestañas u otros elementos gráficos pueden hacer que los breadcums, tomados como señalizadores, sean redundantes.

    Al final es un problema de lenguaje, aunque yo nunca he visto un sitio que use los breadcums como los describe Andreas.

  5. El problema es que una miga de pan no señala el lugar por dónde has pasado, ya que puedes acceder a una página através de un buscador, en ese caso la miga de pan te muestra tu lugar en la página, el usted está aquí.
    Por tanto la miga de pan no se comporta como a Andreas le gustaría, esto es el rastro por los sitios que has pasado, sin como la chinqueta de una mapa de google.
    No se trata de cómo crees que debería ser un breadcrumb, no quiero hacer filosofía de esto, sino como se comporta una miga de pan. Como ves me quiero quedar en el terreno funcional.

  6. Me ha parecido interesante lo de no forzar la regla de los 3 clic pero añado que en webs con estructura simple (página de inicio y pocas páginas secundarias) aconsejo usar la regla de 2 o 1 sólo clic.

    Lo de poner “usted está aquí” delante de la miga, genial, no se me había ocurrido pero es muy buena idea.

    Tengo una duda cuando pongo un video en una página interior… ¿es buena idea forzar un play automático? yo creo que si pero nadie lo hace y eso me hace dudar…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>