Circuito 4x1 Rio - Abril 2011 Horácio Soares O que a Acess ibilidade  e a   Usabil idade podem fazer  pelo seu e-Com merce?
Horácio Soares [email_address] @horaciosoares   (21) 9925-5404 Circuito 4x1 Rio - Abril 2011
Qual é o momento  atual do  e-Commerce?
Quais são os objetivos do e-Commerce?
O que o usuário espera quando compra algo eletronicamente?
<ul><li>- Velocidade </li></ul><ul><li>- Preço </li></ul><ul><li>- Comodidade </li></ul><ul><li>- Segurança </li></ul><ul>...
Existe algum público que não é atendido?
Acessi bilidade? O que é
Usabi lidade? O que é
<ul><li>Qual é o relacionamento </li></ul><ul><li>entre a acessibilidade  </li></ul><ul><li>e  usabilidade? </li></ul>
 
<ul><li>design universal </li></ul>
objetivo do design universal:  uma solução para todos
 
 
 
 
<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 ...
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>
 
Acessib ilidade e usabi lidade  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...
João Henriques   deficiente motor utiliza o mouse  com dificuldade.  (  www.euroacessibilidade.com  )
João,  tetraplégico João (foto de  Maíra Soares   )
Tião tem grandes dificuldades motoras e interage com teclado com o dedo mindinho…
Eric interagindo através de  teclado expandido  - Funlar – Rio (nov/2006).
Deficientes auditivos não oralizados têm dificuldades com o português.  Chapeuzinho Vermelho em português e na língua de s...
Gabriel, linguagem em desenvolvimento...  Gabriel compenetrado, olhando para o  monitor e clicando com o mouse.  Agora ele...
Calvin, pouca experiência e  medo do computador Homem com muito medo olhando por  cima de um notebook.
Marta e suas amigas…
<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: ~1...
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
Analfabeto funcional Um em cada cinco brasileiros (20,3%) é analfabeto funcional, de acordo com a Pnad (Pesquisa Nacional ...
Pedro e Laura com dispositivos móveis com acesso a Internet. Pedro olhando para seu smartphone e Laura com uma cara desesp...
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 ...
SEO pode e deve ajudar, mas cuidado, seu uso pode ser prejudicial…
Quais os benefícios da Acessibilidade e  Usabilidade?
Possibilidade de atingir 100% do público alvo.
Atender melhor todas as pessoas
Homem de terno comemorando Fidelizar clientes
Mais fácil de usar e aprender
Proteção contra processos pela falta da acessibilidade
#inacessibilidadenaTam Trending Topics e possível processo no Ministério Público
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 co...
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 Vantagem competitiva
Melhoria da qualidade. Mãe e filha felizes na praia dando uma estrela
Na busca por soluções para os problemas, o que maioria dos sites de e-Commerce faz?
Copia e cola quase tudo...
Mas por que?  Porque não temos tempo, porque somos reativos e dá muito trabalho…
Divida o quadrado em 4 partes iguais !!! Dinâmica Livro: O Tiro e o Alvo
Os participantes do teste, em sua maioria, vão chegar facilmente às 4 respostas seguintes: Dinâmica Do livro “O Tiro e o A...
A partir destas, passam a ter dificuldades para encontrar outras formas de dividir o quadrado. Alguns chegam a afirmar não...
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...
No pensamento lateral vai-se quebrando barreiras autoimpostas e descobrindo alternativas que jamais seriam consideradas no...
Na busca por novas opções podemos encontrar saídas criativas, inovadoras e mais acessíveis… Inovar é preciso, mas é necess...
O que você pensa ao dirigir seu carro de casa pro trabalho?
 
Ou rever antigos processos na busca no melhores resultados…
Desktop first! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
Mobile First! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
Less is more...
Elimine da interface itens que não sejam extremamente necessários...
Design de Epicentro Comece do núcleo da página e construa para fora. http://gettingreal.37signals.com/ch09_Epicenter_Desig...
Um mito…
 
Uma importante recomendação:
Um bom sistema de  e-Commerce é uma interface bem testada… Não faça como a acessibilidade na maioria dos sites brasileiros
 
 
 
 
 
 
Resultado: acessibilidade para inglês ver.
Um bom site, é um site bem testado… http://www.youtube.com/watch?v=xDnNrBPh1KU
Outras recomendações:
<ul><li>Prototipe, avalie e evolua. </li></ul><ul><li>Melhoria contínua… </li></ul>
<ul><li>Teste o acesso ao site e sistema de compras em conexões de baixa velocidade. </li></ul>
<ul><li>Realize testes em dispositivos móveis e de impressão </li></ul>
<ul><li>Teste a navegação  </li></ul><ul><li>via teclado </li></ul>
<ul><li>Teste a Semântica </li></ul>
<ul><li>Evite mudanças inesperadas de foco. </li></ul>
<ul><li>Mantenha o foco/feedback na navegação por links e campos de formulário </li></ul>
<ul><li>Diferencie  </li></ul><ul><li>links clicados, ativos, etc. </li></ul>
<ul><li>Crie links/botões cuja área permita que os usuários cometam erros de pontaria... </li></ul>
<ul><li>Mantenha bom contraste entre cores de fundo e dos textos. </li></ul>
<ul><li>Use um tamanho de fontes acessível e escalonável. </li></ul>
<ul><li>Desligue o monitor e navegue pelo teclado com um software  leitor de Telas. </li></ul>
<ul><li>Observe usuários com e sem deficiência realizando as </li></ul><ul><li>tarefas do  </li></ul><ul><li>e-commerce. <...
<ul><li>Futuro... </li></ul>
iPhone, iPad, and iPod touch: Getting started with VoiceOver for accessibility
 
A ccessible  R ich  I nternet  A pplications ARIA NOW HTML 4 + ARIA HTML5 + ARIA http://www.abilitynet.org.uk/accessibilit...
Horácio Soares [email_address] @horaciosoares   (21) 9925-5404 Obrig ado!
Upcoming SlideShare
Loading in …5
×

Circuito4x1 Acessibilidade e ecommerce-abril-2011

1,744 views

Published on

Apresentação sobre Acessibilidade Web e ecommerce utilizada no Circuito 4X1 no Rio de Janeiro em abril de 2011.

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

No Downloads
Views
Total views
1,744
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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.
  • É 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.
  • Circuito4x1 Acessibilidade e ecommerce-abril-2011

    1. 1. Circuito 4x1 Rio - Abril 2011 Horácio Soares O que a Acess ibilidade e a Usabil idade podem fazer pelo seu e-Com merce?
    2. 2. Horácio Soares [email_address] @horaciosoares (21) 9925-5404 Circuito 4x1 Rio - Abril 2011
    3. 3. Qual é o momento atual do e-Commerce?
    4. 4. Quais são os objetivos do e-Commerce?
    5. 5. O que o usuário espera quando compra algo eletronicamente?
    6. 6. <ul><li>- Velocidade </li></ul><ul><li>- Preço </li></ul><ul><li>- Comodidade </li></ul><ul><li>- Segurança </li></ul><ul><li>- Atendimento </li></ul><ul><li>Variedade </li></ul><ul><li>- Qualidade </li></ul><ul><li>… </li></ul>
    7. 7. Existe algum público que não é atendido?
    8. 8. Acessi bilidade? O que é
    9. 9. Usabi lidade? O que é
    10. 10. <ul><li>Qual é o relacionamento </li></ul><ul><li>entre a acessibilidade </li></ul><ul><li>e usabilidade? </li></ul>
    11. 12. <ul><li>design universal </li></ul>
    12. 13. objetivo do design universal: uma solução para todos
    13. 18. <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>
    14. 19. Imagem da página inicial do Google Simples e intuitivo (princípio da DU)
    15. 20. <ul><li>Onde está a busca no site da ESPN? </li></ul>
    16. 22. Acessib ilidade e usabi lidade para quem?
    17. 23. Juca, sem visão.
    18. 24. Mandy, sem visão e braços.
    19. 25. Lucas, com baixa visão utilizando o software ampliador de tela.
    20. 26. 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.
    21. 27. João Henriques deficiente motor utiliza o mouse com dificuldade. ( www.euroacessibilidade.com )
    22. 28. João, tetraplégico João (foto de Maíra Soares )
    23. 29. Tião tem grandes dificuldades motoras e interage com teclado com o dedo mindinho…
    24. 30. Eric interagindo através de teclado expandido - Funlar – Rio (nov/2006).
    25. 31. 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)
    26. 32. Gabriel, linguagem em desenvolvimento... Gabriel compenetrado, olhando para o monitor e clicando com o mouse. Agora ele está olhando e brincando como teclado.
    27. 33. Calvin, pouca experiência e medo do computador Homem com muito medo olhando por cima de um notebook.
    28. 34. Marta e suas amigas…
    29. 35. <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><li>http://www.un.org/esa/population/publications/worldageing19502050/ </li></ul>Our globally aging population Copyright © 2009. World Wide Web Foundation. All rights reserved
    30. 36. 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
    31. 37. 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.
    32. 38. 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.
    33. 39. Todos nós na primeira experiência. Um criança com camisa social e gravata em frente a um notebook
    34. 40. E finalmente, o bilionário cego!!! Cifrão desenhado com moedas douradas
    35. 41. 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”.
    36. 42. SEO pode e deve ajudar, mas cuidado, seu uso pode ser prejudicial…
    37. 43. Quais os benefícios da Acessibilidade e Usabilidade?
    38. 44. Possibilidade de atingir 100% do público alvo.
    39. 45. Atender melhor todas as pessoas
    40. 46. Homem de terno comemorando Fidelizar clientes
    41. 47. Mais fácil de usar e aprender
    42. 48. Proteção contra processos pela falta da acessibilidade
    43. 49. #inacessibilidadenaTam Trending Topics e possível processo no Ministério Público
    44. 50. 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.
    45. 51. Visualizar os benefícios da acessibilidade Manutenção mais rápida e barata, melhor performance…
    46. 52. Valorização da Diversidade e Responsabilidade Social. Mãos entrelaçadas
    47. 53. Maior visibilidade pelos sistemas de busca;
    48. 54. Mulher com notebook em sinal de ok Vantagem competitiva
    49. 55. Melhoria da qualidade. Mãe e filha felizes na praia dando uma estrela
    50. 56. Na busca por soluções para os problemas, o que maioria dos sites de e-Commerce faz?
    51. 57. Copia e cola quase tudo...
    52. 58. Mas por que? Porque não temos tempo, porque somos reativos e dá muito trabalho…
    53. 59. Divida o quadrado em 4 partes iguais !!! Dinâmica Livro: O Tiro e o Alvo
    54. 60. 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/
    55. 61. 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/
    56. 62. 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/
    57. 63. 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/
    58. 64. 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
    59. 65. O que você pensa ao dirigir seu carro de casa pro trabalho?
    60. 67. Ou rever antigos processos na busca no melhores resultados…
    61. 68. Desktop first! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
    62. 69. Mobile First! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
    63. 70. Less is more...
    64. 71. Elimine da interface itens que não sejam extremamente necessários...
    65. 72. Design de Epicentro Comece do núcleo da página e construa para fora. http://gettingreal.37signals.com/ch09_Epicenter_Design.php Design de epicentro foca na verdadeira essência da página — o epicentro — e então constrói para fora. Isso significa que, no começo, você ignora as extremidades: a navegação/menus, rodapé, cores, barra lateral, logotipo, etc. Em vez disso, você começa o epicentro e faz o design das peças de conteúdo mais importantes primeiro.
    66. 73. Um mito…
    67. 75. Uma importante recomendação:
    68. 76. Um bom sistema de e-Commerce é uma interface bem testada… Não faça como a acessibilidade na maioria dos sites brasileiros
    69. 83. Resultado: acessibilidade para inglês ver.
    70. 84. Um bom site, é um site bem testado… http://www.youtube.com/watch?v=xDnNrBPh1KU
    71. 85. Outras recomendações:
    72. 86. <ul><li>Prototipe, avalie e evolua. </li></ul><ul><li>Melhoria contínua… </li></ul>
    73. 87. <ul><li>Teste o acesso ao site e sistema de compras em conexões de baixa velocidade. </li></ul>
    74. 88. <ul><li>Realize testes em dispositivos móveis e de impressão </li></ul>
    75. 89. <ul><li>Teste a navegação </li></ul><ul><li>via teclado </li></ul>
    76. 90. <ul><li>Teste a Semântica </li></ul>
    77. 91. <ul><li>Evite mudanças inesperadas de foco. </li></ul>
    78. 92. <ul><li>Mantenha o foco/feedback na navegação por links e campos de formulário </li></ul>
    79. 93. <ul><li>Diferencie </li></ul><ul><li>links clicados, ativos, etc. </li></ul>
    80. 94. <ul><li>Crie links/botões cuja área permita que os usuários cometam erros de pontaria... </li></ul>
    81. 95. <ul><li>Mantenha bom contraste entre cores de fundo e dos textos. </li></ul>
    82. 96. <ul><li>Use um tamanho de fontes acessível e escalonável. </li></ul>
    83. 97. <ul><li>Desligue o monitor e navegue pelo teclado com um software leitor de Telas. </li></ul>
    84. 98. <ul><li>Observe usuários com e sem deficiência realizando as </li></ul><ul><li>tarefas do </li></ul><ul><li>e-commerce. </li></ul>
    85. 99. <ul><li>Futuro... </li></ul>
    86. 100. iPhone, iPad, and iPod touch: Getting started with VoiceOver for accessibility
    87. 102. 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
    88. 103. Horácio Soares [email_address] @horaciosoares (21) 9925-5404 Obrig ado!

    ×