compras online e acessibilidade: melhorando a experiência de usuários de leitores de tela

70
JULIANA FERNANDES Outubro / 2016 COMPRAS ONLINE E ACESSIBILIDADE MELHORANDO A EXPERIÊNCIA DE USUÁRIOS DE LEITORES DE TELA

Upload: juliana-fernandes

Post on 16-Apr-2017

819 views

Category:

Internet


2 download

TRANSCRIPT

Page 1: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

JULIANA FERNANDES

Outubro / 2016

COMPRAS ONLINE E ACESSIBILIDADE

MELHORANDO A EXPERIÊNCIA DE USUÁRIOS DE LEITORES DE TELA

Page 2: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

JULIANA FERNANDES

UX DESIGNER NA F.BIZ

@julianafrost

www.vivendoporai.com.br

slideshare.net/julianafrost

Page 3: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

POR QUE PRECISAMOS

FALAR SOBRE

ACESSIBILIDADE?

Page 4: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

NO BRASIL, 23,9% DA

POPULAÇÃO TEM ALGUM TIPO

DE DEFICIÊNCIA*.

Ou seja: 45,6 milhões de brasileiros.

*Dados do Censo Demográfico 2010.

Page 5: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

OLHE AO REDOR.

QUASE NADA ATENDE PESSOAS

COM DETERMINADAS

NECESSIDADES.

Page 6: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

SERÁ QUE TEM CARDÁPIO EM BRAILE?

Page 7: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

SERÁ QUE A CALÇADA TEM RAMPA?

Page 8: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

SERÁ QUE ESSA ESCOLA ESTÁ PREPARADA PARA RECEBER

UM ALUNO COM DEFICIÊNCIA COGNITIVA?

Page 9: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

Infelizmente, o mundo está feito para quem:

•ENXERGA SEM DIFICULDADE

•SE LOCOMOVE SEM DIFICULDADE

•OUVE SEM DIFICULDADE

•COMPREENDE SEM DIFICULDADE

Page 10: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

MAS E AÍ?

JÁ SE COLOCOU

NO LUGAR DO

OUTRO HOJE?

Page 11: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

E SE...?

Page 12: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

VOCÊ FOSSE CADEIRANTE E

QUISESSE IR NO MOTEL?

Page 13: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

VOCÊ FOSSE SURDO E

QUISESSE IR NO CINEMA?

Page 14: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

VOCÊ FOSSE CEGO,

PRECISSE DE UM REMÉDIO E

A EMBALAGEM NÃO FOSSE

EM BRAILE?

Page 15: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

QUAL O RESULTADO DISSO

PARA QUEM TEM DEFICIÊNCIA?

Page 16: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

FALTA DE AUTONOMIA.

Page 17: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

E QUANDO O ASSUNTO É

DINHEIRO?

Page 18: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

COM INTERNET É FÁCIL COMPRAR.

VÁRIAS LOJAS VIRTUAIS VENDEM

TODO TIPO DE COISA. É SÓ

COMPRAR E RECEBER.

Page 19: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

MAS É SIMPLES

ASSIM PRA TODO

MUNDO?

Page 20: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

E SE VOCÊ FOSSE

CEGO?

Page 21: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

SENDO UMA PESSOA CEGA

QUE USA INTERNET, VOCÊ

PRECISARIA DE 2 COISAS PARA

EXERCER SUA AUTONOMIA:

Page 22: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

LEITOR DE TELA NO

COMPUTADOR OU

SMARTPHONE

SITES CONSTRUÍDOS

DE FORMA ACESSÍVEL

Page 23: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

MOMENTO DÚVIDA

VOCÊ SABE COMO UM LEITOR

DE TELA FUNCIONA?

Page 24: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

FIZ UMA EXPERIÊNCIA COM LEITOR DE TELA.

TENTEI GASTAR MEU DINHEIRO

NA INTERNET, COMPRANDO

UMA COISA QUE PRECISAVA.

Page 25: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

TAREFA:

COMPRAR UM INALADOR NOVO

PARA USAR NOS MEUS ANIMAIS

DE ESTIMAÇÃO.

Page 26: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela
Page 27: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

CENÁRIO:

1. ENCONTRAR UM INALADOR BOM COM O MENOR

PREÇO POSSÍVEL (CUSTO BENEFÍCIO)

2. QUE NEBULIZE DE 1,0ML A 1,5ML POR MINUTO

3. QUE SEJA SILENCIOSO PARA NÃO ACORDAR OS

VIZINHOS NEM ESTRESSAR OS ANIMAIS

Page 28: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela
Page 29: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

1ª TENTATIVA

1. PESQUISEI NO GOOGLE ESCOLHI

UM RESULTADO DO GOOGLE

SHOPPING.

Page 30: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela
Page 31: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela
Page 32: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

1ª TENTATIVA

CHEGUEI RAPIDAMENTE NO PREÇO E DESCRIÇÃO DO

