Breadcrumbs
Resumo
Os breadcrumbs (ou “trilha de navegação”) são uma forma de navegação que consiste em uma lista de links organizados em ordem hierárquica ou cronológica. Seu objetivo é ajudar os usuários a acompanhar sua localização, mostrando a posição da página atual em um dos seguintes contextos:
A hierarquia estrutural das páginas do site;
As categorias da página atual;
Em termos de posicionamento
Geralmente são colocados no topo de uma página da web ou aplicativo, perto do cabeçalho ou da navegação principal. O posicionamento dos breadcrumbs pode variar dependendo do design específico e das necessidades dos usuários, mas geralmente recomenda-se colocá-los em um local de destaque e de fácil acesso, que seja consistente em todo o aplicativo ou site.
Anatomia
Origem: É onde o caminho de navegação começa.
Ícone (opcional): Utilizado para reforçar o contexto da página
Níveis: São as entidades entre a origem e o ponto atual.
Delimitador: Distingue claramente entre cada página/objeto/tarefa.
Ponto atual: É o ponto final no caminho.
Truncamento (opcional): Uso de reticências (…) para lidar com um grande volume de páginas, podendo ser interativo para abrir uma lista completa de opções.
Quando usar?
A escolha varia muito do tipo de breadcrumb, mas, no geral, utilize nas seguintes ocasiões:
Quando a estrutura tem pelo menos 3 níveis
Com 2 níveis o breadcrumb é redundante: o usuário já vê que está “um abaixo da home”, não precisa de trilha.
O usuário pode chegar na página por fora da navegação
O breadcrumb ganha valor justamente quando a pessoa cai numa página profunda sem ter percorrido a hierarquia. Ela aterrissou via Google numa página de produto e precisa entender “ok, isso aqui é parte de qual categoria?”.
A hierarquia é estável e única
Cada página tem um lugar fixo na árvore. Se uma mesma página pode ser alcançada por vários caminhos diferentes, o breadcrumb fica ambíguo.
Variações
Trilha de navegação baseada em localização
Este é o tipo mais comum de trilha de navegação. Elas são geralmente exibidas como uma série de links separados por um delimitador, e representam a hierarquia de páginas pelas quais o usuário navegou para chegar à página atual.
Trilhas de navegação baseadas em caminho
Os breadcrumbs de caminho exibem a hierarquia de páginas pelas quais um usuário navegou para chegar à página atual , mas, em vez de mostrar os nomes das páginas, mostram o caminho percorrido. Isso preserva o contexto da jornada do usuário.
Trilhas de navegação baseadas em atributo
Os “níveis” são filtros/atributos, não páginas-pai).
Acessibilidade
A
O texto de cada link precisa deixar claro para onde ele leva, lido sozinho (WCAG 2.4.4).
A página atual não pode ser distinguida dos links anteriores apenas por cor (WCAG 1.4.1).
A instrução de uso não pode depender só de cor, posição, forma do separador (WCAG 1.3.3).
AA
O texto de cada link precisa de contraste de pelo menos 4.5:1 contra o fundo (WCAG 1.4.3).
O separador entre os itens, se for um elemento gráfico necessário para entender a trilha, precisa de pelo menos 3:1 contra o fundo (WCAG 1.4.11).
Cada link clicável precisa de área de toque de no mínimo 24×24px (WCAG 2.5.8).
Indicador de foco precisa estar visível quando cada link é alcançado por teclado (WCAG 2.4.7).
Ao receber foco, o link da trilha não pode ficar totalmente escondido (WCAG 2.4.11).
Precisa existir mais de uma forma de localizar uma página (WCAG 2.4.5)
AAA
Informação sobre a localização do usuário nas páginas precisa estar disponível (WCAG 2.4.8).
O texto de cada link precisa de contraste de 7:1 contra o fundo (WCAG 1.4.6).
O propósito de cada link precisa ser compreensível pelo texto do link sozinho (WCAG 2.4.9).
O indicador de foco precisa ter pelo menos a espessura equivalente a um perímetro de 2px e contraste de 3:1 entre o estado focado e o não-focado (WCAG 2.4.13)
Boas práticas
Os breadcrumbs devem mostrar a navegação hierárquica e não o histórico de navegação
Embora possa ser tentador mostrar os passos anteriores do usuário em um caminho de navegação, essa não é a melhor prática. Os caminhos de navegação devem mostrar a hierarquia do site.
Os breadcrumbs nunca devem substituir a navegação principal
Certifique-se de ter uma barra de menu ou outro método de navegação principal para permitir que os usuários naveguem com mais liberdade.
Considere compactar as migalhas de pão quando elas ficarem muito compridas
Quando suas migalhas de pão ficarem muito longas para o espaço alocado, considere condensá-las usando reticências (…) .
Os breadcrumbs devem ficar acima do conteúdo, mas abaixo da navegação principal
Consideração ao truncamento
Considere a prioridade do que precisa ser visto imediatamente, à primeira vista , em comparação com o que precisa ser visto com um ou dois cliques de distância:
Otimização de espaço : Quando há vários níveis de navegação, o caminho de navegação (breadcrumb) pode ocupar muito espaço. Usar um menu suspenso pode economizar espaço na tela, ao mesmo tempo que permite o acesso a todos os níveis de navegação.
Visibilidade aprimorada: em um menu suspenso, o caminho de navegação permanece visível mesmo em telas pequenas ou com espaço limitado, como em dispositivos móveis.
Escalável : Útil para estruturas de navegação complexas, um menu suspenso permite fácil escalabilidade à medida que o número de níveis aumenta.
Maior acessibilidade: Para usuários com deficiência, um menu suspenso é mais fácil de navegar (em comparação com a rolagem horizontal, por exemplo).
O caminho de navegação deve mostrar a página selecionada no momento
Os breadcrumbs devem mostrar a página atual, mesmo que o título se repita em outras partes da página, pois isso ajuda os usuários a se orientarem. É importante observar que a página atual não deve ser um link.
Referências
https://component.gallery/components/breadcrumbs/
https://open-ui.org/components/breadcrumb.research/
https://www.pencilandpaper.io/articles/breadcrumbs-ux