Hierarquia visual e composição em interfaces mobile

O que é hierarquia visual (e por que ela decide se a tela “funciona”)

Hierarquia visual é a organização intencional dos elementos da interface para que o usuário entenda, em poucos segundos, o que é mais importante, o que vem depois e o que é opcional. Em mobile, isso é ainda mais crítico porque a área útil é pequena, a atenção é limitada e o uso costuma acontecer em movimento.

Uma tela com boa hierarquia permite que o usuário responda rapidamente a três perguntas: (1) Onde estou? (2) O que posso fazer aqui? (3) Qual é o próximo passo mais provável?

Ferramentas de hierarquia: como guiar a atenção

1) Tamanho (escala)

Elementos maiores chamam mais atenção. Use tamanho para diferenciar: título vs. corpo, preço vs. descrição, botão principal vs. secundário.

• Regra prática: se dois elementos competem pela atenção, reduza um deles (texto menor, botão menos alto, ícone menor) até ficar claro qual é o principal.
• Exemplo: em uma tela de produto, o nome do produto pode ser maior que a descrição, mas menor que o preço se a decisão depende do valor.

2) Peso (negrito e densidade visual)

Peso tipográfico (regular, semibold, bold) e densidade visual (ícones preenchidos, bordas fortes) criam prioridade sem mudar o tamanho.

• Regra prática: use negrito para informação-chave, não para decorar. Se tudo está em negrito, nada é destaque.
• Exemplo: “Entrega amanhã” em semibold, detalhes em regular.

3) Contraste (luz, forma e legibilidade)

Contraste é diferença perceptível: claro/escuro, cheio/vazio, sólido/contorno. Ele direciona o olhar e melhora leitura.

Continue em nosso aplicativo e ...

• Ouça o áudio com a tela desligada
• Ganhe Certificado após a conclusão
• + de 5000 cursos para você explorar!

ou continue lendo abaixo...

Baixar o aplicativo

• Regra prática: o elemento principal deve ter o maior contraste da tela (ou estar entre os maiores).
• Exemplo: botão primário com fundo sólido e texto claro; botão secundário com contorno e texto na cor do tema.

4) Cor (ênfase e significado)

Cor chama atenção rapidamente, mas deve ser usada com parcimônia para não virar ruído. Em geral, cor forte deve ser reservada para ações e estados importantes.

• Regra prática: escolha 1 cor de destaque para ação primária e mantenha consistência entre telas.
• Exemplo: links e ações secundárias em tons neutros; ação principal sempre na cor de destaque.

5) Posicionamento (onde o olho chega primeiro)

Em mobile, o topo costuma ser visto primeiro, mas o polegar influencia o que é mais “acessível”. Posicionamento cria hierarquia por proximidade e expectativa.

• Regra prática: coloque o que define a tela (título/estado) no topo; coloque a ação principal onde seja fácil alcançar e não conflite com navegação.
• Exemplo: em um formulário, o botão “Continuar” pode ficar fixo no final (sticky) para reduzir rolagem e reforçar o próximo passo.

6) Espaçamento (respiro e agrupamento)

Espaçamento cria estrutura. Mais espaço ao redor de um elemento o torna mais importante e reduz a sensação de bagunça.

• Regra prática: aumente o espaço entre grupos e reduza o espaço dentro do grupo. Isso “cola” o que pertence junto e separa o que é diferente.
• Exemplo: campos de um mesmo bloco (endereço) com espaçamento menor entre si; maior espaçamento antes do próximo bloco (pagamento).

Padrões de composição para telas mobile

Uma composição previsível diminui esforço cognitivo. Um modelo comum e eficiente é dividir a tela em: cabeçalho, conteúdo principal, área de ação e rodapé/ações secundárias.

Cabeçalho (orientação e contexto)

Função: dizer onde o usuário está e oferecer controles de navegação essenciais.

• Inclui geralmente: título da tela, botão voltar, às vezes busca/filtro/contexto.
• Títulos informativos: prefira títulos que descrevam a tarefa ou o conteúdo (“Pagamento”, “Endereço de entrega”, “Detalhes do pedido”) em vez de genéricos (“Tela 2”, “Informações”).
• Evite: cabeçalhos altos demais que empurrem o conteúdo para baixo sem necessidade.

Conteúdo principal (o que a pessoa veio ver ou fazer)

Função: apresentar informações e controles na ordem em que o usuário toma decisões.

• Ordem recomendada: resumo do que importa → detalhes → opções → informações complementares.
• Agrupamento: use cartões/blocos com títulos curtos para separar seções.
• Escaneabilidade: prefira listas, subtítulos e valores destacados (ex.: total, prazo, status).

Área de ação (o “próximo passo”)

Função: concentrar a ação primária e, quando necessário, ações secundárias relacionadas.

• Uma ação primária por tela (quando possível): escolha o principal objetivo e dê a ele o maior destaque visual.
• Botão primário: alto contraste, rótulo claro e orientado a resultado (“Salvar alterações”, “Confirmar pagamento”, “Adicionar ao carrinho”).
• Botões secundários: menos contraste (contorno/tonal), posicionados de forma a não competir.
• Quando usar ação fixa (sticky): em telas longas (listas, formulários) para manter o próximo passo sempre disponível.

Rodapé / ações secundárias (opcionais, mas úteis)

Função: oferecer alternativas que não devem competir com a ação principal.

• Exemplos: “Cancelar”, “Precisa de ajuda?”, “Política de privacidade”, “Remover item”.
• Regra prática: ações destrutivas (ex.: excluir) devem ter menor destaque e, idealmente, separação visual do restante.

Regras práticas de composição (checklist rápido)

