Circuito 4x1Campo Grande - Setembro - 2011
Horácio Soares
O que a
Acessibilidade e a Usabilidadepodem fazer pelo seu
e-Commerce?
• Formas Farmacêuticas e apresentações
• Nome Genérico
• Uso
• Composição
• Ação esperada do medicamento
• Cuidados de armazenamento
• Cuidados de Administração
• Interrupção do tratamento
• Indicações
• Contra-indicações
• Preocupações e Advertências
• Reações Adversas
• Superdosagem
• Posologia
• Formas Farmacêuticas e apresentações
• Nome Genérico
• Uso
• Composição
• Ação esperada do medicamento
• Cuidados de armazenamento
• Cuidados de Administração
• Interrupção do tratamento
• Indicações
• Contra-indicações
• Preocupações e Advertências
• Reações Adversas
• Superdosagem
• Posologia
Qual é o momento atual do
e-Commerceno Brasil?
O que os O que os usuários usuários esperam?esperam?
Felicidade…
- Encontrabilidade- Velocidade- Usabilidade- Preço- Comodidade- Segurança- Bom atendimento- Variedade- Qualidade-…
E o que as empresas de e-Commerce
esperam?
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?Para onde vamos?
http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
Livro: O Tiro e o Alvo
Causo 1Causo 1
Precisamos Precisamos CConstruironstruiruuma mesa.ma mesa.
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?
Escolha do alvo…
Uma 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
Primeiro passo
Foco na primeira camada da experiência do usuárioc (Garet):
-Definição dos objetivos e metas do projeto.
-Identificação das necessidades dos usuários
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
globo.comJulho 2007
globo.comAgosto 2007
Não deve ser desorganizado...
Onde está o Wally?
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.
Uma cobra fala para outra Querida, travou de novo!!! Andem meninos vão ajudar seu pai a dar Control + Alt + Del.
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
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
Outras ideias…
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…
Mas, na busca por soluções para os problemas, o que
maioria dos sites de e-Commerce faz?
Copia e cola quase tudo...
Resultado: Resultado: replicamos tudo sem replicamos tudo sem questionamentos...questionamentos...
Código de barrasCódigo de barras
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…
Divida o quadrado em4 partes iguais !!!
Dinâmica
Livro: O Tiro e o Alvo
Os participantes do teste, em sua maioria, vão chegar facilmente às 4 respostas seguintes:
Dinâmica
Do livro “O Tiro e o Alvo” Na Livraria da Travessa - http://migre.me/105T7 Editora http://www.caispharoux.com.br/
A partir destas, passam a ter dificuldades para encontrar outras formas de dividir o quadrado. Alguns chegam a afirmar não haver mais soluções possíveis e desistem.
Dinâmica
Do livro “O Tiro e o Alvo” Na Livraria da Travessa - http://migre.me/105T7 Editora http://www.caispharoux.com.br/
Poder-se-ia ainda dividir o quadrado com retas quebradas, como são os casos [i], [j], [k] e [l]
Dinâmica
Do livro “O Tiro e o Alvo” Na Livraria da Travessa - http://migre.me/105T7 Editora http://www.caispharoux.com.br/
No pensamento lateral vai-se quebrando barreiras autoimpostas e descobrindo alternativas que jamais seriam consideradas no pensamento vertical.
O pensamento lateral é a base da técnica de “brain storming” para geração de idéias.
Dinâmica
Do livro “O Tiro e o Alvo” Na Livraria da Travessa - http://migre.me/105T7 Editora http://www.caispharoux.com.br/
Na busca por novas opções podemos encontrar saídas
criativas, inovadoras e mais acessíveis…
Inovar é preciso, mas é necessário avaliar:
custo x benefício
Uma escadaUma escada
““Nem tudo Nem tudo diferente é diferente é
criativo, mas criativo, mas tudo criativo é tudo criativo é
diferente”.diferente”.
Uma regra de ouro para os usuários
O que você pensa ao dirigir seu carro de casa pro trabalho?
Uma regra de ouro para quem cria
Dentre os públicos de e-commerce, tem algum que não é
atendido?
Comercial Mercado Livre
2011
Acessibilidade?O que é
Usabilidade?O que é
Qual é o relacionamentoentre a acessibilidade
e usabilidade?
design universal
objetivo do design universal: uma solução para todos
Simples e intuitivo (princípio da
DU)
X
Complexidade e inovação sem
validação
Imagem da página inicial do Google
Simples e intuitivo (princípio da
DU)
Onde está a busca no site da ESPN?
Acessibilidade eusabilidade 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.
João Henriques deficiente motor utiliza o mouse
com dificuldade. ( www.euroacessibilidade.com )
João, tetraplégico
João (foto de Maíra Soares )
Tião tem grandes dificuldades motoras e interage com teclado com o dedo mindinho…
Eric interagindo através de teclado expandido - Funlar – Rio (nov/2006).
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)
Gabriel, linguagem em desenvolvimento...
Gabriel compenetrado, olhando para o monitor e clicando com o mouse.
Agora ele está olhando e brincando como teclado.
Calvin, pouca experiência e
medo do computador
Homem com muito medo olhando por cima de um notebook.
Marta e suas amigas…
Number of 80+ year olds in the worldo 2000: ~ 69 milliono 2010: ~110 milliono 2050: ~379 million (close to 2 billion 60+ yr
olds) ->
o INCLUIR AQUI UM SLIDE o DO MERCADO LIVREo VELIHINHOS COMPRANDO
http://www.un.org/esa/population/publications/worldageing19502050/
Our globally aging population
Copyright © 2009. World Wide Web Foundation. All rights reserved
Max, com
tendinite,
usando o
mouse
com a mão
trocada.
Homem com expressão de desespero, usando o mouse com a mão esquerda
Analfabetofuncional
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 sentado de frente para um quadro branco sem nada escrito.
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.
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”.
SEO pode e deve ajudar, mas cuidado,
seu uso pode ser prejudicial…
Quais os benefíciosda Acessibilidade e Usabilidade?
Possibilidade de atingir 100% do
público alvo.
Atender melhor todas as
pessoas
Homem de terno comemorando
Fidelizar clientes
Mais fácil de usar e aprender
Proteção contra processos pela falta da
acessibilidade
#inacessibilidadenaTamTrending Topics e possivelmente
processo no Ministério Público
Novo site da Gol
#desacessibilidade
Uma mão com laço no dedo indicador
Decreto de lei nº 5.296
(dez/04) e o decreto de lei
nº 6.949 (ago/09), onde
a convenção da ONU
ganhou força de lei.
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
VantagemVantagemcompetitivacompetitiva
Melhoria daqualidade.
Mãe e filha felizes na praia dando uma estrela
Algumas recomendações:
Um bom sistema de e-Commerce é uma interface
bem testada…
Não faça como a acessibilidade na maioria
dos sites brasileiros
Resultado: acessibilidade para inglês ver.
Um caminho…
SIMPLICIDADE
Desktop first!
http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
Mobile First!
http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
Less is more...
Elimine da interface itens que
não sejam extremamente
necessários...
Outros caminhos
-Prototipe, avalie e evolua.
-Melhoria contínua…
-Teste o acesso ao site e sistema de compras em conexões de baixa
velocidade.
-Realize testes em dispositivos móveis e
de impressão
-Teste a navegação navegação via teclado
-Teste a navegação navegação via teclado
-Teste a Semântica
-Evite mudanças inesperadas de foco.
-Mantenha o foco/feedback na
navegação por links e campos de formulário
-Diferencie -links clicados, ativos,
etc.
-Crie links/botões cuja área permita que os usuários cometam erros de pontaria...
-Mantenha bom contraste entre cores de fundo e dos textos.
-Use um tamanho de fontes acessível e
escalonável.
-Observe usuários com e sem deficiência
realizando as-tarefas do e-commerce.
-Futuro...
iPhone, iPad, and iPod touch: Getting started with VoiceOver for accessibility
Accessible Rich Internet Applications
ARIA NOWHTML 4 + ARIA HTML5 + ARIA
http://www.abilitynet.org.uk/accessibility2/wp-content/uploads/2009/09/HTML5_Accessibility_faulkner.ppt