Acessibilidade e Design Mobile: Frontinrio junho/03

2,112 views
2,015 views

Published on

Palestra sobre Acessibilidade Web e Design Mobile: tudo junto e misturado... #frontinrio2013 - SENAC

Published in: Design

Acessibilidade e Design Mobile: Frontinrio junho/03

  1. 1. TablelessConf  –  São  Paulo  (maio  2013)      Acessibilidade  Web    e  Design  Mobile:    tudo  junto  e  misturado      Horácio  Soares    horacio.soares@acessodigital.net  @horaciosoares  (21)  9925-­‐5404  
  2. 2. Contexto daAcessibilidade na Web
  3. 3. Acessibilidade?O que é
  4. 4. Usabilidade?O que é
  5. 5. Qual é o relacionamentoentre a acessibilidadee usabilidade?
  6. 6. mitos = verdades
  7. 7. X
  8. 8. mitos
  9. 9. mitosX
  10. 10. mitos
  11. 11. mitos
  12. 12. mitosV
  13. 13. em acessibilidade
  14. 14. difícil
  15. 15. é caro
  16. 16. limitador
  17. 17. feio
  18. 18. é demorado
  19. 19. é irrelevante
  20. 20. Será?
  21. 21. Acessibilidade:quem precisa?
  22. 22. Mas ALGUMASpessoas precisam deacessibilidade emTODOS osmomentos.
  23. 23. ALGUMAS  pessoas  precisam  de  acessibilidade  em  TODOS  os  momentos.  João que é tetraplégico(foto de Maíra Soares )    Por  exemplo,  pessoas    com  restrição  de  movimento  nos  membros  superiores.  
  24. 24. Mark, tetraplégico, interage com os olhos
  25. 25. Tião tem grandes dificuldades motoras e interagecom teclado utilizando seu dedo mindinho…
  26. 26. Para os usuários cegos.Fotos de três cegos trabalhando nocomputador utizando um programaleitor de telas
  27. 27. Marcos, com baixa visão, utiliza um dispositivoque amplia os textos de um livro.
  28. 28. OUTRAS pessoasprecisam deacessibilidade emMUITOS osmomentos.
  29. 29. Isaias à esquerda, conduzindo o Januário para um chopinhoapós curso de acessibilidade Web.  Por exemplo, o Isaias,que é designer edaltônico.
  30. 30. Outros  exemplos:  •   Pessoas  surdas;  •   Com  deficiência  audiVva;  •   Com  déficit  de  atenção;  •   Com  dislexia;  •   Com  déficit  cogniVvo.  
  31. 31. TODAS as pessoasprecisam deacessibilidadeem ALGUMmomento.
  32. 32.    •  Tendo  as  mãos,  olhos  ou  ouvidos  ocupados  em  outra  tarefa.  
  33. 33. Com  idade  avançada  
  34. 34.  •  Com  pouca  fluência  na  linguagem  do  documento  que  se  deseja  pesquisar;  •  Usando  sistemas  de  busca  (que  só  indexam  texto);  •  Com  pouca  experiência  (todos  fomos  algum  dia);  
  35. 35. •  Com  tendinite  ou  fratura  no  braço  dominante;  •  Tendo  as  mãos,  olhos  ou  ouvidos  ocupados  em  outra  tarefa.    
  36. 36. E usandodispositivosmóveis comtelas pequenas.
  37. 37. Acessibilidade  para    quantos  no  BRASIL?  
  38. 38. Segundo  IBGE  no  Brasil  (2010):  •  População  total:  190  milhões  (100,0%)      
  39. 39. Segundo  IBGE  no  Brasil  (2010):  •  População  total:  190  milhões  (100,0%)  •  Pelo  menos  uma  das  deficiências  invesVgadas:  45  milhões  (23,9%)  
  40. 40. Segundo  IBGE  no  Brasil  (2010):  •  População  total:  190  milhões  (100,0%)  •  Pelo  menos  uma  das  deficiências  invesVgadas:  45  milhões  (23,9%)  •  Idosos:  19  milhões  (10%)  
  41. 41. Segundo  IBGE  no  Brasil  (2010):  •  População  total:  190  milhões  (100,0%)  •  Pelo  menos  uma  das  deficiências  invesVgadas:  45  milhões  (23,9%)  •  Idosos:  19  milhões  (10%)  •  Analfabetos  funcionais:  38  milhões  (20,4%)    Fontes:                                                                hgp://censo2010.ibge.gov.br/    ip://ip.ibge.gov.br/Trabalho_e_Rendimento/Pesquisa_Nacional_por_Amostra_de_Domicilios_anual/2011/Sintese_Indicadores/sintese_pnad2011.pdf    
  42. 42. Contexto doDesign Mobile
  43. 43. hgp://thenextweb.com/apple/2012/01/25/there-­‐are-­‐now-­‐more-­‐iphones-­‐sold-­‐than-­‐babies-­‐born-­‐in-­‐the-­‐world-­‐every-­‐day/  
  44. 44. hgp://www.slideshare.net/HubSpot/50-­‐mobilefactsdeck
  45. 45. Estatísticas Brasil
  46. 46. GIFanimado...
  47. 47. http://imasters.com.br/noticia/smartphones-terao-50-do-mercado-brasileiro-em-2013/
  48. 48. No mundo
  49. 49. Vários GIFsanimados...
  50. 50. capacidades/vantagensdo mobile
  51. 51. GPS
  52. 52. Acelerômetro
  53. 53. Giroscópio
  54. 54. Bluetooth
  55. 55. Bluetooth
  56. 56. Áudio, vídeo e imagem
  57. 57. NFC
  58. 58. Sensores multitoque
  59. 59. Em qualquer hora e local.
  60. 60. Boa compatibilidade entrenavegadores Mobile e HTML5
  61. 61. Atualizações frequentes...
  62. 62. limitações/restriçõesdo mobile
  63. 63. @lukew
  64. 64. ‘Desktop is like “diving”…
  65. 65. …while mobile is like “snorkling.”’by Hinman at Nokiahgp://www.slideshare.net/Rache
  66. 66. @lukewdesktop  
  67. 67. @lukewtela grande  
  68. 68. @lukewtela grande  energia  
  69. 69. @lukewtela grande  energia  rede consistente  
  70. 70. @lukewtela grande  energia  rede consistente  teclado  
  71. 71. @lukewtela grande  energia  rede consistente  teclado  mouse  
  72. 72. @lukewtela grande  energia  rede consistente  teclado  mouse  cadeira  
  73. 73. @lukewtela grande  energia  rede consistente  teclado  mouse  cadeira  mesa  
  74. 74. tela grande  energia  rede consistente  teclado  mouse  cadeira  mesa  caneca de café  @lukew
  75. 75. @lukewmobile  
  76. 76. tela pequena  @lukew
  77. 77. tela pequena  bateria  @lukew
  78. 78. tela pequena  bateria  rede inconsistente  @lukew
  79. 79. tela pequena  bateria  rede inconsistente  dedo gordo  @lukew
  80. 80. tela pequena  bateria  rede inconsistente  dedo gordo  sensores  @lukew
  81. 81. Slide  107    http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-
  82. 82. Como o Luli disse no Digitalks no Rio:“Nesse mundo Mobile, somostodos daltónicos e sofremosdo Mal de Parkinson”
  83. 83. Outras limitações:•  Capacidade de armazenamento eprocessamento reduzido.•  Uma aplicação em HTML5 para mobilepode ser até 100 vezes mais lenta queem desktop.http://spaceport.io/spaceport_perfmarks_2_report_2012_5.pdf
  84. 84. perda de 80% do espaço
  85. 85. @lukew
  86. 86. e isso pode ser ótimo para o negócio...
  87. 87. te força a priorizar...te força a manter o foco…
  88. 88. Alguém conhece algum siteque gostaria que 80% do seuconteúdo/itens/elementosfosse retirado da interface?
  89. 89. Flickr desktop60 opções de menu...
  90. 90. @lukew
  91. 91. Flickr mobile7 opções de menu...
  92. 92. Less is more...
  93. 93. @lukew
  94. 94. Conhecimento profundo daaudiência, o que fazem, porque vieram e por que seimportam com o Flickr...
  95. 95. Qual desses Desktops oferecia amelhor experiência?
  96. 96. E qual desses controles?
  97. 97. Restrições são boas para odesign, pois te forçam apriorizar, a manter o foco
  98. 98. mas cuidado…
  99. 99. no ponto…
  100. 100. Os detalhes docomprador nãopodem servisualizados naversão mobile.
  101. 101. DesktopSite
  102. 102. Mobile Site
  103. 103. Como anda aqualidade dosnossos sites nasversões desktop?
  104. 104. Brad Frost
  105. 105. BULLSHIT
  106. 106. Será?
  107. 107. Como anda as soluçõesacessibilidade digital noBrasil?E os sites/sistemas Mobile?
  108. 108. Uma alternativa…
  109. 109. Uma alternativa…Accessibility First!Mobile First!
  110. 110. Mobile  First  Luke  Wroblewski    Livro:  hgp://www.abookapart.com/products/mobile-­‐first  
  111. 111. Paradoxo da escolha
  112. 112. Um probema comumem projetos Web
  113. 113. Na busca de soluções para osproblemas, o que maioria faz?
  114. 114. Copia e cola quase tudo...
  115. 115. “Todo negócio é único efundamentalmentediverso de qualqueroutro, por maiores quesejam suassimilaridades.“O tiro e o alvo – aforismo 54
  116. 116. Cuidado, o que servepara uma empresa podenão servir para outra...
  117. 117. Código de barras
  118. 118. X
  119. 119. ArtigoCAPTCHA: herói ou vilão?http://acessodigital.net/art_captcha-heroi-ou-vilao.html
  120. 120. Captcha http://sam.zoy.org/pwntcha/
  121. 121. Captcha http://sam.zoy.org/pwntcha/X
  122. 122. Captcha(solução inacessível e insegura)(http://www.webvisum.com/en/main/download)
  123. 123. Menu DropDown
  124. 124. X
  125. 125. Clique aqui!
  126. 126. Clique aqui , Saiba mais , vejaMais … 41.700.000 respostaspara clique aqui no Google.    
  127. 127.    Site da Itautec http://www.itautec.com.br (acesso em setembro 2009)
  128. 128.    Site da Itautec http://www.itautec.com.br (acesso em setembro 2009)X
  129. 129. <a title=“redundante”>Redundante</a>
  130. 130. X
  131. 131. Ou ainda as mais recentesmodinhas como paralax,modal, one single page , etc…
  132. 132. http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/
  133. 133. Mas por quê?
  134. 134. Porque está na moda, todo mundousa, porque não temos tempo esomos reativos...REWORK:  Business  book  from  37signals  
  135. 135. Mas por que?Porque não temos tempo, porque somosreativos e dá muito trabalho…    

×