Successfully reported this slideshow.
Your SlideShare is downloading. ×

Acessibilidade e Design Mobile: Frontinrio junho/03

Loading in …3
×

Check these out next

1 of 187 Ad
1 of 187 Ad
Advertisement

More Related Content

More from Horácio Soares (20)

Advertisement

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 da Acessibilidade na Web
  3. 3. Acessibilidade? O que é
  4. 4. Usabilidade? O que é
  5. 5. Qual é o relacionamento entre a acessibilidade e usabilidade?
  6. 6. mitos = verdades
  7. 7. X
  8. 8. mitos
  9. 9. mitos X
  10. 10. mitos
  11. 11. mitos
  12. 12. mitos V
  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 ALGUMAS pessoas precisam de acessibilidade em TODOS os momentos.
  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 interage com teclado utilizando seu dedo mindinho…
  26. 26. Para os usuários cegos. Fotos de três cegos trabalhando no computador utizando um programa leitor de telas
  27. 27. Marcos, com baixa visão, utiliza um dispositivo que amplia os textos de um livro.
  28. 28. OUTRAS pessoas precisam de acessibilidade em MUITOS os momentos.
  29. 29. Isaias à esquerda, conduzindo o Januário para um chopinho após curso de acessibilidade Web.   Por exemplo, o Isaias, que é designer e daltô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 pessoas precisam de acessibilidade em ALGUM momento.
  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 usando dispositivos móveis com telas 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 do Design 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. GIF animado...
  47. 47. http://imasters.com.br/noticia/smartphones-terao-50-do-mercado-brasileiro-em-2013/
  48. 48. No mundo
  49. 49. Vários GIFs animados...
  50. 50. capacidades/ vantagens do 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 entre navegadores Mobile e HTML5
  61. 61. Atualizações frequentes...
  62. 62. limitações/restrições do mobile
  63. 63. @lukew
  64. 64. ‘Desktop is like “diving”…
  65. 65. …while mobile is like “snorkling.”’ by Hinman at Nokia hgp://www.slideshare.net/Rache
  66. 66. @lukew desktop  
  67. 67. @lukew tela grande  
  68. 68. @lukew tela grande   energia  
  69. 69. @lukew tela grande   energia   rede consistente  
  70. 70. @lukew tela grande   energia   rede consistente   teclado  
  71. 71. @lukew tela grande   energia   rede consistente   teclado   mouse  
  72. 72. @lukew tela grande   energia   rede consistente   teclado   mouse   cadeira  
  73. 73. @lukew tela 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. @lukew mobile  
  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, somos todos daltónicos e sofremos do Mal de Parkinson”
  83. 83. Outras limitações: •  Capacidade de armazenamento e processamento reduzido. •  Uma aplicação em HTML5 para mobile pode ser até 100 vezes mais lenta que em 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 site que gostaria que 80% do seu conteúdo/itens/elementos fosse retirado da interface?
  89. 89. Flickr desktop 60 opções de menu...
  90. 90. @lukew
  91. 91. Flickr mobile 7 opções de menu...
  92. 92. Less is more...
  93. 93. @lukew
  94. 94. Conhecimento profundo da audiência, o que fazem, por que vieram e por que se importam com o Flickr...
  95. 95. Qual desses Desktops oferecia a melhor experiência?
  96. 96. E qual desses controles?
  97. 97. Restrições são boas para o design, pois te forçam a priorizar, a manter o foco
  98. 98. mas cuidado…
  99. 99. no ponto…
  100. 100. Os detalhes do comprador não podem ser visualizados na versão mobile.
  101. 101. Desktop Site
  102. 102. Mobile Site
  103. 103. Como anda a qualidade dos nossos sites nas versões desktop?
  104. 104. Brad Frost
  105. 105. BULLSHIT
  106. 106. Será?
  107. 107. Como anda as soluções acessibilidade digital no Brasil? 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 comum em projetos Web
  113. 113. Na busca de soluções para os problemas, o que maioria faz?
  114. 114. Copia e cola quase tudo...
  115. 115. “Todo negócio é único e fundamentalmente diverso de qualquer outro, por maiores que sejam suas similaridades.“ O tiro e o alvo – aforismo 54
  116. 116. Cuidado, o que serve para uma empresa pode não servir para outra...
  117. 117. Código de barras
  118. 118. X
  119. 119. Artigo CAPTCHA: 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 , veja Mais … 41.700.000 respostas para 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 recentes modinhas 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 mundo usa, porque não temos tempo e somos reativos... REWORK:  Business  book  from  37signals  
  135. 135. Mas por que? Porque não temos tempo, porque somos reativos e dá muito trabalho…    

×