Como a digitalização de olhos afeta a hierarquia visual no design UX
Enquanto milênios de arte, de vasos gregos a capelas italianas, moldaram nossa compreensão do que é a beleza, a tecnologia relativamente recente por trás do rastreamento ocular está acrescentando uma nova dinâmica à maneira como percebemos visualmente o mundo. Mais precisamente, esta nova e empolgante ciência está nos ajudando a entender melhor - e melhores projetos - sites que são eficazes e estéticos.
O design da Web (como arte visual) segue muitas das mesmas regras que as formas de arte mais tradicionais. Neste artigo vamos resumir brevemente a importância da organização visual e, em seguida, explicar como as descobertas do rastreamento ocular podem melhorar o layout das interfaces web.
Criando organização visual
Não é surpresa que a aparência de um site afete seu sucesso, mas é importante identificar os motivos. Em seu papel Comunicando-se com a hierarquia visual , Luke Wroblewski, autor e diretor sênior de Design de Produto do Yahoo !, explica que a apresentação visual de uma interface web é essencial para:
Orientação
Uma interface bem feita pode guiar os usuários de uma ação para outra sem se sentirem arrogantes. Independentemente do que você acha de suas práticas de negócios, não há dúvida de que Uber é um exemplo de um site incrivelmente suave, porém estruturado. As proposições de valor estão no topo do pergaminho, seguidas por um controle deslizante divertido para aprender sobre as diferentes opções de carro e terminar com o próximo passo lógico de encontrar passeios em sua cidade.
Comunicação
Correspondendo de outra forma diferente de informações, a interface do usuário pode formar links na mente do usuário, comunicando mensagens sem dizer nada. Olhe para o site de design popular Abduzeedo : as categorias amplas estão no topo, o conteúdo em destaque no meio e as categorias detalhadas no rodapé.
Criando impacto emocional
Não cometa o erro de pensar que o seu site é simplesmente uma ferramenta mecanizada. Websites têm o potencial de fazer conexões emocionais, e se o seu não, a vontade de seus concorrentes. Na verdade, as pessoas podem, na verdade, ser mais propensas a perdoar as deficiências da sua interface se você produzir um resultado positivo. resposta emocional . MailChimp é um exemplo perfeito de um site com uma interface que é utilizável, despreocupada e divertida de usar.
O olho humano previsível
Às vezes, parece que seus olhos têm mentes próprias. Anos de evolução nos deram o instinto de identificar objetos e movimentos que consideramos importantes, seja alguém sexy andando pela rua ou um urso fofinho de quadrinhos anunciando mel. Embora o peso relativo que atribuímos ao que é importante possa variar de pessoa para pessoa, a única constante são os mecanismos nos quais eles se comportam. Em grande escala, a maioria das pessoas segue as mesmas tendências ao visualizar uma página da web.
Dessas tendências, há duas que discutiremos em detalhes. Em um artigo sobre princípios visuais Alex Bigman, redator de design do 99Designs, mostra como, para as culturas que lêem da esquerda para a direita, esses dois padrões são os mais comuns - e mais úteis - ao projetar o layout de um site.
O primeiro, o F-Pattern, é usado principalmente para texto (mas pode ser adaptado para outros propósitos). O segundo, o Z-Pattern, pode ser usado para qualquer layout visual. Vamos explicar os diferentes prós e contras para cada um abaixo.
Padrão F
O padrão F é a tendência de visão que surge em páginas carregadas de texto, geralmente blogs, fontes de notícias, artigos etc.
Quando confrontados com um bloco de palavras, a maioria dos leitores primeiro digitaliza uma linha vertical no lado esquerdo do texto, geralmente procurando palavras-chave ou pontos de interesse nas frases iniciais do parágrafo. Por fim, o leitor encontra algo de que gosta e começa a ler normalmente, formando linhas horizontais. O resultado final é algo que se parece com as letras F ou E.
Jakob Nielson, do Nielson Norman Group, conduziu um estudo de legibilidade com base em 232 usuários que examinam milhares de sites. De sua pesquisa, ele gravou o que acredita ser as implicações práticas do padrão F:
- Os usuários raramente lerão cada palavra do seu texto.
- Os dois primeiros parágrafos são os mais importantes e devem conter o seu gancho.
- Comece parágrafos, subtítulos e marcadores com palavras-chave atraentes.
Como sempre, o canto superior esquerdo é o mais importante, pois é onde começam todas as culturas de leitura da esquerda para a direita. O usuário geralmente lê horizontalmente o cabeçalho, então aqui está um bom lugar para uma barra de navegação e / ou uma frase de chamariz. Em seguida, o usuário faz a varredura vertical no lado esquerdo, até encontrar o conteúdo que lhes interessa. Por fim, o usuário termina no lado direito da página, um ótimo lugar com uma frase de chamariz ou anúncio. Apenas não deixe a barra lateral dominar o conteúdo.
Mas o F-Pattern não é um modelo - na verdade, não é uma prática exata, mas mais um guia solto compilado das tendências da maioria dos usuários. Tenha isso em mente porque o padrão F perde sua eficácia após as linhas superiores do F.
O Kickstarter usa um layout de cartão para mostrar projetos de recursos e não se tornar visualmente chato após os primeiros 500 pixels.
Por outro lado, iZettle adota uma abordagem mais convencional ao padrão F em sua página inicial. No entanto, eles conseguem evitar uma aparência modelada sobrepondo a cópia primária (“Aumente seus negócios com o iZettle”) e apelo à ação em uma imagem de fundo grande. Consideraríamos o mínimo para adaptar esse padrão de leitura ao layout da interface.
Padrão Z
Além disso, o Z-Pattern é o padrão mais simples e universal, usado popularmente em qualquer página da Web baseada em texto. O leitor primeiro faz uma varredura horizontal na parte superior, arremessa para baixo e de volta para o lado esquerdo e, em seguida, digitaliza horizontalmente novamente na parte inferior.
É importante entender o versátil padrão Z , pois aborda os principais requisitos do site, como hierarquia, branding e calls to action. Sua beleza está em sua simplicidade e um layout ideal para sites focados em um call-to-action. No entanto, para um conteúdo mais complexo ou excessivo, o Z-Pattern pode ser muito simples.
Acha que o Z-Pattern é adequado para a sua página? Veja algumas das práticas recomendadas para otimizar os benefícios:
- Plano de fundo - Mantenha o fundo onde ele pertence: no fundo. Você não quer distrair seu leitor.
- Ponto # 1 - Como ponto de partida, geralmente é onde você deseja colocar seu logotipo.
- Ponto # 2 - Enquanto a call-to-action principal deve vir mais tarde, aqui está um bom lugar para uma call-to-action secundária, pontuando uma barra de navegação horizontal. (Um bom controle deslizante gráfico ou de imagem ajudará a separar as partes superior e inferior da página, incentivando o leitor a permanecer no caminho previsível do Padrão Z.)
- Ponto # 3 - Este é um bom lugar para atrair atenção para outros links, ou, alternativamente, para levar a visão do usuário até o objetivo final: Ponto # 4.
- Ponto # 4 - Como a "linha de chegada", este é o lugar perfeito para o seu principal apelo à ação.
A primeira coisa que você deve fazer é priorizar os elementos em sua página para que você saiba quais são os mais importantes e os menos importantes. A partir daí, é apenas uma questão simples de alocá-los aos "pontos de acesso" apropriados.
Além disso, o padrão Z pode ser repetido e estendido ao longo de toda a página. Basta dar uma olhada em como Evernote zigue-zague para baixo por meio de calls-to-action e pontos de venda.
Dropbox adota uma abordagem visualmente mais simples a esse padrão de zig-zag, eliminando quaisquer imagens de fundo. Em vez disso, mais funcionalidades são incorporadas ao layout, já que uma frase de chamariz "Saiba mais" ajuda a conectar cada seção do padrão de contorno à medida que o olho percorre a página. Isso também ajuda os leitores informados a clicarem na próxima página relevante sem precisar ler toda a cópia primeiro.
Visão na previsão
Um ótimo design de interface deve ser como uma mão invisível que guia os leitores na velocidade do pensamento. O mais importante das tendências F-Pattern e Z-Pattern é que você pode colocar seu conteúdo mais importante onde o leitor irá “tropeçar” naturalmente, ao invés de tentar forçá-lo a vê-lo.
A sutileza é uma grande vantagem para qualquer layout de página, e esses padrões podem fazer a diferença entre sugerir algo para o seu leitor versus empurrá-lo para baixo da garganta.
Imagem em destaque, usa imagem do olho humano via Shutterstock.