Para onde vão os olhos do visitante de um site? Os 3 mais surpreendentes insights de um estudo de Eye-tracking (rastreamento ocular) que envolveu 200 websites.
Especializada em eye-tracking, a EyeQuant tem como missão “ensinar os computadores a ver a web como seres humanos“.

O principal objetivo dos estudos é encontrar padrões estatísticos que alimentam os modelos de atenção (é possível testar gratuitamente os pontos mais atrativos das suas páginas).

Alguns dos resultados obtidos pela empresa são surpreendentes, através de mapas de calor nas análises de cada website podemos notar alguns conceitos fortes derrubados sobre boas práticas para chamar atenção em Webdesign, por exemplo. São pontuados 3 grandes mitos quebrados pelo estudo.

Metodologia

Os dados obtidos são de um estudo que envolveu 46 pessoas comprando produtos ou utilizando serviços de 200 websites de diferentes seguimentos. Foram registradas 261.150 fixações oculares no total com os usuários olhando por 15 segundos para cada página (+ou- 6 segundos) em média.

Eye-Tracking: Para onde vão os olhos do visitante em um website.
Dispositivo usado para estudos de rastreamento ocular.

O estudo foi realizado no laboratório de Neurobiopsicologia na Universidade de Osnabrück, na Alemanha. A empresa diz que o modelo de análise de eye-tracking das páginas atinge até 90% de precisão.

Mito #1: “Rostos sempre chamam atenção imediatamente.”

Esta talvez seja uma das suposições mais universais do design sobre a atenção humana que você vai encontrar na internet: “como seres humanos, estamos naturalmente inclinados a olhar sempre qualquer rosto em primeiro lugar”.

Certo, mas aparentemente nem tanto. Existe até mesmo uma área do cérebro específica para o processamento dos rostos. Fato é que rostos chamam realmente atenção humana, porém nem sempre.

Olhamos para eles, mas bem menos do que se acredita. Veja este exemplo no mapa de calor do site da Levis.

Para onde vão os olhos do visitante em um website.
No estudo realizado, à esquerda, nota-se que os usuários estão ignorando quase que completamente os rostos. Na previsão da EyeQuant à direita, coloca-se um pouco mais de ênfase no logo, do que nas palavras do menu. Mas o grande vencedor é sem dúvidas a “manchete”, não são os rostos.
Para onde vão os olhos do visitante em um website.
Site de busca de hotel, com um casal extremamente feliz com rostos claramente visíveis. Os visitantes parecem se preocupar apenas com a caixa de pesquisa e o elemento central. No software da empresa à direita ocorre uma distração com a textura da madeira.

Ok, você ainda não se convenceu. Vamos ver mais alguns exemplos. Um belo projeto de Loja Virtual.

Lembrando que não está sendo dito que os rostos não chamam atenção ou nunca são olhados. A estatística apenas mostra que os rostos não são o principal foco de atenção como muitos defendem, veja:

Para onde vão os olhos do visitante em um website.

E quanto ao rosto guiar sua atenção para a área de interesse?

Outra suposição popular que parece fazer muito sentido: somos seres sociais e o olhar do usuário é guiado pelo olhar de outro rosto. Mais uma vez faz sentido, mas nem sempre.

Para onde vão os olhos do visitante em um website.
Página do Hotel Hilton. Os usuários vão direto para o formulário de pesquisa e verificam as ofertas inferiores, mas não prestam tanta atenção na mulher ou no título que ela observa.

O que aconteceu aqui? Hipoteticamente seria isto: ao olhar para um rosto que gera um buzz emocional, olhamos para ele mais do que nós normalmente olharíamos para outras coisas ao nosso redor.

Isso pode nos levar a conclusões totalmente equivocadas sobre o comportamento geral de uma visualização de site.

Conclusão: Rostos são poderosos emocionalmente, porém eles nem sempre atraem tanta atenção quanto nós pensamos que acontecia.

Mito #2: “Texto grande atrai instantaneamente muita atenção.”

“Textos com fontes grandes são uma ótima maneira de atrair atenção do usuário” é outra ideia bastante popular sobre como funciona a atenção online.

Entretanto, os dados do estudo mostram que este argumento normalmente não funciona. Em muitos casos, as fontes grandes ainda parecem ter um efeito negativo para atrair atenção:

Para onde vão os olhos do visitante em um website.
Site English Proof Read: A tipografia grande não funciona tão bem quanto previsto. As áreas inferiores trazem muito mais cliques.
Para onde vão os olhos do visitante em um website.
VIA Rail Canada. Os usuários tinham a tarefa de comprar uma passagem. Prontamente ignoraram o que foi anunciado pelas fontes exageradamente grandes. Note que aqui temos ainda outro exemplo de que o olhar da foto não guia a atenção dos usuários.

