Quando tudo grita, ninguém escuta
Uma página pode estar inteira legível e mesmo assim não dizer por onde começar.
Hierarquia visual é a ordem em que o olho lê uma peça: o que ele vê primeiro, o que vê depois e o que fica por último. Ela é criada com contraste, ou seja, com diferenças claras de tamanho, peso, cor, posição e espaço. Quando essas diferenças não existem, tudo tem a mesma importância, e a pessoa não sabe por onde começar.
No design, quando tudo grita, ninguém escuta nada.
O cartaz que informa e não orienta
Pense num cartaz com quatro linhas: o nome do evento, a data, o endereço e uma frase de apoio. Todas no mesmo tamanho, no mesmo peso, na mesma cor.
Nada ali está errado. O texto está correto, a fonte é boa, tudo está legível. Mesmo assim, o olho lê linha por linha, procurando a informação principal. A página informa, mas não orienta.
Agora, quatro decisões. O título fica maior. A data ganha peso. O endereço fica menor. E aparece espaço entre as partes.
Pronto, surgiu um caminho. Primeiro o evento, depois o quando, por último o onde. Nenhuma palavra mudou. Mudou a ordem em que você enxerga.
Contraste é a ferramenta
Isso tem nome. No design, a gente chama de contraste: uma diferença clara o bastante para criar relação entre as coisas.
O contraste não acontece só na cor. Ele aparece em pelo menos seis lugares:
- Escala: grande contra pequeno.
- Peso: grosso contra fino.
- Tom: escuro contra claro.
- Forma: redondo contra reto, foto contra texto.
- Direção: horizontal contra vertical, alinhado contra solto.
- Espaço: o que está isolado contra o que está agrupado.
Cada diferença decide o que se vê primeiro e o que fica para depois. O espaço é o mais esquecido dos seis, e o que mais trabalha. Um elemento cercado de vazio ganha importância sem precisar crescer. É o mesmo raciocínio da lei da proximidade, visto pelo outro lado.
A armadilha da diferença pequena
Tem um erro que aparece em quase toda peça que chega para revisão: o título de 36 pontos ao lado de um subtítulo de 38. Parece uma decisão. Na tela, parece erro.
A regra é dura e funciona: se dois elementos não são iguais, a diferença precisa ser óbvia. Ou eles são o mesmo, ou são claramente diferentes. O meio-termo confunde, porque o olho percebe que algo mudou mas não entende o porquê.
O outro lado da armadilha é destacar tudo. Negrito em todas as linhas é negrito em nenhuma. Três cores de destaque na mesma página são três vozes falando ao mesmo tempo. Quando todo mundo sobe o volume, ninguém é ouvido.
Algo só sobe se algo aceitar descer
É aqui que hierarquia deixa de ser técnica e vira decisão. Para o título aparecer, o resto precisa aceitar ficar menor. Para a data ter peso, o endereço precisa ficar mais leve. Toda hierarquia é uma renúncia.
E é exatamente essa renúncia que costuma travar. O cliente quer o logo maior, o telefone maior, a promoção maior e a foto maior. Tudo ao mesmo tempo. Em treze anos, eu aprendi que a conversa útil não é sobre o tamanho de cada coisa. É sobre a ordem: o que a pessoa precisa ver primeiro para fazer o que a gente quer que ela faça?
Quando essa pergunta tem resposta, o tamanho de cada elemento quase se resolve sozinho. Quando não tem, nenhum ajuste de fonte resolve.
Hierarquia em três níveis
Quase toda peça funciona bem com três níveis, e quase nunca precisa de mais. O primeiro nível é o que precisa ser visto mesmo por quem passa correndo: o nome do evento, a oferta, a pergunta principal. O segundo é o que confirma o interesse: a data, o preço, o benefício. O terceiro é o que só lê quem já decidiu ficar: endereço, regras, letras miúdas.
Quando aparece um quarto ou quinto nível, normalmente é sinal de que duas informações estão disputando o mesmo lugar. Vale juntar, cortar ou mandar uma delas para outra peça. Um cartaz não precisa dizer tudo. Precisa dizer o essencial na ordem certa e deixar o resto para quem chegar perto.
Essa divisão também ajuda na conversa com o cliente. Em vez de discutir se o telefone fica maior, a pergunta passa a ser em qual nível ele entra. A resposta costuma aparecer rápido.
O teste dos 3 segundos
Um jeito simples de testar a hierarquia de qualquer peça:
- Olhe a peça por três segundos e desvie o olhar.
- Diga o que você viu primeiro. Se foi o que mais importa, a hierarquia está funcionando.
- Se não foi, procure o que está competindo com o principal e tire força dele: tamanho, peso, cor ou espaço.
Uma variação antiga do mesmo teste é apertar os olhos até a peça ficar embaçada. Os detalhes somem e sobram as manchas. A maior e mais escura é a que o olho vai procurar primeiro. Se essa mancha não é a mensagem principal, falta diferença.
Direção para a atenção
O melhor contraste não é o mais forte. É o que revela uma ordem quase invisível, em que a pessoa lê na sequência certa sem perceber que alguém decidiu essa sequência por ela.
Contraste não serve só para chamar atenção. Serve para dar direção a ela.
Referências
- Lupton, Ellen; Phillips, Jennifer Cole. Novos fundamentos do design. São Paulo: Cosac Naify, 2008 (capítulo "Hierarquia").
- Williams, Robin. Design para quem não é designer. São Paulo: Callis, 2005 (princípio do contraste).
- Série Design × Manim, episódio 7 (Quando tudo grita), @jeansousadesign.
