Estratégia, Design e Acessibilidade Web Agosto de 2011 Horácio Soares
Apresentação Horácio Soares [email_address]   55  ( 21 )  9925-5404 @ horaciosoares
O que os usuários  e speram,  buscam?
Felicidade…
O que as empresas buscam
Aumentar a  satisfação dos usuários  para obter mais lucro
Mas como
Acertando o tiro certo no alvo certo
Para onde vamos? http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
CAUSO 1 Os marceneiros já chegaram e estão a postos com suas serras, plainas e lixadeiras; os pintores também foram convoc...
CAUSO 1 - A propósito, que mesa?  Livro: O Tiro e o Alvo
De sinuca?
Ping-pong?
Futebol de botão?
Carteado?
Ou seria uma mesa para computador?
Reunião?
Escritório?
Mesa de centro?
Jantar?
Ou seria uma mesa de cirurgia?
De autópsia ?
CAUSO 1  (continuação) - Isso não interessa, meu filho. Depois a gente vê. Vamos começar logo o trabalho. O prazo é curto,...
Conclusão? Retrabalho, desgaste com o cliente e diminuição do lucro.
Problema?
 
Qual é a proposta?
Por Quê? Por Quê? Por Quê? Por Quê? Por Quê? Precisamos automatizar  a Contabilidade Preciso do Balancete dia 5  e não dia...
<ul><li>Definição: - objetivos; </li></ul><ul><li>- metas;  - identificação das necessidades dos usuários. </li></ul>P r i...
 
d  e  s  i   g  n
Mas afinal o que é design
E a aparência, é  importante para o design
Qual dos dois sanduiches você escolheria? Foto de um sanduíche comprado em uma loja qualquer. Foto do mesmo sanduíche e pa...
But... design is  not just cosmetic.
But... design is  not just cosmetic. also
Design não é arte! Clara com 3 anos, pintanto o  “ sete ”
Não é maquiagem...
http://www.flickr.com/photos/alltheaces/67904915/ Porquinho rosa e sorridente de pelúcia
http://www.flickr.com/photos/melmoththewanderer/31029375/ Fucinho de um porco de verdade...
Porco  disfarçado
Vaca  disfarçada
Não deve ser pesado
Não deve ser poluído. Diversas chaminés de uma fabrica poluindo o ar. 70 x 30
Não deve ser  poluído e desorganizado...  Onde está o Wally?
 
 
globo.com Julho 2007
 
globo.com Agosto 2007
 
Ambíguo? Quatro mãos juntas, uma para cada lado.
Complicado Executivo na frente de um grande labirinto.
Confuso Um poste com dezenas de setas para todos os lados
Frustrante
Não deve  discriminar Uma peça de pião de xadrez  isolado de outros 27 piões.
Ou ser  inacessível Um homem amarrado, com olhos vendados e boca tapada.
Não requer habilidades especiais Uma mão auxiliando a outra no uso do mouse.
Ou ser difícil de usar
Não  é apenas uma aparência bonita Um close de um belo rosto feminino.
Afinal,  o que é design
É uma disciplina que explora o diálogo entre: Usability Body of Knowledge -  Fonte: http://www.usabilitybok.org/design/p28...
 
 
<ul><ul><li>Design é um processo que desenvolve soluções para ajudar as pessoas a alcançar seus objetivos. </li></ul></ul>...
<ul><li>Quais habilidades  eu preciso? </li></ul><ul><li>Eficaz brainstorming </li></ul><ul><li>Resolver o problema certo....
Algumas soluções criativas para resolver problemas
http://www.claragaggero.com/?p=135 http://vimeo.com/11784148   Out of the box - book
 
 
 
 
Problema:  Como fazer os homens acertarem o alvo em mictórios públicos?
Algumas soluções caras e criativas, mas um tanto machistas… Fonte: internet - desconhecida
Fonte: internet - desconhecida
Fonte: internet - desconhecida
Fonte: internet - desconhecida
 
Uma solução simples e barata, mas que funciona… Fonte: internet - desconhecida
 
Acertar  na mosca… Fonte: internet - desconhecida
Fonte: internet - desconhecida
Ou tentar mudar a cultura de alguns homens
 
