Wayfinding y breadcrumbs

Es curioso que le digan “migas de pan” basándose en hansel y gretel. cuando sabemos que en realidad las migas no sirvieron y se terminaron perdiendo. Observación que poco tiene que ver con el tema central.

Es decir, que un resumen de ambas cosas sería:
Wayfindig: cómo llega a un sitio.
Breadcrumb: de dónde viene.

¿Qué opinan?

Pogosticking: desde el buscador hasta la vista específica.
Crabwalking: búsqueda por exploración de sección en sección.

Les dejo este articulo de NNg sobre Breadcrumbs. Esta excelente los tips que dan.

Los breadcrumbs, son los nombres que tienen la ruta de los enlaces, en la cual ayuda a que el usuario sepa como llegó a la ubicación en la cual hoy está.

19. Wayfinding y breadcrumbs

• Wayfinding (urbanismo)
  • Elemento para navegar exitosamente en espacios complejos (pueblos y ciudades)
  • Elemento de Orientación
    • ¿Dónde estoy?
  • Elemento de Rutas
    • ¿Cuáles opciones tengo de rutas?
  • Elemento de Meta
    • ¿Llegué a donde quería?
• Tipo de navegación de wayfinding
  • Pogosticking (Saltar directamente hacia donde quieres) = ****Módulo o elemento destacado para llegar a un punto específico
    • Para una búsqueda puntual, lo más probable es que use el buscador para llegar directamente al punto.
  • Crabwalking (Caminar torpemente hacia donde quieres) = Búsqueda por exploración hasta encontrar la meta
• Breadcrumbs: Barra que te orienta en qué sección estas y nivel de profundidad.
  • A > B > C
  • No sustituyen los títulos, botones y links de las pantallas (elemento complementario)
  • Debe ser clickeable
  • Tipos
    • Localizador: Ligado a la estructura del a base de datos o estructura de contenido
    • Dinámico: Ligado a la navegación (te dice el camino que recorriste)
    • Descriptivo: Ligado a los meta datos del sitio web (atributos del contenido, SEO)

Breadcrumbs

Definición

Componente que permite al usuario saber su localización dentro de una aplicación o sitio web.

.
Siendo técnicos, son considerados como un esquema secundario de navegación y pudiera estar relacionado ya sea con la página en si siendo:
.

• Localizador. Determinando la ruta indexada de la vista actual
• Descriptiva. Representando la metadata relacionada con el contenido deseado.

.

Recomendaciones

Este componente es recomendable cuando se cuenta con grandes volúmenes de información y organizadas jerárquicamente.
.
Una buena forma para determinar si un sitio web o aplicación se beneficia de un breadcrumb, radica en la construcción de un sitemap, analizando el impacto de usabilidad basada en la navegación entre categorías o conjuntos.
.

Beneficios de uso

• Adición de usabilidad. Los usuarios mejorar la navegación al tener una alternativa de navegación y reduciendo la interacción de clics, al retornar a la vista anterior.
• Reducción del indice de rebote. Ya que la entrada al sitio pudiera estar desde una búsqueda de Google pero no limitada, simulando un caso de una pared de laberinto.

He aquí un ejemplo clarísimo con el blog de platzi. 😃

Seria bueno que para los que no conocen, en recursos el Team Platzi coloque los enlaces a los cursos de SEO.

los breadcrums estan ligados a los sitemaps? es decir del site map puedo obtener los bread crums?

En las app como se coloca el Breadcumb?.. podrían compartirme un ejemplo

Resumen
Las migas de pan son una forma secundaria de navegación que ayuda a los usuarios a llegar al contenido cercano en la estructura jerárquica. Son especialmente útiles cuando los usuarios llegan al sitio a través de un enlace externo y no comienzan con la página de inicio. Asegúrese de que todos los elementos en el rastro de la ruta de navegación sean enlaces y que cada nodo individual se vuelva más específico a medida que avanza en el sitio. En dispositivos móviles, las migas de pan pueden ocupar demasiado espacio o pueden ser difíciles de tocar; considere acortar el rastro de la ruta de navegación si las tareas de sus usuarios lo permiten. No se recomiendan en páginas lineales o de dos niveles.

Algo curioso de Windows 11 es que en Configuración los títulos son sustituidos por breadcrumbs dinámicos.

Gracias

Yo estudiaba en la India, con alguien, en una técnica pictórica, pagaba x dólares por cuatro clases al mes. En Platzi pagué ax dólares por un año, teniendo acceso a todo lo que desee aprender, todos los dias del año.

Esto es fullll arquitectura llevada a lo digital. 🤯

Los breadcrumbs o “migas de pan” es la ruta con enlaces que muestra el camino que llevó al usuario desde la pantalla inicial hasta la actual. Generalmente se ubican en la parte superior de las interfaces, justo debajo del header y antes que comience el contenido del sitio o interfaz. No hay un único criterio para crearlos, por lo tanto, no hay un solo tipo de breadcrumbs, y deben ir acordes con el tipo de navegación que hace el usuario y el modelo de datos dentro del sistema. Su nombre proviene del cuento de Hansel y Gretel, donde los niños sólo podían encontrar el camino de vuelta a casa siguiendo el rastro de los trozos de pan que habían tirado al suelo.

Formas de plantearse Breadcumbs:
Breadcumb Localizador: ¿A qué pertenece el contenido dentro de mi BD?
Breadcumb Dinámico: ¿Qué camino se siguió para llegar al contenido?
Breadcumb Descriptivo: ¿Qué atributos tiene el contenido mostrado?

From Wayfinding to Interaction Design

Pogosticking&Crabwalking

Pogosticking&Crabwalking

Pogosticking&Crabwalking

Breadcrumbs

Breadcrumb localizador

Breadcrum dinámico

Breadcrum descriptivo

Wayfinding, de donde proviene y qué es

Buen wayfinding

Mal wayfindig

¿Cómo mejorar el wayfinding?

Excelente explicación.

Muy útiles los breadcrumbs

Los Breadcrumbs son fantásticos, los recomiendo especialmente en sitios muy grandes con grándes volúmenes de contenido e información

Pogosticking: Usando un buscador, paso de la pantalla principal a la pantalla específica de lo que estoy buscando

Crabwalking: Ir de sección en sección hasta encontrar la información que busco.

Breadcrumbs (migas de pan) es el nombre que recibe la ruta con enlaces que llevó al usuario a la ubicación actual. Estos no sustituyen al título de la pantalla.

“ Inicio > Noticias > Articulo tal ”

En tipos de breadcrumbs encontramos:

Localizador:
Ligado a la estructura
Busca responder: ¿a que pertenece el contenido dentro de mi BD?

Dinámico:
Ligado a la navegación
Muestra el camino para llegar a un contenido.
Busca responder: ¿Qué camino se siguió para llegar al contenido?

Descriptivo.
Ligados a los metadatos
Busca mostrar: ¿Qué atributos tiene el contenido mostrado?

La parte final del video se corta, parece que en la edición se les fue un fragmento.

Hay que tener en cuenta que los breadcrumbs deben ser clickeables todos menos en el que estoy actualmente.