Circuito4x1 Acessibilidade e ecommerce-abril-2011

  • Published on
    22-Apr-2015

  • View
    1.562

  • Download
    0

DESCRIPTION

Apresentao sobre Acessibilidade Web e ecommerce utilizada no Circuito 4X1 no Rio de Janeiro em abril de 2011.

Transcript

  • 1. Circuito 4x1 Rio - Abril 2011 Horcio Soares O que a Acess ibilidade e a Usabil idade podem fazer pelo seu e-Com merce?
  • 2. Horcio Soares [email_address] @horaciosoares (21) 9925-5404 Circuito 4x1 Rio - Abril 2011
  • 3. Qual o momento atual do e-Commerce?
  • 4. Quais so os objetivos do e-Commerce?
  • 5. O que o usurio espera quando compra algo eletronicamente?
  • 6.
    • - Velocidade
    • - Preo
    • - Comodidade
    • - Segurana
    • - Atendimento
    • Variedade
    • - Qualidade
  • 7. Existe algum pblico que no atendido?
  • 8. Acessi bilidade? O que
  • 9. Usabi lidade? O que
  • 10.
    • Qual o relacionamento
    • entre a acessibilidade
    • e usabilidade?
  • 11.
  • 12.
    • design universal
  • 13. objetivo do design universal: uma soluo para todos
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
    • Simples e intuitivo (princpio da DU)
    • X
    • Complexidade e inovao sem validao
  • 19. Imagem da pgina inicial do Google Simples e intuitivo (princpio da DU)
  • 20.
    • Onde est a busca no site da ESPN?
  • 21.
  • 22. Acessib ilidade e usabi lidade para quem?
  • 23. Juca, sem viso.
  • 24. Mandy, sem viso e braos.
  • 25. Lucas, com baixa viso utilizando o software ampliador de tela.
  • 26. Para o Isaias, designer e descobriu apenas no incio de 2009 que daltnico. Isaias esquerda, conduzindo o Janurio para um chopinho aps curso de acessibilidade Web.
  • 27. Joo Henriques deficiente motor utiliza o mouse com dificuldade. ( www.euroacessibilidade.com )
  • 28. Joo, tetraplgico Joo (foto de Mara Soares )
  • 29. Tio tem grandes dificuldades motoras e interage com teclado com o dedo mindinho
  • 30. Eric interagindo atravs de teclado expandido - Funlar Rio (nov/2006).
  • 31. Deficientes auditivos no oralizados tm dificuldades com o portugus. Chapeuzinho Vermelho em portugus e na lngua de sinais (prof. Goulo)
  • 32. Gabriel, linguagem em desenvolvimento... Gabriel compenetrado, olhando para o monitor e clicando com o mouse. Agora ele est olhando e brincando como teclado.
  • 33. Calvin, pouca experincia e medo do computador Homem com muito medo olhando por cima de um notebook.
  • 34. Marta e suas amigas
  • 35.
    • Number of 80+ year olds in the world
      • 2000: ~ 69 million
      • 2010: ~110 million
      • 2050: ~379 million (close to 2 billion 60+ yr olds) ->
    • http://www.un.org/esa/population/publications/worldageing19502050/
    Our globally aging population Copyright 2009. World Wide Web Foundation. All rights reserved
  • 36. Max, com tendinite, usando o mouse com a mo trocada. Homem com expresso de desespero, usando o mouse com a mo esquerda
  • 37. Analfabeto funcional Um em cada cinco brasileiros (20,3%) analfabeto funcional, de acordo com a Pnad (Pesquisa Nacional por Amostra de Domiclios) 2009, divulgada pelo IBGE. Homem sentado de frente para um quadro branco sem nada escrito.
  • 38. Pedro e Laura com dispositivos mveis com acesso a Internet. Pedro olhando para seu smartphone e Laura com uma cara desesperada pera seu celular.
  • 39. Todos ns na primeira experincia. Um criana com camisa social e gravata em frente a um notebook
  • 40. E finalmente, o bilionrio cego!!! Cifro desenhado com moedas douradas
  • 41. Google, o bilionrio cego!!! apenas um rob que indexa contedo em texto. Dilbert fazendo parte do logotipo do Google e falando eu no posso ver.
  • 42. SEO pode e deve ajudar, mas cuidado, seu uso pode ser prejudicial
  • 43. Quais os benefcios da Acessibilidade e Usabilidade?
  • 44. Possibilidade de atingir 100% do pblico alvo.
  • 45. Atender melhor todas as pessoas
  • 46. Homem de terno comemorando Fidelizar clientes
  • 47. Mais fcil de usar e aprender
  • 48. Proteo contra processos pela falta da acessibilidade
  • 49. #inacessibilidadenaTam Trending Topics e possvel processo no Ministrio Pblico
  • 50. Uma mo com lao no dedo indicador Decreto de lei n 5.296 (dez/04) e o decreto de lei n 6.949 (ago/09), onde a conveno da ONU ganhou fora de lei.
  • 51. Visualizar os benefcios da acessibilidade Manuteno mais rpida e barata, melhor performance
  • 52. Valorizao da Diversidade e Responsabilidade Social. Mos entrelaadas
  • 53. Maior visibilidade pelos sistemas de busca;
  • 54. Mulher com notebook em sinal de ok Vantagem competitiva
  • 55. Melhoria da qualidade. Me e filha felizes na praia dando uma estrela
  • 56. Na busca por solues para os problemas, o que maioria dos sites de e-Commerce faz?
  • 57. Copia e cola quase tudo...
  • 58. Mas por que? Porque no temos tempo, porque somos reativos e d muito trabalho
  • 59. Divida o quadrado em 4 partes iguais !!! Dinmica Livro: O Tiro e o Alvo
  • 60. Os participantes do teste, em sua maioria, vo chegar facilmente s 4 respostas seguintes: Dinmica Do livro O Tiro e o Alvo Na Livraria da Travessa - http://migre.me/105T7 Editora http://www.caispharoux.com.br/
  • 61. A partir destas, passam a ter dificuldades para encontrar outras formas de dividir o quadrado. Alguns chegam a afirmar no haver mais solues possveis e desistem. Dinmica Do livro O Tiro e o Alvo Na Livraria da Travessa - http://migre.me/105T7 Editora http://www.caispharoux.com.br/
  • 62. Poder-se-ia ainda dividir o quadrado com retas quebradas, como so os casos [i], [j], [k] e [l] Dinmica Do livro O Tiro e o Alvo Na Livraria da Travessa - http://migre.me/105T7 Editora http://www.caispharoux.com.br/
  • 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 tcnica de brain storming para gerao de idias. Dinmica Do livro O Tiro e o Alvo Na Livraria da Travessa - http://migre.me/105T7 Editora http://www.caispharoux.com.br/
  • 64. Na busca por novas opes podemos encontrar sadas criativas, inovadoras e mais acessveis Inovar preciso, mas necessrio avaliar: custo x benefcio
  • 65. O que voc pensa ao dirigir seu carro de casa pro trabalho?
  • 66.
  • 67. Ou rever antigos processos na busca no melhores resultados
  • 68. Desktop first! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  • 69. Mobile First! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  • 70. Less is more...
  • 71. Elimine da interface itens que no sejam extremamente necessrios...
  • 72. Design de Epicentro Comece do ncleo da pgina e construa para fora. http://gettingreal.37signals.com/ch09_Epicenter_Design.php Design de epicentro foca na verdadeira essncia da pgina o epicentro e ento constri para fora. Isso significa que, no comeo, voc ignora as extremidades: a navegao/menus, rodap, cores, barra lateral, logotipo, etc. Em vez disso, voc comea o epicentro e faz o design das peas de contedo mais importantes primeiro.
  • 73. Um mito
  • 74.
  • 75. Uma importante recomendao:
  • 76. Um bom sistema de e-Commerce uma interface bem testada No faa como a acessibilidade na maioria dos sites brasileiros
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83. Resultado: acessibilidade para ingls ver.
  • 84. Um bom site, um site bem testado http://www.youtube.com/watch?v=xDnNrBPh1KU
  • 85. Outras recomendaes:
  • 86.
    • Prototipe, avalie e evolua.
    • Melhoria contnua
  • 87.
    • Teste o acesso ao site e sistema de compras em conexes de baixa velocidade.
  • 88.
    • Realize testes em dispositivos mveis e de impresso
  • 89.
    • Teste a navegao
    • via teclado
  • 90.
    • Teste a Semntica
  • 91.
    • Evite mudanas inesperadas de foco.
  • 92.
    • Mantenha o foco/feedback na navegao por links e campos de formulrio
  • 93.
    • Diferencie
    • links clicados, ativos, etc.
  • 94.
    • Crie links/botes cuja rea permita que os usurios cometam erros de pontaria...
  • 95.
    • Mantenha bom contraste entre cores de fundo e dos textos.
  • 96.
    • Use um tamanho de fontes acessvel e escalonvel.
  • 97.
    • Desligue o monitor e navegue pelo teclado com um software leitor de Telas.
  • 98.
    • Observe usurios com e sem deficincia realizando as
    • tarefas do
    • e-commerce.
  • 99.
    • Futuro...
  • 100. iPhone, iPad, and iPod touch: Getting started with VoiceOver for accessibility
  • 101.
  • 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
  • 103. Horcio Soares [email_address] @horaciosoares (21) 9925-5404 Obrig ado!