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 - Introdução
Conhecer o cursoPor 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
