Acessibilidade e Usabilidade no E-commerce - Horacio Soares

3.776 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
1 comentário
5 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
3.776
No SlideShare
0
A partir de incorporações
0
Número de incorporações
102
Ações
Compartilhamentos
0
Downloads
69
Comentários
1
Gostaram
5
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • É garantir que a informação esteja disponível e acessível a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de visitante/usuário, independente de sua capacidade motora, visual, auditiva, mental, computacional, cultural ou social.
  • É garantir que a informação esteja disponível e acessível a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de visitante/usuário, independente de sua capacidade motora, visual, auditiva, mental, computacional, cultural ou social.
  • É garantir que a informação esteja disponível e acessível a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de visitante/usuário, independente de sua capacidade motora, visual, auditiva, mental, computacional, cultural ou social.
  • É garantir que a informação esteja disponível e acessível a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de visitante/usuário, independente de sua capacidade motora, visual, auditiva, mental, computacional, cultural ou social.
  • design universal: princípios Connell - 1997 Princípio 1: Uso eqüitativo O design é útil e pode ser vendido para pessoas com habilidade diversas. Princípio 2: Flexibilidade no uso O design acomoda uma grande variedade de preferências e habilidades individuais. Ex.: Menu Globo e Esportes Globo Apresentação de Amanda Meincke Melo http://www.todosnos.unicamp.br/acessibilidade/pub/JAI7_SBC2005/
  • Old age - http://www.un.org/esa/population/publications/worldageing19502050/ Bar chart showing percent of population of world, more developed regions and less developed regions aged 60 or older for 1950, 1975, 2000, 2025, 2050. Percentage increase for all 3 regions. For example, for the world, the percent of people older than 60 goes from about 8% in 1950 to 20% projected fro 2050. Total population of world in 2050 projected to be 9.3 billion.
  • 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

    ×