Estratégia, Design e Acessibilidade Web - BlogcampRJ
-
Upload
horacio-soares -
Category
Technology
-
view
2.131 -
download
4
description
Transcript of Estratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web
Agosto de 2011Horácio Soares
O que osO que osusuários usuários eesperam, speram, buscam?buscam?
Felicidade…Felicidade…
O que as empresas
buscam
Aumentar a satisfação dos usuários para obter mais lucro
Aumentar a satisfação dos usuários para obter mais lucro
Mas como
Acertandoo tiro certono alvo certo
Para onde vamos?
http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
CAUSO 1
Os marceneiros já chegaram e estão a postos com suas serras, plainas e lixadeiras; os pintores também foram convocados, com pincéis, tintas e vernizes, pois há urgência em construir a mesa.
Livro: O Tiro e o Alvo
CAUSO 1
- A propósito, que mesa?
Livro: O Tiro e o Alvo
De sinuca?
Ping-pong?
Futebol de botão?
Carteado?
Ou seria uma mesa para computador?
Reunião?
Escritório?
Mesa de centro?
Jantar?
Ou seria uma mesa de cirurgia?
De autópsia?
CAUSO 1 (continuação)
- Isso não interessa, meu filho. Depois a gente vê. Vamos começar logo o trabalho. O prazo é curto, então, mãos à obra!
Livro: O Tiro e o Alvo
Conclusão?
Retrabalho, desgaste com o cliente e diminuição do lucro.
Problema?
Qual é a proposta?
Por Quê?Por Quê?Por Quê?Por Quê?Por Quê?
Precisamos automatizar a Contabilidade
Preciso do Balancete dia 5 e não dia 15 como atualmente!
Necessito da Conta X do Balancete até o dia 5.
Preciso do valor da Conta X para calcular até o dia 7 o valor das Reservas.
Precisamos informar o valor das Reservas ao
Banco Central até o dia 8!
Por que se não informarmos as Reservas
seremos multados!!
Investigação Baseada em Perguntas
-Definição:- objetivos;-- metas; - identificação das necessidades dos usuários.
Primeira camada da experiência do usuário:
d e s i g n
Mas afinal o que é
design
E a aparência, é
importante para o design
Qual dos dois sanduiches você escolheria?
Foto de um sanduíche comprado em uma loja qualquer.
Foto do mesmo sanduíche e para fins de marketing.
But... design is not just cosmetic.
But... design is not just cosmetic.
alsoalso
Design não é arte!
Clara com 3 anos, pintanto o “sete”
Não é maquiagem...Não é maquiagem...
http://www.flickr.com/photos/alltheaces/67904915/
Porquinho rosa e sorridente de pelúcia
http://www.flickr.com/photos/melmoththewanderer/31029375/
Fucinho de um porco de verdade...
Porco disfarçado
Vaca disfarçada
Não deve ser pesadoNão deve ser pesado
Não deve ser poluído.Não deve ser poluído.
Diversas chaminés de uma fabrica poluindo o ar.
70 x 30
Não deve ser poluído e desorganizado... Onde está o Wally?
globo.comJulho 2007
globo.comAgosto 2007
Ambíguo?
Quatro mãos juntas, uma para cada lado.
Complicad
o
Executivo na frente de um grande labirinto.
Confuso
Um poste com dezenas de setas para todos os lados
Frustrante
Não deve discriminar
Uma peça de pião de xadrez isolado de outros 27 piões.
Ou ser inacessível
Um homem amarrado, com olhos vendados e boca tapada.
Nãorequer
habilidades
especiais
Uma mão auxiliando a outra no uso do mouse.
Ou ser difícil de usar
Não é apenasuma aparência bonita
Um close de um belo rosto feminino.
Afinal, o que é design
É uma disciplina que explora o diálogo
entre:
Usability Body of Knowledge - Fonte: http://www.usabilitybok.org/design/p286
produtos pessoas
contexto
Design é um processo que desenvolve
soluções para ajudar as pessoas a alcançar seus
objetivos.Usability Body of Knowledge - Fonte: http://www.usabilitybok.org/design/p286
Quais habilidades eu preciso?
•Eficaz brainstorming•Resolver o problema certo.•Pesquisa com usuários•Prototipação e avaliação
Quais habilidades eu preciso?
•Eficaz brainstorming•Resolver o problema certo.•Pesquisa com usuários•Prototipação e avaliação
Algumas soluções criativas para resolver problemas
http://www.claragaggero.com/?p=135http://vimeo.com/11784148
Out of the box - book
Problema: Como fazer os
homens acertarem o alvo em
mictórios públicos?
Algumas soluções caras e criativas, mas um tanto
machistas…
Fonte: internet - desconhecidaFonte: internet - desconhecida
Fonte: internet - desconhecidaFonte: internet - desconhecida
Fonte: internet - desconhecidaFonte: internet - desconhecida
Fonte: internet - desconhecidaFonte: internet - desconhecida
Uma solução simples e barata, mas que funciona…
Fonte: internet - desconhecidaFonte: internet - desconhecida
Acertar na
mosca…Fonte: internet - desconhecidaFonte: internet - desconhecida
Fonte: internet - desconhecidaFonte: internet - desconhecida
Ou tentar mudar a cultura de alguns
homens
Fonte: internet - http://bucomania.blogspot.com/2007/08/banheiros-criativos.htmlFonte: internet - http://bucomania.blogspot.com/2007/08/banheiros-criativos.html
Fonte: internet - http://bucomania.blogspot.com/2007/08/banheiros-criativos.htmlFonte: internet - http://bucomania.blogspot.com/2007/08/banheiros-criativos.html
Fonte: internet - http://www.inovavox.comFonte: internet - http://www.inovavox.com
Mas no contexto errado...
Ou ainda fazer o carinha acertar o alvo
e ainda gerar conscientização…
Na busca de soluções para Na busca de soluções para os problemas, o que maioria os problemas, o que maioria
faz?faz?
Copia e cola quase tudo...Copia e cola quase tudo...
Resultado: replicamos tudo Resultado: replicamos tudo que está por aí sem pensar...que está por aí sem pensar...
Alguns exemplos:Alguns exemplos:
CAPTCHACAPTCHA
Captcha http://sam.zoy.org/pwntcha/
Captcha Captcha (solução inacessível e insegura)(solução inacessível e insegura)
((http://www.webvisum.com/en/main/downloadhttp://www.webvisum.com/en/main/download))
Menu DropDownMenu DropDown
Usamos o flash como se Usamos o flash como se todos tivessem acesso a todos tivessem acesso a
ele...ele...
Navegar sem o mouse pelo site http://www.ibcbrasil.com.br/Tarefa: procurar pelo link cadastro
http://www.farmrio.com.br
Clique aqui!Clique aqui!
“Clique aqui”, “Saiba mais”, “vejaMais”… 41.700.000 respostaspara “clique aqui” no Google.
Site da Itautec Site da Itautec http://www.itautec.com.brhttp://www.itautec.com.br (acesso em setembro 2009) (acesso em setembro 2009)
Mas por que? Porque não temos tempo, porque somos
reativos e dá muito trabalho…
design universal
objetivo do design universal: uma solução para todos
Imagem da página inicial do Google
Simples e intuitivo (princípio da
DU)
Onde está a busca no site da ESPN?
Uma escada com Uma escada com acessibilidade e atraenteacessibilidade e atraente
Acessibilidade?O que é
Qual é o relacionamentoentre a acessibilidade
e usabilidade?
Acessibilidade para quem?
Juca, sem visão.
Mandy, sem visão e braços.
Lucas, com baixa visão utilizando o software ampliador de tela.
Para o Isaias, designer e descobriu apenasno início de 2009 que é daltônico.
Isaias à esquerda, conduzindo o Januário para um chopinho após curso de acessibilidade Web.
Ok, então acessibilidade é para
pessoas com deficiência visual,
certo?
João, tetraplégico
João (foto de Maíra Soares )
João Henriques deficiente motor utiliza o mouse
com dificuldade. ( www.euroacessibilidade.com )
Fotos do deficiente motor João Henrique utilizando o mouse e outra em sua cadeira de rodas.
Tião tem grandes dificuldades motoras e interage com teclado com o dedo mindinho…
Deficientes auditivos não oralizadostêm dificuldades com o português.
Chapeuzinho Vermelho em português e na língua de sinais (prof. Goulão)
Certo...acessibilidade na Web serve para
pessoas que possuem alguma deficiência,
certo?
Pedro e Laura com dispositivos móveis com acesso a Internet.
Pedro olhando para seu smartphone e Laura com uma cara desesperada pera seu celular.
Marta e suas amigas…A idosa Marta com seu notebook no colo, navega sendo observada por três outras senhoras.
Analfabeto
funcional
Um em cada cinco
brasileiros (20,3%) é
analfabeto funcional,
de acordo com a Pnad
(Pesquisa Nacional
por Amostra de
Domicílios) 2009,
divulgada pelo IBGE.
Homem de costas, sentado de frente para um quadro branco sem nada escrito.
Todos nós na primeira experiência.
Um criança com camisa social e gravata em frente a um notebook
E finalmente,
o bilionário cego!!!
Cifrão desenhado com moedas douradas
Google, o bilionário cego!!! É apenas um robô que indexa conteúdo em
texto.
Dilbert fazendo parte do logotipo do Google e falando “eu não posso ver”.
ACESSIBILIDADE WEB:
SETE MITOS E UM EQUÍVOCO
http://acessodigital.net/art_acessibilidade-web-7-mitos-e-um-equivoco.html
(Trabalho apresentado no 1º Encontro Brasileiro de
Arquitetura de Informação)
Mitos
Mito I.
"Acessibilidade Web é só para deficientes
visuais."
Mito II. "Na prática, o
número de usuários beneficiados com a
acessibilidade é relativamente muito
pequeno."
Quantos Tailandeses você conhece que acessam a
internet?
Number of 80+ year oldsin the world
o 2000: ~ 69 milliono 2010: ~110 milliono 2050: ~379 million
(close to 2 billion 60+ yr olds)
Referência: http://www.un.org/esa/population/publications/worldageing19502050/
Mito III.
"Fazer um site acessível demora e
custa caro."
Mito IV.
"É melhor fazer uma página especial para
os deficientes visuais."
Mito V.
"Um site acessível a deficientes visuais
não é bonito."
Mito VI.
Vamos por partes: primeiro fazemos o site, depois fazemos
acessibilidade."
Mito VII.
"A gente sabe o que é bom para
o usuário."
Modelo mental do arquiteto
Um grande equívoco.
“Meu site é direcionado a um
público específico; ele não interessa a todos os grupos de usuário
s.”
Acessibilidade, quais são os custos?
• Curva de aprendizagem• Alto custo no redesign• Baixo em novos projetos• Diminui com tempo• Validação• Manutenção• Melhoria contínua• Mudança de cultura
E os benefícios?
Gráfico de barras crescente.
Possibilidade de atingir 100% do
público alvo;
Foto de um homem olhando pela mira de sua espingarda.
Atender melhor todas as
pessoas
Uma mão com laço no dedo indicador
Conformidade com o decreto de lei Decreto
nº 5.296 (dez/04) e com
a convenção da ONU que
ganhou força de lei Decreto
6949 (ago/09) ;
Proteção contra processos pela falta da
acessibilidade
Visualizar os benefícios da acessibilidade
Manutenção mais rápida e
barata, melhor performance…
Valorização da
Diversidade e
Responsabilidade Social.
Mãos entrelaçadas
Maior visibilidade pelos sistemas de busca;
Mulher com notebook em sinal de ok
DiferencialDiferencialcompetitivocompetitivo
Cachorrinho caregando um enorme osso.
Melhoria da
qualidade.
Mãe e filha felizes na praia dando uma estrela
Acessibilidade em Blogs
Pesquisa com 32 usuários com deficiência visual
16 não acessam blogs
Pesquisa com 32 usuários com deficiência visual
16 usuários acessam blogs
• navegação difícil.
• grande quantidade de links.
• páginas longas verticalmente.
• falta de organização.
• falta de saltos para as seções principais
dos blogs.
• links sem descrição clara.
• leva muito tempo para achar uma
informação.
Pesquisa com 32 usuários com deficiência visual
Principais barreiras?
• links inacessíveis.
• imagens e outros recursos gráficos sem
descrição.
• acesso difícil.
• dificuldade para postar uma
mensagem.
• Dificuldade na leitura das mensagens.
• Falta de acessibilidade.
Pesquisa com 32 usuários com deficiência visual
Principais barreiras?
Testes de usabilidade com 5 usuários com deficiência visual:
TAREFAS:
1.navegar até identificar o assunto/tema do blog.
2.selecionar um post na página inicial do blog e publicar um comentário.
3.localizar e enviar uma mensagem através do canal de comunicação com o seu autor.
4.utilizar o sistema de busca do blog e localizar uma determinada “palavra-chave”.
navegar até identificar o assunto/tema do blog.
selecionar um post na página inicial do blog e publicar um comentário.
localizar e enviar uma mensagem através do canal de comunicação com o seu autor.
utilizar o sistema de busca do blog e localizar uma determinada “palavra-chave”
Análise da acessibilidade do blog:
Interney
O que é acessibilidade de
verdade?
Acessibilidade =Técnicas de acessibilidade
WCAG Web Content Accessibility Guidelines
WCAG 1.0 – 05 de maio de 1999 http://www.utad.pt/wai/wai-pageauth.html
WCAG 2.0 – 11 de dezembro de 2008http://www.ilearn.com.br/TR/WCAG20/
Recomendações para Recomendações para acessibilidade do conteúdo da acessibilidade do conteúdo da
Web 1.0 e 2.0 do W3CWeb 1.0 e 2.0 do W3C
Acessibilidade =Técnicas de acessibilidade
+ Web Standards
Separação entre conteúdo (HTML), apresentação (CSS) e
comportamento (JavaScript)
Acessibilidade =Técnicas de acessibilidade
+ Web Standards
+ Usabilidade
UsabilidadeUsabilidade
Acessibilidade =Técnicas de acessibilidade
+ Web Standards
+ Usabilidade
+ Conteúdo
Escrever é a arte de Escrever é a arte de
cortar palavras. cortar palavras.
Na Web essa regra é Na Web essa regra é
elevada a “n”.elevada a “n”.
Estudo de Jakob Nielsen
http://www.useit.com/alertbox/9710a.html
Planejando o texto para o usuário e não para si
mesmoO que o leitor precisa saber?
Qual a razão do leitor precisar dessas informações?
Que tipo de conhecimento ele já tem sobre o assunto?
Qual vai ser a utilização do texto?
Quem pretende-se alcançar com esse texto?
Qual a linguagem e o vocabulário mais adequados ?
Acessibilidade =Técnicas de acessibilidade
+ Web Standards
+ Usabilidade
+ Conteúdo
+ AI
Desafio:Como tratar o excesso de
informação?
Pergunte aos clientes de um restaurante o que eles preferem:
um cardápio repleto de opções ou um com poucas alternativas
Exemplo de um cardápio com muitas opções
Less is more...
Simplicidade eSimplicidade e
AcessibilidadeAcessibilidade
Imagem do Google Beta em 1998
Fonte: http://www.archive.org
Imagem do Google em 2010
Desktop first!
http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
VIDEO:Acessibilidade Web:Custo ou Benefício?
Download: http://acessodigital.net/video.html
Em HTML5 com legendas em PT-BR, EN e ES:
http://acessodigital.net/video-html5/video-
acessibilidade-en.html
Videolog: http://videolog.uol.com.br/video.php?
id=230205