O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Acessibilidade e Usabilidade no E-commerce - Horacio Soares

3.801 visualizações

Publicada em

Como a acessibilidade e usabilidade podem afetar o seu e-commerce? Usabilidade é muito mais que design. Horacio Soares founder da Acesso Digital.net explica na sua palestra que foi apresentada no Circuito 4x1 Campo Grande 2011.

Publicada em: Negócios

Acessibilidade e Usabilidade no E-commerce - Horacio Soares

  1. 1. Circuito 4x1 Campo Grande - Setembro - 2011 Horácio Soares O que a Acess ibilidade e a Usabil idade podem fazer pelo seu e-Com merce?
  2. 2. Apresentação Horácio Soares [email_address] 55 ( 21 ) 9925-5404 @ horaciosoares
  3. 4. <ul><li>Formas Farmacêuticas e apresentações </li></ul><ul><li>Nome Genérico </li></ul><ul><li>Uso </li></ul><ul><li>Composição </li></ul><ul><li>Ação esperada do medicamento </li></ul><ul><li>Cuidados de armazenamento </li></ul><ul><li>Cuidados de Administração </li></ul><ul><li>Interrupção do tratamento </li></ul><ul><li>Indicações </li></ul><ul><li>Contra-indicações </li></ul><ul><li>Preocupações e Advertências </li></ul><ul><li>Reações Adversas </li></ul><ul><li>Superdosagem </li></ul><ul><li>Posologia </li></ul>
  4. 5. Qual é o momento atual do e-Commerce n o Brasil?
  5. 7. O que os usuários esperam?
  6. 8. Felicidade…
  7. 9. <ul><li>- Encontrabilidade - Velocidade </li></ul><ul><li>- Usabilidade - Preço </li></ul><ul><li>- Comodidade </li></ul><ul><li>- Segurança </li></ul><ul><li>- Bom atendimento </li></ul><ul><li>- Variedade </li></ul><ul><li>- Qualidade </li></ul><ul><li>… </li></ul>
  8. 10. E o q ue as empresas de e-Commerce esperam?
  9. 11. Aumentar a satisfação dos usuários para obter mais lucro
  10. 12. Mas como
  11. 13. Acertando o tiro certo no alvo certo
  12. 14. Para onde vamos? http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
  13. 15. Livro: O Tiro e o Alvo Causo 1 Precisamos C onstruir u ma mesa.
  14. 16. CAUSO 1 - A propósito, que mesa? Livro: O Tiro e o Alvo
  15. 17. De sinuca?
  16. 18. Ping-pong?
  17. 19. Futebol de botão?
  18. 20. Carteado?
  19. 21. Ou seria uma mesa para computador?
  20. 22. Reunião?
  21. 23. Escritório?
  22. 24. Mesa de centro?
  23. 25. Jantar?
  24. 26. Ou seria uma mesa de cirurgia?
  25. 27. De autópsia ?
  26. 28. CAUSO 1 (continuação) - Isso não interessa, meu filho. Depois a gente vê. Vamos começar logo o trabalho. O prazo é curto, então, mãos à obra! Livro: O Tiro e o Alvo
  27. 29. Conclusão? Retrabalho, desgaste com o cliente e diminuição do lucro.
  28. 30. Problema?
  29. 31. Escolha do a lvo …
  30. 33. Uma proposta?
  31. 34. Por Quê? Por Quê? Por Quê? Por Quê? Por Quê? Precisamos automatizar a Contabilidade Preciso do Balancete dia 5 e não dia 15 como atualmente! Necessito da Conta X do Balancete até o dia 5. Preciso do valor da Conta X para calcular até o dia 7 o valor das Reservas. Precisamos informar o valor das Reservas ao Banco Central até o dia 8! Por que se não informarmos as Reservas seremos multados!! Investigação Baseada em Perguntas
  32. 35. <ul><li>Primeiro passo </li></ul><ul><li>F oco na p r imeira camada da experiência do usuárioc (Garet): </li></ul><ul><li>Definição dos objetivos e metas do projeto. </li></ul><ul><li>Identificação das necessidades dos usuários </li></ul>
  33. 37. d e s i g n
  34. 38. Mas afinal o que é design
  35. 39. E a aparência, é importante para o design
  36. 40. Qual dos dois sanduiches você escolheria? Foto de um sanduíche comprado em uma loja qualquer. Foto do mesmo sanduíche e para fins de marketing.
  37. 41. But... design is not just cosmetic.
  38. 42. But... design is not just cosmetic. also
  39. 43. Design não é arte! Clara com 3 anos, pintanto o “ sete ”
  40. 44. Não é maquiagem...
  41. 45. http://www.flickr.com/photos/alltheaces/67904915/ Porquinho rosa e sorridente de pelúcia
  42. 46. http://www.flickr.com/photos/melmoththewanderer/31029375/ Fucinho de um porco de verdade...
  43. 47. Porco disfarçado
  44. 48. Vaca disfarçada
  45. 49. Não deve ser pesado
  46. 50. Não deve ser poluído. Diversas chaminés de uma fabrica poluindo o ar. 70 x 30
  47. 53. globo.com Julho 2007
  48. 55. globo.com Agosto 2007
  49. 57. Não deve ser desorganizado... Onde está o Wally?
  50. 58. Ambíguo? Quatro mãos juntas, uma para cada lado.
  51. 59. Complicado Executivo na frente de um grande labirinto.
  52. 60. Confuso Um poste com dezenas de setas para todos os lados
  53. 61. Frustrante
  54. 62. Não deve discriminar Uma peça de pião de xadrez isolado de outros 27 piões.
  55. 63. Ou ser inacessível Um homem amarrado, com olhos vendados e boca tapada.
  56. 64. Não requer habilidades especiais Uma mão auxiliando a outra no uso do mouse.
  57. 65. Uma cobra fala para outra Querida, travou de novo!!! Andem meninos vão ajudar seu pai a dar Control + Alt + Del.
  58. 66. Ou ser difícil de usar
  59. 67. Não é apenas uma aparência bonita Um close de um belo rosto feminino.
  60. 68. Afinal, o que é design
  61. 69. É uma disciplina que explora o diálogo entre: Usability Body of Knowledge - Fonte: http://www.usabilitybok.org/design/p286 produtos pessoas contexto
  62. 73. <ul><ul><li>Design é um processo que desenvolve soluções para ajudar as pessoas a alcançar seus objetivos. </li></ul></ul>Usability Body of Knowledge - Fonte: http://www.usabilitybok.org/design/p286
  63. 74. Algumas soluções criativas para resolver problemas
  64. 75. http://www.claragaggero.com/?p=135 http://vimeo.com/11784148 Out of the box - book
  65. 80. Problema: Como fazer os homens acertarem o alvo em mictórios públicos?
  66. 81. Algumas soluções caras e criativas, mas um tanto machistas… Fonte: internet - desconhecida
  67. 82. Fonte: internet - desconhecida
  68. 83. Fonte: internet - desconhecida
  69. 84. Fonte: internet - desconhecida
  70. 86. Outras ideias… Fonte: internet - desconhecida
  71. 89. Uma solução simples e barata, mas que funciona… Fonte: internet - desconhecida
  72. 91. Acertar na mosca… Fonte: internet - desconhecida
  73. 92. Fonte: internet - desconhecida
  74. 93. Ou tentar mudar a cultura de alguns homens
  75. 95. Fonte: internet - http://bucomania.blogspot.com/2007/08/banheiros-criativos.html
  76. 96. Fonte: internet - http://bucomania.blogspot.com/2007/08/banheiros-criativos.html
  77. 97. Fonte: internet - http://www.inovavox.com Mas no contexto errado...
  78. 98. Ou ainda fazer o carinha acertar o alvo e ainda gerar conscientização…
  79. 100. Mas, na busca por soluções para os problemas, o que maioria dos sites de e-Commerce faz?
  80. 101. Copia e cola quase tudo...
  81. 102. Resultado: replicamos tudo sem questionamentos...
  82. 104. Código de barras
  83. 106. CAPTCHA
  84. 107. Captcha http://sam.zoy.org/pwntcha/
  85. 108. Captcha (solução inacessível e insegura) ( http://www.webvisum.com/en/main/download )
  86. 109. Menu DropDown
  87. 111. Usamos o flash como se todos tivessem acesso a ele...
  88. 113. Navegar sem o mouse pelo site  http://www.ibcbrasil.com.br/ Tarefa: procurar pelo link cadastro http://www.farmrio.com.br
  89. 115. Clique aqui!
  90. 116. “ Clique aqui”, “Saiba mais”, “veja Mais ”… 41.700.000 respostas para “ clique aqui ” no Google.
  91. 117. Site da Itautec http://www.itautec.com.br (acesso em setembro 2009)
  92. 118. Mas por que? Porque não temos tempo, porque somos reativos e dá muito trabalho…
  93. 119. Divida o quadrado em 4 partes iguais !!! Dinâmica Livro: O Tiro e o Alvo
  94. 120. Os participantes do teste, em sua maioria, vão chegar facilmente às 4 respostas seguintes: Dinâmica Do livro “O Tiro e o Alvo” Na Livraria da Travessa - http://migre.me/105T7 Editora http://www.caispharoux.com.br/
  95. 121. A partir destas, passam a ter dificuldades para encontrar outras formas de dividir o quadrado. Alguns chegam a afirmar não haver mais soluções possíveis e desistem. Dinâmica Do livro “O Tiro e o Alvo” Na Livraria da Travessa - http://migre.me/105T7 Editora http://www.caispharoux.com.br/
  96. 122. Poder-se-ia ainda dividir o quadrado com retas quebradas, como são os casos [i], [j], [k] e [l] Dinâmica Do livro “O Tiro e o Alvo” Na Livraria da Travessa - http://migre.me/105T7 Editora http://www.caispharoux.com.br/
  97. 123. No pensamento lateral vai-se quebrando barreiras autoimpostas e descobrindo alternativas que jamais seriam consideradas no pensamento vertical. O pensamento lateral é a base da técnica de “ brain storming ” para geração de idéias. Dinâmica Do livro “O Tiro e o Alvo” Na Livraria da Travessa - http://migre.me/105T7 Editora http://www.caispharoux.com.br/
  98. 124. Na busca por novas opções podemos encontrar saídas criativas, inovadoras e mais acessíveis… Inovar é preciso, mas é necessário avaliar: custo x benefício
  99. 125. Uma escada
  100. 127. “ Nem tudo diferente é criativo, mas tudo criativo é diferente ” .
  101. 129. Uma regra de ouro para os usuários
  102. 131. O que você pensa ao dirigir seu carro de casa pro trabalho?
  103. 132. Uma regra de ouro para quem cria
  104. 134. Dentre os públicos de e-commerce, tem algum que não é atendido?
  105. 135. Comercial Mercado Livre 2011
  106. 136. Acessi bilidade? O que é
  107. 137. Usabi lidade? O que é
  108. 138. <ul><li>Qual é o relacionamento </li></ul><ul><li>entre a acessibilidade </li></ul><ul><li>e usabilidade? </li></ul>
  109. 140. <ul><li>design universal </li></ul>
  110. 141. objetivo do design universal: uma solução para todos
  111. 144. <ul><li>Simples e intuitivo (princípio da DU) </li></ul><ul><li>X </li></ul><ul><li>Complexidade e inovação sem validação </li></ul>
  112. 145. Imagem da página inicial do Google Simples e intuitivo (princípio da DU)
  113. 146. <ul><li>Onde está a busca no site da ESPN? </li></ul>
  114. 148. Acessib ilidade e usabi lidade para quem?
  115. 149. Juca, sem visão.
  116. 150. Mandy, sem visão e braços.
  117. 151. Lucas, com baixa visão utilizando o software ampliador de tela.
  118. 152. Para o Isaias, designer e descobriu apenas no início de 2009 que é daltônico. Isaias à esquerda, conduzindo o Januário para um chopinho após curso de acessibilidade Web.
  119. 153. João Henriques deficiente motor utiliza o mouse com dificuldade. ( www.euroacessibilidade.com )
  120. 154. João, tetraplégico João (foto de Maíra Soares )
  121. 155. Tião tem grandes dificuldades motoras e interage com teclado com o dedo mindinho…
  122. 156. Eric interagindo através de teclado expandido - Funlar – Rio (nov/2006).
  123. 157. Deficientes auditivos não oralizados têm dificuldades com o português. Chapeuzinho Vermelho em português e na língua de sinais (prof. Goulão)
  124. 158. Gabriel, linguagem em desenvolvimento... Gabriel compenetrado, olhando para o monitor e clicando com o mouse. Agora ele está olhando e brincando como teclado.
  125. 159. Calvin, pouca experiência e medo do computador Homem com muito medo olhando por cima de um notebook.
  126. 160. Marta e suas amigas…
  127. 161. <ul><li>Number of 80+ year olds in the world </li></ul><ul><ul><li>2000: ~ 69 million </li></ul></ul><ul><ul><li>2010: ~110 million </li></ul></ul><ul><ul><li>2050: ~379 million (close to 2 billion 60+ yr olds) -> </li></ul></ul><ul><ul><li>INCLUIR AQUI UM SLIDE </li></ul></ul><ul><ul><li>DO MERCADO LIVRE </li></ul></ul><ul><ul><li>VELIHINHOS COMPRANDO </li></ul></ul><ul><li>http://www.un.org/esa/population/publications/worldageing19502050/ </li></ul>Our globally aging population Copyright © 2009. World Wide Web Foundation. All rights reserved
  128. 162. Max, com tendinite, usando o mouse com a mão trocada. Homem com expressão de desespero, usando o mouse com a mão esquerda
  129. 163. Analfabeto funcional Um em cada cinco brasileiros (20,3%) é analfabeto funcional, de acordo com a Pnad (Pesquisa Nacional por Amostra de Domicílios) 2009, divulgada pelo IBGE. Homem sentado de frente para um quadro branco sem nada escrito.
  130. 164. Pedro e Laura com dispositivos móveis com acesso a Internet. Pedro olhando para seu smartphone e Laura com uma cara desesperada pera seu celular.
  131. 165. Todos nós na primeira experiência. Um criança com camisa social e gravata em frente a um notebook
  132. 166. E finalmente, o bilionário cego!!! Cifrão desenhado com moedas douradas
  133. 167. Google, o bilionário cego!!! É apenas um robô que indexa conteúdo em texto. Dilbert fazendo parte do logotipo do Google e falando “eu não posso ver”.
  134. 168. SEO pode e deve ajudar, mas cuidado, seu uso pode ser prejudicial…
  135. 169. Quais os benefícios da Acessibilidade e Usabilidade?
  136. 170. Possibilidade de atingir 100% do público alvo.
  137. 171. Atender melhor todas as pessoas
  138. 172. Homem de terno comemorando Fidelizar clientes
  139. 173. Mais fácil de usar e aprender
  140. 174. Proteção contra processos pela falta da acessibilidade
  141. 175. #inacessibilidadenaTam Trending Topics e possivelmente processo no Ministério Público
  142. 176. Novo site da Gol #desacessibilidade
  143. 177. Uma mão com laço no dedo indicador Decreto de lei nº 5.296 (dez/04) e o decreto de lei nº 6.949 (ago/09), onde a convenção da ONU ganhou força de lei.
  144. 178. Visualizar os benefícios da acessibilidade Manutenção mais rápida e barata, melhor performance…
  145. 179. Valorização da Diversidade e Responsabilidade Social. Mãos entrelaçadas
  146. 180. Maior visibilidade pelos sistemas de busca;
  147. 181. Mulher com notebook em sinal de ok Vantagem competitiva
  148. 182. Melhoria da qualidade. Mãe e filha felizes na praia dando uma estrela
  149. 183. Algumas recomendações:
  150. 184. Um bom sistema de e-Commerce é uma interface bem testada… Não faça como a acessibilidade na maioria dos sites brasileiros
  151. 191. Resultado: acessibilidade para inglês ver.
  152. 192. Um caminho … SIMPLICIDADE
  153. 193. Desktop first! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  154. 194. Mobile First! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  155. 195. Less is more...
  156. 196. Elimine da interface itens que não sejam extremamente necessários...
  157. 197. Outros caminhos
  158. 198. <ul><li>Prototipe, avalie e evolua. </li></ul><ul><li>Melhoria contínua… </li></ul>
  159. 199. <ul><li>Teste o acesso ao site e sistema de compras em conexões de baixa velocidade. </li></ul>
  160. 200. <ul><li>Realize testes em dispositivos móveis e de impressão </li></ul>
  161. 201. <ul><li>Teste a navegação navegação via teclado </li></ul>
  162. 202. <ul><li>Teste a navegação navegação via teclado </li></ul>
  163. 203. <ul><li>Teste a Semântica </li></ul>
  164. 204. <ul><li>Evite mudanças inesperadas de foco. </li></ul>
  165. 205. <ul><li>Mantenha o foco/feedback na navegação por links e campos de formulário </li></ul>
  166. 206. <ul><li>Diferencie </li></ul><ul><li>links clicados, ativos, etc. </li></ul>
  167. 207. <ul><li>Crie links/botões cuja área permita que os usuários cometam erros de pontaria... </li></ul>
  168. 208. <ul><li>Mantenha bom contraste entre cores de fundo e dos textos. </li></ul>
  169. 209. <ul><li>Use um tamanho de fontes acessível e escalonável. </li></ul>
  170. 210. <ul><li>Observe usuários com e sem deficiência realizando as </li></ul><ul><li>tarefas do e-commerce. </li></ul>
  171. 211. <ul><li>Futuro... </li></ul>
  172. 212. iPhone, iPad, and iPod touch: Getting started with VoiceOver for accessibility
  173. 213. A ccessible R ich I nternet A pplications ARIA NOW HTML 4 + ARIA HTML5 + ARIA http://www.abilitynet.org.uk/accessibility2/wp-content/uploads/2009/09/HTML5_Accessibility_faulkner.ppt
  174. 214. Obrigado! Horácio Soares [email_address] 55 ( 21 ) 9925-5404 @ horaciosoares

×