Your SlideShare is downloading. ×
Acessibilidade e Design Mobile: Frontinrio junho/03
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Acessibilidade e Design Mobile: Frontinrio junho/03

1,592
views

Published on

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

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

Published in: Design

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,592
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
23
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×