Há divergências nos resultados de estudos de acompanhamento do movimento dos olhos dos usuários de páginas web ou telas de aplicativos. Mas em uma coisa os pesquisadores concordam: as informações mais importantes devem ficar localizadas sem que o usuário precise usar a barra de rolagem.

Ao percorrer o espaço da tela, o movimento dos olhos segue alguns padrões:

Segundo estudo do Poynter Institute, a maioria dos usuários na cultura ocidental olha a página no sentido diagonal, a partir do alto à esquerda, em direção à parte inferior direita, e depois se dirige para o alto (esquema com movimento dos olhos em The best of eyetrack III: What we saw when we looked through their eyes).

O estudo, que visa à verificação dos elementos que mais mobilizam o público, afirma que:

Os olhos detectam primeiro os textos, especialmente do alto à esquerda. Só depois procuram as imagens.

Este movimento pode variar em função dos estímulos do conteúdo. Se há um estímulo forte no meio da página, os olhos tendem a começar o exame por estes elementos e só depois examinam os elementos nas bordas.

Jakob Nielsen, em estudo com objetivos semelhantes, afirma que os usuários de modo geral leem as páginas de acordo com um padrão de movimentos que desenha um “F”: duas linhas horizontais da esquerda para a direita, e uma linha vertical, de cima para baixo, à esquerda. (1)

Seu estudo conclui que:

Os usuários raramente leem os textos linearmente, normalmente pulam palavras e frases, capturando os elementos de modo a editar um texto fragmentado, a partir de seu interesse.

A tela acima, do iFood, está dividida entre a imagem e o texto. O texto está dividido entre chamada e dados. A fragmentação das informações torna mais rápida a leitura de ideias simples.

Como a leitura é irregular, os dois primeiros parágrafos de cada tela sinalizam a informação mais importante, e o leitor sabe de imediato se o texto o interessa ou não.

Itens assinalados com bolinhas, quadradinhos, estrelas, atraem a atenção dos olhos durante o movimento vertical, à esquerda.

Embora os dois estudos apontem para desenhos de movimentos de olhos diferentes (o que deve ou deveria ser discutido entre os dois centros de pesquisa), ambos apontam para a importância do espaço do alto, ou da área “acima da dobra”, e também para a área situada à esquerda da página.

A importância do alto da página pode parecer evidente, mas não é. É comum encontramos informações importantes na base de páginas longas, sendo que a maioria dos usuários, não encontrando de imediato o que procura, vai em busca outros sites.

Não só as informações sobre conteúdo, mas também os principais elementos de navegação devem ficar acima da dobra: apenas 23% dos links localizados abaixo desta área são selecionados. (2) A partir da expansão do uso de smartphones e tablets, os usuários passaram a se dispor a usar mais as barras de rolagem.

O alto da tela é o lugar onde muitos sites apresentam suas barras de navegação, posicionando aí as informações importantes, porque é mais visualizado logo após o acesso.

Podemos acrescentar ainda que, independentemente da sua localização, os elementos mais importantes ou os comandos mais úteis, devem ser claramente destacados, para que seja mais fácil encontrá-los.

Sobre a ocupação do espaço da página Principal, ressaltamos que, por ser um local de convergência do deslocamento, um ponto indicador de percursos, pode por isto ter mais ferramentas de navegação do que conteúdo.

Como decorrência, o espaço das páginas internas pode ser mais ocupado pelo conteúdo do que pelas ferramentas de navegação (de 50 a 80%) .

Independentemente da sua localização, quanto mais comandos e botões houver na tela, é mais difícil para o usuário encontrar o que procura.

O equilíbrio de espaços preenchidos e espaços em branco ajuda a realçar os elementos mais importantes, que ficam mais fáceis de localizar.

A página acima mostra informações com tratamento diversificado, com uma animação “abaixo da dobra”. O espaço em branco valoriza as imagens e as chamadas em destaque.

(Última atualização 29.8.2019)

Referências

1) F-shaped pattern for reading web content (Alertbox, acesso em 21.4.2006)

2) Clickstream study reveals dynamic web (WebSiteOptimization, 29.7.2006)