Dia 10: Breadcrumbs e navegação secundária
Não deixe seu usuário perdido! Aprenda a usar "migalhas de pão" para sinalizar a localização e a hierarquia do seu site.
O que são breadcrumbs? (E não, não é de comer)
Inspirado no conto de "João e Maria" (Hansel and Gretel), um breadcrumb é uma "trilha de migalhas de pão" que mostra o caminho que o usuário fez (ou a hierarquia da página atual). É um pequeno menu de texto, geralmente no topo da página, que responde a duas perguntas cruciais para o usuário: "Onde eu estou agora?" e "Como eu posso voltar?".
Eles são fundamentais em sites com muitas páginas e níveis de profundidade, como e-commerces, blogs com muitas categorias ou sistemas complexos.
Além dos breadcrumbs: outros tipos de navegação secundária
A navegação secundária ajuda o usuário a se mover entre páginas de um mesmo nível hierárquico. Além dos breadcrumbs, existem outros padrões muito comuns:
- Menu lateral (Side nav): Muito usado em painéis de controle (dashboards) e páginas de "Configurações". Permite que o usuário navegue entre diferentes seções de uma mesma área principal.
- Abas (Tabs): Perfeitas para organizar conteúdo dentro de uma única página. O usuário pode alternar entre diferentes visualizações sem sair do contexto atual.
Seu desafio de hoje: o guia do usuário
Sua missão é projetar dois tipos diferentes de navegação secundária para um site fictício de e-commerce de eletrônicos.
Checklist do desafio:
- Desenhe um componente de Breadcrumb para a página de um produto. O caminho deve ter pelo menos 4 níveis (ex: `Início > Computadores > Notebooks > SuperBook Pro 14"`).
- Desenhe um Menu Lateralpara a página de "Minha Conta", com links para seções como "Meus Pedidos", "Endereços", "Pagamentos" e "Segurança".
- Dica de mestre Em ambos os componentes, garanta que o link da página atual esteja visualmente destacado (com uma cor diferente ou peso de fonte maior).
Concluiu? Mostre o caminho!
Projetar uma boa navegação mostra que você se preocupa com a usabilidade e a arquitetura da informação.