Hierarquia é a ordem em que o olho processa a tela, antes de qualquer leitura consciente. Sem hierarquia deliberada, a pessoa precisa trabalhar para descobrir o que importa, e o resultado mais comum é simplesmente não notar a ação principal. Cada ferramenta abaixo vem com o par certo/errado, porque apontar qual princípio está fraco é uma habilidade muito mais transferível do que dizer "deixa mais bonito".
Tamanho é processado antes da leitura consciente começar. Mas escala só funciona de forma relativa: hierarquia é sempre a razão entre elementos, nunca um tamanho absoluto. Se tudo na tela é grande, nada se destaca: o efeito de gritar se anula quando todo mundo grita junto.
Quatro informações no mesmo peso. O olho não sabe por onde entrar, e o preço, que é o que decide a compra, some no meio da lista.
Quatro degraus distintos da escala. O preço é o maior elemento e o único colorido: o olho chega nele primeiro sem precisar procurar.
Se dois elementos são relacionados, o espaço entre eles precisa ser visivelmente menor que o espaço até o próximo grupo. O erro mais comum é o espaçamento democrático (a mesma distância entre tudo), que destrói o agrupamento: se o espaço entre um rótulo e seu campo é igual ao espaço até o campo seguinte, ninguém consegue dizer onde um grupo termina.
O rótulo flutua entre dois campos. À primeira vista não dá para saber se "Data de retirada" descreve o campo acima ou o de baixo.
Rótulo e campo colados formam uma unidade; o respiro maior separa as unidades. A regra do sistema: 6 a 8px dentro do grupo, 16px ou mais entre grupos.
Diferente da proximidade, que aproxima o que é relacionado, o respiro generoso em volta de um bloco inteiro sinaliza uma fronteira e reduz a densidade que o olho precisa processar de uma vez. Espaço em branco é ferramenta ativa.
Cabe mais coisa. Mas nada respira, a densidade é uniforme e a busca, que é a ação real da tela, não se distingue do restante.
O respiro maior fica em volta do elemento que mais importa. Cortar espaço em branco para caber mais é um pedido comum, e quase sempre reduz a hierarquia percebida e a sensação de qualidade.
O cérebro reconhece padrões: quando elementos se alinham a linhas invisíveis, ele percebe estrutura mesmo sem grade visível. Um desalinhamento de poucos pixels é algo que quase ninguém nomeia conscientemente, mas todo mundo sente como "algo está errado".
Alinhar não significa pôr tudo à esquerda: significa ser consistente sobre qual borda ou eixo os elementos compartilham. No sistema Asa existe um eixo a mais que na maioria dos projetos: o de 8°, que atravessa a peça inteira e amarra os dois campos do vão.
Cor é um dos sinais mais rápidos que o sistema visual detecta, e por isso o mais fácil de estragar por excesso. A regra "um único botão vermelho por peça" é essa ferramenta de hierarquia escrita como regra de marca.
Quatro elementos disputando o mesmo canal. Qual é a ação principal? A etiqueta, o título, ou um dos dois botões? A cor já não significa "aqui": é papel de parede.
Um só elemento carrega o contraste máximo. As outras ações continuam disponíveis, mas param de competir, e a assinatura da marca se mantém, porque o vermelho não desapareceu.
É o overfitting visual: oito cabeçalhos de seção idênticos, dezenas de cards iguais, bloco após bloco em caixa alta. O olho aprende o padrão na segunda seção e, a partir dali, não lê mais: reconhece. Consistência é o sistema inteiro usar as mesmas regras; repetição é cada seção usar o mesmo molde. Uma topologia por seção, fundos alternados, cards só onde existe produto.
Legenda, título em negrito, três cards. Legenda, título em negrito, três cards. Na terceira seção o olho já não distingue frota de destino de vantagem: tudo é "mais um bloco com cards", e a página inteira fica com o peso de uma lista.
Cada assunto tem a forma que pede: o destino é foto, porque é lugar; as vantagens são lista, porque são argumentos; a nota é número grande em fundo escuro, porque é prova. O fundo alterna, e os cards só voltam onde há produto para listar: na frota. O olho recomeça a cada seção em vez de reconhecer o molde e seguir rolando.
É o único elemento vermelho da composição. Contraste máximo, usado uma vez só.
Tem espaço em branco próprio em volta, mais generoso que o de qualquer outro elemento da tela.
Fica sempre no campo de baixo do vão, o campo do "o que o cliente recebe". A posição é previsível de peça em peça.
Cada sinal comunica prioridade por um canal perceptivo independente. Isso é robustez, e também é acessibilidade: se a única pista de que um botão é importante fosse a cor, uma pessoa com daltonismo perderia esse sinal por completo. Com tamanho, isolamento e posição também codificando a prioridade, a mensagem sobrevive à falha de qualquer um dos canais.
| Princípio | Pergunta | Sinal de falha |
|---|---|---|
| Escala | O elemento mais importante é também o visualmente mais pesado? | Tudo do mesmo tamanho, nada se destaca |
| Proximidade | O que é relacionado está mais perto entre si do que do resto? | Espaçamento uniforme mascarando os grupos |
| Espaço em branco | O elemento principal tem espaço próprio em volta? | Densidade uniforme, nada respira |
| Alinhamento | Os elementos compartilham bordas ou eixos entre si? | Desalinhamentos pequenos que incomodam sem explicação |
| Cor | Só um elemento da tela usa o contraste máximo? | Vários vermelhos competindo ao mesmo tempo |
| Variação | Cada seção tem uma estrutura própria, ou a página repete a mesma grade? | Mesmo cabeçalho, mesmos cards, mesmo fundo em sequência |