• Defina o objetivo da tela em 1 frase (ex.: “selecionar um endereço e continuar”). Se não der, a tela provavelmente tem objetivos demais.
• Uma ação primária por tela sempre que possível. Se houver duas, uma deve ser claramente secundária.
• Títulos informativos que descrevem conteúdo/tarefa, não apenas a seção do app.
• Alinhamentos consistentes: escolha um alinhamento dominante (geralmente à esquerda) e mantenha para títulos, textos e campos.
• Espaçamento consistente: use poucos valores repetidos (ex.: pequeno/médio/grande) para criar ritmo.
• Evite competição: não use cor forte em múltiplos elementos sem necessidade (ex.: dois botões sólidos na mesma tela).
• Priorize leitura: blocos curtos, listas quando fizer sentido, números e valores com destaque.

Passo a passo: construindo a hierarquia de uma tela do zero

Passo 1 — Liste os elementos e classifique por importância

Escreva tudo que precisa aparecer na tela e marque:

• Primário: o que o usuário precisa ver/fazer primeiro.
• Secundário: o que apoia a decisão.
• Terciário: detalhes, ajuda, ações raras.

Exemplo (tela de checkout):

• Primário: total a pagar, botão “Confirmar pagamento”.
• Secundário: método de pagamento, endereço, prazo.
• Terciário: cupom, termos, ajuda.

Passo 2 — Escolha a ação primária e escreva o rótulo do botão

Defina a ação principal e nomeie com verbo + resultado. Evite rótulos genéricos como “OK” ou “Enviar”.

• Bom: “Criar conta”, “Salvar endereço”, “Finalizar pedido”.
• Ruim: “Continuar” (quando não está claro o que acontece), “Confirmar” (sem contexto).

Passo 3 — Monte a composição em blocos (cabeçalho, conteúdo, ação, rodapé)

Desenhe (mesmo no papel) quatro áreas:

• Cabeçalho: título + navegação.
• Conteúdo: seções em ordem de decisão.
• Ação: botão primário + secundário (se necessário).
• Rodapé: links/ajuda/ações raras.

Passo 4 — Aplique contraste e escala para “travar” a hierarquia

Garanta que o usuário identifique em 2–3 segundos:

• o título da tela,
• o conteúdo principal,
• o botão primário.

Se o botão primário não for o elemento mais evidente (ou um dos mais evidentes), aumente contraste, tamanho ou espaço ao redor, e reduza o destaque de itens secundários.

Passo 5 — Ajuste espaçamentos para agrupar e separar

Revise o layout procurando por “grupos”:

• Itens do mesmo grupo devem estar mais próximos entre si.
• Grupos diferentes devem ter mais distância.

Se a tela parece longa e cansativa, normalmente faltam agrupamentos claros e sobram elementos com o mesmo peso visual.

Passo 6 — Verifique alinhamentos e consistência

Escolha uma grade simples (mesmas margens laterais) e alinhe:

• títulos de seção,
• textos,
• campos,
• listas e ícones.

Desalinhamentos pequenos geram sensação de “amador” e dificultam o escaneamento.

Exemplos práticos de hierarquia (antes/depois em decisões)

Exemplo 1 — Dois botões competindo

Problema: “Salvar” e “Excluir” com o mesmo estilo (ambos sólidos e coloridos). O usuário pode tocar no errado.

Ajuste:

• “Salvar” como botão primário sólido (alto contraste).
• “Excluir” como ação terciária (texto ou contorno), separado e com menor destaque.

Exemplo 2 — Informação importante escondida

Problema: total do pedido com o mesmo tamanho e cor dos demais valores.

Ajuste:

• Total com tamanho maior e/ou semibold.
• Mais espaço acima do total para criar “pausa” visual.
• Detalhes (subtotal, frete) menores e em tom neutro.

Exemplo 3 — Tela “plana” (tudo com o mesmo peso)

Problema: muitos textos no mesmo estilo, sem seções, sem respiro.

Ajuste:

• Crie seções com subtítulos.
• Use listas para itens repetitivos.
• Destaque apenas 1–2 informações-chave por seção.

Exercícios de revisão (para treinar o olhar)

Exercício 1 — Identifique primário, secundário e terciário

Escolha uma tela do seu app (ou um print de referência) e responda:

• Elemento primário: qual é o primeiro item que você vê?
• Elemento secundário: qual informação/controle vem logo depois e apoia a decisão?
• Elemento terciário: o que está ali “para quando precisar”, mas não deveria competir?

Se você não consegue apontar um primário com segurança, a hierarquia está fraca.

Exercício 2 — Teste dos 3 segundos

Olhe para a tela por 3 segundos e depois responda sem olhar:

• Qual é o título?
• Qual é a ação principal?
• Qual é a informação mais importante?

Se as respostas não forem claras, aumente contraste/escala do essencial e reduza o resto.

Exercício 3 — Redução de competição

Marque todos os elementos que usam cor forte, negrito ou tamanho grande. Se houver muitos, faça uma rodada de simplificação:

• Deixe cor forte apenas para a ação primária (e, no máximo, um destaque informativo).
• Troque negrito excessivo por regular.
• Crie hierarquia com espaçamento e agrupamento.

Exercício 4 — Auditoria de alinhamento

Ative uma grade mental: verifique se títulos, textos e campos começam no mesmo eixo. Ajuste margens e recuos para:

• alinhar títulos de seção com o conteúdo abaixo,
• padronizar recuos de ícones e textos em listas,
• evitar elementos “flutuando” fora do ritmo.

Exercício 5 — Reescreva títulos e rótulos para ficarem informativos

Liste os títulos e botões da tela e reescreva para ficarem específicos: