7/17/12 Julho 2012                                                       Horácio SoaresFonte: http://commons.wikimedia.org...
7/17/12O que osclientes/usuáriosbuscam em ume-commerce?                    felicidade                                      2
7/17/12    felicidadeX    felicidade                      3
7/17/12                       felicidade              Xexperiência perfeita                                         4
7/17/12felicidade      e o que as empresas           esperam?                                 5
7/17/12                      aumentar a                satisfação dos clientes                 e obter mais lucro...     T...
7/17/12  mas como?com qualidade...                        7
7/17/12        com uma     experiência de       qualidade...Acertandoo tiro certono alvo certo                           8
7/17/12com estratégia“uma conspiração  para o sucesso”                         9
7/17/12 Mas falta de estratégia eplanejamento resulta em…                                 10
7/17/12     XAfinal, o que é eXperiência     do Usuário (UX) ?                                  11
7/17/12“   eXperiência do  Usuário (UX) é a    qualidade daexperiência que uma   pessoa tem ao interagir com algo         ...
7/17/12    13
7/17/12    14
7/17/12  •  uma experiência depaciência, muita paciência…                                  15
7/17/12•  mais do que isso...                             16
7/17/12    17
7/17/12•  outro exemplo...•  CASA CRUZ                          18
7/17/12    19
7/17/12    20
7/17/12    21
7/17/12  •  Ambos exemplosapresentam problemas que   seriam evitados com planejamento e testes de       usabilidade...    ...
7/17/12    Como projetar    para a eXperiência    do Usuário?http://semanticstudios.com/publications/semantics/000029.php ...
7/17/12http://semanticstudios.com/publications/semantics/000029.php                                                       ...
7/17/12http://semanticstudios.com/publications/semantics/000029.php                                                   http...
7/17/12http://semanticstudios.com/publications/semantics/000029.php                                                       ...
7/17/12http://semanticstudios.com/publications/semantics/000029.php                                                       ...
7/17/12                                            Xhttp://semanticstudios.com/publications/semantics/000029.php          ...
7/17/12http://semanticstudios.com/publications/semantics/000029.php                                                       ...
7/17/12http://semanticstudios.com/publications/semantics/000029.php                                                       ...
7/17/12 Entretanto, a experiência  pertence as pessoas.O designer/desenvolvedornão projeta a experiência…      Projeta par...
7/17/12             Um problema...Objetivos                        Reaise metas                  necessidadesdo projeto   ...
7/17/12Falta de equilíbrio                          33
7/17/12         Marte                         VênusObjetivos e metas da empresa   Necessidades dos usuários               ...
7/17/12                     a busca                 do equilíbrio             empresa Objetivose metas do  projeto        ...
7/17/12Um caminho: modelagem participativa                                          36
7/17/12     Um outro caminhovem da busca pelas melhores          IDADES         IDADES?                                  37
7/17/12            }Acessibil                IDADE                            38
7/17/12    39
7/17/12    40
7/17/12          X  Conformidade com      o decreto de lei     Decreto nº 5.296     (dez/04) e com a convenção da ONUque g...
7/17/12            }Acessibil Usabil                IDADE                            42
7/17/12X    Pessoas com       pouca    experiência e      medo do     computador                        43
7/17/12          Comercial       Mercado Livre“Eu compro o que quiser, 2011senão quiser,não compro”Comercial do Mercado   ...
7/17/12    45
7/17/12            }Acessibil  UsabilSimplic                 IDADEParadoxo da escolha                             46
7/17/12ESPN Brasil– abril 2010XESPN Brasil– abril 2010                              47
7/17/12     10 princípios de UX do GooglePrincípio 3. O simples é poderoso.                                         48
7/17/12Em uma interface perfeita,as pessoas nunca deveriam  errar, principalmente ao    fazer uma compra…                 ...
7/17/12             } Acessibil   Usabil  SimplicInterativ                 IDADE                             50
7/17/12    51
7/17/12             }Acessibil   Usabil  Simplic Interativ  Veloc          IDADE                             52
7/17/12    53
7/17/12XX        54
7/17/12X        55
7/17/12    56
7/17/12    57
7/17/12    58
7/17/12    59
7/17/12Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/                                              ...
7/17/12Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/Fonte: Sergio Lopes http://sergiolopes.org/fro...
7/17/12Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/Fonte: Sergio Lopes http://sergiolopes.org/fro...
7/17/12    63
7/17/12       10 princípios de UX do GooglePrincípio 2 - cada milisegundo importa.  Melhor definição de milisegundo?      ...
7/17/12X        65
7/17/12X        66
7/17/12               }  Acessibil     Usabil    Simplic   Interativ      VelocEncontrabil                   IDADE   Atrat...
7/17/12         X     10 princípios de UX do GooglePrincípio 8 – agrade aos olhos sem          distrair a mente           ...
7/17/12                  }    Acessibil       Usabil      Simplic     Interativ        Veloc  Encontrabil                 ...
7/17/12Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012Case apresentado ...
7/17/12Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012               Ob...
7/17/12Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012Case apresentado ...
7/17/12               }  Acessibil     Usabil    Simplic   Interativ      VelocEncontrabil                   IDADE     Atr...
7/17/12  Acessibil    Usabil  Simplic               }  Acessibil     Usabil    Simplic   Interativ      VelocEncontrabil  ...
7/17/12A melhor idade vem da:}     Investigação     Observação     Colaboração        Análise       Avaliação       Valida...
7/17/12Construindo um e-commerce                                76
7/17/12            modelagem participativa           Sitemap - fluxoAntes de prototipar, crie coletivamente (designers, ar...
7/17/12Um Vocabulário Visual para AI e Design de Interaçãohttp://iainstitute.org/pt/translations/000332.htmlhttp://migre.m...
7/17/12     horizontal gluedot     is attached to the end of this arrow     vertical gluedot     is attached to the end of...
7/17/12Prototipação                     Prototipação   A prototipagem é uma cultura de projeto:   •  Ferramenta de colabor...
7/17/12              “Erre logo para ser bem           sucedido mais cedo.” IDEOFaber Ludens – Érico Fileno    •  O único ...
7/17/12Prototipação em papel Prototipagem em Papel                             82
7/17/12"  Paper Prototyping"  Paper Prototyping                           83
7/17/12        Wireframe       Wireframe  Wireframe não especifica       design gráfico. Sua função é apresentar oselement...
7/17/12              http://migre.me/wICahttp://www.flickr.com/photos/callendercreates/3055332137/sizes/o/in/set-721576113...
7/17/12Usabilidade                  86
7/17/12                  UsabilidadeAfinal o que é usabilidade?                                    87
7/17/12              UsabilidadeUsabilidade é definida como a capacidade que um sistema   interativo oferece a seuusuário,...
7/17/121 - efetividade                      89
7/17/12 1 - Efetividade Um site com boa efetividade permite que o usuário alcance os objetivos iniciais de interação. Exem...
7/17/12 2 - Eficiência É a quantidade de esforço necessário para se chegar a um determinado objetivo. Quanto menos esforço...
7/17/12                              3 - satisfação 3 - Satisfação Talvez seja a mais difícil de medir e quantificar, pois...
7/17/12     “Efetividade, eficiência e   satisfação são as medidas de          usabilidade mais  freqüentemente considerad...
7/17/12   Produto: banana  ●    Facilidade de aprendizagem:http://www.flickr.com/photos/bocavermelha                      ...
7/17/12    Eficiência    de uso    Grau de    produtividade    atingido pelo    usuário depois    que aprendeu    a utiliz...
7/17/12       Baixa taxa de erros     ●    Medida do quanto o usuário          pode ser induzido ao erro          pelo sis...
7/17/12Quer uma boa interface?   Teste…  Avaliaçãode Usabilidade                     97
7/17/12     Principais Métodos- Entrevistas e questionários    http://www.slideshare.net/agner/usabilidade-i-h-c-definicao...
7/17/12               Tão ou mais            importante que as              entrevistas é a              observação...By E...
7/17/12Como o cliente explicou     O que o cliente    o que queria          realmente precisava                           ...
7/17/12   101
7/17/12   102
7/17/12   103
7/17/12   104
7/17/12     Principais Métodos   - Teste de usabilidade  tradicional: solicita aos   usuários que realizemdeterminadas tar...
7/17/12Testes de Usabilidade (camtasia)  Vídeo: Teste de Usabilidade       site Olhar Digitalhttp://www.youtube.com/watch?...
7/17/12Outros testes mais rápidos...Teste de usabilidade -outras          técnicas:       Teste dos 5 segundos            ...
7/17/12               Teste dos 5 segundos                            - Mostrar ao usuário a página de conteúdodurante 5 s...
7/17/12   Teste dos 5 segundos – primeiro site                     Escreva tudo o que viu e percebeu.    Agora marque com ...
7/17/12   Teste dos 5 segundos – segundo site                     Preste atenção a tudo que for visto            na página...
7/17/12         Teste dos 5 segundos                   Escreva tudo o que viu e percebeu.    Agora marque com um X o    co...
7/17/12           First clic test.                            Se o usuário não clicar certo a primeira vez, a chance de cl...
7/17/12   113
7/17/12   114
7/17/12   115
7/17/12   116
7/17/12No site dos Correios, faça uma rastreamento por:     SS987654321BR         Correios– outubro 2011                  ...
7/17/12No site do Portal Brasil, procure por Seguro     Desemprego.       Brasil.gov.br– outubro 2011                     ...
7/17/12     - Avaliação Heurística- As 10 heurísticas de Nielsen1) feedback2) falar a linguagem do usuário3) saídas claram...
7/17/12- As 10 heurísticas de Nielsen6) minimizar a sobrecarga dememória do usuário7) atalhos8) diálogos simples e naturai...
7/17/12- Eye Tracking         http://www.slideshare.net/pveugen/guerilla-usability                                        ...
7/17/12- Card Sorting           Card Sorting         É uma técnica para         obter dados sobre o          modelo mental...
7/17/12   123
7/17/12   124
7/17/12                                               Teste A/B                                                           ...
7/17/12               Teste A/B é o nome que se dá a             estratégia de colocar duas ou mais            experiência...
7/17/12 Usabilidade x Web Analytics(profissionais de braços dados)                                     127
7/17/12Projetando formulário que       funcionam.                               128
7/17/12   129
7/17/12   130
7/17/12   131
7/17/12   132
7/17/12   133
7/17/12Práticas para diminuir o abandono do carrinho      de comprar                              134
7/17/12Abandono de carrinho de compras: 55 – 72%    http://www.slideshare.net/Elasticpath/maximizing-conversion-with-check...
7/17/12      http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization                       ...
7/17/12                                                         •  14% não queria se                                      ...
7/17/1259% dos compradores esperam o custo totalantes de fecharem a compra - OneOpenWeb                                   ...
7/17/12    Não está pronto para comprar?Salvar o conteúdo docarrinho de compraspode salvar a compra                       ...
7/17/12“Call to Action” reforça a  urgência da compra                     urgência                                   140
7/17/12   Não quer se registrar para comprar?   23% dos compradores abandonam oCheckout se forem obrigados a se registrar....
7/17/12Uusários não leem instruções e provavelmente vão começar a digitar no primeiro campo de                formulário.....
7/17/12                 Referências/links:       - E-book free do Google Varejo                     http://googlevarejo.bl...
7/17/12capacidades/ vantagens  do mobile                  144
7/17/12GPSAcelerômetro                  145
7/17/12            GiroscópioBluetooth                            146
7/17/12Áudio, vídeo e imagemNFC                           147
7/17/12Sensores multitoque  Em qualquer hora e local.                                 148
7/17/12Novas maneiras de interação e apresentação        Boa compatibilidade entre       navegadores Mobile e HTML5       ...
7/17/12Atualizações frequentes...                                150
7/17/12limitações/restrições      do mobileMuitas vezes, ao interagir com mobile, as pessoas estão em   modo: “fritando o ...
7/17/12@lukew            152
7/17/12         ‘Desktop is like “diving”              while mobile is               “snorkling.”’            by Rachel Hi...
7/17/12                     tela grande                     energia                     rede consistente                  ...
7/17/12         mobile@lukew                     155
7/17/12         tela pequena         bateria         rede inconsistente         dedo gordo         sensores@lukew         ...
7/17/12Outras limitações:●    Capacidade de processamento reduzida.●    Uma aplicação em HTML5 para mobile     pode ser at...
7/17/12Por isso, em projetos mobile,   precisamos estratégia,IDADE(n)(e design de verdade      perda de 80% do espaço     ...
7/17/12@lukew         Pode parecer uma tragédia, mas isso pode                ser ótimo para o negócio...@lukew           ...
7/17/12               te força a priorizar...             te força a manter o foco…@lukew         Alguém conhece algum sit...
7/17/12           Flickr desktop         60 opções de menu...@lukew@lukew                                   161
7/17/12           Flickr mobile         7 opções de menu...@lukew           Less is more...                               ...
7/17/12@lukew         restrições são boas para o          design, pois te forçam a         priorizar, a manter o foco     ...
7/17/12               Desktop first!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/              Mobile First ...
7/17/12                    Mobile First!    http://arquiteturadeinformacao.com/2010/06/04/mobile-first/Elimine da interfac...
7/17/12Horácio Soareshoracio.soares@internativa.com.brfacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares       ...
Próximos SlideShares
Carregando em…5
×

Usabilidade e o e-commerce

567 visualizações

Publicada em

Palestra Usabilidade e o e-commerce

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
567
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
12
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Usabilidade e o e-commerce

  1. 1. 7/17/12 Julho 2012 Horácio SoaresFonte: http://commons.wikimedia.org/wiki/File:26220022.jpg Horácio Soares horacio@digitalacesso.com horacio.soares@internativa.com.br facebook.com/internativabrasil (21) 9925-5404 - @horaciosoares 1
  2. 2. 7/17/12O que osclientes/usuáriosbuscam em ume-commerce? felicidade 2
  3. 3. 7/17/12 felicidadeX felicidade 3
  4. 4. 7/17/12 felicidade Xexperiência perfeita 4
  5. 5. 7/17/12felicidade e o que as empresas esperam? 5
  6. 6. 7/17/12 aumentar a satisfação dos clientes e obter mais lucro... Todos querem o melhor osso…Mulher com notebook em sinal de ok Cachorrinho caregando um enorme osso. 6
  7. 7. 7/17/12 mas como?com qualidade... 7
  8. 8. 7/17/12 com uma experiência de qualidade...Acertandoo tiro certono alvo certo 8
  9. 9. 7/17/12com estratégia“uma conspiração para o sucesso” 9
  10. 10. 7/17/12 Mas falta de estratégia eplanejamento resulta em… 10
  11. 11. 7/17/12 XAfinal, o que é eXperiência do Usuário (UX) ? 11
  12. 12. 7/17/12“ eXperiência do Usuário (UX) é a qualidade daexperiência que uma pessoa tem ao interagir com algo ” projetado. uxnet.org exemplos deexperiências ruins… 12
  13. 13. 7/17/12 13
  14. 14. 7/17/12 14
  15. 15. 7/17/12 •  uma experiência depaciência, muita paciência… 15
  16. 16. 7/17/12•  mais do que isso... 16
  17. 17. 7/17/12 17
  18. 18. 7/17/12•  outro exemplo...•  CASA CRUZ 18
  19. 19. 7/17/12 19
  20. 20. 7/17/12 20
  21. 21. 7/17/12 21
  22. 22. 7/17/12 •  Ambos exemplosapresentam problemas que seriam evitados com planejamento e testes de usabilidade... 22
  23. 23. 7/17/12 Como projetar para a eXperiência do Usuário?http://semanticstudios.com/publications/semantics/000029.php 23
  24. 24. 7/17/12http://semanticstudios.com/publications/semantics/000029.php 24
  25. 25. 7/17/12http://semanticstudios.com/publications/semantics/000029.php http://www.sedentario.org/wp-content/uploads/2008/06/cachorrosempata2.jpg 25
  26. 26. 7/17/12http://semanticstudios.com/publications/semantics/000029.php 26
  27. 27. 7/17/12http://semanticstudios.com/publications/semantics/000029.php 27
  28. 28. 7/17/12 Xhttp://semanticstudios.com/publications/semantics/000029.php 28
  29. 29. 7/17/12http://semanticstudios.com/publications/semantics/000029.php 29
  30. 30. 7/17/12http://semanticstudios.com/publications/semantics/000029.php 30
  31. 31. 7/17/12 Entretanto, a experiência pertence as pessoas.O designer/desenvolvedornão projeta a experiência… Projeta para a experiência do usuário. 31
  32. 32. 7/17/12 Um problema...Objetivos Reaise metas necessidadesdo projeto dos usuários 32
  33. 33. 7/17/12Falta de equilíbrio 33
  34. 34. 7/17/12 Marte VênusObjetivos e metas da empresa Necessidades dos usuários Equilíbrio? 34
  35. 35. 7/17/12 a busca do equilíbrio empresa Objetivose metas do projeto Necessidades dos usuários usuários 35
  36. 36. 7/17/12Um caminho: modelagem participativa 36
  37. 37. 7/17/12 Um outro caminhovem da busca pelas melhores IDADES IDADES? 37
  38. 38. 7/17/12 }Acessibil IDADE 38
  39. 39. 7/17/12 39
  40. 40. 7/17/12 40
  41. 41. 7/17/12 X Conformidade com o decreto de lei Decreto nº 5.296 (dez/04) e com a convenção da ONUque ganhou força de lei Decreto nº 6.949 (ago/09). 41
  42. 42. 7/17/12 }Acessibil Usabil IDADE 42
  43. 43. 7/17/12X Pessoas com pouca experiência e medo do computador 43
  44. 44. 7/17/12 Comercial Mercado Livre“Eu compro o que quiser, 2011senão quiser,não compro”Comercial do Mercado Livre 2011 44
  45. 45. 7/17/12 45
  46. 46. 7/17/12 }Acessibil UsabilSimplic IDADEParadoxo da escolha 46
  47. 47. 7/17/12ESPN Brasil– abril 2010XESPN Brasil– abril 2010 47
  48. 48. 7/17/12 10 princípios de UX do GooglePrincípio 3. O simples é poderoso. 48
  49. 49. 7/17/12Em uma interface perfeita,as pessoas nunca deveriam errar, principalmente ao fazer uma compra… 49
  50. 50. 7/17/12 } Acessibil Usabil SimplicInterativ IDADE 50
  51. 51. 7/17/12 51
  52. 52. 7/17/12 }Acessibil Usabil Simplic Interativ Veloc IDADE 52
  53. 53. 7/17/12 53
  54. 54. 7/17/12XX 54
  55. 55. 7/17/12X 55
  56. 56. 7/17/12 56
  57. 57. 7/17/12 57
  58. 58. 7/17/12 58
  59. 59. 7/17/12 59
  60. 60. 7/17/12Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/ 60
  61. 61. 7/17/12Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/ 61
  62. 62. 7/17/12Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/ 62
  63. 63. 7/17/12 63
  64. 64. 7/17/12 10 princípios de UX do GooglePrincípio 2 - cada milisegundo importa. Melhor definição de milisegundo? } Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil 64
  65. 65. 7/17/12X 65
  66. 66. 7/17/12X 66
  67. 67. 7/17/12 } Acessibil Usabil Simplic Interativ VelocEncontrabil IDADE Atrativ 67
  68. 68. 7/17/12 X 10 princípios de UX do GooglePrincípio 8 – agrade aos olhos sem distrair a mente 68
  69. 69. 7/17/12 } Acessibil Usabil Simplic Interativ Veloc Encontrabil IDADE Atrativ Util 10 princípios de UX do GooglePrincípio 1 – foque nas pessoas: suas vidas, trabalho, sonhos. 69
  70. 70. 7/17/12Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012 70
  71. 71. 7/17/12Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012 Observação e identificação de um problema... 71
  72. 72. 7/17/12Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012 72
  73. 73. 7/17/12 } Acessibil Usabil Simplic Interativ VelocEncontrabil IDADE Atrativ Util Facil 73
  74. 74. 7/17/12 Acessibil Usabil Simplic } Acessibil Usabil Simplic Interativ VelocEncontrabil IDADE Atrativ Util Facil Portabil … 74
  75. 75. 7/17/12A melhor idade vem da:} Investigação Observação Colaboração Análise Avaliação Validação 75
  76. 76. 7/17/12Construindo um e-commerce 76
  77. 77. 7/17/12 modelagem participativa Sitemap - fluxoAntes de prototipar, crie coletivamente (designers, arquitetos de informação,desenvolvedores front/back, analista de negócios, gerentes, etc.) fluxos com os principais passos dos clientes em seu site/sistema. 77
  78. 78. 7/17/12Um Vocabulário Visual para AI e Design de Interaçãohttp://iainstitute.org/pt/translations/000332.htmlhttp://migre.me/wI0XUm Vocabulário Visual para AI e Design deInteraçãohttp://iainstitute.org/pt/translations/000332.html - http://migre.me/wI0X O vocabulário é baseado em um modelo conceitual simples que engloba arquitetura de informação e design de interação: •  O sistema mostra caminhos ao usuário. •  O usuário move-se ao longo destes caminhos por meio de ações. •  Estas ações fazem, então, com que o sistema gere resultados. 78
  79. 79. 7/17/12 horizontal gluedot is attached to the end of this arrow vertical gluedot is attached to the end of this arrowhttp://www.jjg.net/ia/visvocab/garrett_ia_ppt.zip Protótipos Depois, crie “coletivamente" protótipos em papel, em computador... 79
  80. 80. 7/17/12Prototipação Prototipação A prototipagem é uma cultura de projeto: •  Ferramenta de colaboração •  Ajuda a controlar o risco •  Propicia descobertas felizes (sorte!) •  Modo rápido e barato de resolver problemasFaber Ludens – Érico Fileno 80
  81. 81. 7/17/12 “Erre logo para ser bem sucedido mais cedo.” IDEOFaber Ludens – Érico Fileno •  O único jeito de você descobrir se aquela idéia funciona ou não é com um protótipo!Faber Ludens – Érico Fileno 81
  82. 82. 7/17/12Prototipação em papel Prototipagem em Papel 82
  83. 83. 7/17/12"  Paper Prototyping"  Paper Prototyping 83
  84. 84. 7/17/12 Wireframe Wireframe Wireframe não especifica design gráfico. Sua função é apresentar oselementos que vão compor a página. 84
  85. 85. 7/17/12 http://migre.me/wICahttp://www.flickr.com/photos/callendercreates/3055332137/sizes/o/in/set-72157611343470237/ 85
  86. 86. 7/17/12Usabilidade 86
  87. 87. 7/17/12 UsabilidadeAfinal o que é usabilidade? 87
  88. 88. 7/17/12 UsabilidadeUsabilidade é definida como a capacidade que um sistema interativo oferece a seuusuário, em um determinadocontexto de operação, para a realização de tarefas, de maneira eficaz, eficiente e agradável (ISO 9241). Desenhar sistemas com usabilidade significa proporcionar ao usuário:(ISO 9241-11 / International Standards Organization) http://www.slideshare.net/agner/usabilidade-i-h-c-definicao-slide-share 88
  89. 89. 7/17/121 - efetividade 89
  90. 90. 7/17/12 1 - Efetividade Um site com boa efetividade permite que o usuário alcance os objetivos iniciais de interação. Exemplos: - Percentual de usuários que completam a tarefa com sucesso. - Número de erros do usuário. - Taxa de interações com sucesso/erros.Robson Santos - http://webinsider.uol.com.br/index.php/2003/06/19/alguns-conceitos-para-avaliar-usabilidade/ 2 - eficiência 90
  91. 91. 7/17/12 2 - Eficiência É a quantidade de esforço necessário para se chegar a um determinado objetivo. Quanto menos esforço o usuário tiver, melhor. Exemplos: - Tempo para completar uma tarefa. - Tempo gasto usando a ajuda ou documentação. - Tempo de aprendizagemRobson Santos - http://webinsider.uol.com.br/index.php/2003/06/19/alguns-conceitos-para-avaliar-usabilidade/ 3 - satisfação 91
  92. 92. 7/17/12 3 - satisfação 3 - Satisfação Talvez seja a mais difícil de medir e quantificar, pois pode estar relacionada a fatores altamente subjetivos. Geralmente a satisfação se refere ao nível de conforto ao utilizar a interface. Exemplos: - Nota da satisfação do usuário. - Proporção de afirmações durante o teste que são positivas / negativas. - Proporção de usuários que dizem que eles preferem usar o sistema do que o de algum concorrente. - Freqüência das reclamações.Robson Santos - http://webinsider.uol.com.br/index.php/2003/06/19/alguns-conceitos-para-avaliar-usabilidade/ 92
  93. 93. 7/17/12 “Efetividade, eficiência e satisfação são as medidas de usabilidade mais freqüentemente consideradas em relação a websites. Apesar de algo subjetivas, servem de parâmetro para alcançar melhorias.” Robson Santos - http://webinsider.uol.com.br/index.php/2003/06/19/alguns-conceitos-para-avaliar-usabilidade/Atributos da UsabilidadeCinco atributosda usabilidade(NIELSEN, 1993): 93
  94. 94. 7/17/12 Produto: banana ●  Facilidade de aprendizagem:http://www.flickr.com/photos/bocavermelha 94
  95. 95. 7/17/12 Eficiência de uso Grau de produtividade atingido pelo usuário depois que aprendeu a utilizar o sistema.http://www.flickr.com/photos/arkworld/472578586/ Facilidade de memorização Retenção, capacidade do usuário de voltar a utilizar o sistema após certo tempo sem precisar aprendê-lo novamente. http://www.flickr.com/photos/sashala/316866777/ 95
  96. 96. 7/17/12 Baixa taxa de erros ●  Medida do quanto o usuário pode ser induzido ao erro pelo sistema e o quanto pode se recuperar do mesmo.http://www.flickr.com/photos/kalimistuk/2226314453/ http://www.flickr.com/photos/phitar/2110659824/ Satisfação subjetiva - Medida do quanto o usuário se sente feliz de estar utilizando o sistema. 96
  97. 97. 7/17/12Quer uma boa interface? Teste… Avaliaçãode Usabilidade 97
  98. 98. 7/17/12 Principais Métodos- Entrevistas e questionários http://www.slideshare.net/agner/usabilidade-i-h-c-definicao-slide-share http://www.slideshare.net/pveugen/guerilla-usability 98
  99. 99. 7/17/12 Tão ou mais importante que as entrevistas é a observação...By Erico Fileno 99
  100. 100. 7/17/12Como o cliente explicou O que o cliente o que queria realmente precisava 100
  101. 101. 7/17/12 101
  102. 102. 7/17/12 102
  103. 103. 7/17/12 103
  104. 104. 7/17/12 104
  105. 105. 7/17/12 Principais Métodos - Teste de usabilidade tradicional: solicita aos usuários que realizemdeterminadas tarefas no site em análise, pensando em voz alta, enquanto são observados. http://www.slideshare.net/agner/usabilidade-i-h-c-definicao-slide-share 105
  106. 106. 7/17/12Testes de Usabilidade (camtasia) Vídeo: Teste de Usabilidade site Olhar Digitalhttp://www.youtube.com/watch? v=9LAApah_UrQ Vídeo do Steve Krug realizando um teste de usabilidade (seu objetivo com o vídeo foi mostrar como o teste de usabilidade pode ser uma tarefa simples e que pode ser realizada por qualquer um). http://www.youtube.com/watch?v=QckIzHC99Xc Livro do Steve Krug: Simplificando coisas que parecem complicadas http://www.altabooks.com.br/simplificando-coisas-que-parecem- complicadas.html Documentos em português para preparação e realização de testes de usabilidade http://www.altabooks.com.br/index.php? dispatch=attachments.getfile&attachment_id=41 106
  107. 107. 7/17/12Outros testes mais rápidos...Teste de usabilidade -outras técnicas: Teste dos 5 segundos  Utilizado para avaliar o conteúdodas principais páginas de seu site (com exceção da homepage e outras páginas com muitas prioridades). http://www.slideshare.net/agner/usabilidade-i-h-c-definicao-slide-share 107
  108. 108. 7/17/12 Teste dos 5 segundos   - Mostrar ao usuário a página de conteúdodurante 5 segundos. A sua tarefa será prestar atenção a tudo que for visto na página.   - Cria-se um senário: você procurainformações sobre planos de hospedagem de sites. Entre no site X, olhe tudo durante 5 segundos e escreve em um papel tudo o que viu e percebeu. Agora marque com um X o conteúdo mais importante.   Técnica interessante para comparar duas soluções para o design de conteúdo. Teste dos 5 segundos – primeiro site  Preste atenção a tudo que for visto na página. Você terá apenas 5 segundos...  108
  109. 109. 7/17/12 Teste dos 5 segundos – primeiro site  Escreva tudo o que viu e percebeu. Agora marque com um X o conteúdo mais importante.   109
  110. 110. 7/17/12 Teste dos 5 segundos – segundo site  Preste atenção a tudo que for visto na página. Você terá apenas 5 segundos...  110
  111. 111. 7/17/12 Teste dos 5 segundos  Escreva tudo o que viu e percebeu. Agora marque com um X o conteúdo mais importante.   First clic test.   111
  112. 112. 7/17/12 First clic test.   Se o usuário não clicar certo a primeira vez, a chance de clicar certo depois será muito baixa.   É técnica muito boa e rápida para testar se os seus links estão funcionando.   Chama o usuário e cria alguns senários para testar a homepage, como, por exemplo, ondevocê clicaria para mudar sua senha. E observe o usuário. Procure o local onde poderá se cadastrar para receber ofertas. 112
  113. 113. 7/17/12 113
  114. 114. 7/17/12 114
  115. 115. 7/17/12 115
  116. 116. 7/17/12 116
  117. 117. 7/17/12No site dos Correios, faça uma rastreamento por: SS987654321BR Correios– outubro 2011 117
  118. 118. 7/17/12No site do Portal Brasil, procure por Seguro Desemprego. Brasil.gov.br– outubro 2011 118
  119. 119. 7/17/12 - Avaliação Heurística- As 10 heurísticas de Nielsen1) feedback2) falar a linguagem do usuário3) saídas claramente demarcadas4) consistência5) prevenir erros http://usabilidoido.com.br/as_10_heuristicas_de_nielsen_.html 119
  120. 120. 7/17/12- As 10 heurísticas de Nielsen6) minimizar a sobrecarga dememória do usuário7) atalhos8) diálogos simples e naturais9) boas mensagens de erro10) ajuda e documentação http://usabilidoido.com.br/as_10_heuristicas_de_nielsen_.html- 1 heurística importante parae-commerce “Call to Action” 120
  121. 121. 7/17/12- Eye Tracking http://www.slideshare.net/pveugen/guerilla-usability 121
  122. 122. 7/17/12- Card Sorting Card Sorting É uma técnica para obter dados sobre o modelo mental dos usuários no que diz respeito ao espaço de informação (Nielsen, 2004). 122
  123. 123. 7/17/12 123
  124. 124. 7/17/12 124
  125. 125. 7/17/12 Teste A/B   Teste A/B  http://webop.com.br/blog/wp-content/uploads/2012/06/endo-ab-test.jpeg 125
  126. 126. 7/17/12 Teste A/B é o nome que se dá a estratégia de colocar duas ou mais experiências no ar, ao mesmo tempo, para que, com base nos resultados, se descubra qual das opções foi a melhor aceita pelas pessoas.  The red button outperformed the green button by 21%http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx?source=Blog_Email_[The+Button+Color+A%2fB] 126
  127. 127. 7/17/12 Usabilidade x Web Analytics(profissionais de braços dados) 127
  128. 128. 7/17/12Projetando formulário que funcionam. 128
  129. 129. 7/17/12 129
  130. 130. 7/17/12 130
  131. 131. 7/17/12 131
  132. 132. 7/17/12 132
  133. 133. 7/17/12 133
  134. 134. 7/17/12Práticas para diminuir o abandono do carrinho de comprar 134
  135. 135. 7/17/12Abandono de carrinho de compras: 55 – 72% http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization Por que os clientes abandonam o Checkout? http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization 135
  136. 136. 7/17/12 http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization •  44% custo de delivery caro. •  41% não estava pronto para comprar •  27% quer comparar preços •  25% os preços estão acima do desejado •  24% querem salvar a compra para depois5 principais razões não são problemas de design / usabilidade http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization 136
  137. 137. 7/17/12 •  14% não queria se registrar •  12% Achou que o site pedia informações demais •  11% Checkout confuso e longo demais •  11% Website muito lento •  10% Falta de informações Próximas 5 razões por problemas de design / usabilidade http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization"Por alguma razão, uma oferta de frete grátis que faz o cliente economizar R$ 6,99 é maisatraente para muitos do que um desconto que reduz o preço de compra em R$ 10,00 David Bell, WhartonSchool Business 137
  138. 138. 7/17/1259% dos compradores esperam o custo totalantes de fecharem a compra - OneOpenWeb 138
  139. 139. 7/17/12 Não está pronto para comprar?Salvar o conteúdo docarrinho de compraspode salvar a compra 139
  140. 140. 7/17/12“Call to Action” reforça a urgência da compra urgência 140
  141. 141. 7/17/12 Não quer se registrar para comprar? 23% dos compradores abandonam oCheckout se forem obrigados a se registrar. Forrester Research 141
  142. 142. 7/17/12Uusários não leem instruções e provavelmente vão começar a digitar no primeiro campo de formulário... O Jeito Amazon... Um formulário para todos os clientes – captura o endereço de e- mail no primeiro passo do cliente. 142
  143. 143. 7/17/12 Referências/links: - E-book free do Google Varejo http://googlevarejo.blogspot.com.br/ - E-Commerce Checkout Usabilityhttp://baymard.com/checkout-usability?gclid=CIGL7fmAmLECFQWxnQodWHh93Q - Creating the best E-commerce UX http://www.slideshare.net/somethingdigitl/creating-the-best-ecommerce-user- experience-ux-something-digital- Maximizing conversion with Checkout optimization http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout- optimization 143
  144. 144. 7/17/12capacidades/ vantagens do mobile 144
  145. 145. 7/17/12GPSAcelerômetro 145
  146. 146. 7/17/12 GiroscópioBluetooth 146
  147. 147. 7/17/12Áudio, vídeo e imagemNFC 147
  148. 148. 7/17/12Sensores multitoque Em qualquer hora e local. 148
  149. 149. 7/17/12Novas maneiras de interação e apresentação Boa compatibilidade entre navegadores Mobile e HTML5 149
  150. 150. 7/17/12Atualizações frequentes... 150
  151. 151. 7/17/12limitações/restrições do mobileMuitas vezes, ao interagir com mobile, as pessoas estão em modo: “fritando o peixe e olhando o gato” e com apenas um dos dedos... 151
  152. 152. 7/17/12@lukew 152
  153. 153. 7/17/12 ‘Desktop is like “diving” while mobile is “snorkling.”’ by Rachel Hinman at Nokia desktop@lukew 153
  154. 154. 7/17/12 tela grande energia rede consistente teclado mouse cadeira mesa@lukew tela grande energia rede consistente teclado mouse cadeira caneca de café mesa@lukew 154
  155. 155. 7/17/12 mobile@lukew 155
  156. 156. 7/17/12 tela pequena bateria rede inconsistente dedo gordo sensores@lukew 156
  157. 157. 7/17/12Outras limitações:●  Capacidade de processamento reduzida.●  Uma aplicação em HTML5 para mobile pode ser até 100 vezes mais lenta que em desktop. http://spaceport.io/spaceport_perfmarks_2_report_2012_5.pdf Como o Luli disse no Digitalks no Rio: “Nesse mundo Mobile, somos todos daltónicos e sofremos do Mal de Parkinson” 157
  158. 158. 7/17/12Por isso, em projetos mobile, precisamos estratégia,IDADE(n)(e design de verdade perda de 80% do espaço 158
  159. 159. 7/17/12@lukew Pode parecer uma tragédia, mas isso pode ser ótimo para o negócio...@lukew 159
  160. 160. 7/17/12 te força a priorizar... te força a manter o foco…@lukew Alguém conhece algum site que gostaria que 80% do seu conteúdo/itens/elementos fosse retirado da interface?@lukew 160
  161. 161. 7/17/12 Flickr desktop 60 opções de menu...@lukew@lukew 161
  162. 162. 7/17/12 Flickr mobile 7 opções de menu...@lukew Less is more... 162
  163. 163. 7/17/12@lukew restrições são boas para o design, pois te forçam a priorizar, a manter o foco 163
  164. 164. 7/17/12 Desktop first!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/ Mobile First Luke Wroblewski 164
  165. 165. 7/17/12 Mobile First! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/Elimine da interface itens que não sejam extremamente necessários... 165
  166. 166. 7/17/12Horácio Soareshoracio.soares@internativa.com.brfacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares 166

×