Como montar um protótipo para teste de usabilidade remoto?

Falamos das principais ferramentas para criar protótipos, com dicas práticas. ;]

Homem com tablet na face

Okay, você já viu onde fazer o teste de usabilidade, viu que o participante fica mais à vontade com testes remotos, já aprendeu quais tarefas funcionam nos testes e quantos participantes chamar. Agora é só fazer o protótipo e rodar o teste. Ixi! Mas por onde começar?

Teste sem moderador = Alugar um sítio

Em testes remotos, você precisa entregar o protótipo para o participante testar. Para isso, você pode pedir para ele baixar seu protótipo, acessar um link, enviar o código fonte e pedir para ele compilar e gerar o executável — Não, espera! Não pode, não!

Para seu teste funcionar bem, você precisa concentrar os esforços cognitivos do participante na realização da tarefa. Todo o resto deve ser o mais simples possível. Vou ilustrar a situação de um teste remoto, contando uma historinha fictícia, mas muito familiar:

Uma vez peguei um sítio no Airbnb (tô fazendo publicidade e SEO de graça, me dá desconto, povo!). Peguei a chave com o dono, anotei o número de telefone dele e fui. Chegando lá, fui tomar um banho e… cadê a água?! Liguei pro dono e ele não atendia… Bom, vou tomar banho de caneca, não tem jeito!

Fui pra cozinha, botei água na caneca e liguei o fogão — ou tentei. O cabo na tomada não ajudava em nada a soltar as faíscas para acender a chama. Procurei, procurei e achei uma caixinha de fósforo em cima da geladeira. Enfim, banho tomado e fim de dia para mim.

Pessoa acendendo um fogão usando um fósforo.
Quem nunca passou por isso? Os pelinhos da mão que se cuidem!

No dia seguinte, fui ligar a luz e ouvi uns barulhos estranhos na caixa. Em seguida, a lâmpada queimou — PAF! Era só o que me faltava… Peguei meu celular e vi a seguinte mensagem:

Ô, Christian, esqueci de avisar! Pra você tomar banho, tem que ligar a bomba do poço, lá fora. E se for usar o fogão, tem que usar um fósforo, tá em cima da geladeira. Abraços!

Mas e a lâmpada? Adivinha quem recebeu zero estrelas (ele) e quem está com cabelos a menos pela raiva que passou (eu)?

Pois é. Coisas do dia-a-dia, que achamos que vai funcionar como esperamos e não funcionam, tiram a gente do sério. E como adivinhar ou descobrir cada truquezinho para seguir adiante?

Na história que contei, o dono do sítio não estava presente e não consegui falar com ele durante minhas dificuldades. Ele poderia ter deixado uma mensagem pra mim no aplicativo, mas é quase certo que eu esqueceria. Esqueceria até que ele enviou essa mensagem, me conhecendo bem. Ele poderia deixar um manual na entrada da casa, mas eu poderia nem ler — ou até ler, mas sem prestar muita atenção.

Mas uma coisa funcionaria muito bem: ele deixar post-its em locais estratégicos, oferecendo explicações em um contexto — um próximo do box do chuveiro e outro próximo do fogão.

Assim como na história, em testes remotos não dá pra contar com ninguém para pedir ajuda ou tirar dúvidas. E quando o teste é feito em protótipos, com várias partes inacabadas, o participante precisa saber a diferença entre algo que não está pronto e algo que está pronto, mas não está funcionando como deveria.

Para isso, precisamos oferecer um bom feedback para cada ação que o participante possa tomar. Cada ferramenta de protótipo pode fazer isso de maneira diferente. Vou separá-las em categorias, diferenciando-as por como interagem com o participante.

Os completões (interações completas)

Existem algumas ferramentas de design que podem entregar um protótipo de alta fidelidade. Isto é, uma versão muito próxima do produto final — tanto em qualidade visual, quanto em suas interações. É possível construir cada microinteração: preencher formulários, simular dados e tabelas dinâmicas, animações de elementos etc. Claro que tudo tem um custo, que em geral vem em forma de preço e complexidade de uso. Entram nessa categoria:

Com tantos recursos dá para testar quase tudo. Também fica fácil “conversar” com o testador; basta inserir um aviso em todas as funcionalidades não implementadas. Pode ser uma mensagem simples como:

“Ops, essa área ainda não está pronta, mas não se preocupe. Já anotamos como você faria e agora é só procurar outra opção”.

O importante é que seja uma explicação em contexto, assim como o post-it da história.

