Este documento apresenta uma discussão sobre avaliação de interfaces com o usuário através de prototipação. Apresenta conceitos de prototipação, tipos de protótipos, vantagens e desvantagens. Também discute avaliação de usabilidade, incluindo tipos de testes, análise heurística, papéis em testes e como conduzir testes. Finaliza com uma atividade prática de prototipagem e teste de usabilidade.

1. Avaliação de interfaces com o
usuário através de prototipação
Livia Gabos – MStech - @liviagabos
Talita Pagani – UFSCar - @talitapagani
Setembro/2011 1
de 49

2. Agenda
• Apresentação
• Parte I – Prototipação
• Parte II – Avaliação de Usabilidade
• Parte III – Atividade Prática
• Referências
2
de 49

3. Apresentação
• Livia Gabos
• Bacharel em Sistemas de Informação pela Unesp/Bauru
• Analista de teste na Mstech – sede Bauru
• Trabalha com acessibilidade, usabilidade e experiência do usuário
• Artigos aceitos no ICEIS e SBQS
3
de 49

4. Apresentação
• Talita Pagani
• Bacharel em Ciência da Computação pela USC-Bauru
• Mestranda em Ciência da Computação na UFSCar
• Designer de Interface desde 2005
• Trabalha com usabilidade, qualidade em uso, CSS e HTML
• Editora regular do site Tableless – Padrões Web
4
de 49

5. Parte I
PROTOTIPAÇÃO 5
de 49

6. Conceito
• O que é “Prototipação”?
• Projeto rápido da interface e das funcionalidades
• Representação dos requisitos
• Concepção de fragmentos do sistema
• Artefato construído iterativamente
• Foco: avaliar resultados obtidos com o protótipo
6
de 49

7. Por que prototipar interfaces?
A principal motivação para a construção de protótipos é
avaliar interfaces com o usuário de forma a diminuir a
carga de trabalho cognitivo, aumentar a facilidade de uso
e auxiliar o usuário a realizar tarefas que resultam na
realização de seus objetivos.
7
de 49

8. Classificação
• Quanto ao detalhamento
• Baixa Fidelidade
• Média Fidelidade
• Alta Fidelidade
8
de 49

9. 9
Protótipo de Baixa Fidelidade de 49
Fonte: http://www.uxbooth.com/blog/tools-for-sketching-user-experiences/

10. 10
Protótipo de Média Fidelidade de 49
Fonte: http://usabilidoido.com.br/quanto_mais_simples_o_wireframe_melhor.html

11. 11
Protótipo de Alta Fidelidade de 49
Fonte: http://www.benjaminkoh.com/gigabit.html

12. Classificação
• Quanto ao reuso
• Evolucionário
• Throw-away
12
de 49

13. Classificação
• Quanto à função
• Apresentação
• Autêntico
• Funcional
• Sistema Piloto
13
de 49

14. Como é realizada
Análise dos
resultados ou Coleta de
refinamento requisitos
do protótipo
Avaliação Planejamento
(Cliente e/ou e Projeto do
usuário) Protótipo
Construção 14
do Protótipo de 49

15. Vantagens e Desvantagens
Elucida requisitos
Melhora a qualidade da
especificação
Imprecisão sobre o tempo do
projeto
Omissão de comentários
15
de 49

16. A prototipação em papel
• Uma das formas mais utilizadas de prototipação rápida
• Baixa fidelidade
• Simples confecção
• Fácil execução
• Economia de tempo e dinheiro
• Rápida incorporação de feedback no momento de
produção
16
de 49

17. A prototipação em papel
• 6 Mitos (Spinelli; Rei, 2011)
1. “Protótipo deve ser bonito”;
2. "Só sei desenhar direto no layout";
3. "Não parece profissional";
4. "Meu chefe não irá entender";
5. "Prototipar depende da plataforma";
6. "Impossível simular interatividade com papel"
17
de 49

18. 18
Desenhando o protótipo de 49
Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/

19. 19
Desenhando o protótipo de 49
Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/

20. 20
Simulando as interações da interface de 49
Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/

21. Parte II
AVALIAÇÃO DE USABILIDADE 21
de 49

22. O que é um teste de usabilidade?
• Também chamado de avaliação empírica.
• Método para detectar problemas na interação do usuário
com um produto.
• Metodologia de avaliação de usabilidade (mas apenas
uma de muitas!)
22
de 49

