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

Acessibilidade e Design Mobile: Frontinrio junho/03

on

  • 1,699 views

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

Statistics

Views

Total Views
1,699
Views on SlideShare
1,526
Embed Views
173

Actions

Likes
10
Downloads
22
Comments
0

4 Embeds 173

https://twitter.com 126
http://quatrocubos.com.br 38
http://www.andersonnascimento.eti.br 6
http://lanyrd.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Acessibilidade e Design Mobile: Frontinrio junho/03 Acessibilidade e Design Mobile: Frontinrio junho/03 Presentation Transcript

    • 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  
    • 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 Soares )    Por  exemplo,  pessoas    com  restrição  de  movimento  nos  membros  superiores.  
    • 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 é designer edaltônico.
    • Outros  exemplos:  •   Pessoas  surdas;  •   Com  deficiência  audiVva;  •   Com  déficit  de  atenção;  •   Com  dislexia;  •   Com  déficit  cogniVvo.  
    • 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  busca  (que  só  indexam  texto);  •  Com  pouca  experiência  (todos  fomos  algum  dia);  
    • •  Com  tendinite  ou  fratura  no  braço  dominante;  •  Tendo  as  mãos,  olhos  ou  ouvidos  ocupados  em  outra  tarefa.    
    • 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  deficiências  invesVgadas:  45  milhões  (23,9%)  
    • 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%)  
    • 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    
    • Contexto doDesign Mobile
    • hgp://thenextweb.com/apple/2012/01/25/there-­‐are-­‐now-­‐more-­‐iphones-­‐sold-­‐than-­‐babies-­‐born-­‐in-­‐the-­‐world-­‐every-­‐day/  
    • 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é 100 vezes mais lenta queem desktop.http://spaceport.io/spaceport_perfmarks_2_report_2012_5.pdf
    • 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 – aforismo 54
    • 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…