Fonte: internet - http://bucomania.blogspot.com/2007/08/banheiros-criativos.html
Fonte: internet - http://bucomania.blogspot.com/2007/08/banheiros-criativos.html
Fonte: internet - http://www.inovavox.com Mas no contexto errado...
Ou ainda fazer o carinha acertar o alvo e ainda gerar conscientização…
 
Na busca de soluções para os problemas, o que maioria faz?
Copia e cola quase tudo...
 
Resultado: replicamos tudo que está por aí sem pensar... Alguns exemplos:
CAPTCHA
Captcha   http://sam.zoy.org/pwntcha/
Captcha  (solução inacessível e insegura) ( http://www.webvisum.com/en/main/download )
Menu DropDown
 
Usamos o flash como se todos tivessem acesso a ele...
 
Navegar sem o mouse pelo site     http://www.ibcbrasil.com.br/ Tarefa: procurar pelo link cadastro http://www.farmrio.com...
 
Clique aqui!
“ Clique aqui”, “Saiba mais”, “veja Mais ”… 41.700.000 respostas para  “ clique aqui ” no Google.
Site da Itautec  http://www.itautec.com.br  (acesso em setembro 2009)
Mas por que?  Porque não temos tempo, porque somos reativos e dá muito trabalho…
 
<ul><li>design universal </li></ul>
objetivo do design universal:  uma solução para todos
 
 
Imagem da página inicial do Google Simples e intuitivo (princípio da DU)
<ul><li>Onde está a busca no site da ESPN? </li></ul>
 
Uma escada com acessibilidade e atraente
 
 
 
Acessi bilidade? O que é
<ul><li>Qual é o relacionamento </li></ul><ul><li>entre a acessibilidade  </li></ul><ul><li>e  usabilidade? </li></ul>
 
Acessi bilidade  para  quem?
Juca, sem visão.
Mandy, sem visão e braços.
Lucas, com baixa visão utilizando o software ampliador de tela.
Para o Isaias,  designer e descobriu apenas no início de 2009 que é daltônico.  Isaias à esquerda, conduzindo o Januário p...
Ok, então acessibilidade é para pessoas com deficiência visual, certo?
João,  tetraplégico João (foto de  Maíra Soares   )
João Henriques   deficiente motor utiliza o mouse  com dificuldade.  (  www.euroacessibilidade.com  )  Fotos do deficiente...
Tião tem grandes dificuldades motoras e interage com teclado com o dedo mindinho…
Deficientes auditivos não oralizados têm dificuldades com o português.  Chapeuzinho Vermelho em português e na língua de s...
Certo...acessibilidade na Web serve para pessoas que possuem alguma deficiência, certo ?
Pedro e Laura com dispositivos móveis com acesso a Internet. Pedro olhando para seu smartphone e Laura com uma cara desesp...
Marta e suas amigas… A idosa Marta com seu notebook no colo, navega sendo observada por três outras senhoras.
Analfabeto funcional Um em cada cinco brasileiros (20,3%) é analfabeto funcional, de acordo com a Pnad (Pesquisa Nacional ...
Todos nós na primeira experiência. Um criança com camisa social e gravata em frente a um notebook
E finalmente,  o bilionário cego!!! Cifrão desenhado com  moedas douradas
Google, o bilionário cego!!! É apenas um robô que indexa conteúdo em texto. Dilbert fazendo parte do logotipo do Google e ...
 
ACESSIBILIDADE WEB:  SETE  MITOS E  UM  EQUÍVOCO http://acessodigital.net/art_acessibilidade-web-7-mitos-e-um-equivoco.htm...
Mitos
Mito I. &quot;Acessibilidade Web  é só para deficientes visuais.&quot;
Mito II. &quot;Na prática, o número de usuários beneficiados com a acessibilidade é relativamente muito pequeno.&quot;
Quantos Tailandeses você conhece que acessam a internet? <ul><li>Number of 80+ year olds </li></ul><ul><li>in the world </...
Mito III. &quot;Fazer um site acessível demora e custa caro.&quot;
Mito IV. &quot;É melhor fazer uma página especial para os deficientes visuais.&quot;
Mito V. &quot;Um site acessível a deficientes visuais não é bonito.&quot;
 
 
Mito VI. Vamos por partes: primeiro fazemos o site, depois fazemos acessibilidade.&quot;
 
 
 
 
 
Mito VII. &quot;A gente sabe o que é bom para o usuário.&quot;
Modelo mental do arquiteto
Um grande equívoco.   “ Meu site é direcionado a um público específico; ele não interessa a todos os grupos de usuários.”
Acessibilidade, quais são os custos?
<ul><li>Curva de aprendizagem </li></ul><ul><li>Alto custo no redesign </li></ul><ul><li>Baixo em novos projetos </li></ul...
E os benefícios? Gráfico de barras crescente.
Possibilidade de atingir 100% do público alvo; Foto de um homem olhando pela mira de sua espingarda.
Atender melhor todas as pessoas
 
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 ON...
Proteção contra processos pela falta da acessibilidade
Visualizar os benefícios  da acessibilidade Manutenção mais rápida e barata, melhor performance…
Valorização da  Diversidade e Responsabilidade Social. Mãos entrelaçadas
Maior visibilidade pelos  sistemas de busca;
Mulher com notebook  em sinal de ok Diferencial competitivo Cachorrinho caregando um enorme osso.
<ul><li>Melhoria da </li></ul><ul><li>qualidade. </li></ul>Mãe e filha felizes na praia dando uma estrela
Acessibilidade em Blogs
P e squisa com 32 usuários com deficiência visual 16 não acessam blogs
P e squisa com 32 usuários com deficiência visual 16 usuários acessam blogs
<ul><li>navegação difícil. </li></ul><ul><li>grande quantidade de links. </li></ul><ul><li>páginas longas verticalmente. <...
<ul><li>links inacessíveis. </li></ul><ul><li>imagens e outros recursos gráficos sem descrição. </li></ul><ul><li>acesso d...
<ul><li>Testes de usabilidade com 5 usuários com deficiência visual: </li></ul><ul><li>TAREFAS: </li></ul><ul><li>navegar ...
navegar até identificar o assunto/tema do blog.
selecionar um post na página inicial do blog e publicar um comentário.
localizar e enviar uma mensagem através do canal de comunicação com o seu autor.
utilizar o sistema de busca do blog e localizar uma determinada  “ palavra-chave ”
Análise da acessibilidade do blog: Interney
 
 
 
O que é acessibilidade de verdade?
Acessibilidade = Técnicas de acessibilidade
<ul><li>WCAG Web Content Accessibility Guidelines </li></ul><ul><li>   WCAG 1.0 – 05 de maio de 1999  http://www.utad.pt/...
Acessibilidade = Técnicas de acessibilidade   +   Web Standards
Separação entre conteúdo (HTML), apresentação (CSS) e  comportamento (JavaScript)
Acessibilidade = Técnicas de acessibilidade   +   Web Standards  +  Usabilidade
<ul><li>Usabilidade </li></ul>
Acessibilidade = Técnicas de acessibilidade   +   Web Standards  +  Usabilidade +  Conteúdo
Escrever é a arte de  cortar palavras.  Na Web essa regra é elevada a  “ n ” . Estudo de Jakob Nielsen http://www.useit.co...
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...
Acessibilidade = Técnicas de acessibilidade   +   Web Standards  +  Usabilidade +  Conteúdo +  AI
 
<ul><li>Desafio: Como tratar o excesso de informação? </li></ul>
Pergunte aos clientes de um restaurante o que eles preferem:    um cardápio repleto de opções    ou um com poucas altern...
Exemplo de um cardápio com muitas opções
Less is more...
Simplicidade e Acessibilidade
Imagem do Google Beta  em 1998  Fonte: http://www.archive.org
Imagem do Google  em 2010
Desktop first! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
VIDEO: Acessibilidade Web:Custo ou Benefício ? Download:  http://acessodigital.net/video.html Em HTML5 com legendas em PT-...
www.digitalacesso.com [email_address] @horaciosoares Obrigado!
Upcoming SlideShare
Loading in...5
×

Estratégia, Design e Acessibilidade Web - BlogcampRJ

2,199

Published on

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

Published in: Technology, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,199
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
58
Comments
0
Likes
6
Embeds 0
No embeds

No notes for 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.
  • 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/
  • Dez segundos é o limite para manter a atenção do usuário concentrada no diálogo. ( Jacob Nielsen ) Se a home do seu site for lenta, os usuários concluirão, com toda razão, que o restante do site será lento, e que será uma tortura utilizá-lo.
  • Dez segundos é o limite para manter a atenção do usuário concentrada no diálogo. ( Jacob Nielsen ) Se a home do seu site for lenta, os usuários concluirão, com toda razão, que o restante do site será lento, e que será uma tortura utilizá-lo.
  • Dez segundos é o limite para manter a atenção do usuário concentrada no diálogo. ( Jacob Nielsen ) Se a home do seu site for lenta, os usuários concluirão, com toda razão, que o restante do site será lento, e que será uma tortura utilizá-lo.
  • Dez segundos é o limite para manter a atenção do usuário concentrada no diálogo. ( Jacob Nielsen ) Se a home do seu site for lenta, os usuários concluirão, com toda razão, que o restante do site será lento, e que será uma tortura utilizá-lo.
  • Dez segundos é o limite para manter a atenção do usuário concentrada no diálogo. ( Jacob Nielsen ) Se a home do seu site for lenta, os usuários concluirão, com toda razão, que o restante do site será lento, e que será uma tortura utilizá-lo.
  • Dez segundos é o limite para manter a atenção do usuário concentrada no diálogo. ( Jacob Nielsen ) Se a home do seu site for lenta, os usuários concluirão, com toda razão, que o restante do site será lento, e que será uma tortura utilizá-lo.
  • Dez segundos é o limite para manter a atenção do usuário concentrada no diálogo. ( Jacob Nielsen ) Se a home do seu site for lenta, os usuários concluirão, com toda razão, que o restante do site será lento, e que será uma tortura utilizá-lo.
  • Dez segundos é o limite para manter a atenção do usuário concentrada no diálogo. ( Jacob Nielsen ) Se a home do seu site for lenta, os usuários concluirão, com toda razão, que o restante do site será lento, e que será uma tortura utilizá-lo.
  • Dez segundos é o limite para manter a atenção do usuário concentrada no diálogo. ( Jacob Nielsen ) Se a home do seu site for lenta, os usuários concluirão, com toda razão, que o restante do site será lento, e que será uma tortura utilizá-lo.
  • Fazer com que um usuário visite seu site, é muito mais fácil do que fazer com que ele retorne. Com informações desatualizadas nenhum usuário voltará a visitar seu site.
  • Estratégia, Design e Acessibilidade Web - BlogcampRJ

    1. 1. Estratégia, Design e Acessibilidade Web Agosto de 2011 Horácio Soares
    2. 2. Apresentação Horácio Soares [email_address] 55 ( 21 ) 9925-5404 @ horaciosoares
    3. 3. O que os usuários e speram, buscam?
    4. 4. Felicidade…
    5. 5. O que as empresas buscam
    6. 6. Aumentar a satisfação dos usuários para obter mais lucro
    7. 7. Mas como
    8. 8. Acertando o tiro certo no alvo certo
    9. 9. Para onde vamos? http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
    10. 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. 11. CAUSO 1 - A propósito, que mesa? Livro: O Tiro e o Alvo
    12. 12. De sinuca?
    13. 13. Ping-pong?
    14. 14. Futebol de botão?
    15. 15. Carteado?
    16. 16. Ou seria uma mesa para computador?
    17. 17. Reunião?
    18. 18. Escritório?
    19. 19. Mesa de centro?
    20. 20. Jantar?
    21. 21. Ou seria uma mesa de cirurgia?
    22. 22. De autópsia ?
    23. 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. 24. Conclusão? Retrabalho, desgaste com o cliente e diminuição do lucro.
    25. 25. Problema?
    26. 27. Qual é a proposta?
    27. 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
    28. 29. <ul><li>Definição: - objetivos; </li></ul><ul><li>- metas; - identificação das necessidades dos usuários. </li></ul>P r imeira camada da experiência do usuário:
    29. 31. d e s i g n
    30. 32. Mas afinal o que é design
    31. 33. E a aparência, é importante para o design
    32. 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.
    33. 35. But... design is not just cosmetic.
    34. 36. But... design is not just cosmetic. also
    35. 37. Design não é arte! Clara com 3 anos, pintanto o “ sete ”
    36. 38. Não é maquiagem...
    37. 39. http://www.flickr.com/photos/alltheaces/67904915/ Porquinho rosa e sorridente de pelúcia
    38. 40. http://www.flickr.com/photos/melmoththewanderer/31029375/ Fucinho de um porco de verdade...
    39. 41. Porco disfarçado
    40. 42. Vaca disfarçada
    41. 43. Não deve ser pesado
    42. 44. Não deve ser poluído. Diversas chaminés de uma fabrica poluindo o ar. 70 x 30
    43. 45. Não deve ser poluído e desorganizado... Onde está o Wally?
    44. 48. globo.com Julho 2007
    45. 50. globo.com Agosto 2007
    46. 52. Ambíguo? Quatro mãos juntas, uma para cada lado.
    47. 53. Complicado Executivo na frente de um grande labirinto.
    48. 54. Confuso Um poste com dezenas de setas para todos os lados
    49. 55. Frustrante
    50. 56. Não deve discriminar Uma peça de pião de xadrez isolado de outros 27 piões.
    51. 57. Ou ser inacessível Um homem amarrado, com olhos vendados e boca tapada.
    52. 58. Não requer habilidades especiais Uma mão auxiliando a outra no uso do mouse.
    53. 59. Ou ser difícil de usar
    54. 60. Não é apenas uma aparência bonita Um close de um belo rosto feminino.
    55. 61. Afinal, o que é design
    56. 62. É uma disciplina que explora o diálogo entre: Usability Body of Knowledge - Fonte: http://www.usabilitybok.org/design/p286 produtos pessoas contexto
    57. 65. <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
    58. 66. <ul><li>Quais habilidades eu preciso? </li></ul><ul><li>Eficaz brainstorming </li></ul><ul><li>Resolver o problema certo. </li></ul><ul><li>Pesquisa com usuários </li></ul><ul><li>Prototipação e avaliação </li></ul>
    59. 67. Algumas soluções criativas para resolver problemas
    60. 68. http://www.claragaggero.com/?p=135 http://vimeo.com/11784148 Out of the box - book
    61. 73. Problema: Como fazer os homens acertarem o alvo em mictórios públicos?
    62. 74. Algumas soluções caras e criativas, mas um tanto machistas… Fonte: internet - desconhecida
    63. 75. Fonte: internet - desconhecida
    64. 76. Fonte: internet - desconhecida
    65. 77. Fonte: internet - desconhecida
    66. 79. Uma solução simples e barata, mas que funciona… Fonte: internet - desconhecida
    67. 81. Acertar na mosca… Fonte: internet - desconhecida
    68. 82. Fonte: internet - desconhecida
    69. 83. Ou tentar mudar a cultura de alguns homens
    70. 85. Fonte: internet - http://bucomania.blogspot.com/2007/08/banheiros-criativos.html
    71. 86. Fonte: internet - http://bucomania.blogspot.com/2007/08/banheiros-criativos.html
    72. 87. Fonte: internet - http://www.inovavox.com Mas no contexto errado...
    73. 88. Ou ainda fazer o carinha acertar o alvo e ainda gerar conscientização…
    74. 90. Na busca de soluções para os problemas, o que maioria faz?
    75. 91. Copia e cola quase tudo...
    76. 93. Resultado: replicamos tudo que está por aí sem pensar... Alguns exemplos:
    77. 94. CAPTCHA
    78. 95. Captcha http://sam.zoy.org/pwntcha/
    79. 96. Captcha (solução inacessível e insegura) ( http://www.webvisum.com/en/main/download )
    80. 97. Menu DropDown
    81. 99. Usamos o flash como se todos tivessem acesso a ele...
    82. 101. Navegar sem o mouse pelo site  http://www.ibcbrasil.com.br/ Tarefa: procurar pelo link cadastro http://www.farmrio.com.br
    83. 103. Clique aqui!
    84. 104. “ Clique aqui”, “Saiba mais”, “veja Mais ”… 41.700.000 respostas para “ clique aqui ” no Google.
    85. 105. Site da Itautec http://www.itautec.com.br (acesso em setembro 2009)
    86. 106. Mas por que? Porque não temos tempo, porque somos reativos e dá muito trabalho…
    87. 108. <ul><li>design universal </li></ul>
    88. 109. objetivo do design universal: uma solução para todos
    89. 112. Imagem da página inicial do Google Simples e intuitivo (princípio da DU)
    90. 113. <ul><li>Onde está a busca no site da ESPN? </li></ul>
    91. 115. Uma escada com acessibilidade e atraente
    92. 119. Acessi bilidade? O que é
    93. 120. <ul><li>Qual é o relacionamento </li></ul><ul><li>entre a acessibilidade </li></ul><ul><li>e usabilidade? </li></ul>
    94. 122. Acessi bilidade para quem?
    95. 123. Juca, sem visão.
    96. 124. Mandy, sem visão e braços.
    97. 125. Lucas, com baixa visão utilizando o software ampliador de tela.
    98. 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.
    99. 127. Ok, então acessibilidade é para pessoas com deficiência visual, certo?
    100. 128. João, tetraplégico João (foto de Maíra Soares )
    101. 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.
    102. 130. Tião tem grandes dificuldades motoras e interage com teclado com o dedo mindinho…
    103. 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)
    104. 132. Certo...acessibilidade na Web serve para pessoas que possuem alguma deficiência, certo ?
    105. 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.
    106. 134. Marta e suas amigas… A idosa Marta com seu notebook no colo, navega sendo observada por três outras senhoras.
    107. 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.
    108. 136. Todos nós na primeira experiência. Um criança com camisa social e gravata em frente a um notebook
    109. 137. E finalmente, o bilionário cego!!! Cifrão desenhado com moedas douradas
    110. 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”.
    111. 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)
    112. 141. Mitos
    113. 142. Mito I. &quot;Acessibilidade Web é só para deficientes visuais.&quot;
    114. 143. Mito II. &quot;Na prática, o número de usuários beneficiados com a acessibilidade é relativamente muito pequeno.&quot;
    115. 144. Quantos Tailandeses você conhece que acessam a internet? <ul><li>Number of 80+ year olds </li></ul><ul><li>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>Referência : http://www.un.org/esa/population/publications/worldageing19502050/
    116. 145. Mito III. &quot;Fazer um site acessível demora e custa caro.&quot;
    117. 146. Mito IV. &quot;É melhor fazer uma página especial para os deficientes visuais.&quot;
    118. 147. Mito V. &quot;Um site acessível a deficientes visuais não é bonito.&quot;
    119. 150. Mito VI. Vamos por partes: primeiro fazemos o site, depois fazemos acessibilidade.&quot;
    120. 156. Mito VII. &quot;A gente sabe o que é bom para o usuário.&quot;
    121. 157. Modelo mental do arquiteto
    122. 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.”
    123. 159. Acessibilidade, quais são os custos?
    124. 160. <ul><li>Curva de aprendizagem </li></ul><ul><li>Alto custo no redesign </li></ul><ul><li>Baixo em novos projetos </li></ul><ul><li>Diminui com tempo </li></ul><ul><li>Validação </li></ul><ul><li>Manutenção </li></ul><ul><li>Melhoria contínua </li></ul><ul><li>Mudança de cultura </li></ul>
    125. 161. E os benefícios? Gráfico de barras crescente.
    126. 162. Possibilidade de atingir 100% do público alvo; Foto de um homem olhando pela mira de sua espingarda.
    127. 163. Atender melhor todas as pessoas
    128. 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) ;
    129. 166. Proteção contra processos pela falta da acessibilidade
    130. 167. Visualizar os benefícios da acessibilidade Manutenção mais rápida e barata, melhor performance…
    131. 168. Valorização da Diversidade e Responsabilidade Social. Mãos entrelaçadas
    132. 169. Maior visibilidade pelos sistemas de busca;
    133. 170. Mulher com notebook em sinal de ok Diferencial competitivo Cachorrinho caregando um enorme osso.
    134. 171. <ul><li>Melhoria da </li></ul><ul><li>qualidade. </li></ul>Mãe e filha felizes na praia dando uma estrela
    135. 172. Acessibilidade em Blogs
    136. 173. P e squisa com 32 usuários com deficiência visual 16 não acessam blogs
    137. 174. P e squisa com 32 usuários com deficiência visual 16 usuários acessam blogs
    138. 175. <ul><li>navegação difícil. </li></ul><ul><li>grande quantidade de links. </li></ul><ul><li>páginas longas verticalmente. </li></ul><ul><li>falta de organização. </li></ul><ul><li>falta de saltos para as seções principais dos blogs. </li></ul><ul><li>links sem descrição clara. </li></ul><ul><li>leva muito tempo para achar uma informação. </li></ul>P e squisa com 32 usuários com deficiência visual Principais barreiras?
    139. 176. <ul><li>links inacessíveis. </li></ul><ul><li>imagens e outros recursos gráficos sem descrição. </li></ul><ul><li>acesso difícil. </li></ul><ul><li>dificuldade para postar uma mensagem. </li></ul><ul><li>Dificuldade na leitura das mensagens. </li></ul><ul><li>Falta de acessibilidade. </li></ul>P e squisa com 32 usuários com deficiência visual Principais barreiras?
    140. 177. <ul><li>Testes de usabilidade com 5 usuários com deficiência visual: </li></ul><ul><li>TAREFAS: </li></ul><ul><li>navegar até identificar o assunto/tema do blog. </li></ul><ul><li>selecionar um post na página inicial do blog e publicar um comentário. </li></ul><ul><li>localizar e enviar uma mensagem através do canal de comunicação com o seu autor. </li></ul><ul><li>utilizar o sistema de busca do blog e localizar uma determinada “ palavra-chave ” . </li></ul>
    141. 178. navegar até identificar o assunto/tema do blog.
    142. 179. selecionar um post na página inicial do blog e publicar um comentário.
    143. 180. localizar e enviar uma mensagem através do canal de comunicação com o seu autor.
    144. 181. utilizar o sistema de busca do blog e localizar uma determinada “ palavra-chave ”
    145. 182. Análise da acessibilidade do blog: Interney
    146. 186. O que é acessibilidade de verdade?
    147. 187. Acessibilidade = Técnicas de acessibilidade
    148. 188. <ul><li>WCAG Web Content Accessibility Guidelines </li></ul><ul><li> WCAG 1.0 – 05 de maio de 1999 http://www.utad.pt/wai/wai-pageauth.html </li></ul><ul><li> WCAG 2.0 – 11 de dezembro de 2008 http://www.ilearn.com.br/TR/WCAG20/ </li></ul>Recomendações para acessibilidade do conteúdo da Web 1.0 e 2.0 do W3C
    149. 189. Acessibilidade = Técnicas de acessibilidade + Web Standards
    150. 190. Separação entre conteúdo (HTML), apresentação (CSS) e comportamento (JavaScript)
    151. 191. Acessibilidade = Técnicas de acessibilidade + Web Standards + Usabilidade
    152. 192. <ul><li>Usabilidade </li></ul>
    153. 193. Acessibilidade = Técnicas de acessibilidade + Web Standards + Usabilidade + Conteúdo
    154. 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
    155. 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 ?
    156. 196. Acessibilidade = Técnicas de acessibilidade + Web Standards + Usabilidade + Conteúdo + AI
    157. 198. <ul><li>Desafio: Como tratar o excesso de informação? </li></ul>
    158. 199. Pergunte aos clientes de um restaurante o que eles preferem:  um cardápio repleto de opções  ou um com poucas alternativas
    159. 200. Exemplo de um cardápio com muitas opções
    160. 201. Less is more...
    161. 202. Simplicidade e Acessibilidade
    162. 203. Imagem do Google Beta em 1998 Fonte: http://www.archive.org
    163. 204. Imagem do Google em 2010
    164. 205. Desktop first! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
    165. 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
    166. 207. www.digitalacesso.com [email_address] @horaciosoares Obrigado!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×