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.

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. Apresentação Horácio Soares [email_address] 55 ( 21 ) 9925-5404 @ horaciosoares

5. Qual é o momento atual do e-Commerce n o Brasil?

7. O que os usuários esperam?

8. Felicidade…

10. E o q ue as empresas de e-Commerce esperam?

11. Aumentar a satisfação dos usuários para obter mais lucro

12. Mas como

13. Acertando o tiro certo no alvo certo

14. Para onde vamos? http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg

15. Livro: O Tiro e o Alvo Causo 1 Precisamos C onstruir u ma mesa.

16. CAUSO 1 - A propósito, que mesa? Livro: O Tiro e o Alvo

17. De sinuca?

18. Ping-pong?

19. Futebol de botão?

20. Carteado?

21. Ou seria uma mesa para computador?

22. Reunião?

23. Escritório?

24. Mesa de centro?

25. Jantar?

26. Ou seria uma mesa de cirurgia?

27. De autópsia ?

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

29. Conclusão? Retrabalho, desgaste com o cliente e diminuição do lucro.

30. Problema?

31. Escolha do a lvo …

33. Uma proposta?

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

37. d e s i g n

38. Mas afinal o que é design

39. E a aparência, é importante para o design

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.

41. But... design is not just cosmetic.

42. But... design is not just cosmetic. also

43. Design não é arte! Clara com 3 anos, pintanto o “ sete ”

44. Não é maquiagem...

45. http://www.flickr.com/photos/alltheaces/67904915/ Porquinho rosa e sorridente de pelúcia

46. http://www.flickr.com/photos/melmoththewanderer/31029375/ Fucinho de um porco de verdade...

47. Porco disfarçado

48. Vaca disfarçada

49. Não deve ser pesado

50. Não deve ser poluído. Diversas chaminés de uma fabrica poluindo o ar. 70 x 30

53. globo.com Julho 2007

55. globo.com Agosto 2007

57. Não deve ser desorganizado... Onde está o Wally?

58. Ambíguo? Quatro mãos juntas, uma para cada lado.

59. Complicado Executivo na frente de um grande labirinto.

60. Confuso Um poste com dezenas de setas para todos os lados

61. Frustrante

62. Não deve discriminar Uma peça de pião de xadrez isolado de outros 27 piões.

63. Ou ser inacessível Um homem amarrado, com olhos vendados e boca tapada.

64. Não requer habilidades especiais Uma mão auxiliando a outra no uso do mouse.

65. Uma cobra fala para outra Querida, travou de novo!!! Andem meninos vão ajudar seu pai a dar Control + Alt + Del.

66. Ou ser difícil de usar

67. Não é apenas uma aparência bonita Um close de um belo rosto feminino.

68. Afinal, o que é design

69. É uma disciplina que explora o diálogo entre: Usability Body of Knowledge - Fonte: http://www.usabilitybok.org/design/p286 produtos pessoas contexto

74. Algumas soluções criativas para resolver problemas

75. http://www.claragaggero.com/?p=135 http://vimeo.com/11784148 Out of the box - book

80. Problema: Como fazer os homens acertarem o alvo em mictórios públicos?

81. Algumas soluções caras e criativas, mas um tanto machistas… Fonte: internet - desconhecida

82. Fonte: internet - desconhecida

83. Fonte: internet - desconhecida

84. Fonte: internet - desconhecida

86. Outras ideias… Fonte: internet - desconhecida

89. Uma solução simples e barata, mas que funciona… Fonte: internet - desconhecida

91. Acertar na mosca… Fonte: internet - desconhecida

92. Fonte: internet - desconhecida

93. Ou tentar mudar a cultura de alguns homens

95. Fonte: internet - http://bucomania.blogspot.com/2007/08/banheiros-criativos.html

96. Fonte: internet - http://bucomania.blogspot.com/2007/08/banheiros-criativos.html

97. Fonte: internet - http://www.inovavox.com Mas no contexto errado...

98. Ou ainda fazer o carinha acertar o alvo e ainda gerar conscientização…

100. Mas, na busca por soluções para os problemas, o que maioria dos sites de e-Commerce faz?

101. Copia e cola quase tudo...

102. Resultado: replicamos tudo sem questionamentos...

