O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Webinar Usabilidade no E-commerce

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 331 Anúncio

Mais Conteúdo rRelacionado

Quem viu também gostou (20)

Semelhante a Webinar Usabilidade no E-commerce (20)

Anúncio

Mais de Horácio Soares (20)

Mais recentes (20)

Anúncio

Webinar Usabilidade no E-commerce

  1. 1. Julho 2012 Horácio Soares Fonte: http://commons.wikimedia.org/wiki/File:26220022.jpg
  2. 2. Horácio Soares horacio@digitalacesso.com horacio.soares@internativa.com.br facebook.com/internativabrasil (21) 9925-5404 - @horaciosoares
  3. 3. O que os clientes/usuários buscam em um e-commerce?
  4. 4. felicidade
  5. 5. felicidade X
  6. 6. felicidade
  7. 7. felicidade X
  8. 8. experiência perfeita
  9. 9. felicidade
  10. 10. e o que as empresas esperam?
  11. 11. aumentar a satisfaçã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 uma experiência de qualidade...
  16. 16. Acertando o tiro certo no alvo certo
  17. 17. com estratégia
  18. 18. “uma conspiração para o sucesso”
  19. 19. Mas falta de estratégia e planejamento 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 da experiência que uma pessoa tem ao interagir com algo ” projetado. uxnet.org
  23. 23. exemplos de experiências ruins…
  24. 24. •  uma experiência de paciência, muita paciência…
  25. 25. •  mais do que isso...
  26. 26. •  outro exemplo...
  27. 27. •  CASA CRUZ
  28. 28. •  Ambos exemplos apresentam 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/desenvolvedor não projeta a experiência… Projeta para a experiência do usuário.
  40. 40. Um problema...
  41. 41. Objetivos Reais e metas necessidades do projeto dos usuários
  42. 42. Falta de equilíbrio
  43. 43. Marte Vênus Objetivos e metas da empresa Necessidades dos usuários
  44. 44. Equilíbrio?
  45. 45. a busca do equilíbrio
  46. 46. empresa Objetivos e metas do projeto Necessidades dos usuários usuários
  47. 47. Um caminho: modelagem participativa
  48. 48. Um outro caminho vem 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 ONU que ganhou força de lei Decreto nº 6.949 (ago/09).
  53. 53. } Acessibil Usabil IDADE
  54. 54. X
  55. 55. Pessoas com pouca experiência e medo do computador
  56. 56. Comercial Mercado Livre “Eu compro o que quiser, 2011 senão quiser, não compro” Comercial do Mercado Livre 2011
  57. 57. } Acessibil Usabil Simplic IDADE
  58. 58. Paradoxo da escolha
  59. 59. ESPN Brasil– abril 2010
  60. 60. X ESPN Brasil– abril 2010
  61. 61. 10 princípios de UX do Google Princí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 Simplic Interativ 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 Google Princípio 2 - cada milisegundo importa. Melhor definição de milisegundo?
  74. 74. } Acessibil Usabil Simplic Interativ Veloc IDADE Encontrabil
  75. 75. X
  76. 76. X
  77. 77. } Acessibil Usabil Simplic Interativ Veloc Encontrabil IDADE Atrativ
  78. 78. X
  79. 79. 10 princípios de UX do Google Princípio 8 – agrade aos olhos sem distrair a mente
  80. 80. } Acessibil Usabil Simplic Interativ Veloc Encontrabil IDADE Atrativ Util
  81. 81. 10 princípios de UX do Google Princí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 Veloc Encontrabil IDADE Atrativ Util Facil
  89. 89. Acessibil Usabil Simplic
  90. 90. } Acessibil Usabil Simplic Interativ Veloc Encontrabil 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 - fluxo Antes 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ção http://iainstitute.org/pt/translations/000332.html http://migre.me/wI0X
  96. 96. Um Vocabulário Visual para AI e Design de Interação http://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 arrow http://www.jjg.net/ia/visvocab/garrett_ia_ppt.zip
  98. 98. Protótipos Depois, crie “coletivamente" protótipos em 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 problemas Faber Ludens – Érico Fileno
  101. 101. “Erre logo para ser bem sucedido mais cedo.” IDEO Faber 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 os elementos que vão compor a página.
  109. 109. http://migre.me/wICa http://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. Usabilidade Usabilidade é definida como a capacidade que um sistema interativo oferece a seu usuário, em um determinado contexto 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 aprendizagem Robson 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 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/
  123. 123. Atributos da Usabilidade Cinco atributos da 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 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/
  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ção de 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 mais importante 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 realizem determinadas 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 Digital http://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 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
  140. 140. Outros testes mais rápidos...
  141. 141. Teste de usabilidade -outras técnicas: Teste dos 5 segundos   Utilizado para avaliar o conteúdo das 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údo durante 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 com um 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 os seus 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á-la com 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 Nielsen 1) feedback 2) falar a linguagem do usuário 3) saídas claramente demarcadas 4) consistência 5) prevenir erros http://usabilidoido.com.br/as_10_heuristicas_de_nielsen_.html
  156. 156. - As 10 heurísticas de Nielsen 6) minimizar a sobrecarga de memória do usuário 7) atalhos 8) diálogos simples e naturais 9) boas mensagens de erro 10) ajuda e documentação http://usabilidoido.com.br/as_10_heuristicas_de_nielsen_.html
  157. 157. - 1 heurística importante para e-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 para obter 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 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. 
  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 depois 5 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ções Pró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 é mais atraente 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 total antes de fecharem a compra - OneOpenWeb
  176. 176. Não está pronto para comprar?
  177. 177. Salvar o conteúdo do carrinho de compras pode 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 o Checkout 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 Usability http://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 entre navegadores 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 a priorizar, a manter o foco
  220. 220. Desktop first! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  221. 221. Mobile First Luke 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 Soares horacio.soares@internativa.com.br facebook.com/internativabrasil (21) 9925-5404 - @horaciosoares

×