PRODUTO, MAS A DESCRIÇÃO ERA APENAS

PROMOCIONAL.

Page 33: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

1ª TENTATIVA

3. NAVEGUEI PELOS CABEÇALHOS

PROCURANDO POR INFOS TÉCNICAS

QUERIA INFORMAÇÕES TÉCNICAS E NÃO ENCONTREI. MAIS DE

60 CABEÇALHOS E NENHUM SOBRE O QUE EU PRECISAVA.

Page 34: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

1ª TENTATIVA

4. ABRI UMA NOVA ABA E REINICIEI A

PESQUISA

DESISTI E FUI BUSCAR OUTRA LOJA.

Page 35: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

2ª TENTATIVA

Page 36: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

2ª TENTATIVA

1. ESCOLHI UM RESULTADO

ORGÂNICO

Page 37: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela
Page 38: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela
Page 39: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

2ª TENTATIVA

2. NAVEGUEI PELOS CABEÇALHOS PARA

ENCONTRAR OPÇÕES DE FILTRAGEM

CAI EM UMA LISTAGEM DE INALADORES. PRECISAVA DEIXAR A

BUSCA MAIS OBJETIVA, POR ISSO PROCUREI POR ALGO COMO

“FILTRO” NOS CABEÇALHOS, MAS NÃO ENCONTREI NADA.

Page 40: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

2ª TENTATIVA

3. COGITEI NAVEGAR POR LINKS PARA

ENCONTRAR OS FILTROS

IMPOSSÍVEL PARA UMA PÁGINA COM MAIS DE 600 LINKS.

Page 41: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

2ª TENTATIVA

4. NAVEGUEI DE NOVO PELOS

CABEÇALHOS NA TENTATIVA DE ACHAR

RESULTADOS DIFERENCIADOS

NO CABEÇALHO “DESTAQUES DE NEBULIZADOR / INALADOR”

ENCONTREI INALADORES QUE VALIAM A PENA OLHAR.

Page 42: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela
Page 43: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

2ª TENTATIVA

5. NA PÁGINA DO PRODUTO, BUSQUEI

POR ALGUM CABEÇALHO SOBRE

INFORMAÇÕES DO INALADOR

ENCONTREI TODAS AS INFORMAÇÕES QUE PRECISAVA, TANTO

PROMOCIONAIS QUANTO TÉCNICAS.

Page 44: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

2ª TENTATIVA

6. PROCUREI SOBRE AVALIAÇÕES DO

PRODUTO NOS CABEÇALHOS

NÃO ACHEI, MAS SABIA QUE O ECOMMERCE TINHA ESSE TIPO

CONTEÚDO.

Page 45: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

2ª TENTATIVA

7. USEI O RECURSO DE BUSCA DO

BROWSER PARA ENCONTRAR A PALAVRA

“AVALIAÇÕES”

ENCONTREI, MAS PODERIA TER SIDO MENOS TRABALHOSO.

Page 46: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela
Page 47: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

2ª TENTATIVA

8. DECIDI COMPRAR E PROCUREI PELO

LINK “COMPRAR”

FUI PARA O CABEÇALHO “Inalador a Ar comprimido Inalamax Plus -

NS Inaladores” E NAVEGUEI POR LINKS ATÉ OUVIR O TEXTO

“COMPRAR”.

Page 48: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela
Page 49: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

2ª TENTATIVA

9. CAÍ NUMA PÁGINA DESCONHECIDA.

TENTEI NAVEGAR PELOS CABEÇALHOS

PARA DESCOBRIR ONDE ESTAVA

ESPERAVA CAIR NO CARRINHO, MAS FUI LEVADA PARA UMA PÁGINA

COM TÍTULO GENÉRICO. NÃO HAVIA NENHUM CABEÇALHO.

Page 50: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

2ª TENTATIVA

10. TENTEI NAVEGAR PELOS LINKS ATÉ

OUVIR ALGO QUE FIZESSE SENTIDO

HAVIAM MAIS DE 350 LINKS NA PÁGINA, E TODOS ELES ERAM

SOBRE TIPOS DE PRODUTOS (NOTEBOOKS, SOFÁS, PNEUS...)

Page 51: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

2ª TENTATIVA

11. NAVEGUEI POR ELEMENTOS DE

FORMULÁRIO

ESPERAVA QUE A SAÍDA FOSSE ATRAVÉS DE UM BOTÃO.

NAVEGANDO POR ELEMENTOS DE FORMULÁRIO ENCONTREI 2

BOTÕES COM O NOME “ENVIAR” E 1 COM “OK”.

Page 52: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela
Page 53: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

2ª TENTATIVA

12. DESISTI DA COMPRA

NÃO SABIA ONDE ESTAVA E NEM COMO PROSSEGUIR. DEPOIS

DE MUITO ESFORÇO, DESISTI DA COMPRA PELA INTERNET.