23. Apenas para isso?
• Nãaaaaooo!
• Testes de usabilidade também servem para:
• Aprender sobre o comportamento do usuário
• Entender como ele se relaciona com o seu produto
• Te deixa com um “olhar afiado” para problemas de
usabilidade em geral.
23
de 49

24. O que observamos?
• Caminho utilizado pelo usuário
• Reclamações espontâneas
• Expressão facial e gestos
• Tempo de execução da tarefa
• Avaliação do site ao final
24
de 49

25. Tipos de testes
• Formativo / Validativo
• Exclusivo / Comparativo
• Qualitativo / Quantitativo
• Cooperativo / Individual
• Livre / Estruturado
• Em campo / Em laboratório
25
de 49

26. O que é feito antes do teste?
• Definição da metodologia (teste de usabilidade)
• Definição dos objetivos e da amostra
• Prototipação
• Análise heurística (vou falar daqui a pouco)
• Criação do roteiro de tarefas
• Recrutamento de participantes
26
de 49

27. Análise heurística
• Heurísticas são criadas de pesquisas
• Define-se procedimento heurístico como um método de
aproximação das soluções ideais aos problemas
• As heurísticas mais famosas foram criadas por Jakob Nielsen
• Fez uma pesquisa com 240 pessoas
• 10 heurísticas de Nielsen
Oi, tudo bem?
27
de 49

28. Análise heurística
1. Visibilidade do estado atual do sistema
2. Correlação entre o sistema e o mundo real
3. Controle versus liberdade do usuário
4. Consistência e Padrões
5. Prevenção de Erros
6. Reconhecimento ao invés de memorização
7. Flexibilidade e eficiência de uso
8. Projeto estético e minimalista
9. Suporte aos usuários no reconhecimento, diagnostico e
recuperação de erros
10. Informações de ajuda e documentação
Fonte: http://www.useit.com/papers/heuristic/heuristic_list.html 28
de 49
Vídeo legal! http://www.youtube.com/watch?v=hWc0Fd2AS3s&feature=player_embedded

29. O que é feito antes do teste?
• Definição da metodologia (teste de usabilidade)
• Definição dos objetivos e da amostra
• Prototipação
• Análise heurística
• Criação do roteiro de tarefas
• Recrutamento de participantes
29
de 49

30. Papéis em um teste
• Participante/testador
• Pessoa que está dentro da amostra definida para o estudo.
• Geralmente procuramos pessoas que não trabalham com
internet, design ou áreas relacionadas.
• Moderador
• Fica dentro da sala com o participante, passando as tarefas e
fazendo perguntas.
• Observador
• Fica fora da sala, acompanha e dá suporte ao moderador.
30
de 49

31. Papel do moderador
• Explica como vai funcionar a pesquisa
• Lê o enunciado da tarefa, no roteiro
• Anota problemas, observações
• Faz perguntas ao final
Poker Face
31
de 49

32. Papéis em um teste
32
de 49

33. Aquecimento para o teste
• Boas vindas
• Introdução
• Como funciona a pesquisa
• Falar sobre o ambiente
• “Você não está sendo testado.” “Não tem certo e errado.”
• Falar sobre o seu papel como moderador
33
de 49

34. Questionário inicial
• Serve para:
• Confirmar o perfil do testador
• Obter informações úteis
• Aquecer para as tarefas – não é para ser amiguinho!
34
de 49

35. Tarefas
• Moderador lê em voz alta o enunciado da tarefa
• Entrega os materiais que o participante vai precisar para fazer
as tarefas
• Lembre o participante que ele define quanto termina a tarefa
• Peça para ele pensar alto. Caso não aconteça naturalmente,
estimule ele a falar, fazendo perguntas.
• CUIDADO para não ser chato demais!
35
de 49

36. Aquecimento...
Voluntário? =D
36
de 49

37. Situações
Agora eu não sei o que fazer. É
pra clicar aqui?
• Você não pode responder as perguntas nem dar dicas!
• Cada vez que você explicar alguma coisa para o testador
estará perdendo uma oportunidade de descobrir um
problema ou uma falha no site.
• Também não vale deixar o testador falando sozinho. É
importante mostrar que você está interessado em tudo o que
ele diz.
37
de 49

