Hierarquia visual na prática: como o olho decide o que ler primeiro

Hierarquia é ordem de leitura projetada

Antes de ler qualquer palavra, o olho já tomou uma decisão: por onde começar. Essa decisão leva uma fração de segundo, acontece sem consciência e é baseada apenas em forma, tamanho, cor e espaço. Nesse instante, o conteúdo ainda não existe.

Hierarquia visual é o nome dessa decisão quando ela é projetada. Você não escolhe se a sua página tem hierarquia, escolhe apenas se ela foi definida por você ou pelo acaso. No segundo caso, o elemento mais chamativo costuma ser a foto grande, o botão de cookies ou o logotipo, ou seja, coisas que não vendem nada.

Pesquisa de rastreamento ocular do Nielsen Norman Group descreve padrões de varredura recorrentes, como o padrão em F em páginas com muito texto corrido. O ponto importante não é decorar o padrão, é o que ele revela: as pessoas varrem a partir de pistas visuais antes de decidir onde ler devagar. Se as pistas apontam para o lugar errado, o texto certo não chega a ser lido.

Este texto não trata de quais blocos a página precisa ter. Trata de como fazer o olho percorrer os blocos que já estão lá, na ordem que você quer. O contexto maior está em UX de landing page.

As cinco ferramentas, e o que cada uma cobra

Hierarquia se produz com cinco variáveis. Só cinco. Quase todo problema de página confusa é o uso de todas ao mesmo tempo, no mesmo elemento.

A regra de aplicação é econômica: use o mínimo de ferramentas necessário para criar a diferença. Se aumentar o tamanho já separou os dois níveis, não acrescente negrito, cor, caixa alta e sublinhado por cima. Cada ferramenta gasta um pouco da atenção disponível, e a atenção acaba.

Os dois erros, e eles são opostos

Página com hierarquia ruim quase sempre cai num dos dois extremos. Curiosamente, o efeito final é o mesmo: o visitante não sabe por onde começar.

A saída dos dois casos é a mesma pergunta, feita bloco a bloco: se a pessoa ler uma coisa só nesta tela, qual precisa ser? Aquilo recebe o destaque. Tudo o mais desce um nível, de propósito, mesmo o que você acha importante. Hierarquia é feita de renúncias, e é por isso que ela é difícil.

Espaço em branco é ferramenta, não sobra

Espaço vazio é a ferramenta mais poderosa da lista e a única que costuma ser tratada como desperdício. "Está muito vazio aqui" é o pedido que mais destrói hierarquia, porque preencher o vazio é justamente apagar a separação entre os grupos.

O olho agrupa por proximidade antes de ler qualquer coisa. Coisas próximas parecem relacionadas, coisas distantes parecem assuntos diferentes. Isso acontece sem esforço e sem consciência, e é a razão de um erro específico ser tão comum:

Dois usos práticos além disso. Espaço em volta de um elemento é a forma mais silenciosa de destacá-lo: um botão sozinho, com folga generosa em volta, chama mais atenção que o mesmo botão em vermelho no meio de outros elementos. E espaço entre grupos precisa ser claramente maior que espaço dentro do grupo, senão os grupos deixam de existir e a página vira uma lista contínua.

Três níveis bastam, e o salto precisa ser óbvio

Uma landing page raramente precisa de mais de três níveis de texto: o que a pessoa lê varrendo, o que ela lê quando desacelera, e o apoio que só é lido por quem quer detalhe. Mais níveis que isso não são percebidos como níveis, são percebidos como inconsistência.

A regra do salto é simples de verificar: se dois níveis parecem iguais à primeira vista, um dos dois é inútil. Ou você aumenta a diferença ou funde os dois. Diferença tímida gasta complexidade sem produzir ordem.

No celular a coisa aperta, porque a tela não comporta títulos gigantes sem empurrar o conteúdo para longe. A troca útil ali é usar peso e cor no lugar de tamanho: um título menor, mas claramente mais pesado e mais escuro que o corpo do texto, mantém a hierarquia sem consumir a primeira tela.

Cor de destaque só destaca se for rara

Cor funciona como sinal, não como decoração. E sinal depende de raridade. A regra prática que resolve a maioria dos casos: uma cor de ação, reservada para ação. Se o laranja da sua marca aparece no título, no ícone, na borda da caixa, no selo e no botão, ele deixou de significar "clique aqui" e passou a significar "esta é uma página laranja".

Três consequências disso:

• Botão secundário não deve competir. Contorno, cor neutra ou apenas um link resolvem, e a diferença precisa ser visível de longe.
• Cor não pode ser o único portador de informação. Quem não distingue determinadas cores, e quem está no sol, precisa de outro sinal: forma, posição, rótulo, ícone.
• A cor de destaque precisa passar no contraste sobre o fundo em que está, e o texto dentro do botão também. Como medir isso está em acessibilidade em landing page.

Alinhamento: a borda invisível que o olho segue

Texto alinhado à esquerda cria uma linha vertical reta que não existe no desenho, mas existe na percepção. O olho usa essa linha para voltar ao início de cada nova linha sem procurar. É por isso que blocos de texto centralizados com mais de três linhas cansam: a cada quebra, o ponto de partida muda de lugar.

Centralizar funciona bem para elementos curtos e isolados, como um título de duas linhas com um botão embaixo. Deixa de funcionar assim que vira parágrafo, lista ou formulário.

A mesma lógica vale para o número de eixos. Cada novo alinhamento na tela é uma borda a mais para o olho administrar. Uma seção com texto à esquerda, número centralizado e botão à direita não parece variada, parece desarrumada. Menos eixos, mais firmeza.

Como conferir a hierarquia que você realmente construiu

A parte incômoda é que você é a pior pessoa para julgar a própria página: você já sabe o que é importante, então enxerga a hierarquia que pretendia, e não a que existe. Três testes contornam isso:

1. Teste do desfoque. Aperte os olhos até a página borrar, ou aplique um desfoque na captura de tela. O que continua saltando é a sua hierarquia real. Se o que salta é a foto de banco de imagem e não a proposta, está resolvido o mistério.
2. Teste em cinza. Converta a captura para tons de cinza. A hierarquia precisa sobreviver sem cor, porque cor é o primeiro atributo a falhar sob luz forte e nem todo mundo enxerga as mesmas cores.
3. Teste dos cinco segundos. Mostre a página a alguém por cinco segundos, feche e pergunte o que a pessoa lembra. A ordem das lembranças é a sua hierarquia, medida na única régua que importa.

Se o resultado dos três não bate com a ordem que você queria, o problema quase nunca é falta de destaque. É excesso: alguma coisa está brigando com o que deveria vencer. O caminho costuma ser tirar peso do resto, e não acrescentar peso ao favorito.