Page 54: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

RESULTADO:

SOFRI

HORRORES E NÃO QUERIA MAIS

TENTAR.

Page 55: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

CHECKLIST BÁSICO DE

ECOMMERCE

O QUE FAZER PARA TORNAR O ECOMMERCE MAIS

ACESSIVEL PARA USUARIOS DE LEITOR DE TELA?

Page 56: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

O MENU É ACESSÍVEL VIA

TECLADO?

ATRAVÉS DO TECLADO CONSIGO ACESSAR SUBMENUS?

CHECKLIST

Page 57: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

CORRIGI INTERAÇÕES QUE

DEPENDAM DO MOUSE?

ELIMINEI INTERAÇÕES CRÍTICAS QUE DEPENDEM DE

MOUSEOVER OU DRAG-AND-DROP?

CHECKLIST

Page 58: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

O TITULO DA PÁGINA É

ESCLARECEDOR?

ATRAVÉS DELE É POSSÍVEL SABER SE ESTOU NUMA LISTAGEM DE

RESULTADOS, DETALHE DE PRODUTO, ATENDIMENTO OU ONDE

FOR?

CHECKLIST

Page 59: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

AS IMAGENS TEM ALT

SIGNIFICATIVOS?

A DESCRIÇÃO DO ALT É ENRIQUECEDORA E A JUDA VISUALIZAR

DETALHES DO PRODUTO, FORMAS DE USO OU OUTRAS INFOS QUE

ME FAZEM ENXERGAR O QUE ESTÁ SENDO VENDIDO?

CHECKLIST

Page 60: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

A PÁGINA TEM CABEÇALHOS?

OS CABEÇALHOS POSSUEM UMA HIERARQUIA LÓGICA E

TRANSMITEM COM CLAREZA O CONTEÚDO DENTRO DELES?

CHECKLIST

Page 61: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

AS LISTAGENS DE PRODUTOS PODEM

SER FILTRADAS FACILMENTE?

POSSO FILTRAR OS RESULTADOS POR PREÇO, TIPO DE MATERIAL,

TAMANHO, ETC?

CHECKLIST

Page 62: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

GARANTI O MÍNIMO POSSÍVEL DE

LINKS PARA UM MESMO DESTINO?

A QUANTIDADE DE LINKS ESTÁ OTIMIZADA, DIMINUINDO O

ESFORÇO PARA CHEGAR NO LUGAR CERTO?

CHECKLIST

Page 63: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

LINKS E BOTÕES TEM NOMES QUE

INDIQUEM CLARAMENTE A AÇÃO?

SABEREI EXATAMENTE O QUE VAI ACONTECER OU PARA ONDE

IREI QUANDO INTERAGIR COM ELES?

CHECKLIST

Page 64: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

OS TEXTOS ESTÃO FORA DE

IMAGENS?

INFORMAÇÕES DE OFERTAS, PREÇOS OU QUAIQUER OUTROS

TEXTOS ESTÃO DENTRO DO HTML E NÃO DE IMAGENS?

CHECKLIST

Page 65: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

O PRODUTO TEM DESCRIÇÃO?

CONSIGO ENCONTRAR INFORMAÇÕES DETALHADAS SOBRE O

QUE ESTOU COMPRANDO?

CHECKLIST

Page 66: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

EXISTE CÁLCULO DE FRETE NA

PÁGINA DO PRODUTO?

ANTES DE CHEGAR NO CARRINHO, CONSIGO DESCOBRIR SE

ENTREGAM NA MINHA REGIÃO E QUAL O VALOR DO FRETE?

CHECKLIST

Page 67: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

EXISTEM INFOS DE PAGAMENTO

NA PÁGINA DO PRODUTO?

ANTES DE FINALIZAR O PAGAMENTO, CONSIGO DESCOBRIR SE

TEM ALGUM DESCONTO À VISTA OU EM QUANTAS VEZES POSSO

PARCELAR?

CHECKLIST

Page 68: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

OS CAMPOS DE FORMULÁRIO

ESTÃO ASSOCIADOS A UM LABEL?

O LABEL ME ESCLARECE O QUE PREENCHER NO CAMPO E REDUZ

AS CHANCES DE ERRO?

CHECKLIST

Page 69: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

FOI TESTADO COM CONSUMIDORES

CEGOS OU PELO MENOS VALIDADO

COM FERRAMENTAS?

VALIDAR COM FERRAMENTAS É MELHOR QUE NADA, MAS NÃO É ASSERTIVO

COMO TESTAR COM CONSUMIDORES REAIS.

CHECKLIST

Page 70: Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leitores de Tela

OBRIGADA! UM AGRADECIMENTO ESPECIAL AOS AMIGOS USUÁRIOS DE

LEITOR DE TELA, QUE COMPARTILHARAM SUAS

EXPERIÊNCIAS :)

@julianafrost / www.vivendoporai.com.br