O que aconteceu aqui? Hipoteticamente seria isto: podem haver elementos de “Banner Blindness” ou “Cegueira de Faixa“, a propaganda é simplesmente ignorada. Ao mesmo tempo, os caracteres extremamente grandes podem ser menos legíveis para o olho humano.

Conclusão: Tipografias grandes aparecem, porém não é a forma mais segura para se atrair a atenção dos usuários. Precisamos olhar para outros métodos.

Mito #3: “A mágica palavra GRÁTIS (ou no caso deles FREE) sempre salta aos olhos.”

Fato: Economicamente falando nada vence um “GRÁTIS”. Mas será que isso significa que a palavra seria um dos primeiros elementos vistos pelo visitante de uma página? Os dados coletados no estudo dizem o contrário.

Eye-Tracking: Para onde vão os olhos do visitante em um website.
Walmart.com – O foco acaba muito maior na primeira e segunda (maior incidência no caso da previsão do software) ofertas do que na tipografia que fala do frete grátis. Até o banner lateral inferior chama um pouco mais de atenção.
Eye-Tracking: Para onde vão os olhos do visitante em um website.
Site da Victoria’s Secret. Note que tanto no estudo quanto na previsão os olhares vão quase que todos para a modelo e para a descrição do produto.

Conclusão: GRÁTIS é uma poderosa ferramenta semântica. Só não confie nela para ser seu principal argumento para chamar atenção.

Conclusões: Não existem regras de ouro. Testes sempre vencem adivinhações

Regras de ouro são divertidas. São simples. Quanto mais complexo o problema que ela vai resolver, mais atrativa vai se tornar. E atenção visual é algo bastante complexo e subjetivo, mas infelizmente não podemos limitar em um conjunto de regras simples.

O que foi feito neste estudo foi combinar uma grande quantidade de dados e gerar previsões baseadas em uma amostra inicial, que normalmente trazem uma porcentagem de acerto bem grande. É algo que você pode usar como referência e entender que algumas verdades incontestáveis podem não trazer os resultados que normalmente se espera.

Sendo assim, teste sempre. Contra a Estatística fica difícil argumentar.

A Publicação original em inglês com as imagens de mapas de calor com definição melhor é do Blog da Eyequant.

Renann Mendes
Author

Branding, Content Marketing e Comunicação. Sou Sócio-fundador do Profissional de E-commerce. Desde mar/2019 tenho atuado como consultor, liderando projetos de Branding, Comunicação e Marketing (Nox Bitcoin e Nielsen). De jan/2018 a jan/2019, liderei os times de Branding (Content Marketing, PR, Social Media e Branding), Product Marketing, área de cursos da Foxbit, fintech de criptomoedas e o projeto e primeiro ano de atuação do Cointimes. Entre ago/2016 e set/2017 atuei como head da área de Marketing da Ebit, empresa Buscapé Company, hoje Nielsen, referência em informações, certificação de lojas e inteligência de e-commerce. Entre 2012 e 2016, participei ativamente da estruturação da startup Universidade Buscapé Company, entrei na coordenação de treinamentos de E-commerce e Marketing Digital. Lá assumi também a coordenação de Marketing Digital e Conteúdo da Uni Buscapé e do Profissional de E-commerce. Desde 2013, ministro aulas de Marketing de Conteúdo para E-commerce na Faculdade Impacta e em algumas empresas de internet no formato workshop. Você pode encontrar mais informações em meu perfil do LinkedIn ou marcando um café! ;)

2 Comments

  1. Avatar

    Pena que só foram publicados estes 3 exemplos, aposto que descobriram muito mais coisas. Seria muito interessante um estudo igual a este focado apenas para ecommerce, pois há muito o que testar!

  2. Avatar
    Anderson Adorno mattede Reply

    Renann, contra testes inconclusivos dá pra argumentar sim. Dá até pra discordar.
    Utilizar o mapa de calor para medir textos curtos escritos com fontes grandes é incoerente.
    Para se ler textos mais longos e com fontes pequenas, eu levo mais tempo, logo o mapa de calor vai ficar mais destacado que os textos com fontes em destaque.
    O certo seria utilizar a técnica de rastremento de pontos de atenção, que mostra o caminho percorrido pelo usuário para ler o conteúdo da tela. Provavelmente o título grande foi a primeira coisa obervada pelo usuário, mas como é curto, ele entendeu e não precisa fixar o olhar por tanto tempo.
    Isso também vale para o texto “Free”. Até com visão periférica dá pra sacar. Não precisa focalizar durante algum tempo pra entender.
    Portanto me desculpe, mas essa pesquisa parece orientada a contradizer alguns conceitos de design, uma vez que não utiliza os recursos adequados para realizar a medição.

Write A Comment