Hierarquia visual

O arranjo dos elementos que guia o olho e diz, sem palavra, o que importa primeiro.

Hard

O que é

Hierarquia visual é a organização dos elementos pra direcionar o foco, marcar importância e levar a pessoa pelo conteúdo numa ordem lógica. Ela decide pra onde a pessoa olha primeiro e como percorre a tela, e sem ela a interface parece bagunçada, com ninguém sabendo direito o que importa.

As ferramentas são poucas e fortes: tamanho, cor, contraste, espaço e alinhamento. Um título maior puxa o olho antes do texto pequeno, um contraste forte destaca a ação principal, um espaço generoso separa grupos de conteúdo em blocos com sentido, e o alinhamento dá estrutura e corta a confusão.

No trabalho de produto, é a hierarquia que deixa a tarefa fácil. Numa tela de checkout, por exemplo, um label em negrito e um botão bem posicionado deixam o passo de compra óbvio. Quando a hierarquia é fraca, a pessoa precisa caçar a ação crítica, e isso aumenta o erro e o abandono.

Em uma frase

A hierarquia dessa tela tá chapada, nada se destaca, vamos dar peso só pra ação principal.

A pergunta que ele responde

Como eu faço a pessoa olhar primeiro pra parte certa da tela?

Quando usar

Ajuda em qualquer layout, seja tela, formulário ou página, sempre que houver mais de um elemento competindo por atenção.

Como não usar

O cuidado é não dar destaque a tudo, porque quando tudo grita nada se destaca, e a pessoa fica sem saber por onde começar.

Na prática

Pense numa tela de checkout. O time aumenta o botão de pagar, dá contraste e cerca ele de espaço. Aí o olho vai direto pra ele, e a taxa de finalização sobe.

Não confunda com

Vale separar hierarquia visual de pura estética, porque ela é função antes de tudo. Uma tela bonita, mas sem hierarquia clara, ainda deixa a pessoa perdida sobre o que fazer primeiro.

D

Em inglês

Visual Hierarchy

Pronúncia

n/a

Também chamado de

hierarquia visual, hierarquia de informação visual

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre visual hierarchy