50 :: Webdesign
Eyetracking: mapeando a direção dos olhares pelas interfaces
Elas começaram limitadas aos 640x480 pixels. Hoje,
site. Normalmente, ela tende a ignorar o que não tem
praticamente triplicaram sua capacidade de resolução
a ver com o seu objetivo e a focar naquilo que pode
em tela, tornando até mesmo os 1024x768 um padrão
de alguma maneira ajudá-la a fazer o que deseja.”
com os dias contados. Com o avanço das tecnologias
Assim, na busca por um melhor entendimento
dos monitores e a consequente queda nos preços dos
sobre como os usuários costumam direcionar os seus
hardwares disponíveis pelo mercado, o processo de
olhares pelas interfaces interativas, o eyetracking
criação e desenvolvimento de interfaces ampliou seus
surge como uma técnica interessante para pesquisar
limites, aumentando assim a capacidade de percepção
determinados comportamentos.
visual de projetos interativos. O professor João Gomes Filho, em um dos
“É importante se diferenciar um processo simples - fixação da visão - de processos complexos, que são
capítulos do livro “Gestalt do Objeto”, revela que um
os processos cognitivos no cérebro, um fenômeno de
dos princípios básicos da Gestalt diz que “o fenômeno
interpretação e entendimento. No entanto, podemos
da percepção que acontece no cérebro não é idêntico
concluir que o entendimento pode ser parcialmente
ao que ocorre na retina. Dessa forma, nossa primeira
explicado através da análise de como os indivíduos
sensação seria global e unificada, ou seja, não vemos
‘veem’ o mundo. Para tanto, o eyetracking pode ser
partes isoladas, mas sensações”.
uma ferramenta útil para explorar como indivíduos
Trazendo este contexto para o universo web,
enxergam o mundo, no nosso caso, websites e outras
será preciso entender as particularidades que podem
interfaces interativas, e pode nos ajudar em considerar
influenciar a percepção visual/leitura ocular em
o que estes indivíduos obtêm destas interfaces,
ambientes digitais. Um dos indícios para compreender
quando criam sua própria noção de um fenômeno.
este cenário, como destaca Mercedes Sanchez (www.
Exemplos: familiaridade do indivíduo com a interface,
mercedessanchez.com.br), especialista em usabilidade,
repertório, experiência de internet, movimentos,
envolve o fato de que as pessoas geralmente acessam
cores, tamanho de fontes, tipos de imagens etc.”,
um site com um objetivo (ou mais), que pode ser muito
explica Joana Andrade, coordenadora dos projetos de
bem definido ou ainda não muito claro.
pesquisa e design centrados no usuário da fhios:Brasil
“Eu posso entrar em vários sites para pesquisar
(www.fhios.com.br).
o preço de uma TV LCD de 40 polegadas, da marca X ou posso entrar em vários sites para ter uma ideia dos preços das TVs LCD de 40 ou 42 polegadas de várias
Aperfeiçoando o design de interfaces Argumentos que ajudem na definição das
marcas, porque ainda não tenho uma definição clara do
melhores estratégias no processo de concepção de
que vou querer. É esse objetivo que ‘guia’ a pessoa no
interfaces digitais. Segundo Rogério Pereira,
reportagem - Menu :: 51 reportagem - Eyetracking :: 51
arquiteto de informação da Talk Interactive (www.
ser utilizado juntamente com outras metodologias e
talkinteractive.com.br), esse seria um dos principais
técnicas, como o teste de usabilidade, onde o usuário
benefícios dos estudos de eyetracking em relação ao
efetua tarefas do sistema e nos conta o que fez, porque
design de um projeto.
fez, o que estava pensando, o que poderia melhorar
“É importante saber que essa metodologia precisa do apoio de outras etapas para que o design seja
etc.”, orienta Mercedes. “Na fhios, o eyetracking é diretamente
centrado em um público específico. Quando trabalhei
combinado com uma investigação qualitativa de
no planejamento de redesenho do portal do Ministério
usabilidade muito útil, pois revela os elementos de
da Cultura (www.minc.gov.br), existiam algumas
atração visual e os limites destes para o usuário. Em
áreas que queriam ganhar mais importância e assim
um estudo de usabilidade tradicional, o participante
utilizamos o eyetracking para comprovar quais eram
é incitado a verbalizar suas opiniões sobre a página,
os conteúdos que deveriam ganhar mais peso. Contra
obviamente que as limitações de linguagem do
números, não há argumentos.”
participante afetam sua habilidade de discursar sobre
Outra vantagem deste estudo, assim como de
a página. Através do eyetracking, é possível registrar
outras metodologias baseadas no design centrado no
o que realmente chama a atenção do participante
usuário, como ressalta Eduardo Loureiro, coordenador
(por razões boas ou não) sem limitações. Para isso,
de experiência do usuário da Mapa Digital (www.
é importante também usar o PEEP (Post Experience
mapadigital.net), é procurar entender as pessoas para
Eyetracking Protocols) - que permite aos participantes
criar produtos adequados, eficientes e usáveis.
reverem os ‘gaze trail’ (registro do caminho do
“Dessa forma, a contribuição que os estudos
olhar realizado durante o teste) para que informem
de eyetracking trazem para os projetos digitais está
ao entrevistador porque focaram sua atenção na(s)
justamente em incorporar os usuários no processo
área(s) específica(s) da página. A partir destas
de design. Eles podem servir para identificar o
análises, é possível identificar claramente os pontos
comportamento visual dos usuários de acordo com
onde se poderão programar melhorias concretas no
pontos específicos das interfaces, como percepção de
design da interface”, completa Joana.
blocos de informação e de elementos de interação, legibilidade de textos ou mesmo percepção do layout
Eyetracking na prática Para quem se interessou em pesquisar mais
como um todo, extraindo métricas específicas como
profundamente os caminhos do olhar do usuário pelas
pontos de maior destaque para os usuários e primeiro
interfaces, os especialistas destacam que definir
local de percepção. A análise dos resultados obtidos
o objetivo ou a hipótese a ser avaliada é um dos
nessas pesquisas pode gerar recomendações de
estágios fundamentais deste processo.
design para alterar os elementos a fim de melhorar a percepção visual das pessoas.” Neste debate, é importante ressaltar que o uso
“O eyetracking funciona melhor quando o objetivo é preciso. Por exemplo: um web analytics indica claramente a evasão de uma página específica
do eyetracking trará resultados ainda mais eficazes
e deseja-se entender o motivo, ou quando se
caso seja combinado com outras metodologias de
necessita comparar duas versões de uma estratégia
usabilidade. “Ele permite monitorar e registrar a
navegacional para uma página”, explica Joana.
maneira pela qual uma pessoa olha uma página, ou
“Deve-se partir de hipóteses sobre como se daria
seja, em que áreas ela fixou o olhar, durante quanto
a interação visual do usuário e de boas suposições
tempo e que caminho fez durante a exploração visual da
sobre como esta interação pode ser convertida em
página. Essas informações sozinhas não são suficientes
retorno do investimento. Neste caso, o eyetracking
para avaliar uma interface, já que elas mostram o que
pode vir como técnica complementar ao teste de
aconteceu, mas não nos dizem por que aconteceu. É
usabilidade tradicional. Isto, sem dúvida, impactará
por isso que o eyetracking não deve ser utilizado como
positivamente e contribuirá para o sucesso do
metodologia única para avaliar a usabilidade. Ele pode
projeto, seja uma escola virtual ou um site de
52 :: Webdesign
comércio eletrônico”, argumenta Luiz Agner (www.
encorajados a ‘pensar alto’, mas com foco na tarefa
agner.com.br), professor da especialização em
em execução. O eyetracking deve usar tarefas
usabilidade da PUC-Rio.
como base, sem isso é impossível saber por que
Com o objetivo definido, a etapa seguinte envolverá a seleção minuciosa de quem vai participar desta pesquisa. “É imprescindível
participantes estavam olhando para determinada parte da página”. Após a captura do movimento do olhar, a
que os indivíduos ‘corretos’ sejam recrutados,
recomendação é que o usuário possa descrever
entendendo que a ‘bagagem’ do participante
porque focou sua atenção em partes específicas
deve ser considerada. Ao definirmos a ‘bagagem’,
da interface. “Essa discussão é essencial para
nos referimos a variáveis como familiaridade e
entendermos porque houve atenção para um
experiência do participante com a marca, e ao
determinado foco. Exemplo: porque aquela parte
nível de experiência de internet. Acreditamos
da página era ‘interessante’ ou ‘distraia’; ou era
que estes dois fatores influenciam diretamente o
‘muito complexa’ ou ‘confusa’. Existem infinitas
resultado de eyetracking. Então, a chave é fazer a
razões porque os indivíduos focam sua atenção
pergunta correta (identificar os objetivos) e ter os
e é só através do PEEP (ou similares técnicas de
participantes corretos”, ressalta Joana.
entrevistas) que somos capazes de encontrar tais
“Só conseguimos avaliar a interpretação que um indivíduo faz sobre uma interface a partir do momento em que a estudamos como algo completo,
explicações”, diz Joana.
A leitura em forma de “F” No blog Arquitetura de Informação, Silvia Melo
dentro de um contexto social, cultural e subjetivo.
publicou um post (http://migre.me/tCm) relatando
Apesar de a interface ser uma composição de
23 lições de um estudo realizado pelo The Poynter
elementos, estudá-los separadamente anula
Institute, envolvendo a metodologia de pesquisa
questões importantes de percepção e sensação.
através do eyetracking.
Esse é um dos motivos pelos quais os arquitetos
Assim como outros estudos da área (http://
de informação não podem se isentar de questões
migre.me/tCt), a indicação é que boa parte dos
de design e identidade visual. Os próprios testes
usuários tem um comportamento de leitura ocular
de usabilidade ou de eyetracking podem ser
em forma de “F”. Assim, na hora de trabalhar
grandemente influenciados por essa percepção
com áreas privilegiadas, alguns detalhes serão
visual do todo, perdendo parte da validade quando
fundamentais para se garantir o equilíbrio na
são feitos em protótipos em tons de cinza ou quando
composição das interfaces digitais, de maneira que
o recrutamento não é feito de forma adequada”,
ela fique, ao mesmo tempo, criativa e inovadora,
alerta Fabricio Teixeira, arquiteto de informação da
sem perder a simplicidade e a funcionalidade no
AgênciaClick (http://clickaqui.agenciaclick.com.br/).
processo de experiência do usuário.
Com o recrutamento adequado dos
“Essa área privilegiada do ‘F’ já é usada hoje
participantes, Joana explica que o próximo passo
em grande parte dos sites para o posicionamento de
será a aplicação das entrevistas, que devem ser
elementos de navegação (menus superiores e/ou na
feitas com alguns cuidados. “É importante que as
coluna da esquerda), mas também pode ser usada
variáveis, durante a condução das entrevistas, sejam
para guiar o processo cognitivo da mensagem que
limitadas o suficiente para assegurar que todos os
precisa ser passada. Em sites de startups gringas,
participantes estejam ‘vendo’ o material de estudo
vemos esse modelo do caminho do olho sendo
de forma similar. Sendo assim, é importante que a
seguido à risca, pois ao apresentar um novo serviço
exposição às páginas seja consistente. O eyetracking
a mensagem precisa ser sintética e objetiva. Em
é uma ferramenta muito sofisticada que captura
portais de conteúdo, vemos as recomendações do
milissegundos de exposição de uma página ao olhar,
eyetracking sendo aplicadas no posicionamento dos
para isso é vital que a exposição inicial seja idêntica
banners, já que também dos relatórios de eyetracking
a todos os participantes. Eles também devem ser
vêm a sugestão de que os usuários simplesmente os
reportagem - Eyetracking :: 53
54 :: Webdesign
ignoram. Mas essa regra do ‘F’ vale principalmente para os primeiros acessos de um usuário a um site. Quando você abre o seu Gmail, por exemplo, certamente você olha direto para o topo de sua lista de e-mails, já que conhece bem o restante daquela interface”, diz Fabricio. “Estudos como o eyetracking e outros, ao apontar o que realmente ocorre com os usuários na sua interação com os produtos, abrem um campo criativo enorme ao design, desafiando-o a solucionar problemas com base em fatos concretos e não em pressuposições corriqueiras baseadas no senso comum das equipes e do cliente. Ao demonstrar que os leitores on-line ignoram banners, focando neles apenas por uma fração de segundos, esses estudos desafiam todos os designers e comunicadores a serem mais criativos e a respeitar os limites cognitivos dos usuários. Por exemplo, criando bons anúncios textuais e posicionando-os próximos ao conteúdo relevante, sem irritar os usuários com ações não solicitadas por eles”, acrescenta Luiz. Para finalizar, Mercedes lembra que a construção de interfaces tem que ser focada em quem vai usá-la, para que se alcance o retorno esperado. “Os profissionais envolvidos na criação e desenvolvimento têm hoje à disposição informação séria e confiável sobre como o usuário lê na internet, que padrões de comportamento são relevantes, quais os princípios da usabilidade que precisam ser respeitados, enfim, há uma série de dados que estão aí para todos. O dever dos profissionais é se atualizar e utilizar todo o conhecimento disponível para realizar seu trabalho. Mas não há uma receita de bolo a ser seguida. Cada projeto tem as suas particularidades e é função do profissional avaliar os objetivos a serem alcançados, o escopo e o público-alvo, junto com o conhecimento e experiências adquiridos, para tomar as decisões. E o principal: envolver o usuário nas etapas de criação e desenvolvimento. A palavra final, se o balanço criativo & inovador / prático & fácil de usar é adequado, é do usuário. E quando a palavra final do usuário é positiva, o projeto está no caminho certo para o sucesso”.
Dicas de leitura Fontes: Eduardo Loureiro, Fabricio Teixeira, Joana Andrade, Luiz Agner, Mercedes Sanchez
Sites Artigo do “No Solo Usabilidad” (http://migre.me/tF9) Artigo sobre eyetracking: Webinsider (http://migre.me/tFs) Artigos da Smashing Magazine (http://migre.me/tF6)
Livros “Eye Tracking Methodology: Theory and Practice”
Artigos sobre eyetracking: Jakob Nielsen (http:// migre.me/tFe) Blog do Alex Horstmann (http://migre.me/tFA)
Autor: Andrew T. Duchowski
Estudo de Eyetracking feito pelo Google (http://
http://migre.me/tEf
migre.me/tFF)
“Eyetracking the News: a study of print and online reading”
(http://migre.me/tH8)
EyeTrack III
Autores: Sara Quinn, Pegie Stark e Rick Edmonds
Grupo Eyetracking no Linkedin
http://migre.me/tEQ
(http://migre.me/tFI)
“Eyetracking Web Usability” (sai em agosto)
Vídeo de eyetracking feito no Twitter
Autores: Jakob Nielsen e Kara Pernice
(http://migre.me/tFK)
http://migre.me/tEH
Website da Eyetools
“How People Look at Pictures”
(http://eyetools.com)
Autor: Buswell G.T.
Website da Tobii
http://migre.me/tEe
(http://www.tobii.com)