02 enero 2019

Las migas de pan son un elemento de diseño esencial para que los usuarios se ubiquen en tu producto digital. Son una recomendación de diseño desde los primeros tiempos de la web.

Migas de pan en la descripción de producto de Carrefour

Nielsen Norman ha escrito un artículo sobre recomendaciones sobre las migas de pan para productos digitales que os vamos a resumir. Ellos las recomiendan desde siempre porque no tienen ningún coste en el interfaz y son muchos sus beneficios para la hallabilidad por ejemplo.

Las migas de pan son una serie de enlaces unidos por > o / que se ponen en la parte superior del interfaz para decirle al usuario donde se encuentra. Nielsen Norman recomienda usar > para ellas, pero dice que ambos símbolos son indiferentes.

Las migas de pan ayudan a los usuarios a encontrarse en el sitio especialmente si llega a la página a través de un buscador o una landing page porque observando la ruta, se ubican enseguida.

Pautas para migas de pan en escritorio

Nielsen Norman nos explica una serie de pautas para las migas de pan en escritorio:

  • Las migas de pan no deben reemplazar a la barra de navegación global o la barra de navegación local con una sección: las migas de pan son para suplementar las barras de navegación existentes, no para sustituirlas.
  • Las migas de pan deben mostrar la localización actual del usuario, no el historial de la sesión: no se debe mostrar el historial de las páginas por las que se ha navegado en el producto digital, ya que las migas de pan no son para eso.
  • Para sitios multijerárquicos, las migas de pan deben mostrar sólo una ruta de las múltiples posibles: debes elegir una de las múltiples rutas posibles a las que se puede llegar y mostrarla, lo que se llama ruta canónica.
  • Incluye la página actual como último ítem de la ruta de las migas de pan
  • En la ruta de las migas de pan, la página actual no debe ser un enlace
  • Las migas de pan deben incluir sólo páginas del sitio, no categorías lógicas de la arquitectura de la información: esto es para que el usuario entienda que es un itinerario de navegación y que todo son páginas navegables.
  • Las migas de pan no son necesarias en sitios con un nivel de categorías o dos niveles: si tienes un sitio plano o poco profundo las migas de pan no son necesarias.
  • Las migas de pan deben comenzar con un enlace a la portada: todas las migas de pan deben comenzar con un enlace a la página de inicio del sitio.

Pautas para migas de pan en móvil

Nielsen Norman nos recomienda seguir estas pautas en las migas de pan para dispositivos móviles:

  • No uses migas de pan que se rompan en varias líneas: en móvil unas migas de pan se pueden cortar rápidamente en varias líneas lo que rompe su intención de que los usuarios se sitúen rápidamente dónde estén en ese momento.
  • No hagas las migas de pan demasiado pequeñas o demasiado juntas de tal manera que no se puedan pulsar sus elementos: los enlaces de unas migas de pan deben tener un ancho suficiente como para poder hacer clic con el dedo en su diferentes elementos.
  • Considera reducir la ruta de las migas de pan a los últimos niveles: si las migas de pan se rompen en varias líneas, lo mejor es poner el último nivel o los últimos niveles en móvil para que el usuario se ubique y navegue por los niveles hacia atrás por él mismo.

Las migas de pan sirven para ubicar a los usuarios de manera rápida cuando llegan desde un buscador o una landing page. Son por ello unos buenos elementos de navegación de apoyo para que los usuarios hallen lo que buscan y se encuentren dónde están.

Desde el Estudio os animamos a usar correctamente las migas de pan y a tenerlas en cuenta al diseñar el producto digital. Las migas de pan serán de gran ayuda para vuestros usuario sin apenas tener ningún perjuicio en el interfaz del producto digital. Os recomiendo leer el post sobre la usabilidad de las migas de pan.

En Torresburriel Estudio desarrollamos las capacidades técnicas de tu equipo en temas de usabilidad, experiencia de usuario y diseño de producto a través de nuestros cursos online y presenciales.