Como direcionar os olhos dos usuários para um site

25

Existe um princípio comum na fotografia de que uma foto deve atrair os olhos do espectador. Isso é frequentemente realizado com uma linha que atravessa a foto. O reconhecimento de como o observador digitalizará sua foto geralmente é útil na composição de uma foto e a maneira como os olhos do espectador digitalizam a foto às vezes pode até mudar o significado da foto.

O que pode ser feito no design da web para levar os olhos do usuário pelo site na direção desejada, sem que o usuário precise procurar as partes certas da página?

Por exemplo, você pode querer que o usuário veja o logotipo e, em seguida, uma breve descrição do site e, em seguida, um artigo. Além de colocar esses itens em uma coluna vertical com um abaixo do próximo e remover todos os outros elementos da página, como você levaria os olhos do usuário de um para o outro?

website-design design-principles Computerish
fonte
7
Você pode estar interessado em "Eyetracking Web Usability" (2009) por Nielsen & Pernice: useit.com/eyetracking
Jari Keinänen
2
@koiyu Fui e encontrei o artigo "F" e estava prestes a publicá-lo quando percebi que você já tinha. Não posso enfatizar o suficiente o quão importante é esse hábito de leitura. Grandes projetos alinham-se com esse fluxo, e projetos ruins vão contra ele.
precisa saber é o seguinte
11
Sou um pouco contra o rastreamento ocular. Não porque não seja útil, mas porque já em qualquer projeto que eu queria fazer um teste simples de usabilidade, a filosofia do chefe e da empresa deveria fazer tudo o mais barato possível e o mais rápido possível. Realmente não acredito que, na maioria das situações, você consiga convencer a comprar um sistema de rastreamento ocular e seja capaz de anular os dados corretamente, sem a devida instrução do comportamento / psicologia humana.
Littlemad

Respostas:

8

É tudo questão de equilíbrio entre tamanho, cor e alinhamento. Com a experiência, você saberá o que e quando usar esses truques para atrair atenção. Felizmente, no site, podemos rastrear essa atenção e há muitos estudos científicos sobre esse assunto, por exemplo, existem bons dados no site de Jakob Nielsen .

Sobre o rastreamento ocular, quero dizer que, por uma questão de orçamento, e na realidade ninguém vai pagar por um dispositivo de rastreamento ocular, ou mesmo usá-lo. (Já é difícil convencer seu chefe no escritório a fazer algumas horas de testes de usabilidade em qualquer estágio do projeto ...) Pessoalmente, prefiro fazer testes de usabilidade com pessoas reais para julgar minha composição de web design. Mesmo que isso signifique pegar um amigo de uma pessoa da minha família e colocá-los na frente da tela, fazendo perguntas ou olhando o comportamento deles.

O rastreamento ocular não informa se o usuário está visualizando o que é ou não. Se eles estão frustrados hesitando ou apenas admirando a composição gráfica.

Um ótimo livro que pode ajudá-lo é a Rocket Surgery Made Easy of Steve Krug

Littlemad
fonte
5

Como koiyu mencionou no comentário, o rastreamento ocular é o que você deve buscar . Você pode criar designs com a intenção de levar os usuários ao longo de um caminho, mas a única maneira de realmente saber se você está alcançando seus objetivos é fazer um estudo de rastreamento ocular.

Dito isto, você pode achar minha resposta útil para a pergunta: Como chamar a atenção para uma área específica de um design? Não é exatamente a mesma pergunta, mas está perto.

Mais recursos de rastreamento ocular:

Serviços de rastreamento ocular:

Virtuosi Media
fonte
0

Posso pensar em duas maneiras simples de direcionar os olhos dos usuários em um site:

  1. Use uma numeração óbvia nos elementos da sua página. Você pode ver isso em várias páginas da web do site ou pode consultar este arquivo PDF em um site financeiro (embora eu ache que não seja realmente um bom exemplo).
  2. Use as setas para direcionar a atenção do usuário. Isso pode ser algo como um fluxograma. No entanto, não consigo pensar em nenhum exemplo online.
Gan
fonte
A web não é um meio estático. As setas não guiam as pessoas. Você precisa orientá-los com diferentes tamanhos e cores em um sistema ponderado.
precisa saber é o seguinte
Eu não entendo Você poderia elaborar mais sobre "flechas não orientam as pessoas" e "orientam-nas com diferentes tamanhos e cores em um sistema ponderado"?
Gan