Apresentação de Estratégia, Design e Acessibilidade Web - BlogcampRJ - dia 28 de agosto de 2011.

1. Estratégia, Design e Acessibilidade Web Agosto de 2011 Horácio Soares

2. Apresentação Horácio Soares [email_address] 55 ( 21 ) 9925-5404 @ horaciosoares

3. O que os usuários e speram, buscam?

4. Felicidade…

5. O que as empresas buscam

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

7. Mas como

8. Acertando o tiro certo no alvo certo

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

10. CAUSO 1 Os marceneiros já chegaram e estão a postos com suas serras, plainas e lixadeiras; os pintores também foram convocados, com pincéis, tintas e vernizes, pois há urgência em construir a mesa. Livro: O Tiro e o Alvo

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

12. De sinuca?

13. Ping-pong?

14. Futebol de botão?

15. Carteado?

16. Ou seria uma mesa para computador?

17. Reunião?

18. Escritório?

19. Mesa de centro?

20. Jantar?

21. Ou seria uma mesa de cirurgia?

22. De autópsia ?

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

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

25. Problema?

27. Qual é a proposta?

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

31. d e s i g n

32. Mas afinal o que é design

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

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

35. But... design is not just cosmetic.

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

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

38. Não é maquiagem...

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

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

41. Porco disfarçado

42. Vaca disfarçada

43. Não deve ser pesado

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

45. Não deve ser poluído e desorganizado... Onde está o Wally?

48. globo.com Julho 2007

50. globo.com Agosto 2007

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

53. Complicado Executivo na frente de um grande labirinto.

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

55. Frustrante

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

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

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

59. Ou ser difícil de usar

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

61. Afinal, o que é design

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

67. Algumas soluções criativas para resolver problemas

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

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

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

75. Fonte: internet - desconhecida

76. Fonte: internet - desconhecida

77. Fonte: internet - desconhecida

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

81. Acertar na mosca… Fonte: internet - desconhecida

82. Fonte: internet - desconhecida

83. Ou tentar mudar a cultura de alguns homens

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

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

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

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

90. Na busca de soluções para os problemas, o que maioria faz?

91. Copia e cola quase tudo...

93. Resultado: replicamos tudo que está por aí sem pensar... Alguns exemplos:

94. CAPTCHA

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

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

97. Menu DropDown

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

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

103. Clique aqui!

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

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

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

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

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

115. Uma escada com acessibilidade e atraente

119. Acessi bilidade? O que é

122. Acessi bilidade para quem?

123. Juca, sem visão.

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

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

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

127. Ok, então acessibilidade é para pessoas com deficiência visual, certo?

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

129. João Henriques deficiente motor utiliza o mouse com dificuldade. ( www.euroacessibilidade.com ) Fotos do deficiente motor João Henrique utilizando o mouse e outra em sua cadeira de rodas.

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

131. 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)

132. Certo...acessibilidade na Web serve para pessoas que possuem alguma deficiência, certo ?

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

134. Marta e suas amigas… A idosa Marta com seu notebook no colo, navega sendo observada por três outras senhoras.

135. 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 de costas, sentado de frente para um quadro branco sem nada escrito.

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

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

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

140. ACESSIBILIDADE WEB: SETE MITOS E UM EQUÍVOCO http://acessodigital.net/art_acessibilidade-web-7-mitos-e-um-equivoco.html (Trabalho apresentado no 1º Encontro Brasileiro de Arquitetura de Informação)

141. Mitos

142. Mito I. "Acessibilidade Web é só para deficientes visuais."

143. Mito II. "Na prática, o número de usuários beneficiados com a acessibilidade é relativamente muito pequeno."

145. Mito III. "Fazer um site acessível demora e custa caro."

146. Mito IV. "É melhor fazer uma página especial para os deficientes visuais."

147. Mito V. "Um site acessível a deficientes visuais não é bonito."

150. Mito VI. Vamos por partes: primeiro fazemos o site, depois fazemos acessibilidade."

156. Mito VII. "A gente sabe o que é bom para o usuário."

157. Modelo mental do arquiteto

158. Um grande equívoco. “ Meu site é direcionado a um público específico; ele não interessa a todos os grupos de usuários.”

159. Acessibilidade, quais são os custos?

161. E os benefícios? Gráfico de barras crescente.

162. Possibilidade de atingir 100% do público alvo; Foto de um homem olhando pela mira de sua espingarda.

163. Atender melhor todas as pessoas

165. Uma mão com laço no dedo indicador 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 6949 (ago/09) ;

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

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

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

169. Maior visibilidade pelos sistemas de busca;

170. Mulher com notebook em sinal de ok Diferencial competitivo Cachorrinho caregando um enorme osso.

172. Acessibilidade em Blogs

173. P e squisa com 32 usuários com deficiência visual 16 não acessam blogs

174. P e squisa com 32 usuários com deficiência visual 16 usuários acessam blogs

178. navegar até identificar o assunto/tema do blog.

179. selecionar um post na página inicial do blog e publicar um comentário.

180. localizar e enviar uma mensagem através do canal de comunicação com o seu autor.

181. utilizar o sistema de busca do blog e localizar uma determinada “ palavra-chave ”

182. Análise da acessibilidade do blog: Interney

186. O que é acessibilidade de verdade?

187. Acessibilidade = Técnicas de acessibilidade

189. Acessibilidade = Técnicas de acessibilidade + Web Standards

190. Separação entre conteúdo (HTML), apresentação (CSS) e comportamento (JavaScript)

191. Acessibilidade = Técnicas de acessibilidade + Web Standards + Usabilidade

193. Acessibilidade = Técnicas de acessibilidade + Web Standards + Usabilidade + Conteúdo

194. Escrever é a arte de cortar palavras. Na Web essa regra é elevada a “ n ” . Estudo de Jakob Nielsen http://www.useit.com/alertbox/9710a.html

195. Planejando o texto para o usuário e não para si mesmo O que o leitor precisa saber? Qual a razão do leitor precisar dessas informações? Que tipo de conhecimento ele já tem sobre o assunto? Qual vai ser a utilização do texto? Quem pretende-se alcançar com esse texto? Qual a linguagem e o vocabulário mais adequados ?

196. Acessibilidade = Técnicas de acessibilidade + Web Standards + Usabilidade + Conteúdo + AI

199. Pergunte aos clientes de um restaurante o que eles preferem:  um cardápio repleto de opções  ou um com poucas alternativas

200. Exemplo de um cardápio com muitas opções

201. Less is more...

202. Simplicidade e Acessibilidade

203. Imagem do Google Beta em 1998 Fonte: http://www.archive.org

204. Imagem do Google em 2010

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

206. VIDEO: Acessibilidade Web:Custo ou Benefício ? Download: http://acessodigital.net/video.html Em HTML5 com legendas em PT-BR, EN e ES: http://acessodigital.net/video-html5/video-acessibilidade-en.html Videolog: http://videolog.uol.com.br/video.php?id=230205

207. www.digitalacesso.com [email_address] @horaciosoares Obrigado!