Your SlideShare is downloading. ×
Webinar Usabilidade no E-commerce
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webinar Usabilidade no E-commerce

3,741
views

Published on

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

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

Published in: Technology, Travel

1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,741
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
64
Comments
1
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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