Webinar Usabilidade no E-commerce

4,207 views

Published on

Slides do Webinar "Usabilidade no e-commerce", pelo E-commerce Brasil.

Published in: Technology, Travel
1 Comment
12 Likes
Statistics
Notes
No Downloads
Views
Total views
4,207
On SlideShare
0
From Embeds
0
Number of Embeds
2,355
Actions
Shares
0
Downloads
70
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Webinar Usabilidade no E-commerce

  1. 1. Julho 2012 Horácio SoaresFonte: http://commons.wikimedia.org/wiki/File:26220022.jpg
  2. 2. Horácio Soareshoracio@digitalacesso.comhoracio.soares@internativa.com.brfacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares
  3. 3. O que osclientes/usuáriosbuscam em ume-commerce?
  4. 4. felicidade
  5. 5. felicidadeX
  6. 6. felicidade
  7. 7. felicidadeX
  8. 8. experiência perfeita
  9. 9. felicidade
  10. 10. e o que as empresas esperam?
  11. 11. aumentar asatisfação dos clientes e obter mais lucro...
  12. 12. Todos querem o melhor osso…Mulher com notebook em sinal de ok Cachorrinho caregando um enorme osso.
  13. 13. mas como?
  14. 14. com qualidade...
  15. 15. com umaexperiência de qualidade...
  16. 16. Acertandoo tiro certono alvo certo
  17. 17. com estratégia
  18. 18. “uma conspiração para o sucesso”
  19. 19. Mas falta de estratégia eplanejamento resulta em…
  20. 20. X
  21. 21. Afinal, o que é eXperiência do Usuário (UX) ?
  22. 22. “ eXperiência do Usuário (UX) é a qualidade daexperiência que uma pessoa tem ao interagir com algo ” projetado. uxnet.org
  23. 23. exemplos deexperiências ruins…
  24. 24. •  uma experiência depaciência, muita paciência…
  25. 25. •  mais do que isso...
  26. 26. •  outro exemplo...
  27. 27. •  CASA CRUZ
  28. 28. •  Ambos exemplosapresentam problemas que seriam evitados com planejamento e testes de usabilidade...
  29. 29. Como projetar para a eXperiência do Usuário?http://semanticstudios.com/publications/semantics/000029.php
  30. 30. http://semanticstudios.com/publications/semantics/000029.php
  31. 31. http://semanticstudios.com/publications/semantics/000029.php
  32. 32. http://www.sedentario.org/wp-content/uploads/2008/06/cachorrosempata2.jpg
  33. 33. http://semanticstudios.com/publications/semantics/000029.php
  34. 34. http://semanticstudios.com/publications/semantics/000029.php
  35. 35. X
  36. 36. http://semanticstudios.com/publications/semantics/000029.php
  37. 37. http://semanticstudios.com/publications/semantics/000029.php
  38. 38. http://semanticstudios.com/publications/semantics/000029.php
  39. 39. Entretanto, a experiência pertence as pessoas.O designer/desenvolvedornão projeta a experiência… Projeta para a experiência do usuário.
  40. 40. Um problema...
  41. 41. Objetivos Reaise metas necessidadesdo projeto dos usuários
  42. 42. Falta de equilíbrio
  43. 43. Marte VênusObjetivos e metas da empresa Necessidades dos usuários
  44. 44. Equilíbrio?
  45. 45. a buscado equilíbrio
  46. 46. empresa Objetivose metas do projeto Necessidades dos usuários usuários
  47. 47. Um caminho: modelagem participativa
  48. 48. Um outro caminhovem da busca pelas melhores IDADES
  49. 49. IDADES?
  50. 50. }Acessibil IDADE
  51. 51. X
  52. 52. 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).
  53. 53. }Acessibil Usabil IDADE
  54. 54. X
  55. 55. Pessoas com poucaexperiência e medo do computador
  56. 56. Comercial Mercado Livre“Eu compro o que quiser, 2011senão quiser,não compro”Comercial do Mercado Livre 2011
  57. 57. }Acessibil UsabilSimplic IDADE
  58. 58. Paradoxo da escolha
  59. 59. ESPN Brasil– abril 2010
  60. 60. XESPN Brasil– abril 2010
  61. 61. 10 princípios de UX do GooglePrincípio 3. O simples é poderoso.
  62. 62. Em uma interface perfeita,as pessoas nunca deveriam errar, principalmente ao fazer uma compra…
  63. 63. } Acessibil Usabil SimplicInterativ IDADE
  64. 64. }Acessibil Usabil Simplic Interativ Veloc IDADE
  65. 65. X
  66. 66. X
  67. 67. X
  68. 68. Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/
  69. 69. Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/
  70. 70. Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/
  71. 71. Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/
  72. 72. Fonte: Sergio Lopes http://sergiolopes.org/frontinbh-otimizacoes-web/
  73. 73. 10 princípios de UX do GooglePrincípio 2 - cada milisegundo importa. Melhor definição de milisegundo?
  74. 74. } Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil
  75. 75. X
  76. 76. X
  77. 77. } Acessibil Usabil Simplic Interativ VelocEncontrabil IDADE Atrativ
  78. 78. X
  79. 79. 10 princípios de UX do GooglePrincípio 8 – agrade aos olhos sem distrair a mente
  80. 80. } Acessibil Usabil Simplic Interativ VelocEncontrabil IDADE Atrativ Util
  81. 81. 10 princípios de UX do GooglePrincípio 1 – foque nas pessoas: suas vidas, trabalho, sonhos.
  82. 82. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  83. 83. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  84. 84. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  85. 85. Observação e identificação de um problema...
  86. 86. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  87. 87. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  88. 88. } Acessibil Usabil Simplic Interativ VelocEncontrabil IDADE Atrativ Util Facil
  89. 89. Acessibil UsabilSimplic
  90. 90. } Acessibil Usabil Simplic Interativ VelocEncontrabil IDADE Atrativ Util Facil Portabil …
  91. 91. A melhor idade vem da:} Investigação Observação Colaboração Análise Avaliação Validação
  92. 92. Construindo um e-commerce
  93. 93. modelagem participativa
  94. 94. 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.
  95. 95. Um Vocabulário Visual para AI e Design de Interaçãohttp://iainstitute.org/pt/translations/000332.htmlhttp://migre.me/wI0X
  96. 96. Um 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.
  97. 97. 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
  98. 98. Protótipos Depois, crie“coletivamente" protótiposem papel, em computador...
  99. 99. Prototipação
  100. 100. 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
  101. 101. “Erre logo para ser bem sucedido mais cedo.” IDEOFaber Ludens – Érico Fileno
  102. 102. •  O único jeito de você descobrir se aquela idéia funciona ou não é com um protótipo!Faber Ludens – Érico Fileno
  103. 103. Prototipação em papel
  104. 104. Prototipagem em Papel
  105. 105. "  Paper Prototyping
  106. 106. "  Paper Prototyping
  107. 107. Wireframe
  108. 108. Wireframe Wireframe não especifica design gráfico. Sua função é apresentar oselementos que vão compor a página.
  109. 109. http://migre.me/wICahttp://www.flickr.com/photos/callendercreates/3055332137/sizes/o/in/set-72157611343470237/
  110. 110. Usabilidade
  111. 111. Usabilidade
  112. 112. Afinal o que é usabilidade?
  113. 113. 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).
  114. 114. 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
  115. 115. 1 - efetividade
  116. 116. 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/
  117. 117. 2 - eficiência
  118. 118. 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/
  119. 119. 3 - satisfação
  120. 120. 3 - satisfação
  121. 121. 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/
  122. 122. “Efetividade, eficiência e satisfação são as medidas de usabilidade maisfreqüentemente consideradasem relação a websites. Apesarde 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/
  123. 123. Atributos da UsabilidadeCinco atributosda usabilidade(NIELSEN, 1993):
  124. 124. Produto: banana
  125. 125. ●  Facilidade de aprendizagem:http://www.flickr.com/photos/bocavermelha
  126. 126. 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/
  127. 127. Facilidade dememorizaçãoRetenção,capacidade dousuário de voltar autilizar o sistemaapós certo temposem precisaraprendê-lonovamente. http://www.flickr.com/photos/sashala/316866777/
  128. 128. 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/
  129. 129. http://www.flickr.com/photos/phitar/2110659824/Satisfação subjetiva - Medida do quanto o usuário se sente feliz de estar utilizando o sistema.
  130. 130. Quer uma boa interface? Teste…
  131. 131. Avaliaçãode Usabilidade
  132. 132. Principais Métodos- Entrevistas e questionários http://www.slideshare.net/agner/usabilidade-i-h-c-definicao-slide-share
  133. 133. http://www.slideshare.net/pveugen/guerilla-usability
  134. 134. Tão ou maisimportante que as entrevistas é a observação...
  135. 135. By Erico Fileno
  136. 136. Como o cliente explicou O que o cliente o que queria realmente precisava
  137. 137. 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
  138. 138. Testes de Usabilidade (camtasia) Vídeo: Teste de Usabilidade site Olhar Digitalhttp://www.youtube.com/watch? v=9LAApah_UrQ
  139. 139. Vídeo do Steve Krug realizando um teste de usabilidade(seu objetivo com o vídeo foi mostrar como o teste de usabilidade podeser uma tarefa simples e que pode ser realizada por qualquer um).http://www.youtube.com/watch?v=QckIzHC99XcLivro do Steve Krug:Simplificando coisas que parecem complicadashttp://www.altabooks.com.br/simplificando-coisas-que-parecem-complicadas.htmlDocumentos em português para preparação e realizaçãode testes de usabilidadehttp://www.altabooks.com.br/index.php?dispatch=attachments.getfile&attachment_id=41
  140. 140. Outros testes mais rápidos...
  141. 141. 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
  142. 142. 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 cenário: você procura informações sobre planos de hospedagem de sites. Entre no site X e observe a página durante 5 segundos. Agora escreve em um papel tudo o que viu e percebeu. Marque comum X o que chamou mais sua atenção ou achou mais importante.   Técnica interessante para comparar duas soluções para o design de conteúdo.
  143. 143. Teste dos 5 segundos – primeiro site  Preste atenção a tudo que for visto na página. Você terá apenas 5 segundos... 
  144. 144. Teste dos 5 segundos – primeiro site  Escreva tudo o que viu e percebeu. Agora marque com um X o conteúdo mais importante.  
  145. 145. Teste dos 5 segundos – segundo site  Preste atenção a tudo que for visto na página. Você terá apenas 5 segundos... 
  146. 146. Teste dos 5 segundos  Escreva tudo o que viu e percebeu. Agora marque com um X o conteúdo mais importante.  
  147. 147. First clic test.  
  148. 148. First clic test.   Se o usuário não clicar certo a primeira vez, a chance de clicar certo depois será muito baixa.   A técnica muito boa e rápida para testar se osseus links/botões/arquitetura estão funcionando.   Chame o usuário e crie alguns cenários para testar a homepage, como, por exemplo: “Sua senha foi clonada e você precisa mudá-lacom urgência... Onde você clicaria para mudar a senha?” E observe o usuário.
  149. 149. Procure o local onde poderá se cadastrar para receber ofertas.
  150. 150. No site dos Correios, faça uma rastreamento por: SS987654321BR
  151. 151. Correios– outubro 2011
  152. 152. No site do Portal Brasil, procure por Seguro Desemprego.
  153. 153. Brasil.gov.br– outubro 2011
  154. 154. - Avaliação Heurística
  155. 155. - 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
  156. 156. - 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
  157. 157. - 1 heurística importante parae-commerce “Call to Action”
  158. 158. - Eye Tracking
  159. 159. http://www.slideshare.net/pveugen/guerilla-usability
  160. 160. - Card Sorting
  161. 161. Card SortingÉ uma técnica paraobter dados sobre o modelo mental dos usuários no que diz respeito ao espaço de informação (Nielsen, 2004).
  162. 162. Teste A/B  
  163. 163. Teste A/B  http://webop.com.br/blog/wp-content/uploads/2012/06/endo-ab-test.jpeg
  164. 164. Teste A/B é o nome que se dá a estratégia de colocar duas ou maisexperiências no ar, ao mesmo tempo, para que, com base nos resultados, se descubra qual das opções foi a melhor aceita pelas pessoas. 
  165. 165. 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]
  166. 166. Usabilidade x Web Analytics(profissionais de braços dados)
  167. 167. Projetando formulários que funcionam.
  168. 168. Práticas para diminuir o abandono do carrinho de comprar
  169. 169. Abandono de carrinho de compras: 55 – 72% http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization
  170. 170. Por que os clientes abandonam o Checkout?http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization
  171. 171. http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization
  172. 172. •  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
  173. 173. •  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çõesPróximas 5 razões por problemas de design / usabilidade http://www.slideshare.net/Elasticpath/maximizing-conversion-with-checkout-optimization
  174. 174. "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
  175. 175. 59% dos compradores esperam o custo totalantes de fecharem a compra - OneOpenWeb
  176. 176. Não está pronto para comprar?
  177. 177. Salvar o conteúdo docarrinho de compraspode salvar a compra
  178. 178. “Call to Action” reforça a urgência da compra
  179. 179. urgência
  180. 180. Não quer se registrar para comprar?
  181. 181. 23% dos compradores abandonam oCheckout se forem obrigados a se registrar. Forrester Research
  182. 182. Usuários não leem instruções e provavelmente vão começar a digitar no primeiro campo de formulário...
  183. 183. O jeito Amazon... Um formulário para todos os clientes – captura o endereço de e- mail no primeiro passo do cliente.
  184. 184. 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
  185. 185. capacidades/ vantagens do mobile
  186. 186. GPS
  187. 187. Acelerômetro
  188. 188. Giroscópio
  189. 189. Bluetooth
  190. 190. Áudio, vídeo e imagem
  191. 191. NFC
  192. 192. Sensores multitoque
  193. 193. Em qualquer hora e local.
  194. 194. Novas maneiras de interação e apresentação
  195. 195. Boa compatibilidade entrenavegadores Mobile e HTML5
  196. 196. Atualizações frequentes...
  197. 197. limitações/restrições do mobile
  198. 198. Muitas vezes, ao interagir com mobile, as pessoas estão em modo: “fritando o peixe e olhando o gato” e com apenas um dos dedos...
  199. 199. @lukew
  200. 200. ‘Desktop is like “diving” while mobile is “snorkling.”’ by Rachel Hinman at Nokia
  201. 201. desktop@lukew
  202. 202. tela grande energia rede consistente teclado mouse cadeira mesa@lukew
  203. 203. tela grande energia rede consistente teclado mouse cadeira caneca de café mesa@lukew
  204. 204. mobile@lukew
  205. 205. tela pequena bateria rede inconsistente dedo gordo sensores@lukew
  206. 206. Outras 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
  207. 207. Como o Luli disse no Digitalks no Rio:“Nesse mundo Mobile, somos todos daltónicos e sofremos do Mal de Parkinson”
  208. 208. Por isso, em projetos mobile, precisamos estratégia,IDADE (n)(e design de verdade
  209. 209. perda de 80% do espaço
  210. 210. @lukew
  211. 211. Pode parecer uma tragédia, mas isso pode ser ótimo para o negócio...@lukew
  212. 212. te força a priorizar... te força a manter o foco…@lukew
  213. 213. Alguém conhece algum site que gostaria que 80% do seu conteúdo/itens/elementos fosse retirado da interface?@lukew
  214. 214. Flickr desktop 60 opções de menu...@lukew
  215. 215. @lukew
  216. 216. Flickr mobile 7 opções de menu...@lukew
  217. 217. Less is more...
  218. 218. @lukew
  219. 219. restrições são boas para o design, pois te forçam apriorizar, a manter o foco
  220. 220. Desktop first!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  221. 221. Mobile FirstLuke Wroblewski
  222. 222. Mobile First!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  223. 223. Elimine da interface itens que não sejam extremamente necessários...
  224. 224. Horácio Soareshoracio.soares@internativa.com.brfacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares

×