GIF mostrando um protótipo navegável com mensagem explicativa
Protótipo construído com Axure RP, a ferramenta que o TESTR utiliza.

No TESTR, usamos o Axure RP. Com ele, não precisamos nem dar um pulinho no Photoshop para cortar uma imagem ou abrir o Illustrator e desenhar um vetor. As principais funcionalidades gráficas estão todas aí. Além disso, também conseguimos disponibilizar uma URL para testar o protótipo onde precisar (desktop, mobile), através do AxShare.

Os praticões (interações limitadas)

Algumas ferramentas de protótipo focam em descrever as interações através de imagens estáticas. São bem práticos, porque ajudam a juntar design visual e protótipo navegável.

No entanto, com estas ferramentas nem tudo fica “fiel” ao site final. O participante precisa clicar em certas áreas da tela para avançar para outra tela. Não é possível ver o participante digitar algo, interagir com um slider ou switch ou realizar ações mais complexas. Entram nessa categoria:

Essas ferramentas são distintas entre si, mas nenhuma delas é capaz de um protótipo de alta fidelidade (pelo menos no quesito interação). Mas tudo bem. Podemos ir muito longe com essas ferramentas — o segredo é que cada microinteração seja simulada em uma tela diferente. Calma, para preencher o nome do testador não precisa simular cada tecla do teclado; você pode preencher o campo inteiro, com dados pré-definidos.

O problema, no teste de usabilidade, é que isso pode confundir o participante — ainda mais se ele tiver pouco poder de abstração (e é legal testar com pessoas assim também, porque cada desafio traz reflexões valiosíssimas).

Por padrão, essas ferramentas indicam as áreas com interação (fazendo um highlight em torno delas), o que elimina boa parte da exploração do participante. Idealmente desabilitamos essa funcionalidade em testes de usabilidade.

GIF que mostra os highlights.
GIF que mostra como os highlights nem sempre são claros.

Lembra do fogão? Então, imagine que você abre a válvula do gás, aí o fogão liga — mas é outra boca que acende. Que doidera está acontecendo? Mas aí uma das bocas pisca num azul bem chamativo e você acha que só aquela vai funcionar. Sequer verifica se outras bocas estão funcionando e se limita a usar só essa — e o medo de tentar usar o forno…?

A aqui é a mesma: coloque mensagens nas partes que não funcionam e, também, onde o protótipo toma uns atalhos e faz ações no lugar do participante. Pode ser algo como: “Preenchemos o campo por você. Agora pode continuar com sua tarefa”.

GIF que mostra os highlights.
GIF com 2 partes: clica no campo de preenchimento, sobe teclado > clica no teclado, preenche o campo e mostra mensagem sutil de que o teclado ainda não funciona.

Dá um trabalhinho a mais. Mas dessa forma, o testador não é pego de surpresa, não fica distraído ou estressado e pode se focar em fazer o teste sem precisar de ajuda. Empoderamento aos testadores!

Botando a mão na massa

Para recapitular:

  • Testes remotos não têm uma pessoa moderando e guiando os testadores;
  • Testes remotos não moderados precisam que seu protótipo tenha alguns ajustes para se comunicar com o participante;
  • Você pode atingir isso aumentando a fidelidade nas interações e/ou com mensagens claras (feedback) sobre o que não funciona, dadas em contexto;
  • As ferramentas completas facilitam a criação de interação e aumento de fidelidade, mas em geral são mais difíceis de se dominar;
  • As ferramentas mais simples são mais ágeis e fáceis de se usar, mas podem trazer desafios na hora de dar um bom feedback. No InVision, por exemplo, é necessário um cuidado maior para evitar algumas configurações padrão, como o highlight, o acesso a todas as telas e a possibilidade de se comentar as telas.

Agora que você já viu como criar um protótipo na medida para um teste remoto basta escolher a ferramenta que você tiver mais afinidade e iniciar seus estudos!

Em breve vamos escrever uma série com dicas específicas para algumas das ferramentas citadas aqui. Fique de olho! ;)


Leia mais sobre testes em protótipos: Teste de usabilidade em protótipo: como testar e o que você descobre em cada etapa.

Veja um case de teste em protótipo com a Saraiva: Fomos ao Interaction South America: testes em protótipo com a Saraiva.

Conheça o TESTR, plataforma para testes ágeis remotos — de usabilidade à qualidade de software! — Ir para site oficial.

Créditos para a foto da capa: Ed Gregory, encontrado no site PEXELS.