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

Agenda

• Apresentação

• Parte I – Prototipação

• Parte II – Avaliação de Usabilidade

• Parte III – Atividade Prática

• Referências

2 de 49

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

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

PROTOTIPAÇÃO

Parte I

5 de 49

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

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

Classificação

• Quanto ao detalhamento

• Baixa Fidelidade

• Média Fidelidade

• Alta Fidelidade

8 de 49

Protótipo de Baixa Fidelidade

Fonte: http://www.uxbooth.com/blog/tools-for-sketching-user-experiences/

9 de 49

Protótipo de Média Fidelidade

Fonte: http://usabilidoido.com.br/quanto_mais_simples_o_wireframe_melhor.html

10 de 49

Protótipo de Alta Fidelidade

Fonte: http://www.benjaminkoh.com/gigabit.html

11 de 49

Classificação

• Quanto ao reuso

• Evolucionário

• Throw-away

12 de 49

Classificação

• Quanto à função

• Apresentação

• Autêntico

• Funcional

• Sistema Piloto

13 de 49

Como é realizada

Coleta de requisitos

Planejamento e Projeto do

Protótipo

Construção do Protótipo

Avaliação

(Cliente e/ou usuário)

Análise dos resultados ou refinamento do protótipo

14 de 49

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

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

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

Desenhando o protótipo

Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/

18 de 49

Desenhando o protótipo

Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/

19 de 49

Simulando as interações da interface

Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/

20 de 49

AVALIAÇÃO DE USABILIDADE

Parte II

21 de 49

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

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

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

Tipos de testes

• Formativo / Validativo

• Exclusivo / Comparativo

• Qualitativo / Quantitativo

• Cooperativo / Individual

• Livre / Estruturado

• Em campo / Em laboratório

25 de 49

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

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

27 de 49

Oi, tudo bem?

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

Vídeo legal! http://www.youtube.com/watch?v=hWc0Fd2AS3s&feature=player_embedded

28 de 49

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

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

Papel do moderador

• Explica como vai funcionar a pesquisa

• Lê o enunciado da tarefa, no roteiro

• Anota problemas, observações

• Faz perguntas ao final

31 de 49

Poker Face

Papéis em um teste

32 de 49

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

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

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

Aquecimento...

Voluntário? =D

36 de 49

Situações

• 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

Agora eu não sei o que fazer. É pra clicar aqui?

Situações

38 de 49

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.

Situações

• Testador fica em loop, clicando em algo repetidamente, sem prosseguir.

RESISTA! AGUENTE!

• Faça perguntas, até que ele entenda o que está acontecendo e consiga se virar sozinho

39 de 49

Poker Face

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

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

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

ATIVIDADE PRÁTICA

Parte III

43 de 49

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

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%20Desenvolvimento%20de%20Software/aula3.pdf Oliveira Netto, A. A. “IHC: Modelagem e Gerência de Interfaces com o Usuário”. Florianópolis: Visual Books, 2004.

45 de 49

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”. Campus Party (Palestra), 2011

46 de 49

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

Perguntas?

48 de 49

Obrigada! liviagabos@gmail.com / http://twitter.com/liviagabos

talita.cpb@gmail.com / http://twitter.com/talitapagani

49 de 49