Hierarquia visual em aplicações web

Ao desenhar uma interface, é importante priorizar os elementos principais e estabelecer uma hierarquia visual sempre buscando responder as questões iniciais que um usuário possui ao acessar a sua aplicação. Não o faça pensar, tente deixar claro: onde está, o que pode fazer e onde pode ir. Caso contrário, há uma grande possibilidade que esse usuário abandone e deixe de usá-la, aumentando o que chamamos de “taxa de rejeição”.

Curso UX/UI - Testando interfaces com avaliação heurística

Conhecer o curso

Por que ela é importante?

Em seu artigo Communicating with Visual Hierarchy, Luke Wroblewski, diretor de produtos da Google, explica que a apresentação visual de uma interface é essencial para:

• Informar aos usuários – A interface deve guiar o usuário de uma ação para outra e estabelecer relacionamento entre elas.

• Deixar claro a organização – Manter a consistência dos elementos da sua aplicação

• Comunicar efetivamente a sua marca para sua audiência – Criando um impacto emocional positivo e fornecendo ao seu usuário uma experiência agradável.

Fatores que influenciam na hierarquia visual

A maneira que processamos as informações é afetada por alguns fatores que contribuem para que priorizemos determinados elementos. Alguns desses fatores incluem:

• Tamanho – Uma regra simples e direta: quanto maior o elemento, maior a chance de atrair a atenção do usuário.

• Cor – As cores brilhantes são mais propensas a chamar a atenção do que tons monótonos. Por exemplo, todos nós já utilizamos um marca-texto para destacar pontos importantes de um texto. O amarelo é mais rico e brilhante do que o branco, então ele se destaca. Depois das cores brilhantes, vem as cores escuras, e na parte inferior da hierarquia das cores, os tons de cinza.

• Contraste – Tão importante quanto as cores, o contraste ajuda a destacar os elementos mais importantes da sua aplicação.

• Repetição – Repetir estilos pode dar a impressão para o usuário que o conteúdo é relativo. Por exemplo, destacando esta palavra , a forma que o cérebro processa e interpreta a palavra será diferente comparada com o restante do conteúdo.

• Proximidade – Elementos similares devem estar próximos um do outro. Com referência aos princípios da Gestalt, nosso cérebro tende a agrupar mais fácil as formas que estão próximas entre si.

• Espaço em branco – Conhecido também como espaço negativo, o uso do espaço em branco ajuda a agrupar diferentes seções de uma aplicação e facilitar a legibilidade do conteúdo.

Alguns padrões utilizados

Existem dois formatos que podemos utilizar quando desenhamos e estruturamos os elementos de uma aplicação web. Os formatos abaixo são baseados nos movimentos dos nossos olhos e podem ser aplicados dentro do contexto da cultura ocidental (leitura da esquerda para direita)

Formato “F”

Com o formato “F”, o usuário começa buscando informações ou palavras-chaves pelo topo, quando é encontrado algo de interesse, começa-se a leitura normalmente, formando uma linha horizontal. O resultado final é algo parecido com a letra “F” ou “E” como visto na imagem acima.

Formato “Z”

É possível ver esse formato aplicado na maioria das aplicações web. O formato “Z” é bastante utilizado para interfaces onde a simplicidade é a prioridade e o call to action a principal tarefa da tela. Para aplicações com conteúdo complexo, pode não funcionar tão bem quanto o formato “F”, por outro lado pode ajudar a aumentar a taxa de conversão da sua Landing Page.

Conclusão

É importante entender como a sua audiência faz a leitura das informações antes de adotar um padrão de hierarquia. Considere também uma mistura dos itens mencionados no post para chegar a uma solução ideal para o seu negócio. Uma boa hierarquia visual irá diminuir o processo cognitivo dos usuários e destacar os pontos mais importantes para que concluam suas tarefas de uma forma mais eficaz.

Referências

Visual Hierarchy - Interaction Design Foundation

Communicating with Visual Hierarchy - Luke Wroblewski