acessibilidade e design mobile - tablelessconf 2013 - sp
Post on 01-Jun-2015
1.437 Views
Preview:
DESCRIPTION
TRANSCRIPT
TablelessConf – São Paulo (maio 2013)
Acessibilidade Web e Design Mobile:
tudo junto e misturado
Horácio Pastor Soares horacio.soares@acessodigital.net
@horaciosoares (21) 9925-‐5404
Contexto da Acessibilidade na Web
Acessibilidade? O que é
Usabilidade? O que é
Qual é o relacionamento entre a acessibilidade
e usabilidade?
Acessibilidade: quem precisa?
ALGUMAS pessoas precisam de
acessibilidade em TODOS os momentos.
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 interage com teclado utilizando seu dedo mindinho…
Para os usuários cegos.
Fotos de três cegos trabalhando no computador utizando um programa
leitor de telas
Marcos, com baixa visão, utiliza um dispositivo que amplia os textos de um livro.
OUTRAS pessoas precisam de
acessibilidade em MUITOS os momentos.
Isaias à esquerda, conduzindo o Januário para um chopinho após curso de acessibilidade Web.
Por exemplo, o Isaias, que é designer e
daltônico.
Outros exemplos: • Pessoas surdas; • Com deficiência audiVva; • Com déficit de atenção; • Com dislexia; • Com déficit cogniVvo.
TODAS as pessoas precisam de
acessibilidade em ALGUM momento.
Exemplos: • Em ambientes com más condições de luminosidade;
• Com tendinite ou fratura no braço dominante;
• Tendo as mãos, olhos ou ouvidos ocupados em outra tarefa.
• 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 idade avançada (todos seremos, na melhor das hipóteses).
E usando dispositivos móveis com
telas 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 do Design Mobile
hgp://thenextweb.com/apple/2012/01/25/there-‐are-‐now-‐more-‐iphones-‐sold-‐than-‐babies-‐born-‐in-‐the-‐world-‐every-‐day/
hgp://zeldman.com/2012/07/09/mobile-‐to-‐the-‐future-‐luke-‐wroblewski/
hgp://www.slideshare.net/HubSpot/50-‐mobilefactsdeck62812 -‐ Slide 4
hgp://www.slideshare.net/HubSpot/50-‐mobilefactsdeck62812 -‐ slide 6
Estatísticas Brasil
GIF animado...
http://imasters.com.br/noticia/smartphones-terao-50-do-mercado-brasileiro-em-2013/
No mundo
Vários GIFs animados...
http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 18
http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 36
capacidades/vantagens do mobile
GPS
Acelerômetro
Giroscópio
Bluetooth
Bluetooth
Áudio, vídeo e imagem
NFC
Sensores multitoque
Em qualquer hora e local.
Novas maneiras de interação e apresentação
Boa compatibilidade entre
navegadores Mobile e HTML5
Atualizações frequentes...
limitações/restrições do mobile
Muitas vezes, ao interagir com
mobile, as pessoas estão em
modo: “fritando o peixe e
olhando o gato” e com
apenas um dos dedos...
@lukew
‘Desktop is like “diving”…
…while mobile is like “snorkling.”’ by Hinman at Nokia
hgp://www.slideshare.net/Rachel_Hinman
@lukew
desktop
@lukew
tela grande
@lukew
tela grande
energia
@lukew
tela grande
energia
rede consistente
@lukew
tela grande
energia
rede consistente
teclado
@lukew
tela grande
energia
rede consistente
teclado
mouse
@lukew
tela grande
energia
rede consistente
teclado
mouse
cadeira
@lukew
tela grande
energia
rede consistente
teclado
mouse
cadeira
mesa
tela grande
energia
rede consistente
teclado
mouse
cadeira
mesa caneca de café
@lukew
@lukew
mobile
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-userfriendly-2010-workshop
Como o Luli disse no Digitalks no Rio:
“Nesse mundo Mobile, somos todos daltónicos e sofremos
do Mal de Parkinson”
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
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 site
que gostaria que 80% do seu
conteúdo/itens/elementos
fosse retirado da interface?
Flickr desktop
60 opções de menu...
@lukew
Flickr mobile
7 opções de menu...
Less is more...
@lukew
Conhecimento profundo da
audiência, o que fazem, por
que vieram e por que se
importam com o Flickr...
Qual desses Desktops oferecia a melhor experiência?
E qual desses controles?
Restrições são boas para o
design, pois te forçam a
priorizar, a manter o foco
mas cuidado…
no ponto…
Os detalhes do comprador não
podem ser visualizados na versão mobile.
Como anda as soluções acessibilidade digital no
Brasil?
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 comum em projetos Web
Na busca de soluções para os problemas, o que maioria faz?
Copia e cola quase tudo...
“Todo negócio é único e fundamentalmente
diverso de qualquer outro, por maiores que
sejam suas similaridades.“
O tiro e o alvo – aforismo 54
Cuidado, o que serve para uma empresa pode não servir para outra...
Código de barras
X
Artigo CAPTCHA: 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”, “veja Mais”… 41.700.000 respostas para “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
Ou ainda as mais recentes modinhas 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 mundo usa, porque não temos tempo e
somos reativos...
REWORK: Business book from 37signals
Mas por que? Porque não temos tempo, porque somos
reativos e dá muito trabalho…
Debate:
Quais são as principais barreiras?
top related