Texto_Aula 6.2 Prof. Ronaldo Barbosa Técnica de avaliação de interfaces: Eyetracking. 4 Técnica de teste de interfaces: Eyetracking

Tamanho: px

Começar a partir da página:

Download "Texto_Aula 6.2 Prof. Ronaldo Barbosa Técnica de avaliação de interfaces: Eyetracking. 4 Técnica de teste de interfaces: Eyetracking"

Maria de Begonha Esteves Medina
6 Há anos
Visualizações:

1 Texto_Aula 6.2 Prof. Ronaldo Barbosa Técnica de avaliação de interfaces: Eyetracking 4 Técnica de teste de interfaces: Eyetracking Sempre que estamos testando uma interface, buscamos responder: Quem são os usuários? O que os usuários estão tentando fazer? Para responder a essas questões, existem técnicas diretas que são aplicadas para observar a relação de usuários com interfaces. Chamamos de eyetracking o caminho que o olhar de uma pessoa segue ao percorrer a tela de um computador. Eyetracking pode ser construído no monitor de computador e utiliza o suporte de um software para armazenar o caminho por onde passa o olhar do usuário, enquanto ele olha e navega em um site. A tecnologia é uma combinação de câmeras apontadas para os olhos dos usuários, usa-se também luz infra-vermelha. Uma das ideias do eyetracking e do IHC em geral é que as empresas devem encontrar um balanço entre o que elas querem que os usuários façam no site e o que os usuários realmente querem fazer. São exemplos de experiências neste sentido: - Reação dos usuários para comprar um produto: interessaria a uma e- commerce de varejo, por exemplo. - Reação para realizar uma tarefa específica: selecionar um curso em uma faculdade. A técnica eystracking só mede o que as pessoas vêem, não se elas gostam ou não do que vêem. Às vezes um elemento que não é visto pode ser algo positivo, por exemplo, elementos de navegação que se repetem em todas as telas. Por outro lado, pessoas podem olhar demais para um parágrafo para tentarem entender o que está escrito, o que seria algo negativo. Assim, pode ser bom ou ruim um elemento ser ignorado ou olhado em excesso na tela do computador. Isso significa que a técnica de eyetracking deve considerar as intenções dos usuários e o impacto da usabilidade de seus comportamentos. Duas formas de registro de eyetracking são utilizadas: heat maps (mapas de calor) e gaze plots (algo como pontos de vizualização). Heat maps - as áreas vermelhas são aquelas em que os usuários olham mais, as amarelas, um pouco menos e as azuis as que eles olham menos. A metáfora de

cores significa, cores quentes zonas quentes, zonas frias. A área cinza não foi olhada. Mapas de calor significam tanto o número de "olhadas" quanto o tempo de duração delas.

2 cores significa, cores quentes zonas quentes, zonas frias. A área cinza não foi olhada. Mapas de calor significam tanto o número de "olhadas" quanto o tempo de duração delas. Na prática essa diferença não é muito significativa quando se tem muitos usuários participando da experiência. Exemplo de heat maps - Gaze plots - apresentam a visita de um só usuário na página. Quanto maior o balão, maior a duração da mirada, as linhas representam o movimento de um ponto a outro da tela. O número representa a sequência da mirada. Ë bom lembrar que as pessoas não enxergam o que está no caminho quando se movimentam de um ponto a outro da tela.

Exemplo de gaze plots. http://www.cigresearch.

3 Exemplo de gaze plots. Na figura abaixo, temos um exemplo de como como os usuários olham toda a interface encorajados pelo design simples da interface. Exemplo de heat maps.

Outro exemplo muito interessante demonstra como os usuários não olham para tabelas em uma interface. Está é uma página dedicada a jogadores de basquete norte-americanos.

4 Outro exemplo muito interessante demonstra como os usuários não olham para tabelas em uma interface. Está é uma página dedicada a jogadores de basquete norte-americanos. A pergunta é: para onde os usuários olham nesta interface? Website a ser testado com eyetracking, dedicado a jogdores de golfe americanos. Nielsen (2010). Observe o heat map desta interface na figura a seguir.

5 Nesta interface, a análise do heat map demonstra que os usuários não lêem as tabelas. Nielsen(2010) A mesma interface quando submetida ao eyetracking Neste exemplo, que as pessoas estão muito mais interessadas no texto do que praticamente nas informações da tabela! Curiosamente este site revela outros problemas como o fato de chamar a atenção para vários elementos que simplesmente não tem qualquer relação com o jogador. Falta de prioridade, abreviações indefinidas, texto indefinido e links para informações não relevantes, tornam este site difícil pra as pessoas encontrarem o que elas precisam.

6 Glaze Plots mostram a preferência dos usuários em ler o texto, mas só a primeira paarte dele qu edeveria ser a mais importante. Nielsen (2010). Outros exemplos:

7 Nielsen (2010) Qual a conclusão neste caso? Observe mais este outros exemplos que apresentam a interface e a técnica de eyetracking aplicada a elas.

8 Nielsen (2010) Neste exemplo, fica claro que o espaço da tela não está sendo bem aproveitado, não atrai os olhos ou provê informação útil. Imagens tomam 33% da tela mas não geram calor: um sério desperdício de espaço e erro de design.

Desta vez a interface foi submetida ao eyetracking tanto com heat maps quanto com glaze plots.

9 A informação mais importante está na parte de baixo à direita, a promoção no site não é efetiva. Pessoas olham a imagem barulhenta, não os itens no texto, em si. Vamos a outro exemplo. Desta vez a interface foi submetida ao eyetracking tanto com heat maps quanto com glaze plots. Nielsen (2010) Nesta tela, o usuário mira o menu esquerdo e logo salta para o menu direito. Como o lay-out da página distribui os menus à esquerda e à direita, o menu na parte superior é ignorado!

geral de construção de interfaces no sentido de priorizar par onde os usuários efetivamente olham e prestam atenção.

10 Uma lição importante do design é tirada deste exemplo: as pessoas sempre devem ter a opção de parar uma animação. Nielsen (2010) Para entender mais ainda o eyetracking, veja a interface abaixo, que apresenta uma especie de princípio geral de construção de interfaces no sentido de priorizar par onde os usuários efetivamente olham e prestam atenção. Neste próximo exemplo, os heat maps sinalizam o que é uma regra de lay-out de páginas: a famosa letra F, comum nas visualizações de interfaces.

Nielsen (2010) Bibliografia BARBOSA, S.D.J. Interação humano-computador. Rio de Janeiro: Elsevier, 2010. NIELSEN, J; PERNICE, K. Eyetracking Web Usability. Pearson, 2010. PREECE, J., Rogers, Sharp, H.

11 Nielsen (2010) Bibliografia BARBOSA, S.D.J. Interação humano-computador. Rio de Janeiro: Elsevier, NIELSEN, J; PERNICE, K. Eyetracking Web Usability. Pearson, PREECE, J., Rogers, Sharp, H., Benyon, D., Holland, S., Carey, T. Design de interação: além da interação humano-computador. Porto Alegre: Bookman, 2013 ROCHA, H.V.; BARANAUSKAS, M.C. Design e Avaliação de Interfaces Humano- Computador. Campinas, SP:NIED/UNICAMP, 2003.

Documentos relacionados

Texto-Aula 3.1 Prof. Ronaldo Barbosa Estilos de Interação em IHC: manipulação direta e preenchimento de formulários

Texto-Aula 3.1 Prof. Ronaldo Barbosa Estilos de Interação em IHC: manipulação direta e preenchimento de formulários 1 - Introdução Observe a figura abaixo que retrata a interação usuário-computador:???