acessibilidade e design mobile: frontinrio junho/03

TablelessConf – São Paulo (maio 2013)

Acessibilidade Web e Design Mobile:

tudo junto e misturado

Horácio Soares [email protected] @horaciosoares (21) 9925-‐5404

Contexto da Acessibilidade na Web

Acessibilidade? O que é

Usabilidade? O que é

Qual é o relacionamento entre a acessibilidade

e usabilidade?

mitos = verdades

mitos

X

mitos

V

em acessibilidade

difícil

é caro

limitador

é demorado

é irrelevante

Será?

Acessibilidade: quem precisa?

Mas 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.

•  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 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%)


•  Pelo menos uma das deficiências invesVgadas: 45 milhões (23,9%)



•  Idosos: 19 milhões (10%)



•  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://www.slideshare.net/HubSpot/50-‐mobilefactsdeck62812 -‐ Slide 4

Estatísticas Brasil

GIF animado...

http://imasters.com.br/noticia/smartphones-terao-50-do-mercado-brasileiro-em-2013/

No mundo

Vários GIFs animados...

capacidades/vantagens do mobile

Acelerômetro

Giroscópio

Bluetooth

Áudio, vídeo e imagem

Sensores multitoque

Em qualquer hora e local.

Boa compatibilidade entre

navegadores Mobile e HTML5

Atualizações frequentes...

limitações/restrições do mobile

@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

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.

Desktop Site

Mobile Site

Como anda a qualidade dos

nossos sites nas

versões desktop?

Brad Frost

BULLSHIT

Será?

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

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

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

<a title=“redundante”> Redundante

</a>

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…