38. Situações
Agora eu não sei o que fazer. É
pra clicar aqui?
> “Você faria isso em uma situação real, usando o site na sua
casa?”
> “Faça como você faria em uma situação real.”
> “Você acha que é?”
Evite:
“Aham” - pode parecer que você concorda
... <- ele pode se sentir desprezado ou continuar olhando para a
sua cara, esperando uma resposta.
38
de 49

39. Situações
• Testador fica em loop, clicando em algo repetidamente,
sem prosseguir.
Poker Face
RESISTA! AGUENTE!
• Faça perguntas, até que ele entenda o que está
acontecendo e consiga se virar sozinho
39
de 49

40. Situações n...
• Não dê dicas para o participante.
• Cuidado com os termos que utiliza.
• Tente que ele faça as tarefas sozinho
• Se ele desistir da tarefa, anote e se você não for usar a
informação para outras tarefas, diga a ele o que ele tinha que
fazer.
• Faça uma pergunta de cada vez.
• A tarefa só termina quando o participante falar que acabou.
• Não coloque palavras na boca do participante: “Você achou
que foi difícil, né?”
40
de 49

41. Outras questões
• O participante deve assinar um termo para a gravação de
áudio e vídeo.
• Ele deve saber que esse áudio e vídeo serão usados apenas
para a pesquisa.
41
de 49

42. Teste de usabilidade com
protótipos em papel
http://www.youtube.com/watch?v=5Ch3VsautWQ
http://www.youtube.com/watch?v=8PhT0U5uhSI
42
de 49

43. Parte III
ATIVIDADE PRÁTICA 43
de 49

44. Desafio
• Aplicativo de busca e reserva de passagens aéreas para
dispositivos móveis
• Prototipar 2 funcionalidades
• Busca de passagem
• Compra de passagem
• Base: www.decolar.com
• Formação de grupos
• Depois do protótipo, aplicar teste com moderação.
44
de 49

45. Referências
Aguiar, Y.; Lula, B.; Lima, C.; Lima, G.; Gouveia, R. “Uso de Protótipos
no Processo de Concepção de Interfaces do Usuário”. II Congresso de
Pesquisa e Inovação da Rede Norte Nordeste de Educação Tecnológica,
João Pessoa, 2007.
Brown, J. “Methodologies for the Creation of Interactive Software”.
Relatório Técnico. Mai. 1996.
CEFET-RN/DATINF. “Design, Prototipação e Construção”. 2008.
Dutra, L. R. “Paradigmas de Engenharia de Software”. Disponível em:
http://www.redes.unb.br/material/Metodologia%20de%20Desenvolvi
mento%20de%20Software/aula3.pdf
Oliveira Netto, A. A. “IHC: Modelagem e Gerência de Interfaces com o 45
Usuário”. Florianópolis: Visual Books, 2004. de 49

46. Referências
Preece, J.; Rogers, Y.; Sharp, H. “Interaction Design: Beyond
Human-Computer Interaction”. New York: John Wiley & Sons,
Inc., 2002.
PUC-Rio. “Desenvolvimento de Protótipo”. 2005. Disponível em:
http://www2.dbd.puc-
rio.br/pergamum/tesesabertas/0313143_06_cap_10.pdf.
Acesso em: 12 mai. 2011.
Sommerville, I. ”Engenharia de Software”. 6ª ed. São Paulo:
Pearson, 2005
Spinelli, T.; Rei, R. “Design de Interação – além do lápis e papel”. 46
de 49
Campus Party (Palestra), 2011

47. Referências
• Sobre avaliação de usabilidade em geral
• Observing the User Experience: A Practitioner's Guide to User
Research, Mike Kuniavsky
• Handbook of Usability Testing: Howto Plan, Design, and
Conduct Effective Tests, Jeffrey Rubin and Dana Chisnell
• Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding
and Fixing Usability Problems, Steve Krug
• Moderação em pesquisa de mercado
• Pesquisa Qualitativa com Texto, Imagem e Som: um Manual
Prático, Martin W. Bauer
47
de 49

48. Perguntas?
48
de 49

49. Obrigada!
liviagabos@gmail.com / http://twitter.com/liviagabos
talita.cpb@gmail.com / http://twitter.com/talitapagani
49
de 49