circuito4x1 acessibilidade e ecommerce-abril-2011

Circuito 4x1Rio - Abril 2011Horácio Soares

O que a

Acessibilidade e a Usabilidadepodem fazer pelo seu

e-Commerce?

Horácio Soareshoracio.soares@acessodigital.net

@horaciosoares (21) 9925-5404

Circuito 4x1Rio - Abril 2011

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 )

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

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

Horácio Soareshoracio.soares@acessodigital.net

@horaciosoares (21) 9925-5404

Obrigado!