Sistema de Cabeçalho de Página
Propósito
O Sistema de Cabeçalho de Página fornece uma metodologia para projetar a área estrutural de nível superior de uma página individual (distinta do cabeçalho global do site). Ele garante que os usuários possam identificar imediatamente onde estão (Orientação), entender o status ou metadados da visualização atual e acessar as ações primárias necessárias para concluir sua tarefa sem precisar procurar em menus.
Casos de Uso
- Projetar cabeçalhos para visualizações de painéis complexos (ex.: "Detalhes do Projeto").
- Estruturar a introdução de artigos longos ou páginas de documentação.
- Organizar páginas de configurações ou perfil onde o contexto e as ações de salvamento são críticos.
- Padronizar padrões de cabeçalho em uma aplicação SaaS ou em um grande site de conteúdo.
- Gerenciar breadcrumbs, títulos e indicadores de status em um layout unificado.
Quando NÃO Usar
- Navegação Global do Site: Use
sistema-de-navegacao-sitepara o cabeçalho principal que persiste em todo o site. - Páginas de Destino Simples: Onde a seção "Hero" (consulte
otimizacao-secao-hero) serve como cabeçalho da página. - Telas de Abertura / Modais: Onde o conteúdo é temporário ou mínimo; use
sistema-de-overlay-e-dialogopara cabeçalhos modais.
Entradas
- Título e Hierarquia da Página: O nome principal da página (H1) e sua posição na estrutura do site.
- Requisitos de Orientação: O usuário precisa de breadcrumbs ou de um botão "Voltar"?
- Metadados e Status: Detalhes críticos como "Última Atualização", "Rascunho/Publicado" ou informações do proprietário.
- Prioridade de Ação: Qual é a tarefa principal nesta página? (ex.: Editar, Compartilhar, Criar).
- Tokens de Marca/Sistema: Espaçamento, tipografia e tokens de cor.
Saídas
- Especificação da Anatomia do Cabeçalho: Definição das zonas (Orientação, Título, Metadados, Ações).
- Blueprint de Layout: Regras para alinhamento (Esquerda vs. Centralizado) e espaçamento.
- Estratégia Responsiva: Como o cabeçalho se adapta do desktop para o mobile.
- Especificação de Interação: Comportamento de cabeçalhos fixos e prioridades dos botões de ação.
Fluxo de Trabalho
1. Definir o Caminho de Navegação (Orientação)
Determinar como o usuário chegou a esta página e como retornar:
- Breadcrumbs: Use para hierarquias profundas (ex.:
Início > Projetos > Design). - Botão Voltar: Use para tarefas lineares ou ao retornar a uma visualização de lista específica.
- Link Pai: Um simples "<- Voltar para [Pai]" para profundidades de 2 níveis.
2. Estabelecer o Núcleo de Conteúdo (Título e Metadados)
Aplique sistema-de-hierarquia-visual ao centro do cabeçalho:
- Título H1: O elemento de texto mais proeminente.
- Metadados Contextuais: Informações secundárias (ex.: tags, timestamps, badges de status) colocadas próximas ao título.
- Miniatura/Avatar: Se a página representa uma entidade específica (ex.: Perfil de Usuário ou Produto).
3. Organizar as Ações no Nível da Página
Divida as ações em níveis de prioridade:
- Ação Primária: O único botão de "Nível 1" (geralmente um botão preenchido de alto contraste).
- Ações Secundárias: Botões de "Nível 2" (estilos outline ou ghost) para tarefas menos frequentes.
- Ações Terciárias: Menus overflow (...) para tarefas administrativas raras.
4. Escolher um Padrão Espacial
- Alinhado à Esquerda Padrão (SaaS/Painel): Breadcrumbs/Título à esquerda, Ações à direita. Melhor para produtividade.
- Centralizado (Conteúdo/Artigo): Todos os elementos centralizados. Melhor para legibilidade e narrativa.
- Layout Dividido: Título e Ações separados por espaço em branco para enfatizar a separação.
5. Definir Comportamento de Fixação e Rolagem
- Cabeçalho Fixo: Manter o cabeçalho da página visível se as ações (como "Salvar") forem necessárias com frequência durante a rolagem.
- Cabeçalho Redutor: Reduzir a altura do cabeçalho ou ocultar breadcrumbs conforme o usuário rola para baixo para maximizar o espaço de conteúdo.
Regras de Decisão
- A Regra do Breadcrumb: Se um site tiver mais de 2 níveis de profundidade, os breadcrumbs são obrigatórios no cabeçalho da página.
- A Regra "Um H1": O cabeçalho da página DEVE conter a tag H1 única da página.
- Alinhamento de Ações: No desktop, alinhe as ações primárias ao canto superior direito. No mobile, considere uma barra inferior fixa para ações primárias se o cabeçalho ficar muito cheio.
- Visibilidade do Status: Status críticos (ex.: "Pagamento em Atraso") devem ser colocados imediatamente adjacentes ao título usando um badge ou ícone.
Restrições
- Acessibilidade: Títulos de cabeçalho devem usar
<h1>. Breadcrumbs devem usar<nav>comaria-label="Breadcrumb". - Contraste: Badges de status e ações devem atender aos requisitos de contraste WCAG AA. Botões de ação devem atender ao WCAG 2.2 SC 2.5.8 tamanho de alvo (mínimo 24x24px, 44x44px preferido em barras fixas mobile).
- Responsividade: Cabeçalhos devem lidar graciosamente com títulos longos (truncamento vs. quebra de linha).
Padrões Comuns de Falha
- A Sobrecarga de Ações: Colocar muitos botões no cabeçalho, confundindo a tarefa primária.
- Orientação Ausente: Esquecer os breadcrumbs em páginas profundas, deixando os usuários se sentindo "perdidos".
- Esmagamento do Título: Não permitir espaço suficiente para títulos longos no mobile, fazendo com que se sobreponham às ações.
- Cabeçalho de Site Redundante: Fazer o cabeçalho da página parecer muito semelhante ao cabeçalho global do site, criando confusão visual.
Critérios de Validação
- O cabeçalho contém um H1 claro que corresponde ao rótulo de navegação.
- A orientação (breadcrumbs/voltar) é apropriada para a profundidade do site.
- A ação primária é visualmente distinta das ações secundárias.
- O layout permanece funcional e legível em viewports mobile.
- HTML semântico é usado (
<nav>para breadcrumbs,<h1>para título). - Indicadores de status (se houver) têm alto contraste e são fáceis de localizar.