Mudanças dinâmicas passam despercebidas em interfaces Ajax

Três fenômenos que explicam mudanças despercebidas

A adição de funcionalidade dinâmica a páginas web com tecnologias como Ajax dá grande flexibilidade para atualizar conteúdo sem recarregar a página inteira. Segundo William Hudson, estrategista de experiência do usuário e fundador da Syntagm Ltd, essa interatividade traz um problema central: os usuários podem não perceber as mudanças feitas. Três fenômenos perceptivos explicam por que atualizações até evidentes passam completamente despercebidas.

Cegueira por desatenção. O experimento do gorila invisível, conduzido por Daniel Simons e colegas nos anos 1990, mostrou que, ao contar os passes de bola de dois times - um de camisas brancas e outro de pretas -, aproximadamente metade dos espectadores não notou uma pessoa fantasiada de gorila que entrou no centro da cena, bateu no peito por vários segundos e saiu. O fenômeno se acentua em situações de multitarefa, fadiga ou trabalho sob condições exigentes. Para o design de interfaces, a implicação é que mesmo mudanças grandes e importantes na tela podem passar totalmente despercebidas quando o usuário está focado em uma tarefa.

Cegueira de mudança. A pesquisa de Ron Rensink nos anos 1990 mostrou que as pessoas falham em detectar alterações de uma cena visual, sobretudo quando a mudança ocorre durante uma breve interrupção ou "campo em branco". É o que acontece nas recargas tradicionais de página no navegador: a tela fica momentaneamente vazia antes de exibir o conteúdo atualizado, e nesse intervalo os usuários se tornam muito ruins em identificar o que mudou, mesmo diante de modificação substancial e à vista. Hudson demonstra com imagens alternadas de uma rua espanhola, em que uma palmeira inteira aparece e desaparece; sem o intervalo em branco, a mudança seria imediatamente óbvia.

"Aposta atencional". O terceiro desafio ocorre quando designers esperam que os usuários percebam mudanças em vários locais da tela ao mesmo tempo - uma aposta de que olharão no lugar certo, na hora certa. Em teste de usabilidade de um site do governo britânico, o clique em um item de menu expandiu simultaneamente a navegação à esquerda e atualizou a área de conteúdo principal. De forma consistente, os usuários notaram a mudança de conteúdo e não viram a expansão do menu, e tiveram dificuldade para encontrar o segundo subitem, "The legal framework".

Como tornar as mudanças visíveis

Três características ajudam a garantir a detecção das atualizações: tamanho, já que mudanças maiores atraem mais atenção que ajustes sutis; cor, pois cores claras e contrastantes rompem a cegueira por desatenção melhor que tons suaves; e animação, porque o movimento aciona a visão periférica. Muitos sites usam mensagens que aparecem e desaparecem - boa prática, desde que haja também um indicador persistente da mudança.

O posicionamento importa tanto quanto a forma. Em teste de usabilidade para o Barclays Bank, usuários sistematicamente não notavam botões de navegação no canto inferior direito da página, e o banco precisou acrescentar instruções textuais explícitas para clicar no botão verde seguinte - instruções que seriam desnecessárias se os botões estivessem diretamente abaixo dos campos do formulário. O cursor do mouse oferece uma oportunidade específica para aplicações de desktop, pois colocar o feedback imediatamente ao lado dele praticamente garante visibilidade; a estratégia não se aplica a telas de toque, onde os dedos obstruem a visão.

Armadilhas comuns

Atualizações dinâmicas podem piorar a experiência quando ignoram a percepção. Hudson encontrou um site de compras em que clicar em "add to basket" atualizava um contador no canto superior direito, longe de onde o usuário trabalhava, no canto inferior direito: o feedback era sutil e distante demais para ser notado, e o Ajax não teria melhorado nada, porque o problema era de posicionamento, não de tecnologia. Outro site exibia um resumo da cesta em pop-up ao clicar no ícone, mas sem permitir finalizar a compra; o usuário precisava descobrir um pequeno link "view/edit order" - Ajax usado para criar barreiras em nome do efeito visual.

A conclusão é que adicionar funcionalidade Ajax não melhora automaticamente a experiência: é preciso implementá-la com atenção às limitações da percepção humana, tornando as atualizações grandes, coloridas ou animadas e posicionando o feedback onde o usuário está olhando.