Estratégia, Design e Acessibilidade Web - BlogcampRJ

Estratégia, Design e Acessibilidade Web

Agosto de 2011Horácio Soares

Apresentação

Horácio Soareshoracio@digitalacesso.com

55 (21) 9925-5404@horaciosoares

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

www.digitalacesso.comhoracio@digitalacesso.com

@horaciosoares

Obrigado!