Hierarquia de conteúdo em UI

1) Por que precisa de hierarquia

• responde a três perguntas em 3-5 segundos: o que é isso? → o que é importante? → o que fazer?;
• torna a interface previsível e fácil de escanear;
• reduz os erros e aumenta a conversão.

Princípios: sinais> ruído, seqüência> variedade, contexto> regras absolutas.

2) Níveis de importância e estrutura

1. Contexto de navegação (marca, seção, migalhas/migalhas de pão).

2. H1 é o alvo da tela (o mais curto possível, verbo se necessário).

3. Lead/subtítulo (uma linha de benefício ou status).

4. Primary action (1-2 CTA chave).

5. Primary data (KPI básico, cartões de primeira linha).

6. Secundary data (detalhes, filtros, tabelas auxiliares).

7. Meta/Help (dicas, notas, texto legal).

Regra: uma tela é H1, não mais do que dois primary CTA.

3) Tipografia e ritmo

Escala de fontes: H1 28-32, H2 22-24, H3 18-20, body 14-16, micro 12 (px/pt equivalente na web).
Espaçamento entre linhas: 1. 3–1. 5 para body, 1. 2–1. 3 para cabeçalhos.
Ritmo de recuo: unidade básica múltipla (4/8 px). Zagolovok↔blok: 16-24; parágrafos: 8-12.
Contraste: Mínimo WCAG AA; o título é sempre mais contrastante do que as assinaturas/meta.
Cor vs peso: cor - acento, não «muleta» em vez de tamanho/gordura.

4) Grade e layout

Grade 12 colunas (desktop )/4-6 (mobile) com gatters fixos.
Visually first = first in DOM: ajuda as capturas de tela e SEO.
Eixo de leitura: da esquerda para a direita (LTR) ou da direita para a esquerda - Espelhe a ordem dos sinais.
«Zonas de atenção»: centro/esquerda superior - cabeçalho e lead; A faixa de ação está perto/abaixo.

5) Sinais visuais de prioridade

Tamanho e peso (tipografia) - sinal primário.
Posição (acima/esquerda = mais importante em LTR).
Cor (acentuação CTA, status).
Iconografia (somente como suporte de texto).
Recuos/bordas (cartão de ar maior percebido mais importante).
Dinâmica (animação ≤ 200 ms para chamar a atenção sem irritação).

6) Divulgação progressiva

• Above the fold é apenas o contexto, o objetivo e a ação inicial.
• Seções-acordeões/dados secundários.
• Detalhe por clique (drill-down): cartão → painel → modal.
• Pistas de Inline em vez de «helpas» sobrecarregadas.
• Os esqueletos/playsholders mantêm a estrutura durante o download.

7) Hierarquia em telas típicas

7. 1 Dashboard

Filtro de tempo H1 + na parte superior.
Faixa KPI (3-5 cartões) - primeira linha.
Gráficos/tabelas - segunda linha, triagem/filtros ao lado.
Anomalias/alertas - coluna/fita separada, não misturar com KPI.

7. 2 Catálogo/lobby

H1 + filtros rápidos/chips.
Triagem mais perto do cabeçalho, CTA «Jogar/Comprar» no cartão.
Marcas (novo/top/jackpot) - visualmente secundário em relação ao nome.

7. 3 Cartão da entidade (jogo/mercadoria)

Zona de herói: nome (H1), factos-chave (RTP/volatilidade/classificação), primary CTA.
Detalhes: guias Descrição/Características/Revisões.
Metadados: rótulos e texto legal - em baixo.

7. 4 Formulários/Assistente

Cabeçalho do passo + lead breve («2 minutos, o cartão não é descartado»).
Ordem de campos de frequência/obrigatoriedade.
CTA direito/inferior, as ações de apoio são referências em baixo/esquerdo.
Erros - perto do campo, breve e no caso.

8) Priorizar estados

• Norma → Download → Sucesso/Vazio → Erro.
• No download, mantenha o esqueleto (esqueletos) e o CTA não salta.
• No erro - H1 muda para «o que aconteceu», CTA, «repetir/contactar».

9) Conteúdo-token e sistema de design

• `font. heading. xl`, `font. body. md`, `space. 200`, `radius. md`, `elevation. sm`.
• Papéis de texto: 'text. title`, `text. lead`, `text. secondary`, `text. meta`, `text. helper`.
• Os papéis de cor são 'accent/neutral/sucess/warn/danger' + «níveis» (100-900).
• Componentes: 'KPI. Card/Section. Title/Inline. Help/Meta. Line`.

10) Medição e qualidade

• Scan Time (mediana até o primeiro clique/ação sensível).
• Focus Order Errors (quantas vezes o usuário «falha» de olhar).
• CTA Visibility% (quantos CTA vs foram clicados).
• O INP/CLS (a hierarquia não deve saltar ao carregar).
• A/B: Mais grande que o H1 vs é mais forte que o contraste; filtros de chip em cima vs na barra lateral.

• `first_focus_target`, `primary_cta_exposed/clicked`, `section_collapse_toggle`, `help_shown`.

11) Práticas de iGaming (exemplo)

Lobby Casino: H1 Lobby, chips Nova/Live/Jackpots/Favoritos, depois azulejos. Cada cartão tem o nome, ícone do provedor, CTA «Jogar»; marcas de «novo/jackpot» são secundárias.
Dashboard do operador: primeira linha: NGR/GGR/DAU/CR; segunda linha, tendências e anomalias; terceira, tabelas.
Passo de pagamento: H1 «Reabastecimento», lead «Sem comissão, instantaneamente», lista de métodos de conversão, mínimo de metatexto acima.

12) Antipattern

Dez acentos iguais na tela («grito visual»).
Títulos como imagens/ícones sem texto (quebra de disponibilidade e busca).
«Resumo em fontes pequenas» e notificações com banners gigantes.
Links auxiliares ao lado do primary CTA do mesmo peso visual.
Ordem incoerente, hoje «filtros de cima», amanhã «esquerda».

13) Folha de cheque de implementação

1. Defina o destino da tela (H1 + 1-2 ações primárias).
2. Sinalize os níveis primary/secundary/meta; fixa-o nos tocadores DS.
3. Junte a escala de tipografia e o ritmo de recuo básico.
4. Depure os estados (carregar/vazio/erro) sem saltar 100/cabeçalhos.
5. Faça um «scan-teste» de cinco minutos com as pessoas que repararam onde foi clicado.
6. Ligue a telemetria (exposure CTA, scan time, focus order).
7. Coloque o pattern em heidline com os exemplos «antes/depois».

14) Total

A hierarquia de conteúdo não é uma grande fonte para o principal, mas sim um sistema de soluções: tipografia, grade, cor, ritmo de recuo, ordem do DOM e comportamento em diferentes estados. Quando cada nível tem o seu papel e o seu peso, a interface torna-se compreensível, rápida e previsível e os usuários confiantes em suas ações.