Acessibilidade e Usabilidade no E-commerce - Horacio Soares

Circuito 4x1Campo Grande - Setembro - 2011

Horácio Soares

O que a

Acessibilidade e a Usabilidadepodem fazer pelo seu

e-Commerce?

Apresentação

Horácio [email protected]

om 55 (21) 9925-5404

@horaciosoares

• 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?


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!


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

Outras ideias…


Uma solução simples e barata, mas que funciona…


Acertar na

mosca…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://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


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


Poder-se-ia ainda dividir o quadrado com retas quebradas, como são os casos [i], [j], [k] e [l]

Dinâmica


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


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

Obrigado!

Horácio [email protected]

om 55 (21) 9925-5404

@horaciosoares

Acessibilidade e Usabilidade no E-commerce - Horacio Soares

Business

Transcript of Acessibilidade e Usabilidade no E-commerce - Horacio Soares