IHC 2011   Técnicas de Prototipação paraSmartphones no Apoio à Avaliação de     Interfaces com o Usuário                  ...
Agenda• Manhã:  • Parte I – Prototipação  • Parte II – Avaliação de Protótipos com Testes de Usabilidade  • Parte III – In...
Parte IPROTOTIPAÇÃO    3               de 84
Conceito  • O que é “Prototipação”?    • Modelo de Processo    • Projeto rápido da interface e das funcionalidades    • Co...
Por que prototipar interfaces?A principal motivação para a construção de protótipos éavaliar interfaces com o usuário de f...
Modelos de IHC e prototipação (1/3)                                        6                                       de 84(B...
Modelos de IHC e prototipação (2/3)                                                                                       ...
Modelos de IHC e prototipação (3/3)                                                                                       ...
Vantagens e Desvantagens          Elucida requisitos          Melhora a qualidade da          especificação          Permi...
Usos de Prototipação  • Protótipos como Artefatos    • Protótipos concebidos como o resultado de um      processo de desig...
Prototipação como Artefato de Design (1/10)  • Dimensões da Prototipação       • Representação: a forma pela qual o protót...
Prototipação como Artefato de Design (2/10):Representação  • A forma pela qual o protótipo é representado.  • Offline prot...
Prototipação como Artefato de Design (3/10):Precisão  • O nível de detalhamento o qual o protótipo será avaliado:       • ...
14                Protótipo de Baixa Fidelidade                              de 84Fonte: http://www.uxbooth.com/blog/tools...
15                  Protótipo de Média Fidelidade                                 de 84Fonte: http://usabilidoido.com.br/q...
16    Protótipo de Alta Fidelidade                 de 84Fonte: http://www.benjaminkoh.com/gigabit.html
Prototipação como Artefato de Design (7/10): Precisão Tipo                 Vantagens                                   Des...
Prototipação como Artefato de Design (8/10):Interatividade  • O quão interativo o protótipo é para um usuário  • Níveis de...
Prototipação como Artefato de Design (9/10):Evolução  • O ciclo de vida do protótipo  • Tempo de vida:       • Evolucionár...
Prototipação como Artefato de Design (10/10): Função  • Quanto à função    • Apresentação    • Autêntico    • Funcional   ...
Prototipação como ferramenta deauxílio ao Design  • Protótipo como ferramenta para design:       • Útil para exploração do...
Estratégias de Prototipação  • Protótipos são criados com algum objetivo:       •   Prototipação horizontal;       •   Pro...
Técnicas de Prototipação  • Prototipação Rápida:       • Offline Rapid Prototyping:             • Storyboarding, Sketching...
Offline Rapid Prototyping (1/6):Storyboarding                                                                             ...
Offline Rapid Prototyping (2/6):Sketching                                                                                 ...
Offline Rapid Prototyping (3/6):Index Cards                                   26                                   de 84(N...
Offline Rapid Prototyping (4/6):Mockups                                                               27                  ...
Offline Rapid Prototyping (5/6):Wizard of Oz  • Vídeo: http://hci.stanford.edu/publications/paper.php?id=139  • http://vim...
Offline Rapid Prototyping (6/6):Prototipação em Papel                                                               29    ...
A prototipação em papel (1/5)  • Uma das formas mais utilizadas de prototipação rápida  • Baixa fidelidade  • Simples conf...
A prototipação em papel (2/5)  • Vantagens    • Lápis e papel são baratos    • Não requerem especialistas ou programadores...
A prototipação em papel (3/5)   • Desvantagens     • Características como performance, manipulação física       e operação...
A prototipação em papel (4/5)   • Quando usar protótipos em papel?     • Quando as ferramentas de prototipação disponíveis...
A prototipação em papel (5/5)   • 6 Mitos     1. “Protótipo deve ser bonito”;     2. "Só sei desenhar direto no layout";  ...
35                 Desenhando o protótipo                             de 84Fonte: http://www.flickr.com/photos/21218849@N0...
36                 Desenhando o protótipo                             de 84Fonte: http://www.flickr.com/photos/21218849@N0...
37         Simulando as interações da interface                       de 84Fonte: http://www.flickr.com/photos/21218849@N0...
Teste de usabilidade comprotótipos em papelhttp://www.youtube.com/watch?v=5Ch3VsautWQhttp://www.youtube.com/watch?v=8PhT0U...
Online Rapid Prototyping (1/3):Simulações não interativas                                  39                             ...
Online Rapid Prototyping (2/3):Simulações Interativas                                  40                                 ...
Online Rapid Prototyping (3/3):Simulação por script                                  41                                  d...
Prototipação Iterativa (1/3):User Interface Toolkits                                  42                                  ...
Prototipação Iterativa (2/3):User Interface Builders                                  43                                  ...
Prototipação Iterativa (3/3):User Interface Development Environments (UIDE)                                               ...
Ferramentas para Prototipação (1/3)• Baixa-fidelidade  •   Lápis e papel  •   SketchFlow  •   PowerPoint  •   WOZ Pro  •  ...
Ferramentas para Prototipação (2/3)• Média fidelidade  •   SketchFlow (Microsoft Blend)  •   Mockinbird  •   BalsamiqMocku...
Ferramentas para Prototipação (3/3)• Alta-fidelidade:  •   Window Managers and Toolkits  •   Event languages  •   Interact...
Parte IIAVALIAÇÃO DE PROTÓTIPOS COM   48                              de 84TESTES DE USABILIDADE
O que é um teste de usabilidade?  • Forma sistemática de observação de potenciais e atuais    usuários de um produto sob c...
Teste com moderação (1/6)• Avaliações diagnósticas de usabilidade executados em um  laboratório ou sala de conferência e e...
Teste com moderação (2/6):Papéis em um teste com moderação• Participante/testador  • Pessoa que está dentro da amostra def...
Teste com moderação (3/6): Papel do moderador  •   Explica como vai funcionar a pesquisa  •   Lê o enunciado da tarefa, no...
Teste com moderação (4/6): Infraestrutura ideal de um teste com moderação                                                 ...
Teste com moderação (5/6): Iniciando o teste  • Boas vindas  • Introdução       •   Como funciona a pesquisa       •   Fal...
Teste com moderação (6/6): Tarefas  • Moderador lê em voz alta o enunciado da tarefa  • Entrega os materiais que o partici...
Situações a lidar (1/4)     Agora eu não sei o que fazer. É     pra clicar aqui?  • Você não pode responder as perguntas n...
Situações a lidar (2/4)     Agora eu não sei o que fazer. É     pra clicar aqui? > “Você faria isso em uma situação real, ...
Situações a lidar (3/4)  • Testador fica em loop, clicando em algo repetidamente,    sem prosseguir.                      ...
Situações a lidar (4/4)  • Não dê dicas para o participante  • Cuidado com os termos que utiliza  • Tente que ele faça as ...
Parte IIIINTERFACES PARA DISPOSITIVOS    60                               de 84MÓVEIS
Ao longo da última década, os dispositivos móveis sofreram  inúmeras modificações, de celulares a smartphones, de  teclado...
Esta evolução modificou a forma com que as pessoas          interagem com estes dispositivos
Telefonia móvel no Brasil• Em 2008, segundo o IBGE  • 794 usuários para cada 100 mil habitantes  • telefonia fixa correspo...
Desktop x Mobile  • Interfaces de desktop e mobile        • Mais homogêneas entre si, se assemelhando cada vez mais  • Int...
Smartphones e interfaces touch• Dispositivos como os smartphones, estão em crescente  substituição aos dispositivos conven...
Elementos predominantes eminterfaces de smartphones  • Navegação e menus  • Ícones  • Tarefas a serem desempenhadas       ...
Melhores práticas de design de interfaces touch (1/3)  • Teclas de atalho para executar ações       • Ações importantes ex...
Melhores práticas de design deinterfaces touch (2/3)  •   Integridade estética  •   Consistência  •   Manipulação Direta  ...
Melhores práticas de design deinterfaces touch (3/3)  • Foco em tarefas primárias  • Eleve o conteúdo com o qual as pessoa...
Padrões para touch screen (1/4)                                   70                                  de 84http://mobile-p...
Padrões para touch screen (2/4)                                   71                                  de 84http://mobile-p...
Padrões para touch screen (3/4)                                   72                                  de 84http://mobile-p...
Padrões para touch screen (4/4)                                   73                                  de 84http://mobile-p...
Parte IVATIVIDADE PRÁTICA   74                    de 84
Proposta da Atividade• Formação de Grupos  • Cada grupo deve ter pelo menos 4 pessoas• Prototipar uma agenda de compromiss...
Ferramentas a serem utilizadas• Baixa Fidelidade  • Paper prototyping• Média Fidelidade  • Flair Builder – aplicação em Ad...
Modo de visualização quepermite interação                 Componentes                para construção                  do p...
Definindo uma master page
Agradecimentos• Agradecimento à FAPESP pelo apoio parcial à este trabalho;• Agradecimento especial aos colegas Tatiana de ...
ReferênciasAguiar, Y.; Lula, B.; Lima, C.; Lima, G.; Gouveia, R. “Uso de Protótipos no Processo de Concepção deInterfaces ...
ReferênciasCEFET-RN/DATINF. “Design, Prototipação e Construção”. 2008.Da Silva, A.C.; Silva, J.C.A.; Penteado, R.A.D.; Sil...
ReferênciasMarcus, A. “Mobile User Interface Design: For Work, Home, and On the Way”. In ACM SIGCHI 2004. ACM, Viena, Aust...
Obrigada!talita.cpb@gmail.com                       84                       de 84
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces com o Usuário
Upcoming SlideShare
Loading in …5
×

Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces com o Usuário

4,088 views

Published on

Apresentação do tutorial ministrado durante o X Simpósio Brasileiro de Fatores Humanos em Sistemas Computacionais (IHC 2011)

Published in: Technology

Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces com o Usuário

  1. 1. IHC 2011 Técnicas de Prototipação paraSmartphones no Apoio à Avaliação de Interfaces com o Usuário Apresentadores: Talita C. P. Britto Junia C. Anacleto Demais autores: Livia C. G. Martins Bruno E. Penteado Laboratório de Interação Avançada Departamento de Computação Universidade Federal de São Carlos 1 de 84 Outubro/2011 – X IHC + V CLIHC
  2. 2. Agenda• Manhã: • Parte I – Prototipação • Parte II – Avaliação de Protótipos com Testes de Usabilidade • Parte III – Interfaces para Dispositivos Móveis• Tarde: • Parte IV – Atividades Práticas• Referências 2 de 84
  3. 3. Parte IPROTOTIPAÇÃO 3 de 84
  4. 4. Conceito • O que é “Prototipação”? • Modelo de Processo • Projeto rápido da interface e das funcionalidades • Concepção de fragmentos do sistema • Artefato construído iterativamente • Engenharia de Software • Representação dos requisitos • Interação Humano-Computador • Modelo de Interação entre usuário final e sistema • Foco: avaliar resultados obtidos com o protótipo 4 de 84(Brown, 1996; Pressman, 2007; Spinelli; Rei, 2011)
  5. 5. 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 acarga de trabalho cognitivo, aumentar a facilidade de usoe auxiliar o usuário a realizar tarefas que resultam narealização de seus objetivos. 5 de 84
  6. 6. Modelos de IHC e prototipação (1/3) 6 de 84(Brown, 1996; da Silva et al., 2005)
  7. 7. Modelos de IHC e prototipação (2/3) 7 de 84Modelo de Processo Centrado no Usuário. PREECE, Jenny. A Guide to Usability: Human Factors in Computing.Inglaterra: Addison-Wesley, 1993.
  8. 8. Modelos de IHC e prototipação (3/3) 8 de 84USE - User Software Engineering. WASSERMAN, Anthony I. et al. Developing Interactive Information Systems with theUser Software Engineering Methodology. IEEE Transactions on Software Engineering, v.12, n.2, p.326-345,Fevereiro/1986.
  9. 9. Vantagens e Desvantagens Elucida requisitos Melhora a qualidade da especificação Permite identificar características desejáveis da interface Imprecisão sobre o tempo do projeto Omissão de comentários Nem todo requisito pode ser 9 prototipado de 84
  10. 10. Usos de Prototipação • Protótipos como Artefatos • Protótipos concebidos como o resultado de um processo de design. • Protótipos como Processo para o Design • Protótipo é um artefato para a criação de um design, como parte integral do processo de design. • Auxilia o designer a pensar: ferramentas para auxiliar na resolução de problemas de design 10 de 84(Beaudouin-Lafon; Mackay, 2007; Preece; Rogers; Sharp, 2002)
  11. 11. Prototipação como Artefato de Design (1/10) • Dimensões da Prototipação • Representação: a forma pela qual o protótipo é representado. • Precisão: o nível de detalhamento o qual o protótipo será avaliado. • Interatividade: o quão interativo o protótipo é para um usuário; • Evolução: o ciclo de vida do protótipo; • Função: a finalidade do protótipo. 11 de 84(Beaudouin-Lafon; Mackay, 2007; Souza et al., 1999 apud Oliveira Netto, 2004)
  12. 12. Prototipação como Artefato de Design (2/10):Representação • A forma pela qual o protótipo é representado. • Offline prototypes: • Não necessitam de um computador; • Criação rápida, em geral nas etapas iniciais do design; • Baratos e descartáveis; • Técnicas: sketches, storyboards, index cards. • Online prototypes: • Executados em um computador; • Efetivos quando o design básico foi decidido; • Mais custosos, em geral evolucionários; • Exemplos: animações, vídeos interativos, interfaces resultantes de linguagens de scripting. 12 de 84(Beaudouin-Lafon; Mackay, 2007, ; Preece; Rogers; Sharp, 2002, Nielsen, 1993)
  13. 13. Prototipação como Artefato de Design (3/10):Precisão • O nível de detalhamento o qual o protótipo será avaliado: • Baixa fidelidade • Média fidelidade • Alta fidelidade 13 de 84(Aguiar et al., 2007; Beaudouin-Lafon; Mackay, 2007; Preece; Rogers; Sharp, 2002; Nielsen, 1993)
  14. 14. 14 Protótipo de Baixa Fidelidade de 84Fonte: http://www.uxbooth.com/blog/tools-for-sketching-user-experiences/
  15. 15. 15 Protótipo de Média Fidelidade de 84Fonte: http://usabilidoido.com.br/quanto_mais_simples_o_wireframe_melhor.html
  16. 16. 16 Protótipo de Alta Fidelidade de 84Fonte: http://www.benjaminkoh.com/gigabit.html
  17. 17. Prototipação como Artefato de Design (7/10): Precisão Tipo Vantagens Desvantagens Baixa Fidelidade  Menor custo de desenvolvimento  Verificação limitada de erros  Avalia múltiplos conceitos de design  Detalhamento pobre de especificação  Comunicação útil para codificação  Endereça problemas de layout da tela  Dirigido ao facilitador  Útil para identificar requisitos de  Utilidade limitada depois de mercado estabelecidos os requisitos  Prova de conceito  Utilidade limitada para testes de usabilidade  Limitações de navegação e fluxo de aplicação Alta Fidelidade  Funcionalidades completas  Mais caro para desenvolver  Totalmente interativa  Consome tempo para criação  Dirigida ao usuário  Ineficiente para prova de conceito  Define claramente o esquema  Não efetivo para obtenção de requisitos navegacional  Útil para exploração e teste  Look & feel do produto final  Serve como uma especificação viva 17  Ferramenta de vendas e marketing de 84(Rudd et al., 1996)
  18. 18. Prototipação como Artefato de Design (8/10):Interatividade • O quão interativo o protótipo é para um usuário • Níveis de Interação: • Fixed prototypes: • Não permitem interação com o usuário ou a interação é limitada; • Usados para ilustrar ou testar cenários. • Fixed-path prototypes: • Interatividade controlada: mais de uma possiblidade de interação é oferecida; • Ideal para uso com cenários; • Permite ao usuário experimentar como será o sistema. • Open prototypes: • Possuem diversas formas e possibilidades de interação; 18 • Em geral, cobrem apenas parte do sistema; de 84 • Funcionam como o sistema real, mas com limitações.(Beaudouin-Lafon; Mackay, 2007)
  19. 19. Prototipação como Artefato de Design (9/10):Evolução • O ciclo de vida do protótipo • Tempo de vida: • Evolucionário e Iterativo; • Interativo; • Throw-away ou descartável. 19 de 84(Beaudouin-Lafon; Mackay, 2007; Nielsen, 1993)
  20. 20. Prototipação como Artefato de Design (10/10): Função • Quanto à função • Apresentação • Autêntico • Funcional • Sistema Piloto 20 de 84(Souza et al., 1999 apud Oliveira Netto, 2004)
  21. 21. Prototipação como ferramenta deauxílio ao Design • Protótipo como ferramenta para design: • Útil para exploração do espaço do design; • Permitem que o designer seja criativo e estimula discussões; • Geração e comparação de alternativas. • User-Centered Design: • Protótipos possibilitam que usuários vejam e experimentem o sistema mais rapidamente. • Partipatory Design: • Protótipos permitem teste e comunicação de idéias e experimentação entre usuários e designers. 21 de 84(Beaudouin-Lafon; Mackay, 2007)
  22. 22. Estratégias de Prototipação • Protótipos são criados com algum objetivo: • Prototipação horizontal; • Prototipação vertical; • Prototipação orientada a tarefas; • Prototipação baseada em cenários. 22 de 84(Beaudouin-Lafon; Mackay, 2007; Preece; Rogers; Sharp, 2002; Nielsen, 1993)
  23. 23. Técnicas de Prototipação • Prototipação Rápida: • Offline Rapid Prototyping: • Storyboarding, Sketching, Mockups, Wizard of Oz, Index Cards, Prototipação em Papel; • Online Rapid Prototyping: • Simulações não interativas, simulações interativas, linguagem de scripts. • Prototipação Iterativa: • User Interface Toolkits, User Interface Builders, User Interface Development Environments (UIDE) 23 de 84(Beaudouin-Lafon; Mackay, 2007; Preece; Rogers; Sharp, 2002; Nielsen, 1993)
  24. 24. Offline Rapid Prototyping (1/6):Storyboarding 24 de 84(Beaudouin-Lafon; Mackay, 2007; Preece; Rogers; Sharp, 2002; Nielsen, 1993)
  25. 25. Offline Rapid Prototyping (2/6):Sketching 25 de 84(Beaudouin-Lafon; Mackay, 2007; Preece; Rogers; Sharp, 2002; Nielsen, 1993, Buxton, 2007)
  26. 26. Offline Rapid Prototyping (3/6):Index Cards 26 de 84(Nielsen, 1993)
  27. 27. Offline Rapid Prototyping (4/6):Mockups 27 de 84(Beaudouin-Lafon; Mackay, 2007; Preece; Rogers; Sharp, 2002)
  28. 28. Offline Rapid Prototyping (5/6):Wizard of Oz • Vídeo: http://hci.stanford.edu/publications/paper.php?id=139 • http://vimeo.com/19188274 28 de 84 • http://hci.stanford.edu/research/ex-a-sketch/(Beaudouin-Lafon; Mackay, 2007; Preece; Rogers; Sharp, 2002; Nielsen, 1993)
  29. 29. Offline Rapid Prototyping (6/6):Prototipação em Papel 29 de 84(Beaudouin-Lafon; Mackay, 2007; Preece; Rogers; Sharp, 2002)
  30. 30. A prototipação em papel (1/5) • 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 • Facilita a comunicação • Dentro da equipe de desenvolvimento • Entre a equipe de desenvolvimento e os clientes 30 de 84(Anacleto; Villena, 2009)
  31. 31. A prototipação em papel (2/5) • Vantagens • Lápis e papel são baratos • Não requerem especialistas ou programadores • Pode-se rapidamente descobrir qual parte da interface trabalha bem e quais dão problemas • Modificações imediatas durante o teste • Permite realização de vários testes de usabilidade • Não há demora para receber feedback do usuário • Refinação mais rápida • Interações reais do usuário 31 de 84(Anacleto; Villena, 2009)
  32. 32. A prototipação em papel (3/5) • Desvantagens • Características como performance, manipulação física e operação são melhor identificadas por protótipos de alta fidelidade devido à interação em tempo real • Serão sempre limitados • Pessoas podem se sentir mais confortáveis com protótipos no computador 32 de 84(Lim et al., 2006; Virzi, Sokolov, Karis, 1996; Sefelin, Tscheligi, Giller, 2003)
  33. 33. A prototipação em papel (4/5) • Quando usar protótipos em papel? • Quando as ferramentas de prototipação disponíveis não dão suporte aos componentes e ideias que você deseja implementar • Quando você não deseja excluir membros da sua equipe de design que não possuem habilidades suficientes com software • Quando os testes devem resultar em uma série de drawings que depois podem ser discutidos dentro da equipe de design 33 de 84(Sefelin; Tscheligi; Giller, 2003)
  34. 34. A prototipação em papel (5/5) • 6 Mitos 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" 34 de 84(Spinelli; Rei, 2011)
  35. 35. 35 Desenhando o protótipo de 84Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/
  36. 36. 36 Desenhando o protótipo de 84Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/
  37. 37. 37 Simulando as interações da interface de 84Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/
  38. 38. Teste de usabilidade comprotótipos em papelhttp://www.youtube.com/watch?v=5Ch3VsautWQhttp://www.youtube.com/watch?v=8PhT0U5uhSI 38 de 84
  39. 39. Online Rapid Prototyping (1/3):Simulações não interativas 39 de 84(Beaudouin-Lafon; Mackay, 2007)
  40. 40. Online Rapid Prototyping (2/3):Simulações Interativas 40 de 84(Beaudouin-Lafon; Mackay, 2007)
  41. 41. Online Rapid Prototyping (3/3):Simulação por script 41 de 84(Beaudouin-Lafon; Mackay, 2007)
  42. 42. Prototipação Iterativa (1/3):User Interface Toolkits 42 de 84(Beaudouin-Lafon; Mackay, 2007)
  43. 43. Prototipação Iterativa (2/3):User Interface Builders 43 de 84(Beaudouin-Lafon; Mackay, 2007)
  44. 44. Prototipação Iterativa (3/3):User Interface Development Environments (UIDE) 44 de 84(Beaudouin-Lafon; Mackay, 2007)
  45. 45. Ferramentas para Prototipação (1/3)• Baixa-fidelidade • Lápis e papel • SketchFlow • PowerPoint • WOZ Pro • DENIM 45 de 84
  46. 46. Ferramentas para Prototipação (2/3)• Média fidelidade • SketchFlow (Microsoft Blend) • Mockinbird • BalsamiqMockups • Cacoo • Mockflow • Microsoft Office Visio • OmniGraffle • Axure • PowerPoint • HTML+CSS • Outros recursos: stencils kit (ex.: Yahoo! Stencils Kit for UI) para diversas ferramentas 46 de 84
  47. 47. Ferramentas para Prototipação (3/3)• Alta-fidelidade: • Window Managers and Toolkits • Event languages • Interactive graphical tools ou interface builders • Component systems • Scripting languages • Hipertexto • Linguagens orientadas a objetos • User Interface Management tools (UIMS) • Formal language based tools • Constraints • Model-based and automatic techniques • PICTIVE 47 de 84
  48. 48. Parte IIAVALIAÇÃO DE PROTÓTIPOS COM 48 de 84TESTES DE USABILIDADE
  49. 49. O que é um teste de usabilidade? • Forma sistemática de observação de potenciais e atuais usuários de um produto sob condições controladas • Método para detectar problemas na interação do usuário com um produto • 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. 49 de 84(Dumas; Loring, 2008)
  50. 50. Teste com moderação (1/6)• Avaliações diagnósticas de usabilidade executados em um laboratório ou sala de conferência e envolvem uma população específica de usuários.• O que é observado: • 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 50 de 84
  51. 51. Teste com moderação (2/6):Papéis em um teste com moderação• 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.• "Computador“ • Na prototipação em papel e em determinadas simulações, deve- se ter também a presença do "computador", uma pessoa que fica responsável por fazer as alterações da interface conforme o 51 usuário interage com o protótipo de 84
  52. 52. Teste com moderação (3/6): 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 52 de 84(Viera; Volpato, 2010)
  53. 53. Teste com moderação (4/6): Infraestrutura ideal de um teste com moderação 53 de 84(Viera; Volpato, 2010)
  54. 54. Teste com moderação (5/6): Iniciando 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 54 de 84(Viera; Volpato, 2010)
  55. 55. Teste com moderação (6/6): 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! 55 de 84(Viera; Volpato, 2010)
  56. 56. Situações a lidar (1/4) 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. 56 de 84(Viera; Volpato, 2010)
  57. 57. Situações a lidar (2/4) 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. 57 de 84(Viera; Volpato, 2010)
  58. 58. Situações a lidar (3/4) • 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 58 de 84(Viera; Volpato, 2010)
  59. 59. Situações a lidar (4/4) • 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é?” 59 de 84(Viera; Volpato, 2010)
  60. 60. Parte IIIINTERFACES PARA DISPOSITIVOS 60 de 84MÓVEIS
  61. 61. Ao longo da última década, os dispositivos móveis sofreram inúmeras modificações, de celulares a smartphones, de teclado convencional a touch screen e teclado QWERTY
  62. 62. Esta evolução modificou a forma com que as pessoas interagem com estes dispositivos
  63. 63. Telefonia móvel no Brasil• Em 2008, segundo o IBGE • 794 usuários para cada 100 mil habitantes • telefonia fixa correspondia a 306 usuários para cada 100 mil• Em 2009, segundo a pesquisa TIC Domicílios • 35% da população que possui celular, tem acesso à internet no dispositivo 63 de 84
  64. 64. Desktop x Mobile • Interfaces de desktop e mobile • Mais homogêneas entre si, se assemelhando cada vez mais • Interação de desktop e mobile • Distintas • “As interfaces criadas para cada dispositivo nos ajudam a distinguir os ambientes e também a forma com que o usuário interage.” 64 de 84(Eis, 2011)
  65. 65. Smartphones e interfaces touch• Dispositivos como os smartphones, estão em crescente substituição aos dispositivos convencionais• Porque touch screen? • Popularização de smartphones com interface touch (tela sensível ao toque) • “ Criar interfaces touch é algo relativamente novo. Nós trouxemos ideias da interação com mouse para os dispositivos touch, mas grande parte das interações precisaram ser reinventadas” (Eis, 2011) “Lembre agora na forma de como você gira uma imagem em um dispositivo touch e como você gira essa mesma 65 imagem utilizando um mouse. A de 84 interface muda, o seu comportamento muda.”
  66. 66. Elementos predominantes eminterfaces de smartphones • Navegação e menus • Ícones • Tarefas a serem desempenhadas • Ao utilizar um dispositivo, os usuários começam a realizar tarefas uma após a outra, alheios ao comportamento subjacente • Experiência deve ser contínua, atividade após atividade, tarefa após tarefa 66 de 84(Apple iOS, 2011; Android, 2011)
  67. 67. Melhores práticas de design de interfaces touch (1/3) • Teclas de atalho para executar ações • Ações importantes expostas na interface • Controle da área de toque • Disponibilizar textos, links, imagens e controles de formulários que sejam mais relevantes • Prover, sempre que possível, pré-seleção para valores em campos de formulário • Quando possível, utilizar também listas de seleção, radio buttons e outros controles que não requerem digitação 67 de 84(Eis, 2011; Pagani, 2010)
  68. 68. Melhores práticas de design deinterfaces touch (2/3) • Integridade estética • Consistência • Manipulação Direta • Feedback • Metáforas • Controle do Usuário • Contexto do Usuário • Modelo Mental • Navegação • Interação • Aparência e Design 68 • Visualização de Informações de 84(Apple, 2011; Marcus, 2004)
  69. 69. Melhores práticas de design deinterfaces touch (3/3) • Foco em tarefas primárias • Eleve o conteúdo com o qual as pessoas se importam • Liste as funcionalidades que os usuários possam gostar • Determine a audiência • Top-down • Dar ao usuário um caminho lógico a seguir • Utilização simples e óbvia • Terminologia “centrada no usuário” 69 de 84(Apple, 2011)
  70. 70. Padrões para touch screen (1/4) 70 de 84http://mobile-patterns.com
  71. 71. Padrões para touch screen (2/4) 71 de 84http://mobile-patterns.com
  72. 72. Padrões para touch screen (3/4) 72 de 84http://mobile-patterns.com
  73. 73. Padrões para touch screen (4/4) 73 de 84http://mobile-patterns.com
  74. 74. Parte IVATIVIDADE PRÁTICA 74 de 84
  75. 75. Proposta da Atividade• Formação de Grupos • Cada grupo deve ter pelo menos 4 pessoas• Prototipar uma agenda de compromissos (appointment) • Inserção de compromisso • Visualização da agenda• Utilização dos 3 níveis de fidelidade • Baixa, Média e Alta• Depois da criação de cada protótipo, aplicar teste com moderação: • Elaborar o roteiro de teste; • Cada grupo deve escolher quem será o moderador, o usuário, o observador e o computador; • O usuário de cada grupo irá para outro grupo ser o testador. 75 de 84• Discussões sobre lições aprendidas
  76. 76. Ferramentas a serem utilizadas• Baixa Fidelidade • Paper prototyping• Média Fidelidade • Flair Builder – aplicação em Adobe Air (http://www.flairbuilder.com/download-flairbuilder/)• Alta Fidelidade • Utilização de bibliotecas para a construção de uma interface web semelhante à uma aplicação para iPhone: • jQTouch (http://jqtouch.com/) • biblioteca para aplicação web de iPhone baseada em jQuery • iUI (http://code.google.com/p/iui/) • Outra biblioteca livre disponível no Google Codes para a construção de aplicações web baseadas na interface do iPhone • Adicionalmente, precisaremos utilizar uma IDE para a codificação da 76 interface. Neste caso, podemos utilizar o Aptana de 84
  77. 77. Modo de visualização quepermite interação Componentes para construção do protótipo Páginas
  78. 78. Definindo uma master page
  79. 79. Agradecimentos• Agradecimento à FAPESP pelo apoio parcial à este trabalho;• Agradecimento especial aos colegas Tatiana de Alencar e Franco Garcia que contribuíram na compilação do referencial teórico e na elaboração do conteúdo 80 de 84
  80. 80. ReferênciasAguiar, Y.; Lula, B.; Lima, C.; Lima, G.; Gouveia, R. “Uso de Protótipos no Processo de Concepção deInterfaces do Usuário”. In II Congresso de Pesquisa e Inovação da Rede Norte Nordeste de EducaçãoTecnológica, João Pessoa, 2007.Android. The Developer’s Guide. Disponível em http://developer.android.com/guide/index.html.Apple. iOS Human Interface Guidelines. Disponível emhttp://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf.Bauer, M.W.; Gaskell, G. “Pesquisa Qualitativa com Texto, Imagem e Som: um Manual Prático”. [s.l.]:Editora Vozes, 2002.Beadouin-Lafon, M.; Mackay, W. E. Prototyping Tools and Techniques. In: Sears, A. (Ed.); Jacko, J. A(Ed.). The Human-Computer Interaction Handbook: Fundamentals, Evolving Technologies andEmerging Applications. 2. ed. Estados Unidos: CRC Press, 2007. chap 52, p. 1017-1039.Brown, J. “Methodologies for the Creation of Interactive Software”. Relatório Técnico. Mai. 1996.Buxton, B. “Sketching User Experiences: Getting the Design Right and the Right Design”. Canadá: 81Morgan Kaufmann, 2007. de 84
  81. 81. ReferênciasCEFET-RN/DATINF. “Design, Prototipação e Construção”. 2008.Da Silva, A.C.; Silva, J.C.A.; Penteado, R.A.D.; Silva, S.R.P. Integrando Visões de IHC e de ES por Padrões noDesenvolvimento de Prototipação Descartável. In Proceedings of the 2005 Latin American conference on Human-computer interaction (CLIHC 05). ACM, New York, NY, USA, 223-234.Dumas, J., Loring, B. “Moderation Usability Tests – Principles & Practices for Interaction”. Burlington : MorganKaufmann Publishers, 2008.Dutra, L. R. “Paradigmas de Engenharia de Software”. Disponível em:http://www.redes.unb.br/material/Metodologia%20de%20Desenvolvimento%20de%20Software/aula3.pdfEis, D. Especificação para touch screens. 22 jun. 2011. Disponível em: http://tableless.com.br/especificacao-para-touch-screens/Fling, B. “Mobile Design and Development: Practical Techniques for Creating Mobile Sites and Web Apps”. Sebastopol:O’Reilly, 2009.IBGE. Indicadores de Desenvolvimento Sustentável. Disponível emhttp://www.ibge.gov.br/home/geociencias/recursosnaturais/ids/ids2010.pdf, 2010.Krug, S. “Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems”. Berkeley: NewRiders, 2009.Kuniavsky, M. “Observing the User Experience: A Practitioners Guide to User Research”. San Francisco: 82Morgan Kaufmann, 2003. de 84
  82. 82. ReferênciasMarcus, A. “Mobile User Interface Design: For Work, Home, and On the Way”. In ACM SIGCHI 2004. ACM, Viena, Austria,2004.NIC.br. 5ª Pesquisa Sobre Uso das Tecnologias da Informação e da Comunicação no Brasil — TIC Domicílios 2009.Disponível em http://www.cetic.br/usuarios/tic/2009/analises.htm.Nielsen, J. “Usability Engineering”. 1. ed. San Diego: Morgan Kaufmann, 1993.Oliveira Netto, A. A. “IHC: Modelagem e Gerência de Interfaces com o Usuário”. Florianópolis: Visual Books, 2004.Pagani, T. 17 nov. 2011. “Navegabilidade em Dispositivos Móveis”. Disponível em:http://tableless.com.br/navegabilidade-em-dispositivos-moveis/Preece, J.; Rogers, Y.; Sharp, H. “Interaction Design: Beyond Human-Computer Interaction”. New York: John Wiley &Sons, Inc., 2002.Pressman, R. “Software Engineering: A Practitioners Approach”. New York: McGraw-Hill, Inc., 2007.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.Rubin, J.; Chisnell, D.; Spool, J. 2.ed. “Handbook of Usability Testing: Howto Plan, Design, and Conduct Effective Tests”.Indianapolis: Wiley Publishing, Inc., 2008. 83Spinelli, T.; Rei, R. “Design de Interação – além do lápis e papel”. Campus Party (Palestra), 2011. de 84Vieira, A.; Volpato, E. “Moderação de Testes de Usabilidade”. Disponível em:http://www.slideshare.net/upasaopaulo/wudsp-2010workshop-de-moderao
  83. 83. Obrigada!talita.cpb@gmail.com 84 de 84

×