O espaço da página
Há divergências no resultado de estudos de acompanhamento do movimento dos olhos dos usuários de páginas web. Mas numa coisa os pesquisadores concordam: as informações mais importantes devem ser localizadas sem que o usuário precise usar a barra de rolagem.
■ Ao percorrer o espaço de uma página web, o movimento dos olhos dos usuários segue alguns padrões:
Segundo estudos 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 (ver 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 editoriais que mais mobilizam o público, afirma que:
◊ Os olhos dos usuários detectam primeiro os textos, especialmente as manchetes do alto à esquerda. Só depois se atêm às imagens (ver diagrama - link externo). ► Exemplo
◊ Este movimento, no entanto, pode variar em função dos estímulos que o olho recebe pelo próprio conteúdo. Se há um estímulo forte no meio da página, os usuários tendem a começar o exame por estes elementos e só depois examinam os elementos localizados 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 desenham um "F": duas linhas horizontais da esquerda para a direita, e uma linha vertical, de cima para baixo, à esquerda. (1)
O estudo de Nielsen afirma que:
◊ Os usuários raramente leem os textos linearmente, normalmente pulam palavras e frases, capturando os elementos de forma a editar um texto fragmentado, a partir do seu interesse pessoal.
◊ Como a leitura é irregular, os dois primeiros parágrafos de cada página sinalizam a informação mais importante, para que o leitor saiba 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, não as encontra e 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 área à esquerda da tela é o lugar onde grande parte dos sites apresenta suas barras de navegação principais, o que indica que os usuários podem procurar esta área justamente porque sabe que aí encontram informações importantes. Podemos também supor o contrário: porque estas áreas são mais facilmente visualizadas, elementos importantes de navegação são situados aí.
Podemos acrescentar ainda que, independentemente da sua localização, os elementos mais importantes ou os comandos mais úteis, devem ser claramente sinalizados, para que seja mais fácil encontrá-los. ► Exemplo
■ Sobre a ocupação do espaço da página Principal de cada site, 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. ► Exemplo
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%).► Exemplo
■ Independentemente da sua localização no site, quanto mais comandos e botões houver na página, é mais difícil para o usuário encontrar o que procura. ► Exemplo
O equilíbrio de espaços preenchidos e espaços em branco ajuda a realçar os elementos mais importantes, de forma que fique mais fácil localizá-los.
Assuntos relacionados
► Variações para cada usuário : Tamanho da página e resolução
► Interface : Características gerais
Referências bibliográficas
► Scrolling and scrollbars (Useit, acesso em 15.7.2006)
► The best of eyetrack III: What we saw when we looked through their eyes (Poynter Extra, acesso em 21.4.2006)
1) F-shaped
pattern for reading web content (UseIt, acesso em 21.4.2006)
2) Clickstream study reveals dynamic web (WebSiteOptimization, 29.7.2006)
► (...) Eye tracking technology has advanced to the point where it can now be taken seriously as a standard tool for usability practitioners (Human Factors International, acesso em 2.9.2006)
Mais informação sobre o assunto (links externos)
► Heurísticas para avaliação de usabilidade de portais corporativos (Documento elaborado por Cláudia Dias, extraído de sua dissertação de Mestrado, acesso em 2.11.2008)
► Cues, the golden retriever (Boxesandarrows, acesso em 6.6.2008)
► EyeTools Research - site de Greg Edwards sobre design de interfaces e de aperfeiçoamento de conteúdo a partir do acompanhamento do movimento dos olhos durante a leitura