Circuito 4x1Rio - Abril 2011Horácio Soares
O que a
Acessibilidade e a Usabilidadepodem fazer pelo seu
e-Commerce?
Qual é o momento atual do
e-Commerce?
Quais são os objetivos do e-Commerce?
O que o usuário espera quando compra algo
eletronicamente?
- Velocidade- Preço- Comodidade- Segurança- Atendimento-Variedade-- Qualidade-…
Existe algum público que não é atendido?
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 )
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) ->
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 possível processo
no Ministério Público
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
Na busca por soluções para os problemas, o que maioria
dos sites de e-Commerce faz?
Copia e cola quase tudo...
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
O que você pensa ao dirigir seu carro de casa pro trabalho?
Ou rever antigos processos na busca no melhores
resultados…
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...
Design de EpicentroComece do núcleo da página e construa para fora.http://gettingreal.37signals.com/ch09_Epicenter_Design.php Design de epicentro foca na verdadeira essência da página — o epicentro — e então constrói para fora. Isso significa que, no começo, você ignora as extremidades: a navegação/menus, rodapé, cores, barra lateral, logotipo, etc. Em vez disso, você começa o epicentro e faz o design das peças de conteúdo mais importantes primeiro.
Um mito…
Uma importante recomendação:
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 bom site, é um site bem testado…
http://www.youtube.com/watch?v=xDnNrBPh1KU
Outras recomendações:
-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 -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.
-Desligue o monitor e navegue pelo teclado
com um software leitor de Telas.
-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
