En esta publicación quiero hablarte de uno de los componentes UI más olvidados pero más efectivos, los Breadcrumbs a los que también puedes llamar Migas de pan porque es su traducción literal y efectiva al español.
Tabla de contenidos
Estos son los puntos que vamos a ver sobre las migas de pan:
¿Qué son las breadcrumbs o migas de pan?
Las breadcrumbs son un elemento de navegación secundario que ayuda a comprender la jerarquía del sitio y sobre todo, agiliza el movimiento entre niveles, especialmente hacia atrás.
Es importante remarcar la secundariedad en la jerarquia de navegación dado que las breadcrumbs no deben quitar el protagonismo a la barra de navegación o menú lateral y mucho menos deben reemplazarlos.
Otro aspecto relevante de las migas de pan es que tampoco tienen sentido de ser cuando la profundidad de navegación es de un solo nivel porque en dicho caso despistan más que ayudan.
En cuanto al nombre de breadcrumbs o de migas de pan, éste tiene mucho sentido pues al igual que en el cuento de Pulgarcito, éstas marcan el camino recorrido por el usuario. Así pues la pregunta es ¿qué aportan las breadcrumbs o migas de pan al marcar el camino?
Beneficios de las breadcrumbs:
Orientación del usuario: las breadcrumbs ofrecen una guía clara al usuario para que comprendan en todo momento su ubicación dentro de la estructura del sitio. Esto es especialmente útil en sitios con una jerarquía profunda.
Mejora de la navegación: las migas de pan suponen una ruta de regreso fácil y rápida a niveles previos. En lugar de tener que buscar dentro del menú principal de navegación o por búsqueda en barra, las breadcrumbs permiten encontrar un atajo que nos lleve rápidamente a diferentes puntos clave o checkpoints por los que hemos transitado.
Mejora la experiencia: las migas de pan reducen la frustración del usuario. Si se pierden, siempre tienen una forma clara de retroceder sin tener que recurrir al botón de «atrás» del navegador. Ésto es especialmente útil en dispositivos móviles donde ese regreso puede no ser tan accesible y el menú es aún más lento y doloroso de usar que en la versión de escritorio.
Tipos de breadcrumbs
Tradicionalmente podemos encontrar dos tipos de breadcrumbs en función del contenido que reflejen:
- Breadcrumbs de ubicación: muestran los nombres de las páginas que hemos recorrido. Ej: inicio > Ropa > Deporte > Zapatillas > Fútbol
- Breadcrumbs de recorrido: muestran los nombres de los pasos que hemos dado en vez de las páginas recorridas. Además, se diferencian de los de ubicación porque los de recorrido incluyen rutas generadas dinámicamente, por ejemplo con el uso de filtros. Ej: Inicio > Resultados de búsqueda > 4 habitaciones > Detalles
Formato de las breadcrumbs:
En cuanto a la anatomía de las migas de pan, éstas son bastante simples. Están compuestas por enlaces, separadores y etiqueta.
Los enlaces serán lo más cortos posible siempre que tengan sentido. Es decir, si en un ecommerce tenemos la página calzado deportivo, el link tendrá este nombre, pero si la web es de alojamientos de vacaciones, no tendremos la ruta «alojamientos de 4 habitaciones«, sino «4 habitaciones» porque es más eficaz y más eficiente omitir la palabra «alojamientos de»
Por otra parte, ante la falta de espacio, los enlaces pueden convertirse en elipsis (…) para ahorrar espacio. Aunque esto tiene 2 reglas. Una elipsis solo vale para un enlace (no podemos coger todo el bloque y convertirlo en elipsis) y no se puede hacer elipsis ni del primer ni del último nivel.
Una opción que algunos sistemas utilizan para ahorrar espacio es el uso de iconos como reemplazo de los nombres. Por ejemplo, algunos sistemas sustituyen la ruta Inicio por el icono de la casa o la ruta de Documentos por el icono de una carpeta
Los separadores, por su lado, pueden ser cualquier símbolo que queramos, tradicionalmente se utiliza la barra separadora (/) que vemos en las URL de las webs pero con el tiempo, el separador más común es el símbolo “mayor que” (>) que explica mejor la jerarquía de los diferentes niveles o en su defecto. Otra buena opción son las comillas bajas (») aunque insisto, menos común que el símbolo (>) .
Es relativamente importante que los separadores no contengan enlace y sean visualmente diferentes de los enlaces. Así se evitan errores y se ayuda a distinguir mejor entre cada nivel de los enlaces. Por eso, normalmente, los separadores son de colores neutros, especialmente el gris que ya sabes que lo vinculamos con lo inactivo.
La etiqueta es la parte final de las migas de pan, el enlace a la página en la que se encuentra el usuario pero al que se le quita el enlace por la misma razón que a los separadores, para que se diferencie mejor y evite errores.
Ubicación y uso de las breadcrumbs
Las migas de pan siembre se colocan debajo de la cabecera o barra de navegación pero encima del contenido, en la parte superior de la página.
Si bien siempre las vemos alineadas a la parte izquierda de la página y expandiéndose hacia la derecha, para los idiomas que se leen de derecha a izquierda deben plantearse al contrario, alineadas a la derecha y creciendo hacia la izquierda.
La estructura suele seguir una línea horizontal, pero hay quien decide usar breadcrumbs multilínea. Bien porque el contenido es tan largo que debe seguir en una segunda línea o bien porque se reserva la segunda línea para la página actual.
