Como direcionar os olhos dos usuários para um site

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?

É 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

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:

• Eye Tracking: Melhor maneira de testar a usabilidade de aplicativos avançados
• Diretrizes de design de formulário da Web: um estudo atraente
• Estudo de rastreamento ocular revela 12 táticas no site
• Uma pergunta do StackOverflow sobre como configurar seu próprio rastreador ocular com uma webcam

Serviços de rastreamento ocular:

• GazeHawk
• SimpleUsability
• UserCentric
• UserVision

Aqui está uma dica rápida: inclua uma imagem de uma pessoa olhando ou apontando para seu objeto de destino (por exemplo, um produto, um botão de inscrição). Aqui está um exemplo de um anúncio, mas eu já vi a mesma tática nas páginas da web:

(Fonte: http://www.grokdotcom.com/2007/10/04/how-a-pretty-face-can-push-visitors-away/ )

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.