0
Design de InteraçãoKarine Drumond e Leandro Alves                                 Design de Interação | Karine e Leandro
Técnica de modelagempersonas ágeis                       Design de Interação | Karine e Leandro
Personas são modelosdescritivos de usuários.               Design de Interação | Karine e Leandro
exemplo de persona tradicional                   Design de Interação | Karine e Leandro
Alguma coisa é melhor que coisa-algumaMinimize esforços. Levante informações através de etnografia digital,   análise métr...
Uma Persona Ágil é uma exploração breve sobre         o que sabemos dos usuários.              Pragmática - Patton        ...
São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a       comunicação de informações.       ...
Boas personas destacam características  relevantes das menos relevantes.  Evidenciam informações, não apenas dados.       ...
"Uma Persona é uma pessoa artificial, inventada para ajudar um     designer entender as pessoas que usarão seu produto.”  ...
1. Não são estereótipos2. Não são segmentos de mercado:    MKT = venda / Design = uso                             Design d...
Por que modelar personas?1. Modelamos para discutir o que sabemos e o que não sobre usuários (Informações).2. Modelamos pa...
Quando aplicar Personas?1. Na definição de requisitos (principalmente para produtos de contextos  diferentes, desconhecido...
Como criar personas            Design de Interação | Karine e Leandro
1o passo: Determinar tipos de usuários                        Design de Interação | Karine e Leandro
1o passo: Determinar tipos de usuários                     ZAGAT                     Site que oferece reviews de mais de 5...
1o passo: Determinar tipos de usuários   (Uma boa ideia é focar em papéis)   1. Gourmets,   2.Viajantes,   3.Namorados... ...
2o passo: Listar características de cada tipo1. Demográficas: Idade, sexo, classe social, onde vivem, cultura, formação, p...
2o passo: Listar características de cada tipo5. Necessidades: diretas e periféricas (mas importantes. ex: segurança no met...
2o passo: Listar características de cada tipoRoberto, 42 anos, Jornalista   Saulinho, 22 anos, cursa Letras          Júlia...
3o passo: Determinar usuário(s) focal(is) (patton) ou primário(s) (cooper) 1. "É um usuário que deve ser atendido e não se...
3o passo: Determinar usuários focais (patton) ou primários (cooper)                                  zo rio               ...
Sugestão de PattonNome, Idade       Papel                  descrição, frase emblemáticaNecessidades no   Tarefas no sistem...
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
TO DO             DONEEM GRUPO!                                produto                      para seu             personas ...
Personas ágeis1o passo: Determinar tipos de usuários2o passo: Listar características de cada tipo3o passo: Determinar usuá...
Questionários Ciclo de vida do produto                             e       rking   entrevistas   chmaBen                  ...
Prototipaçãoquebrando ovos para fazer omeletes           Design de Interação | Karine e Leandro
Protótipo ~ modelo          =            Design de Interação | Karine e Leandro
lembrando...São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a       comunicação de informa...
Podem ser de baixa ou alta resoluçãoBaixa: Para explorar ideias, conceitos, fluxosAlta: para validar decisões pontuais    ...
“Devemos criar exatamente quantadocumentação necessitamos para executarbem um projeto, e não mais.”                       ...
Nós               ❤         PAPEL!• Nada digital é mais rápido, flexível e fácil de prototipar• Não requer habilidades esp...
Cenário “São protótipos feitos de palavras”• Os protagonistas são as PERSONAS• Devem refletir comportamento no sistema• Um...
CenárioUma imagem vale mil palavras.Mas as palavras certas podem valer algumas boas imagens.Lúcia Maria loga em sua conta ...
TO DO            DONE       PO!EM GRU                 rimeiro                                uso ou                rio (pC...
Storyboards       Design de Interação | Karine e Leandro
StoryboardsTécnica da publicidade, HQs e cinema, que ilustra interações                          complexas                ...
Storyboards• Imagens + legendas• Ilustram fluxos, momentos chave• Casos de uso• Mostram ambientes e contextos• Complementa...
TO DO    DONE         O!E M GRUP                        para o               yboardCriar um stor         criado. cenário  ...
Task flows  diagrama de fluxo• Fluxos são tão importantes quanto telas• Representam as possibilidades de navegação no sist...
Task flowsdiagrama de fluxo                    Design de Interação | Karine e Leandro
FFFFFFFFFFFFFFFFFFFFFFFFUUUUUUU    Design de Interação | Karine e Leandro
Task flowsdiagrama de fluxoFluxos são interações de um indivíduo, elementos / escolhas                                    ...
Task flowsdiagrama de fluxoExemplo: Adicionando um item na TO-DO do Basecamp.                                   Design de ...
Task flowsdiagrama de fluxo• É rápido de fazer e simples de enxergar.                                     Design de Intera...
Task flows                                  diagrama de fluxoEstrutura •   Barra separa a interface da ação •   Barra pont...
TO DO             DONE         RUP      O!E M SUBG                         ipal (e                   tare fa princdefinir ...
Rascunhos      Design de Interação | Karine e Leandro
Rascunhos• Ideias primárias, generalistas, fluxos.• São feios! estimulam a discussão sobre função e uso                   ...
Wireframes      Design de Interação | Karine e Leandro
Wireframesprotótipos estruturais do sistema                      Design de Interação | Karine e Leandro
Wireframesprotótipos estruturais do sistemaRegistram as funcionalidades do produto, seus aspectos técnicos e sua lógica de...
Wireframes  protótipos estruturais do sistema Registram as funcionalidades do produto, seus aspectos  técnicos e sua lógic...
Wireframes  protótipos estruturais do sistema  Registram as funcionalidades do produto, seus aspectos   técnicos e sua lóg...
WireframesSubstituem documentos mais burocráticos, sãoespecificações visuais comprometidas com:   • Estrutura   • Arquitet...
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
papel=desapego                 Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
Prototipando e testando low fihttp://www.youtube.com/watch?v=k9mTvt0LXgk                              Design de Interação ...
wireouts           Design de Interação | Karine e Leandro
layouts          Design de Interação | Karine e Leandro
EM         GRU   Prot        PO!        o  rasc tipar e      unho         m            s, ou cimatem                refin ...
Design de Interação | Karine e Leandro
Questionários Ciclo de vida do produto                             e       rking   entrevistas   chmaBen                  ...
Teste com usuários             Design de Interação | Karine e Leandro
Teste de usabilidade‣ Observação de usuários realizando tarefas importantes no produto para entender padrão de uso e probl...
Pra que serve?‣ Avaliar o entendimento da interface e dos fluxos projetados‣ Identificar pontos críticos da interação (ruído...
Tipos de testes‣ Teste em campo (menos formal)   ‣ Teste em laboratório                                    (mais controlad...
Tipos de testes                  Design de Interação | Karine e Leandro
Tipos de testes‣ Em laboratório (mais formal) + permite maior controle dos dados e variáveis + mais fácil de envolver o cl...
Tipos de testes‣ Laboratório é ideal para:  ‣ produção acadêmica (rigor científico para teses, artigos    e dissertações)  ...
O que testar?‣ Teste em protótipo em papel:   ‣ Teste em produto final. Servem para testar conceitos     Avaliar eficiência,...
Etapas1.Planejamento2.Recrutamento3.Aplicação4.Análise                 Design de Interação | Karine e Leandro
Planejamento1. determinar metas e objetivos do teste2. escolher o que medir (tempo, compreensão, satisfação etc)3. definir ...
1 - Determinar os objetivos Exemplos‣ Os usuários entendem de forma clara o que é e para que serve a extensão?‣ Os usuário...
TO DO          DONE         O!E M GRUP                      teste              s objet ivos dodeter minar o               ...
2 - Escolher o que medir  A métrica depende do objetivo‣ Satisfação geral‣ Tempo de execução de tarefa‣ Número de passos p...
TO DO          DONE         O!E M GRUP                     teste              s métr icas dodeter minar a                 ...
3 - Definir perfil de participantes‣ Quem deve usar este produto?‣ Quantos participantes escolher? Nielsen sugere:  ‣ 5 (d...
3 - Definir perfil de participantes                       Design de Interação | Karine e Leandro
3 - Definir perfil de participantes Exemplo ‣ 2 usuários lead e 4 intermediários ‣ Pessoas que procuram ou procuraram imóv...
4 - Definir tarefas e contextoTarefas: O que precisa ser testado? ‣ Quais são as funcionalidades mais críticas? ‣ Passos e...
4 - Definir tarefas e contextoExemplo (tarefas) ‣ Encontrar um imóvel ‣ Alterar filtros ‣ verificar IPTU ‣ Encontrar informa...
4 - Definir tarefas e contextoExemplo (contextos) ‣ Opção 1:Você se mudou para Curitiba e precisa arrumar um imóvel pra al...
TO DO   DONE         O!E M GRUP                         ários          taref as e cendefinir EM GRUPO! definir passos e te...
5 - Preparar roteiroEstrutura do roteiro ‣ Propósito do teste ‣ Lembrar que quem é avaliado é o sistema e não usuário ‣ Qu...
TO DO   DONE         O!E M GRUP                    teste         o teiro docriar o r                              Design d...
6 - Executando um teste pilotoExecutar com alguém não envolvido diretamente com a execução do testePermite testar as condi...
Aplicação  Equipe envolvida‣ Orientador/condutor  ‣ Orientar o participante  ‣ Fazer com que se sinta a vontade  ‣ Respond...
Aplicação Participantes (usuários)‣ Posso/devo pagar usuário? ‣ Na publicação de papers, artigos esta prática não é aceita...
Software espião‣ Quicktime (http://www.apple.com/quicktime/download/)‣ SilverBack (http://silverbackapp.com/)‣ CamStudio (...
Como conduzir os testes?‣ Escolha somente uma pessoa para falar com o usuário (condutor)‣ O observador deve se posicionar ...
Como conduzir os testes?  Usuário comenta: “Mas isso não é inútil?”                            Design de Interação | Karin...
Como conduzir os testes?  Usuário comenta: “Mas isso não é inútil?”               Resposta inadequada: "Não."       Respos...
Como observar os testes?‣ Procure por padrões de uso e fenômenos‣ Não interfira no teste (função do orientador/condutor)‣ M...
Think aloud / “pensar em voz alta”‣ Objetivo: explicitar o processo mental dos participantes‣ Vantagens  ‣ Ajuda a captar ...
Think aloud / “pensar em voz alta”‣ Como estimular a falar?‣ Use perguntas! ‣ “Em que você está pensando?” ‣ “Por que opto...
TO DO            DONE         O!E M GRUP                              ador e           ientado  r, observd efinir or      ...
Card sorting               Design de Interação | Karine e Leandro
Card sorting               Como seus               usuários               enxergam seu               conteúdo?            ...
Por que usar card sorting?‣ Imagine que você deseje emitir a 2ª via de uma multa e  este é o menu do site...            ‣ ...
Etapas do card sorting 1. Levantamento do conteúdo (se ainda não feito) 2. Seleção dos cartões (20 a 30 cartões é suficient...
Resultado do card sorting                      Design de Interação | Karine e Leandro
Exercício card sorting  Cada grupo deve eleger uma pessoa para ser o “moderador”, que irá  explicar e observar o agrupamen...
Card sorting online  http://websort.net/  http://www.optimalworkshop.com/optimalsort.htm                                  ...
Trabalho individual                                                          50 ptsEscolha um produto interativo (ex.: um ...
Upcoming SlideShare
Loading in...5
×

Design de Interação parte II

1,341

Published on

Aula lecionada por Karine Drumond e Leandro Alves em 2011 na pós em Marketing Digital. Belo Horizonte.

Published in: Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,341
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
77
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Design de Interação parte II"

  1. 1. Design de InteraçãoKarine Drumond e Leandro Alves Design de Interação | Karine e Leandro
  2. 2. Técnica de modelagempersonas ágeis Design de Interação | Karine e Leandro
  3. 3. Personas são modelosdescritivos de usuários. Design de Interação | Karine e Leandro
  4. 4. exemplo de persona tradicional Design de Interação | Karine e Leandro
  5. 5. Alguma coisa é melhor que coisa-algumaMinimize esforços. Levante informações através de etnografia digital, análise métrica, benchmarking ou conversas com stakeholders. Design de Interação | Karine e Leandro
  6. 6. Uma Persona Ágil é uma exploração breve sobre o que sabemos dos usuários. Pragmática - Patton Provisória - Cooper Guerrilha - Kuniavsky Ad-Hoc - Norman Ágil - Cardoso Design de Interação | Karine e Leandro
  7. 7. São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a comunicação de informações. Design de Interação | Karine e Leandro
  8. 8. Boas personas destacam características relevantes das menos relevantes. Evidenciam informações, não apenas dados. Design de Interação | Karine e Leandro
  9. 9. "Uma Persona é uma pessoa artificial, inventada para ajudar um designer entender as pessoas que usarão seu produto.” - Norman, Persona Life Cycle Design de Interação | Karine e Leandro
  10. 10. 1. Não são estereótipos2. Não são segmentos de mercado: MKT = venda / Design = uso Design de Interação | Karine e Leandro
  11. 11. Por que modelar personas?1. Modelamos para discutir o que sabemos e o que não sobre usuários (Informações).2. Modelamos para mapear melhor sua experiência (UX).3. Personas servem para agregar um enfoque empático ao projeto (❤). Design de Interação | Karine e Leandro
  12. 12. Quando aplicar Personas?1. Na definição de requisitos (principalmente para produtos de contextos diferentes, desconhecidos. ex: hospital, bombeiros, polícia)2. Durante brainstormings, reuniões3. Ao planejar funcionalidades Design de Interação | Karine e Leandro
  13. 13. Como criar personas Design de Interação | Karine e Leandro
  14. 14. 1o passo: Determinar tipos de usuários Design de Interação | Karine e Leandro
  15. 15. 1o passo: Determinar tipos de usuários ZAGAT Site que oferece reviews de mais de 50 mil restaurantes em 100 países. Estão investindo em aplicações mobile. Quais os tipos de usuários desse sistema? Design de Interação | Karine e Leandro
  16. 16. 1o passo: Determinar tipos de usuários (Uma boa ideia é focar em papéis) 1. Gourmets, 2.Viajantes, 3.Namorados... Design de Interação | Karine e Leandro
  17. 17. 2o passo: Listar características de cada tipo1. Demográficas: Idade, sexo, classe social, onde vivem, cultura, formação, profissão...2. Tecnológicas: Quais são suas habilidades? Uso mais frequente? Hardware, conexão?3. Contexto de uso: Onde usaria (casa, escritório, metrô..)? Que horas, por quanto tempo?4. Estilo de vida: Valores, atitudes. O que procuram? Diversão, rapidez, desafio, conforto... Quais são seus hobbies? O que detesta, o tira do sério ou incomoda? Design de Interação | Karine e Leandro
  18. 18. 2o passo: Listar características de cada tipo5. Necessidades: diretas e periféricas (mas importantes. ex: segurança no metrô)6. Desejos: o que eles querem, não o que dizem que querem. (Gladwell, spaghetti sauce)7. Conhecimento: Na área relacionada, cultura geral. Novatos? Experts? Curiosos?8. Lealdade: Frequência de uso, compromisso (software sazonal, apple vs android...).9. Dê um nome, um rosto, uma frase emblemática: Design de Interação | Karine e Leandro
  19. 19. 2o passo: Listar características de cada tipoRoberto, 42 anos, Jornalista Saulinho, 22 anos, cursa Letras Júlia, 16 anos, estudante, twiteira Mochileiro sazonal Design de Interação | Karine e Leandro
  20. 20. 3o passo: Determinar usuário(s) focal(is) (patton) ou primário(s) (cooper) 1. "É um usuário que deve ser atendido e não seria com uma interface projetada para outra pessoa." (Cooper) 2. Todo sistema tem ao menos 1 3. Se identificamos mais de 1, temos mais de uma interface. Se identificarmos mais de 3, temos um problema. (citar ML) Design de Interação | Karine e Leandro
  21. 21. 3o passo: Determinar usuários focais (patton) ou primários (cooper) zo rio l al sa uá na foc us a ag op nãRoberto, 42 anos, Jornalista Saulinho, 22 anos, cursa Letras Júlia, 16 anos, estudante, twiteira Mochileiro sazonal Design de Interação | Karine e Leandro
  22. 22. Sugestão de PattonNome, Idade Papel descrição, frase emblemáticaNecessidades no Tarefas no sistema para necessidadesmundo real Design de Interação | Karine e Leandro
  23. 23. Design de Interação | Karine e Leandro
  24. 24. Design de Interação | Karine e Leandro
  25. 25. TO DO DONEEM GRUPO! produto para seu personas Criar 31) o focal er uma com 2) Escolh o de 5’ ar apre sentaçã 3) Mont Design de Interação | Karine e Leandro
  26. 26. Personas ágeis1o passo: Determinar tipos de usuários2o passo: Listar características de cada tipo3o passo: Determinar usuários focais Design de Interação | Karine e Leandro
  27. 27. Questionários Ciclo de vida do produto e rking entrevistas chmaBen ot n/ o ão a çã ot ig uis pr des aç ipa sq lid pe va nas prototipação perso Design de Interação | Karine e Leandro
  28. 28. Prototipaçãoquebrando ovos para fazer omeletes Design de Interação | Karine e Leandro
  29. 29. Protótipo ~ modelo = Design de Interação | Karine e Leandro
  30. 30. lembrando...São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a comunicação de informações. Design de Interação | Karine e Leandro
  31. 31. Podem ser de baixa ou alta resoluçãoBaixa: Para explorar ideias, conceitos, fluxosAlta: para validar decisões pontuais Design de Interação | Karine e Leandro
  32. 32. “Devemos criar exatamente quantadocumentação necessitamos para executarbem um projeto, e não mais.” -Dan Saffer Design de Interação | Karine e Leandro
  33. 33. Nós ❤ PAPEL!• Nada digital é mais rápido, flexível e fácil de prototipar• Não requer habilidades específicas• É mais barato e colaborativo;• Variedade = possibilidades: Diferentes cores, tamanhos, texturas, adesivos...• Tamanho é documento (difícil ter um monitor do tamanho de uma cartolina)• Estimula desapego• Reciclável, divertido, estimula a equipe Design de Interação | Karine e Leandro
  34. 34. Cenário “São protótipos feitos de palavras”• Os protagonistas são as PERSONAS• Devem refletir comportamento no sistema• Uma boa prática é passar diferentes personas pelo mesmo cenário• Um bom cenário é imaginar o primeiro uso Design de Interação | Karine e Leandro
  35. 35. CenárioUma imagem vale mil palavras.Mas as palavras certas podem valer algumas boas imagens.Lúcia Maria loga em sua conta Sacolao.com. Vê seu pedido da semanapassada e decide usá-lo de novo para esta semana. Remove alguns itensarrastando-os de sua Cestinha®, e o valor ajusta automaticamente.Satisfeita com a compra, clica no botão Entrega rápida e confirma odébito em seu cartão de crédito previamente salvo. A tela deconfirmação informa para esperar a entrega nas próximas 2 horas. Design de Interação | Karine e Leandro
  36. 36. TO DO DONE PO!EM GRU rimeiro uso ou rio (pCriar um cená em sua e) e a plicá-lo tare fa chav Focal. Persona Design de Interação | Karine e Leandro
  37. 37. Storyboards Design de Interação | Karine e Leandro
  38. 38. StoryboardsTécnica da publicidade, HQs e cinema, que ilustra interações complexas Design de Interação | Karine e Leandro
  39. 39. Storyboards• Imagens + legendas• Ilustram fluxos, momentos chave• Casos de uso• Mostram ambientes e contextos• Complementam wireframes Design de Interação | Karine e Leandro
  40. 40. TO DO DONE O!E M GRUP para o yboardCriar um stor criado. cenário Design de Interação | Karine e Leandro
  41. 41. Task flows diagrama de fluxo• Fluxos são tão importantes quanto telas• Representam as possibilidades de navegação no sistema Design de Interação | Karine e Leandro
  42. 42. Task flowsdiagrama de fluxo Design de Interação | Karine e Leandro
  43. 43. FFFFFFFFFFFFFFFFFFFFFFFFUUUUUUU Design de Interação | Karine e Leandro
  44. 44. Task flowsdiagrama de fluxoFluxos são interações de um indivíduo, elementos / escolhas Design de Interação | Karine e Leandro
  45. 45. Task flowsdiagrama de fluxoExemplo: Adicionando um item na TO-DO do Basecamp. Design de Interação | Karine e Leandro
  46. 46. Task flowsdiagrama de fluxo• É rápido de fazer e simples de enxergar. Design de Interação | Karine e Leandro
  47. 47. Task flows diagrama de fluxoEstrutura • Barra separa a interface da ação • Barra pontilhada separa as opções para mesma interface • Setas vão da ação para a nova interface • Se a interface for fora de escopo, fica sem ação Design de Interação | Karine e Leandro
  48. 48. TO DO DONE RUP O!E M SUBG ipal (e tare fa princdefinir fluxo da erando r temp o) consid ma is, se de uso. os c asos de Design de Interação | Karine e Leandro
  49. 49. Rascunhos Design de Interação | Karine e Leandro
  50. 50. Rascunhos• Ideias primárias, generalistas, fluxos.• São feios! estimulam a discussão sobre função e uso Design de Interação | Karine e Leandro
  51. 51. Wireframes Design de Interação | Karine e Leandro
  52. 52. Wireframesprotótipos estruturais do sistema Design de Interação | Karine e Leandro
  53. 53. Wireframesprotótipos estruturais do sistemaRegistram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do design visual (branding, layout) Design de Interação | Karine e Leandro
  54. 54. Wireframes protótipos estruturais do sistema Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do design visual (branding, layout)Podem ser usados para validar ideias Design de Interação | Karine e Leandro
  55. 55. Wireframes protótipos estruturais do sistema Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do design visual (branding, layout)Podem ser usados para validar ideiasPodem ser usados para testes com usuários Design de Interação | Karine e Leandro
  56. 56. WireframesSubstituem documentos mais burocráticos, sãoespecificações visuais comprometidas com: • Estrutura • Arquitetura da informação • Controles (padrões de interação) • Conteúdo Design de Interação | Karine e Leandro
  57. 57. Design de Interação | Karine e Leandro
  58. 58. Design de Interação | Karine e Leandro
  59. 59. Design de Interação | Karine e Leandro
  60. 60. Design de Interação | Karine e Leandro
  61. 61. Design de Interação | Karine e Leandro
  62. 62. Design de Interação | Karine e Leandro
  63. 63. papel=desapego Design de Interação | Karine e Leandro
  64. 64. Design de Interação | Karine e Leandro
  65. 65. Design de Interação | Karine e Leandro
  66. 66. Prototipando e testando low fihttp://www.youtube.com/watch?v=k9mTvt0LXgk Design de Interação | Karine e Leandro
  67. 67. wireouts Design de Interação | Karine e Leandro
  68. 68. layouts Design de Interação | Karine e Leandro
  69. 69. EM GRU Prot PO! o rasc tipar e unho m s, ou cimatem refin dos po: r á-lo esto s da a ula s á gil, podemo que isso é Lembrem f oi decidido. dar o que CAOS! mu ID EAÇÃO = Design de Interação | Karine e Leandro
  70. 70. Design de Interação | Karine e Leandro
  71. 71. Questionários Ciclo de vida do produto e rking entrevistas chmaBen ot n/ o ão a çã ot ig uis pr des aç ipa sq lid pe va nas prototipação estes perso t Design de Interação | Karine e Leandro
  72. 72. Teste com usuários Design de Interação | Karine e Leandro
  73. 73. Teste de usabilidade‣ Observação de usuários realizando tarefas importantes no produto para entender padrão de uso e problemas no produto. Design de Interação | Karine e Leandro
  74. 74. Pra que serve?‣ Avaliar o entendimento da interface e dos fluxos projetados‣ Identificar pontos críticos da interação (ruídos, dúvidas, rupturas)‣ Comparar desempenho em produtos diferentes (benchmark/concorrência) Design de Interação | Karine e Leandro
  75. 75. Tipos de testes‣ Teste em campo (menos formal) ‣ Teste em laboratório (mais controlado) Design de Interação | Karine e Leandro
  76. 76. Tipos de testes Design de Interação | Karine e Leandro
  77. 77. Tipos de testes‣ Em laboratório (mais formal) + permite maior controle dos dados e variáveis + mais fácil de envolver o cliente – usuário pode se sentir mais desconfortável – mais distante do contexto de uso real‣ Em campo (ambiente natural) + usuário se sente mais à vontade + mais próximo do contexto de uso real – menor controle dos dados e variáveis – dificuldade de envolver o cliente Design de Interação | Karine e Leandro
  78. 78. Tipos de testes‣ Laboratório é ideal para: ‣ produção acadêmica (rigor científico para teses, artigos e dissertações) ‣ medição de performance (tempo, número de erros etc.) ‣ estudos permanentes com equipe dedicada (ex.: Nokia, Globo etc.)‣ Avaliação em campo é ideal para: ‣ obter feedback rápido dos usuários ‣ usabilidade em equipes ágeis de desenvolvimento ‣ custo baixo é prioridade ‣ testar conceitos e interfaces em fases iniciais de design Design de Interação | Karine e Leandro
  79. 79. O que testar?‣ Teste em protótipo em papel: ‣ Teste em produto final. Servem para testar conceitos Avaliar eficiência, satisfação, e fluxos. compreensão etc. Design de Interação | Karine e Leandro
  80. 80. Etapas1.Planejamento2.Recrutamento3.Aplicação4.Análise Design de Interação | Karine e Leandro
  81. 81. Planejamento1. determinar metas e objetivos do teste2. escolher o que medir (tempo, compreensão, satisfação etc)3. definir perfil de participantes4. definir tarefas e contexto (motivação)5. preparar os materiais, equipe, ambiente e ferramentas6. executar um teste piloto Design de Interação | Karine e Leandro
  82. 82. 1 - Determinar os objetivos Exemplos‣ Os usuários entendem de forma clara o que é e para que serve a extensão?‣ Os usuários têm alguma dificuldade para instalar a extensão?‣ Eles sabem onde e como fazer?‣ Completam todas as etapas de instalação corretamente? Design de Interação | Karine e Leandro
  83. 83. TO DO DONE O!E M GRUP teste s objet ivos dodeter minar o lhido do prod uto esco Design de Interação | Karine e Leandro
  84. 84. 2 - Escolher o que medir A métrica depende do objetivo‣ Satisfação geral‣ Tempo de execução de tarefa‣ Número de passos para conclusão de uma tarefa‣ Quantidade de erros‣ Quantidade de tarefas completadas‣ Proporção de usuários favoráveis ao sistema em relação ao concorrente Design de Interação | Karine e Leandro
  85. 85. TO DO DONE O!E M GRUP teste s métr icas dodeter minar a Design de Interação | Karine e Leandro
  86. 86. 3 - Definir perfil de participantes‣ Quem deve usar este produto?‣ Quantos participantes escolher? Nielsen sugere: ‣ 5 (de cada perfil) para qualitativo (quick and dirty! rápido e sujo) ‣ 20 para quantitativo‣ Onde encontrar? ‣ Redes sociais, contatos pessoais, contatos do cliente, usuários atuais, questionário na web, empresas de recrutamento etc. Design de Interação | Karine e Leandro
  87. 87. 3 - Definir perfil de participantes Design de Interação | Karine e Leandro
  88. 88. 3 - Definir perfil de participantes Exemplo ‣ 2 usuários lead e 4 intermediários ‣ Pessoas que procuram ou procuraram imóveis recentemente. ‣ Contatos não fornecidos pelo cliente. Design de Interação | Karine e Leandro
  89. 89. 4 - Definir tarefas e contextoTarefas: O que precisa ser testado? ‣ Quais são as funcionalidades mais críticas? ‣ Passos esperados em cada tarefa (se for relevante) ‣ Tempo esperado em cada tarefa (se for relevante) ‣ Um teste nunca deve passar de 2h (ideal é até 1h)Contexto: Motivação para tarefa (ajuda na compreensão) Design de Interação | Karine e Leandro
  90. 90. 4 - Definir tarefas e contextoExemplo (tarefas) ‣ Encontrar um imóvel ‣ Alterar filtros ‣ verificar IPTU ‣ Encontrar informações de contato ‣ Salvar nos “favoritos” ‣ Encontrar a lista de favoritos Design de Interação | Karine e Leandro
  91. 91. 4 - Definir tarefas e contextoExemplo (contextos) ‣ Opção 1:Você se mudou para Curitiba e precisa arrumar um imóvel pra alugar.Como você encontraria este imóvel? ‣ Opção 2:Facilitador: Você procurou um imóvel recentemente? Como foi essaexperiência? Tente encontrar um semelhante nesse site. Usuário: Nãoencontrei... Facilitador: Por que você acha que o site não encontrou?Usuário: Deve ser a faixa de preço que escolhi, foi baixa. Facilitador: Comovocê alteraria a faixa de preços? Design de Interação | Karine e Leandro
  92. 92. TO DO DONE O!E M GRUP ários taref as e cendefinir EM GRUPO! definir passos e tempo das tarefas (se relevante) Design de Interação | Karine e Leandro
  93. 93. 5 - Preparar roteiroEstrutura do roteiro ‣ Propósito do teste ‣ Lembrar que quem é avaliado é o sistema e não usuário ‣ Que o objetivo é melhorar a interface ‣ Que a identidade será mantida em sigilo ‣ Participação é voluntária ‣ Explicar como será o teste ‣ Explicar que podem fazer perguntas, mas nem todas poderão ser respondidas ‣ Small talk, contextualizar ‣ Explicar as tarefas ‣ Realizar entrevista semi-estruturada no final Design de Interação | Karine e Leandro
  94. 94. TO DO DONE O!E M GRUP teste o teiro docriar o r Design de Interação | Karine e Leandro
  95. 95. 6 - Executando um teste pilotoExecutar com alguém não envolvido diretamente com a execução do testePermite testar as condições do teste‣ As tarefas foram compreendidas pelos usuários?‣ Todas as tarefas foram possíveis de concluir?‣ Os equipamentos estão ok?‣ O protótipo precisa ser ajustado?‣ O questionário está ok?Envolvidos: 1 a 3 usuários (depende da complexidade do teste,normalmente 1 basta) Design de Interação | Karine e Leandro
  96. 96. Aplicação Equipe envolvida‣ Orientador/condutor ‣ Orientar o participante ‣ Fazer com que se sinta a vontade ‣ Responder perguntas (se possível) ‣ Não induzir comportamento (tendenciar)‣ Observador ‣ Registrar interação do usuário ‣ Não interferir no teste‣ Opcionais: recepcionista e co-observadores (clientes e outros membros da equipe) Design de Interação | Karine e Leandro
  97. 97. Aplicação Participantes (usuários)‣ Posso/devo pagar usuário? ‣ Na publicação de papers, artigos esta prática não é aceita ‣ No mercado é comum e há opções alternativas ao dinheiro (vale-compra, brindes etc.)‣ O que o usuário precisa saber? ‣ Que está sendo observado ‣ Que sua identidade será preservada ‣ Indicar espelhos, câmeras, microfones etc. ‣ Precisa aceitar o termo de consentimento Design de Interação | Karine e Leandro
  98. 98. Software espião‣ Quicktime (http://www.apple.com/quicktime/download/)‣ SilverBack (http://silverbackapp.com/)‣ CamStudio (http://camstudio.org/)‣ Camtasia (http://www.techsmith.com/products/studio/default.asp )‣ Morae (http://www.techsmith.com/products/morae/default.asp)‣ Ovo Logger (http://www.ovostudios.com/ovologger.asp#during )‣ ScreenCam (http://www.smartguyz.com/index.html )‣ ZD Soft (http://www.zdsoft.com/downloads.html) Design de Interação | Karine e Leandro
  99. 99. Como conduzir os testes?‣ Escolha somente uma pessoa para falar com o usuário (condutor)‣ O observador deve se posicionar de forma a ver a tela e as reações do usuário‣ Comece com tarefas mais simples‣ Responda as dúvidas que puder, quando não puder diga que você não pode responder para não interferir o teste Design de Interação | Karine e Leandro
  100. 100. Como conduzir os testes? Usuário comenta: “Mas isso não é inútil?” Design de Interação | Karine e Leandro
  101. 101. Como conduzir os testes? Usuário comenta: “Mas isso não é inútil?” Resposta inadequada: "Não." Resposta adequada: "Por que você acha isso?" Design de Interação | Karine e Leandro
  102. 102. Como observar os testes?‣ Procure por padrões de uso e fenômenos‣ Não interfira no teste (função do orientador/condutor)‣ Marque o tempo inicial (quando medindo o tempo)‣ Anote pontos de dificuldade‣ Anote o caminho percorrido‣ Anote as sugestões do participante‣ Anote se a tarefa foi realizada com sucesso ou não‣ Anote frases/depoimentos que exemplifiquem algo importante‣ Anote o tempo final Design de Interação | Karine e Leandro
  103. 103. Think aloud / “pensar em voz alta”‣ Objetivo: explicitar o processo mental dos participantes‣ Vantagens ‣ Ajuda a captar entendimento ‣ Ajuda a captar sugestões ‣ Descobrir por que os usuários estão agindo de determinada forma‣ Desvantagem ‣ Atrapalha na medição do tempo/performance Design de Interação | Karine e Leandro
  104. 104. Think aloud / “pensar em voz alta”‣ Como estimular a falar?‣ Use perguntas! ‣ “Em que você está pensando?” ‣ “Por que optou por clicar aí?” ‣ “Por que você desistiu de ir por lá?” ‣ “O que você está entendendo por (termo)?” Design de Interação | Karine e Leandro
  105. 105. TO DO DONE O!E M GRUP ador e ientado r, observd efinir or outro car usu ário com usu ário; tro ste! plicar te grupo; a Design de Interação | Karine e Leandro
  106. 106. Card sorting Design de Interação | Karine e Leandro
  107. 107. Card sorting Como seus usuários enxergam seu conteúdo? • compreendendo modelos mentais Design de Interação | Karine e Leandro
  108. 108. Por que usar card sorting?‣ Imagine que você deseje emitir a 2ª via de uma multa e este é o menu do site... ‣ Detran ‣ Habilitação ‣ Veículos ‣ Infrações ‣ Estatísticas ‣ Legislação ‣ Solicitação de serviços Design de Interação | Karine e Leandro
  109. 109. Etapas do card sorting 1. Levantamento do conteúdo (se ainda não feito) 2. Seleção dos cartões (20 a 30 cartões é suficiente) 3. Aplicação (em grupo de usuários ou individual) 4. Análise dos resultados e criação do mapa do site. Design de Interação | Karine e Leandro
  110. 110. Resultado do card sorting Design de Interação | Karine e Leandro
  111. 111. Exercício card sorting Cada grupo deve eleger uma pessoa para ser o “moderador”, que irá explicar e observar o agrupamento feito. Deve sempre orientar ao participante a agrupar da forma que faz mais sentido para ele. 1. Agrupar os cartões (observar o porquê do agrupamento) 2. Dar nome ao grupo de cartões 3. Apresentação dos resultados e do que foi observado Participantes: na hora de agrupar, pensar sempre em “se eu estivesse procurando este assunto no site, onde ele estaria, perto de qual outro assunto” Design de Interação | Karine e Leandro
  112. 112. Card sorting online http://websort.net/ http://www.optimalworkshop.com/optimalsort.htm Design de Interação | Karine e Leandro
  113. 113. Trabalho individual 50 ptsEscolha um produto interativo (ex.: um celular, um aplicativo de iPhone, um softwareetc) e identifique os componentes da interação, respondendo:1. Quem são os possíveis usuários deste produto? (pense em diferentes públicos)2. O que estes usuários podem fazer no produto? (liste as tarefas)3. Em qual ambiente ele é usado? E como este ambiente pode afetar a interação?4. Descreva a interface do produto, os elementos e recursos de design usados.5. Quais elementos desta interface tornam o uso mais agradável?6. Quais elementos desta interface podem prejudicar a interação?Prazo de entrega: 06/01/12 enviar para lbalves@gmail.com e karinedrumond@gmail.comNão esquecer de colocar o produto escolhido e fotos de demonstração.Ilustrar com imagens, fotos, tabelas etc. Design de Interação | Karine e Leandro
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×