104. Código de barras

106. CAPTCHA

107. Captcha http://sam.zoy.org/pwntcha/

108. Captcha (solução inacessível e insegura) ( http://www.webvisum.com/en/main/download )

109. Menu DropDown

111. Usamos o flash como se todos tivessem acesso a ele...

113. Navegar sem o mouse pelo site  http://www.ibcbrasil.com.br/ Tarefa: procurar pelo link cadastro http://www.farmrio.com.br

115. Clique aqui!

116. “ Clique aqui”, “Saiba mais”, “veja Mais ”… 41.700.000 respostas para “ clique aqui ” no Google.

117. Site da Itautec http://www.itautec.com.br (acesso em setembro 2009)

118. Mas por que? Porque não temos tempo, porque somos reativos e dá muito trabalho…

119. Divida o quadrado em 4 partes iguais !!! Dinâmica Livro: O Tiro e o Alvo

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/

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/

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/

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/

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

125. Uma escada

127. “ Nem tudo diferente é criativo, mas tudo criativo é diferente ” .

129. Uma regra de ouro para os usuários

131. O que você pensa ao dirigir seu carro de casa pro trabalho?

132. Uma regra de ouro para quem cria

134. Dentre os públicos de e-commerce, tem algum que não é atendido?

135. Comercial Mercado Livre 2011

136. Acessi bilidade? O que é

137. Usabi lidade? O que é

141. objetivo do design universal: uma solução para todos

145. Imagem da página inicial do Google Simples e intuitivo (princípio da DU)

148. Acessib ilidade e usabi lidade para quem?

149. Juca, sem visão.

150. Mandy, sem visão e braços.

151. Lucas, com baixa visão utilizando o software ampliador de tela.

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.

153. João Henriques deficiente motor utiliza o mouse com dificuldade. ( www.euroacessibilidade.com )

154. João, tetraplégico João (foto de Maíra Soares )

155. Tião tem grandes dificuldades motoras e interage com teclado com o dedo mindinho…

156. Eric interagindo através de teclado expandido - Funlar – Rio (nov/2006).

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)

158. Gabriel, linguagem em desenvolvimento... Gabriel compenetrado, olhando para o monitor e clicando com o mouse. Agora ele está olhando e brincando como teclado.

159. Calvin, pouca experiência e medo do computador Homem com muito medo olhando por cima de um notebook.

160. Marta e suas amigas…

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

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.

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.

165. Todos nós na primeira experiência. Um criança com camisa social e gravata em frente a um notebook

166. E finalmente, o bilionário cego!!! Cifrão desenhado com moedas douradas

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”.

168. SEO pode e deve ajudar, mas cuidado, seu uso pode ser prejudicial…

169. Quais os benefícios da Acessibilidade e Usabilidade?

170. Possibilidade de atingir 100% do público alvo.

171. Atender melhor todas as pessoas

172. Homem de terno comemorando Fidelizar clientes

173. Mais fácil de usar e aprender

174. Proteção contra processos pela falta da acessibilidade

175. #inacessibilidadenaTam Trending Topics e possivelmente processo no Ministério Público

176. Novo site da Gol #desacessibilidade

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.

178. Visualizar os benefícios da acessibilidade Manutenção mais rápida e barata, melhor performance…

179. Valorização da Diversidade e Responsabilidade Social. Mãos entrelaçadas

180. Maior visibilidade pelos sistemas de busca;

181. Mulher com notebook em sinal de ok Vantagem competitiva

182. Melhoria da qualidade. Mãe e filha felizes na praia dando uma estrela

183. Algumas recomendações:

184. Um bom sistema de e-Commerce é uma interface bem testada… Não faça como a acessibilidade na maioria dos sites brasileiros

191. Resultado: acessibilidade para inglês ver.

192. Um caminho … SIMPLICIDADE

193. Desktop first! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/

194. Mobile First! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/

195. Less is more...

196. Elimine da interface itens que não sejam extremamente necessários...

197. Outros caminhos

212. iPhone, iPad, and iPod touch: Getting started with VoiceOver for accessibility

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

214. Obrigado! Horácio Soares [email_address] 55 ( 21 ) 9925-5404 @ horaciosoares