Hierarquia Visual

A hierarquia visual é a organização dos elementos em uma tela de forma que sua importância relativa seja imediatamente aparente antes mesmo de qualquer leitura. Ela é produzida por tamanho, peso, cor, contraste, espaçamento, posição e agrupamento, e determina a ordem em que a atenção se move pela página. Como as pessoas escaneiam em vez de ler, a hierarquia costuma ser a única forma de comunicação que ocorre antes que a decisão de permanecer ou sair seja tomada.

Uma hierarquia funcional responde a três perguntas nos primeiros instantes após o carregamento de uma página: sobre o que é esta página, o que posso fazer aqui e para onde devo olhar em seguida. Quando a hierarquia é clara, um visitante que percorre a página sem ler uma frase completa ainda consegue se orientar corretamente. Quando ela é plana, todos os elementos competem igualmente, o olhar não tem um caminho a seguir e o visitante precisa ler para entender, o que muitos não farão.

A hierarquia é criada tanto pela restrição quanto pela ênfase. Dar destaque a algo exige que outras coisas percam destaque, e é por isso que a hierarquia se degrada previsivelmente em organizações onde várias partes interessadas reivindicam espaço na página. O mecanismo é bem documentado: a cada trimestre, um novo elemento é promovido, nada é rebaixado e, após dois anos, a página apresenta seis pontos focais concorrentes e nenhuma hierarquia. Restaurá-la exige uma decisão explícita sobre prioridades que seja organizacional, e não visual.

O espaço em branco é a ferramenta mais consistentemente subestimada que existe. O espaço ao redor de um elemento o isola e aumenta sua importância percebida, enquanto o espaço entre grupos comunica que são assuntos distintos sem a necessidade de borda ou título. Solicitações para reduzir o espaço em branco a fim de incluir mais conteúdo visível na tela geralmente prejudicam a hierarquia mais do que o conteúdo adicional obtido, pois uma página densa não comunica nada rapidamente e uma página que não comunica nada rapidamente é ignorada ou abandonada.

A hierarquia também não é puramente visual, e tratá-la dessa forma gera falhas de acessibilidade. A estrutura semântica de uma página, expressa por meio de níveis de cabeçalho, pontos de referência e ordem de leitura, é a hierarquia que a tecnologia assistiva transmite, e deve corresponder à hierarquia visual. Uma página onde o elemento visualmente dominante é marcado como uma div sem estilo, ou onde os níveis de cabeçalho são escolhidos por sua aparência em vez de seu significado estrutural, apresenta uma hierarquia diferente para usuários de leitores de tela do que para usuários com visão.

A hierarquia também precisa sobreviver ao conteúdo real, que é onde a maioria dos designs falha após o lançamento. Um layout que funciona bem com um título de seis palavras e uma imagem de produto selecionada se comporta de maneira diferente com um título de quarenta palavras, uma imagem ausente, um nome de produto longo e três selos promocionais aplicados por uma equipe de merchandising. Projetar considerando a gama realista de conteúdo, incluindo as sequências de caracteres plausíveis mais longas e os dados menos favoráveis, em vez de exemplos idealizados, é o que impede que uma hierarquia desmorone na primeira semana em que é utilizada. Isso também justifica a necessidade de governança sobre os mecanismos que permitem que pessoas sem experiência em design adicionem ênfase, já que a capacidade irrestrita de aplicar selos, banners e estilos de destaque será usada com o tempo até que a ênfase perca o significado.

Verificar a hierarquia é simples e raramente feito. Um teste de cinco segundos revela o que as pessoas realmente absorvem em uma primeira impressão. Um teste de visão semicerrada, onde o design é desfocado até que apenas as formas gerais permaneçam, expõe se um único ponto focal se mantém. Ler a página apenas como um esboço do título mostra se a estrutura faz sentido sem o estilo visual. Essas verificações são padrão em um Auditoria de experiência do usuárioe codificando as regras resultantes como uma escala de tipo definida, escala de espaçamento e sistema de ênfase em design de produto O trabalho é o que impede que a hierarquia se desfaça novamente à medida que novas páginas são criadas.