Sistema de Rastros e Wayfinding

O que Sistema de Rastros e Wayfinding faz?

Propósito

O Sistema de Rastros e Wayfinding fornece uma metodologia para projetar as trilhas de navegação secundárias que ficam acima do conteúdo principal. Ele garante que os usuários nunca se sintam "perdidos" em arquiteturas de informação (IA) profundas, fornecendo um mapa linear claro de sua localização atual em relação à página inicial ou diretório raiz. Este sistema equilibra precisão de navegação com peso visual mínimo, garantindo que os usuários possam entender seu contexto e navegar de volta aos níveis superiores com um único clique.

Casos de Uso

• E-commerce: Navegando por Categoria > Subcategoria > Produto.
• Documentação e Wikis: Percorrendo Volume > Capítulo > Seção > Página.
• Dashboards SaaS: Gerenciando entidades aninhadas como Conta > Projeto > Ativo.
• Sites de Diretório: Navegando por Localização > Categoria > Listagem.
• Resultados de Pesquisa: Mostrando o caminho para um item específico encontrado via pesquisa.

Quando NÃO Usar

• Arquiteturas Planas: Se o site tem apenas 1–2 níveis de profundidade (Início > Página), os rastros adicionam poluição visual desnecessária.
• Progressões Lineares: Para assistentes passo a passo ou fluxos de checkout, use sistema-de-progressao-por-etapas.
• Caminhos Dinâmicos/Não Hierárquicos: Se o caminho do usuário é baseado no histórico da sessão (por exemplo, "Voltar para Resultados da Pesquisa") em vez de uma estrutura fixa, use um botão "Voltar".
• Páginas de Destino: Onde o objetivo é uma única conversão e a navegação distrai do CTA principal.

Entradas

1. Arquitetura de Informação (IA): O mapa hierárquico do site.
2. Nó Atual: A página específica que o usuário está visualizando no momento.
3. Hierarquia Parental: A cadeia de ancestrais da página atual até a raiz.
4. Restrições de Exibição: Largura horizontal disponível (do sistema-de-grade-responsiva).

Saídas

1. Blueprint de Wayfinding: Uma anatomia definida para rótulos, separadores e links.
2. Estratégia de Truncamento: Regras para lidar com caminhos longos em telas pequenas ou cenários de estouro.
3. Mapeamento Responsivo: Como a trilha colapsa ou se transforma para viewports móveis.
4. Camada de Acessibilidade Semântica: Funções e rótulos ARIA definidos para leitores de tela.

Workflow

1. Mapeie o Caminho Hierárquico

Determine o caminho absoluto do Início/Raiz até a página atual. Exemplo: Início > Recursos > Whitepapers > [Título da Página Atual]

2. Defina a Anatomia Visual

Estabeleça o estilo para cada componente:

• Os Links: Estilo de link padrão (do sistema-de-estados-interativos).
• Os Separadores: Um símbolo não interativo (por exemplo, /, >, ou →) que distingue visualmente os níveis.
• A Página Atual: Um rótulo de texto simples não clicável que confirma a localização do usuário.

3. Estabeleça o Ritmo Espacial

Aplique o sistema-de-espaçamento-fluido:

• Espaçamentos: Use espaçamento pequeno e consistente (por exemplo, --space-xs) entre links e separadores.
• Posicionamento Vertical: Coloque a trilha consistentemente acima do <h1> principal, mas abaixo do cabeçalho global do site.

4. Implemente Truncamento e Estouro

Para caminhos profundos (4+ níveis) ou títulos longos:

• Truncamento Médio: Colapsar níveis intermediários em uma elipse (...) se a largura total exceder o contêiner (por exemplo, Início > ... > Seção > Página).
• Truncamento de Rótulo: Use max-width e text-overflow: ellipsis para rótulos longos individuais para evitar quebra de linha.

5. Planeje a Adaptação Responsiva

Mapeie a experiência móvel:

• Padrão "Voltar ao Parental": Em telas muito pequenas, substitua a trilha completa por um único link "<- Voltar para [Parental]" para economizar espaço.
• Rolagem Horizontal: Permita que a lista de breadcrumbs role horizontalmente se a trilha completa precisar ser preservada.

Regras de Decisão

• A Regra "Raiz Sempre": O primeiro item na trilha deve ser sempre a raiz funcional (geralmente "Início").
• Estado da Página Atual: O último item no breadcrumb (a página atual) NÃO deve ser um link. Isso impede que os usuários cliquem em um link para a página em que já estão.
• Lógico vs. Histórico: Os breadcrumbs devem refletir a estrutura do site, NÃO o histórico do navegador do usuário.
• Visibilidade do Separador: Os separadores devem ter peso visual menor (por exemplo, cor suave) do que os links para evitar competir pela atenção.

Restrições

• Acessibilidade: Deve estar dentro de um elemento <nav> com aria-label="Breadcrumb", contendo uma lista ordenada (<ol>) de itens para que leitores de tela anunciem a posição e a contagem total.
• Contraste: Links e separadores devem atender aos requisitos WCAG AA (4.5:1).
• Alvos de Toque: Os links do breadcrumb devem atender ao mínimo de 24x24px da WCAG 2.2 SC 2.5.8, mesmo que o texto visível seja menor.
• Comprimento: Os rótulos do breadcrumb devem corresponder exatamente aos títulos das páginas (ou usar uma versão abreviada se o título for excessivamente longo).

Padrões de Falha Comuns

• O "Início Perdido": Não incluir o link Início/Raiz, forçando os usuários a usar o menu principal para recomeçar.
• Excesso de Links: Tornar a página atual um link clicável, que recarrega a mesma página e confunde os usuários.
• Competição Visual: Usar separadores muito grandes ou de alto contraste, dificultando a leitura da trilha.
• Quebra de Linha: Permitir que os breadcrumbs se quebrem em 3+ linhas no celular, empurrando o conteúdo principal muito para baixo.
• IA Inconsistente: Mostrar caminhos diferentes para a mesma página dependendo de como o usuário chegou até ela.

Critérios de Validação

• A trilha começa com o nó Início/Raiz.
• A página atual é o último item e NÃO é clicável.
• Os breadcrumbs estão dentro de um marco <nav aria-label="Breadcrumb"> contendo uma lista <ol>.
• Separadores visuais são usados e têm contraste menor do que os links.
• A trilha se adapta graciosamente a viewports móveis (truncamento ou link "Voltar").
• O espaçamento entre itens é consistente e segue o sistema de espaçamento fluido.
• Usuários de teclado podem navegar com Tab pelos links intermediários.