Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
TablelessConf	  –	  São	  Paulo	  (maio	  2013)	  	  	  Acessibilidade	  Web	  	  e	  Design	  Mobile:	  	  tudo	  junto	 ...
Contexto daAcessibilidade na Web
Acessibilidade?O que é
Usabilidade?O que é
Qual é o relacionamentoentre a acessibilidadee usabilidade?
mitos = verdades
X
mitos
mitosX
mitos
mitos
mitosV
em acessibilidade
difícil
é caro
limitador
feio
é demorado
é irrelevante
Será?
Acessibilidade:quem precisa?
Mas ALGUMASpessoas precisam deacessibilidade emTODOS osmomentos.
ALGUMAS	  pessoas	  precisam	  de	  acessibilidade	  em	  TODOS	  os	  momentos.	  João que é tetraplégico(foto de Maíra S...
Mark, tetraplégico, interage com os olhos
Tião tem grandes dificuldades motoras e interagecom teclado utilizando seu dedo mindinho…
Para os usuários cegos.Fotos de três cegos trabalhando nocomputador utizando um programaleitor de telas
Marcos, com baixa visão, utiliza um dispositivoque amplia os textos de um livro.
OUTRAS pessoasprecisam deacessibilidade emMUITOS osmomentos.
Isaias à esquerda, conduzindo o Januário para um chopinhoapós curso de acessibilidade Web. 	  Por exemplo, o Isaias,que é ...
Outros	  exemplos:	  • 	  Pessoas	  surdas;	  • 	  Com	  deficiência	  audiVva;	  • 	  Com	  déficit	  de	  atenção;	  • 	  ...
TODAS as pessoasprecisam deacessibilidadeem ALGUMmomento.
 	  •  Tendo	  as	  mãos,	  olhos	  ou	  ouvidos	  ocupados	  em	  outra	  tarefa.	  
Com	  idade	  avançada	  
 •  Com	  pouca	  fluência	  na	  linguagem	  do	  documento	  que	  se	  deseja	  pesquisar;	  •  Usando	  sistemas	  de	 ...
•  Com	  tendinite	  ou	  fratura	  no	  braço	  dominante;	  •  Tendo	  as	  mãos,	  olhos	  ou	  ouvidos	  ocupados	  em...
E usandodispositivosmóveis comtelas pequenas.
Acessibilidade	  para	  	  quantos	  no	  BRASIL?	  
Segundo	  IBGE	  no	  Brasil	  (2010):	  •  População	  total:	  190	  milhões	  (100,0%)	  	  	  
Segundo	  IBGE	  no	  Brasil	  (2010):	  •  População	  total:	  190	  milhões	  (100,0%)	  •  Pelo	  menos	  uma	  das	  ...
Segundo	  IBGE	  no	  Brasil	  (2010):	  •  População	  total:	  190	  milhões	  (100,0%)	  •  Pelo	  menos	  uma	  das	  ...
Segundo	  IBGE	  no	  Brasil	  (2010):	  •  População	  total:	  190	  milhões	  (100,0%)	  •  Pelo	  menos	  uma	  das	  ...
Contexto doDesign Mobile
hgp://thenextweb.com/apple/2012/01/25/there-­‐are-­‐now-­‐more-­‐iphones-­‐sold-­‐than-­‐babies-­‐born-­‐in-­‐the-­‐world-...
hgp://www.slideshare.net/HubSpot/50-­‐mobilefactsdeck
Estatísticas Brasil
GIFanimado...
http://imasters.com.br/noticia/smartphones-terao-50-do-mercado-brasileiro-em-2013/
No mundo
Vários GIFsanimados...
capacidades/vantagensdo mobile
GPS
Acelerômetro
Giroscópio
Bluetooth
Bluetooth
Áudio, vídeo e imagem
NFC
Sensores multitoque
Em qualquer hora e local.
Boa compatibilidade entrenavegadores Mobile e HTML5
Atualizações frequentes...
limitações/restriçõesdo mobile
@lukew
‘Desktop is like “diving”…
…while mobile is like “snorkling.”’by Hinman at Nokiahgp://www.slideshare.net/Rache
@lukewdesktop	  
@lukewtela grande	  
@lukewtela grande	  energia	  
@lukewtela grande	  energia	  rede consistente	  
@lukewtela grande	  energia	  rede consistente	  teclado	  
@lukewtela grande	  energia	  rede consistente	  teclado	  mouse	  
@lukewtela grande	  energia	  rede consistente	  teclado	  mouse	  cadeira	  
@lukewtela grande	  energia	  rede consistente	  teclado	  mouse	  cadeira	  mesa	  
tela grande	  energia	  rede consistente	  teclado	  mouse	  cadeira	  mesa	  caneca de café	  @lukew
@lukewmobile	  
tela pequena	  @lukew
tela pequena	  bateria	  @lukew
tela pequena	  bateria	  rede inconsistente	  @lukew
tela pequena	  bateria	  rede inconsistente	  dedo gordo	  @lukew
tela pequena	  bateria	  rede inconsistente	  dedo gordo	  sensores	  @lukew
Slide	  107	  	  http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-
Como o Luli disse no Digitalks no Rio:“Nesse mundo Mobile, somostodos daltónicos e sofremosdo Mal de Parkinson”
Outras limitações:•  Capacidade de armazenamento eprocessamento reduzido.•  Uma aplicação em HTML5 para mobilepode ser até...
perda de 80% do espaço
@lukew
e isso pode ser ótimo para o negócio...
te força a priorizar...te força a manter o foco…
Alguém conhece algum siteque gostaria que 80% do seuconteúdo/itens/elementosfosse retirado da interface?
Flickr desktop60 opções de menu...
@lukew
Flickr mobile7 opções de menu...
Less is more...
@lukew
Conhecimento profundo daaudiência, o que fazem, porque vieram e por que seimportam com o Flickr...
Qual desses Desktops oferecia amelhor experiência?
E qual desses controles?
Restrições são boas para odesign, pois te forçam apriorizar, a manter o foco
mas cuidado…
no ponto…
Os detalhes docomprador nãopodem servisualizados naversão mobile.
DesktopSite
Mobile Site
Como anda aqualidade dosnossos sites nasversões desktop?
Brad Frost
BULLSHIT
Será?
Como anda as soluçõesacessibilidade digital noBrasil?E os sites/sistemas Mobile?
Uma alternativa…
Uma alternativa…Accessibility First!Mobile First!
Mobile	  First	  Luke	  Wroblewski	  	  Livro:	  hgp://www.abookapart.com/products/mobile-­‐first	  
Paradoxo da escolha
Um probema comumem projetos Web
Na busca de soluções para osproblemas, o que maioria faz?
Copia e cola quase tudo...
“Todo negócio é único efundamentalmentediverso de qualqueroutro, por maiores quesejam suassimilaridades.“O tiro e o alvo –...
Cuidado, o que servepara uma empresa podenão servir para outra...
Código de barras
X
ArtigoCAPTCHA: herói ou vilão?http://acessodigital.net/art_captcha-heroi-ou-vilao.html
Captcha http://sam.zoy.org/pwntcha/
Captcha http://sam.zoy.org/pwntcha/X
Captcha(solução inacessível e insegura)(http://www.webvisum.com/en/main/download)
Menu DropDown
X
Clique aqui!
Clique aqui , Saiba mais , vejaMais … 41.700.000 respostaspara clique aqui no Google.	  	  
 	  Site da Itautec http://www.itautec.com.br (acesso em setembro 2009)
 	  Site da Itautec http://www.itautec.com.br (acesso em setembro 2009)X
<a title=“redundante”>Redundante</a>
X
Ou ainda as mais recentesmodinhas como paralax,modal, one single page , etc…
http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/
Mas por quê?
Porque está na moda, todo mundousa, porque não temos tempo esomos reativos...REWORK:	  Business	  book	  from	  37signals	  
Mas por que?Porque não temos tempo, porque somosreativos e dá muito trabalho…	  	  
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Acessibilidade e Design Mobile: Frontinrio junho/03
Upcoming SlideShare
Loading in …5
×

Acessibilidade e Design Mobile: Frontinrio junho/03

2,272 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…    

×