Sistema de Navegação do Site

O que Sistema de Navegação do Site faz?

Propósito

A skill Sistema de Navegação do Site fornece uma metodologia para organizar e projetar os caminhos estruturais de um site. Ela garante que os usuários possam se orientar, encontrar informações rapidamente e navegar entre seções sem esforço em todos os tipos de dispositivos. Um sistema de navegação robusto equilibra densidade de informação com clareza, mantendo acessibilidade e hierarquia visual.

Casos de Uso

• Projetar o cabeçalho e rodapé globais de um novo site.
• Reestruturar a arquitetura de informação (IA) de um site complexo.
• Implementar padrões de navegação responsivos (ex.: gavetas móveis, mega-menus).
• Melhorar a "orientação" em sites com muito conteúdo (migalhas de pão, subnavegação).
• Auditar a navegação existente quanto a lacunas de acessibilidade e usabilidade.

Quando NÃO Usar

• Aplicações de Página Única (SPA) com Roteamento Mínimo: Onde a navegação é puramente funcional dentro de uma única visualização (ex.: um painel de controle simples).
• Sites Imersivos/Experimentais: Onde as convenções padrão de navegação são intencionalmente evitadas para fins narrativos ou artísticos.
• Páginas de Destino Autônomas: Onde o objetivo é um único caminho de conversão e a navegação global pode distrair o usuário (embora um botão "voltar ao topo" ou uma navegação mínima por âncora ainda possa ser usado).

Entradas

1. Arquitetura de Informação (IA): Um mapa do site ou lista de páginas categorizadas por hierarquia.
2. Personas de Usuário e Objetivos: Quais são as tarefas mais frequentes que os usuários precisam realizar?
3. Prioridade de Conteúdo: Quais links são "Primários" (Globais), "Secundários" (Contextuais) ou "Utilitários" (Ferramentas/Conta)?
4. Restrições de Dispositivo: Pontos de interrupção alvo e requisitos de interação por toque vs. mouse.

Saídas

1. Mapa de Navegação: Um guia estrutural para os elementos de Cabeçalho, Rodapé e Subnavegação.
2. Estratégia Responsiva: Definições de como a navegação se adapta do Desktop para o Mobile.
3. Especificação de Interação: Comportamento para menus suspensos, estados ativos e gerenciamento de foco.
4. Marcos de Acessibilidade: Funções e rótulos definidos para navegação por leitores de tela.

Fluxo de Trabalho

1. Categorizar Níveis de Navegação

Divida seu mapa do site em níveis funcionais:

• Primário: Seções principais do site (ex.: Produtos, Serviços, Sobre).
• Secundário/Contextual: Links específicos de uma seção (ex.: categorias de produto específicas).
• Utilitário: Ferramentas não essenciais, mas necessárias (ex.: Pesquisa, Login, Seletor de Idioma).
• Terciário (Rodapé): Links de SEO, legais, sociais e links globais redundantes.

2. Selecionar Padrões de Navegação

Escolha padrões com base na densidade de conteúdo:

• Barra Simples: 3–7 links. Melhor para sites de pequeno a médio porte.
• Menus Suspensos: Melhor para sites com 2 níveis de hierarquia.
• Mega-menu: Melhor para grandes sites de comércio eletrônico ou empresariais com muitas categorias.
• Gaveta Móvel: Padrão para dispositivos móveis; contém todos os níveis de navegação em uma pilha vertical.

3. Projetar para Orientação

Garanta que os usuários sempre saibam onde estão:

• Estados Ativos: Diferencie visualmente o link da página atual e marque-o com aria-current="page" para tecnologia assistiva.
• Migalhas de Pão (Breadcrumbs): Use em sites com mais de 3 níveis de profundidade.
• Posicionamento Consistente: Mantenha a navegação global no mesmo local em todas as páginas.

4. Definir Comportamento Responsivo

Determine como a navegação será recolhida:

• A Mudança de Ponto de Interrupção: Decida exatamente quando o menu desktop se torna um menu "Hambúrguer".
• Redução por Prioridade: No mobile, mova links utilitários (como "Pesquisa") para fora da gaveta e para o cabeçalho se forem de alta prioridade.
• Alvos de Toque: Atenda ao WCAG 2.2 SC 2.5.8 (Tamanho Mínimo do Alvo) com 24x24px e espaçamento adequado; prefira 44x44px para alvos primários de interação com o polegar.

5. Estabelecer Acessibilidade

• Marcos (Landmarks): Use tags <nav> com aria-labels únicos (ex.: "Principal", "Rodapé").
• Percurso do Teclado: Garanta uma ordem de Tabulação lógica e estados :focus-visible visíveis que nunca sejam obscurecidos por cabeçalhos fixos ou sobreposições (WCAG 2.2 SC 2.4.11 Foco Não Obscurecido).
• Links de Pular (Skip Links): Forneça um link "Pular para o Conteúdo" para usuários de teclado.
• Estados ARIA: Use aria-expanded e aria-controls para menus alternáveis.

Regras de Decisão

• A Regra dos 7 Links: Tente limitar a navegação primária a 7 itens ou menos para reduzir a carga cognitiva (Lei de Miller).
• Previsibilidade sobre Inovação: Use ícones padrão (hambúrguer para menu, lupa para pesquisa) para garantir reconhecimento imediato.
• Hierarquia Visual: A ação mais importante (ex.: "Comece Agora") deve ser um botão estilizado, não um link de texto.
• Fixo vs. Estático: Use cabeçalhos fixos apenas se os usuários precisarem de acesso frequente à navegação enquanto rolam (ex.: conteúdo longo ou painéis).

Restrições

• Acessibilidade: Deve ser totalmente navegável apenas com teclado. O contraste dos links de navegação deve atender ao WCAG AA (4,5:1). Os alvos de toque devem atender ao WCAG 2.2 SC 2.5.8.
• Capacidade de Resposta: A navegação nunca deve transbordar a viewport horizontalmente.
• Hierarquia: A navegação não deve competir com o H1 da página ou com o CTA principal.

Padrões Comuns de Falha

• Navegação "Carne Misteriosa": Uso de ícones sem rótulos que não são universalmente compreendidos.
• Cabeçalho Superlotado: Tentar encaixar muitos links utilitários, levando a desordem e cliques acidentais.
• Gavetas Inacessíveis: Criar menus móveis que não podem ser fechados pelo teclado ou que não retêm o foco quando abertos.
• Falta de Feedback: Nenhuma mudança visual quando o usuário está na página atual ou passando o mouse sobre um link.

Critérios de Validação

• A navegação está estruturada em níveis claros (Primário, Utilitário, Rodapé).
• Os estados ativos são visualmente distintos e acessíveis.
• A navegação móvel é funcional e inclui todos os links primários.
• Usuários de teclado podem acessar todos os links e fechar menus usando apenas o teclado.
• Os marcos (<nav>) são usados e rotulados corretamente.
• Os alvos de toque no mobile atendem ao mínimo de 24x24px do WCAG 2.2 (44x44px preferido para ações primárias).
• O link "Pular para o Conteúdo" está presente e funcional.