Migas de pan en mobile ¿usarlas o no?
Las breadcrumbs son un elemento de navegación presente en interfaces desktop. Son de gran utilidad porque guían al usuario en su navegación. Sin embargo, ¿qué pasa en mobile? ¿es útil usarlas? Analizamos su importancia y comportamiento en dispositivos móviles.
Las migas de pan, o “breadcrumbs” en inglés, son elementos de navegación frecuentemente utilizados en interfaces gráficas. Orientan a los usuarios respecto de su posición en el árbol de contenidos del sitio que navegan.
El término “miga de pan” fue acuñado en referencia al cuento “Hansel y Gretel”. En él se relata como Hansel construye un camino hecho de migas de pan para volver del bosque donde sus padres los habían abandonado.
A nivel teórico, autores como Jakob Nielsen son fieles defensores del uso de migas de pan. Afirman que las pruebas de usuarios demuestran su eficiencia como herramientas de navegación secundaria sin distraer ni interferir en la navegación.
Las migas de pan son especialmente útiles para sitios web de arquitectura compleja. En algunos casos, pueden incluso llegar a crecer considerablemente dependiendo de la profundidad del árbol de contenidos.
Recomendaciones sobre las migas de pan
Diseño discreto
Como menciona Nielsen en su publicación “Breadcrumb navigation increasingly useful”, las migas de pan son elementos de navegación de categoría secundaria. Su tamaño, posición y diseño debe ser de carácter discreto, y no deben distraer del contenido principal de la página. Nuestra recomendación es utilizar para ellas un tamaño de letra menor que la del cuerpo de texto principal del sitio. Por otro lado, el uso de color debe ser también controlado. De esta forma limitaremos su protagonismo dentro de la página.
Omitir el título de la página actual
Es un punto es crítico para sitios e-commerce , blog, medios, etc. Por el tipo de contenido, es complejo controlar que se tiene sobre los títulos de cada una de las páginas, artículos y/o productos que se publican. Para evitar que las migas de pan sean demasiado extensas, algunos diseñadores recomiendan el uso de puntos suspensivos de la siguiente forma:
Inicio > Servicios de informática > Desarrollo back-end para plataformas digitales
Inicio > Servicios de informática > Desarrollo back-end….
Así, queda claro el nivel en el que se está sin sacrificar el espacio gráfico.
Otros diseñadores en cambio, proponen adaptar los títulos del árbol de contenidos a versiones más reducidas de los mismos. Un ejemplo de esto sería:
Inicio > Servicios de informática > Desarrollo Back-end
Inicio > Servicios > Desarrollo Back-end
Si bien ambas alternativas son muy útiles, la opción más satisfactoria es la de no incluir el título de la página actual en las migas de pan. Esto debido a que su incorporación puede resultar en una redundancia innecesaria. Recuerda que la principal función de las migas de pan es permitir la navegación entre niveles, por ende incorporar el último nivel de jerarquía no es una exigencia obligatoria.
Niveles de jerarquía v/s recorrido histórico de navegación
Este punto también es de vital importancia al momento de diseñar las migas de pan. ¿Qué camino mostramos con las migas de pan? ¿ el recorrido temporal que siguió el usuario o su ubicación en relación al árbol de contenidos?
Para responder a estas interrogantes es necesario entender que la navegación de los usuarios no siempre es lineal. En muchos casos buscamos cierto tipo de información y una vez que la encontramos vamos en busca de otra. Por esto es fundamental considerar para las migas de pan la estructura del árbol de contenidos y no el recorrido histórico del usuario durante su navegación en el sitio. Nick Babich, editor jefe de UX Plantet , escribió extensamente sobre este punto en su publicación “Breadcrumbs for websites: what, when and how”.
(Imagen referencial al artículo Breadcrumbs for websites: what, when and how)
Migas de pan en dispositivos móviles ¿Sí o no?
Las migas de pan son comúnmente utilizadas en pantallas de escritorio. Sin embargo, en la industria aún existen discrepancias en relación a su uso en dispositivos móviles. Plataformas como eBay, Amazon, Aliexpress prescinden definitivamente de ellas en sus vistas móviles.
Nick Babich defiende rigurosamente la idea de no usar migas de pan en dispositivos móviles argumentando que “si sientes que necesitas migas de pan para navegar tu sitio entonces algo probablemente salió mal al momento de diseñarlo para su uso en móvil. Probablemente tu sitio es muy complejo para los usos y ambientes que ofrecen estos dispositivos”.
Si bien es claro en enfatizar la importancia de diseñar en función del dispositivo móvil, hay que considerar que la navegación principal de un sitio en ningún caso debe depender exclusivamente de las migas de pan (esto aplica para vistas “desktop” y “mobile”). Recordemos que éstas cumplen sólo una función secundaria ofreciendo alternativas al sistema de navegación sin intenciones de reemplazar el uso del menú principal.
Por su parte, Jeff Jimerson, director creativo en Madison Ave. Collective, propone una visión un tanto distinta al respecto. En su artículo “Are breadcrumbs still fresh in UX”, plantea que “un buen compromiso es mostrar a los usuarios móviles por lo menos un paso atrás – ofreciendo una alternativa a la navegación y un indicio de dónde se encuentran”.
Esta visión es considerablemente menos radical que la de Nick Babich en cuanto propone una solución intermedia; convertir las extensas migas de pan tradicionales en un pequeño link que dirige hacia el nivel superior de la página. De esta forma se logra orientar al usuario de manera clara y sin redundancias, ahora en un ambiente espacialmente más limitado.
Usar cuando sea útil
Si bien existen patrones y modelos de conducta más o menos estandarizadas, en ningún caso estas son reglas intransgredibles. Como siempre te recomendamos decidir caso a caso la mejor opción para tu proyecto. Ten en cuenta que si el árbol de contenidos de tu sitio es reducido entonces puede que las migas de pan no sean necesarias.
Por otro lado, siempre es útil validar las decisiones con herramientas más objetivas que la mera teoría.
La generación de mapas de calor o la realización de test de usuarios puede ayudar. Este punto es importante, ya que permite tomar decisiones validando o cuestionando las partidas en arquitectura de información y/o diseño.
Acerca del Autor
Agregar un comentario
Juan Pablo Vasquez
hace 4 añosMuy bueno este post y sus links de referencia.
Gracias!