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

779 views

Published on

Conscientização sobre acessibilidade e checklist básico para melhorar a experiência de cegos no ecommerce.

Palestra dada em outubro de 2016 na Webbr (conferência do W3C).

Published in: Internet
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
779
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. JULIANA FERNANDES Outubro / 2016 COMPRAS ONLINE E ACESSIBILIDADE MELHORANDO A EXPERIÊNCIA DE USUÁRIOS DE LEITORES DE TELA
  2. 2. JULIANA FERNANDES UX DESIGNER NA F.BIZ @julianafrost www.vivendoporai.com.br slideshare.net/julianafrost
  3. 3. POR QUE PRECISAMOS FALAR SOBRE ACESSIBILIDADE?
  4. 4. 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.
  5. 5. OLHE AO REDOR. QUASE NADA ATENDE PESSOAS COM DETERMINADAS NECESSIDADES.
  6. 6. SERÁ QUE TEM CARDÁPIO EM BRAILE?
  7. 7. SERÁ QUE A CALÇADA TEM RAMPA?
  8. 8. SERÁ QUE ESSA ESCOLA ESTÁ PREPARADA PARA RECEBER UM ALUNO COM DEFICIÊNCIA COGNITIVA?
  9. 9. Infelizmente, o mundo está feito para quem: •ENXERGA SEM DIFICULDADE •SE LOCOMOVE SEM DIFICULDADE •OUVE SEM DIFICULDADE •COMPREENDE SEM DIFICULDADE
  10. 10. MAS E AÍ? JÁ SE COLOCOU NO LUGAR DO OUTRO HOJE?
  11. 11. E SE...?
  12. 12. VOCÊ FOSSE CADEIRANTE E QUISESSE IR NO MOTEL?
  13. 13. VOCÊ FOSSE SURDO E QUISESSE IR NO CINEMA?
  14. 14. VOCÊ FOSSE CEGO, PRECISSE DE UM REMÉDIO E A EMBALAGEM NÃO FOSSE EM BRAILE?
  15. 15. QUAL O RESULTADO DISSO PARA QUEM TEM DEFICIÊNCIA?
  16. 16. FALTA DE AUTONOMIA.
  17. 17. E QUANDO O ASSUNTO É DINHEIRO?
  18. 18. COM INTERNET É FÁCIL COMPRAR. VÁRIAS LOJAS VIRTUAIS VENDEM TODO TIPO DE COISA. É SÓ COMPRAR E RECEBER.
  19. 19. MAS É SIMPLES ASSIM PRA TODO MUNDO?
  20. 20. E SE VOCÊ FOSSE CEGO?
  21. 21. SENDO UMA PESSOA CEGA QUE USA INTERNET, VOCÊ PRECISARIA DE 2 COISAS PARA EXERCER SUA AUTONOMIA:
  22. 22. LEITOR DE TELA NO COMPUTADOR OU SMARTPHONE SITES CONSTRUÍDOS DE FORMA ACESSÍVEL
  23. 23. MOMENTO DÚVIDA VOCÊ SABE COMO UM LEITOR DE TELA FUNCIONA?
  24. 24. FIZ UMA EXPERIÊNCIA COM LEITOR DE TELA. TENTEI GASTAR MEU DINHEIRO NA INTERNET, COMPRANDO UMA COISA QUE PRECISAVA.
  25. 25. TAREFA: COMPRAR UM INALADOR NOVO PARA USAR NOS MEUS ANIMAIS DE ESTIMAÇÃO.
  26. 26. 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
  27. 27. 1ª TENTATIVA 1. PESQUISEI NO GOOGLE ESCOLHI UM RESULTADO DO GOOGLE SHOPPING.
  28. 28. 1ª TENTATIVA CHEGUEI RAPIDAMENTE NO PREÇO E DESCRIÇÃO DO PRODUTO, MAS A DESCRIÇÃO ERA APENAS PROMOCIONAL.
  29. 29. 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.
  30. 30. 1ª TENTATIVA 4. ABRI UMA NOVA ABA E REINICIEI A PESQUISA DESISTI E FUI BUSCAR OUTRA LOJA.
  31. 31. 2ª TENTATIVA
  32. 32. 2ª TENTATIVA 1. ESCOLHI UM RESULTADO ORGÂNICO
  33. 33. 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.
  34. 34. 2ª TENTATIVA 3. COGITEI NAVEGAR POR LINKS PARA ENCONTRAR OS FILTROS IMPOSSÍVEL PARA UMA PÁGINA COM MAIS DE 600 LINKS.
  35. 35. 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.
  36. 36. 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.
  37. 37. 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.
  38. 38. 2ª TENTATIVA 7. USEI O RECURSO DE BUSCA DO BROWSER PARA ENCONTRAR A PALAVRA “AVALIAÇÕES” ENCONTREI, MAS PODERIA TER SIDO MENOS TRABALHOSO.
  39. 39. 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”.
  40. 40. 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.
  41. 41. 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...)
  42. 42. 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”.
  43. 43. 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.
  44. 44. RESULTADO: SOFRI HORRORES E NÃO QUERIA MAIS TENTAR.
  45. 45. CHECKLIST BÁSICO DE ECOMMERCE O QUE FAZER PARA TORNAR O ECOMMERCE MAIS ACESSIVEL PARA USUARIOS DE LEITOR DE TELA?
  46. 46.  O MENU É ACESSÍVEL VIA TECLADO? ATRAVÉS DO TECLADO CONSIGO ACESSAR SUBMENUS? CHECKLIST
  47. 47.  CORRIGI INTERAÇÕES QUE DEPENDAM DO MOUSE? ELIMINEI INTERAÇÕES CRÍTICAS QUE DEPENDEM DE MOUSEOVER OU DRAG-AND-DROP? CHECKLIST
  48. 48.  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
  49. 49.  AS IMAGENS TEM ALT SIGNIFICATIVOS? A DESCRIÇÃO DO ALT É ENRIQUECEDORA E AJUDA VISUALIZAR DETALHES DO PRODUTO, FORMAS DE USO OU OUTRAS INFOS QUE ME FAZEM ENXERGAR O QUE ESTÁ SENDO VENDIDO? CHECKLIST
  50. 50.  A PÁGINA TEM CABEÇALHOS? OS CABEÇALHOS POSSUEM UMA HIERARQUIA LÓGICA E TRANSMITEM COM CLAREZA O CONTEÚDO DENTRO DELES? CHECKLIST
  51. 51.  AS LISTAGENS DE PRODUTOS PODEM SER FILTRADAS FACILMENTE? POSSO FILTRAR OS RESULTADOS POR PREÇO, TIPO DE MATERIAL, TAMANHO, ETC? CHECKLIST
  52. 52.  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
  53. 53.  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
  54. 54.  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
  55. 55.  O PRODUTO TEM DESCRIÇÃO? CONSIGO ENCONTRAR INFORMAÇÕES DETALHADAS SOBRE O QUE ESTOU COMPRANDO? CHECKLIST
  56. 56.  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
  57. 57.  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
  58. 58.  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
  59. 59.  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
  60. 60. OBRIGADA! UM AGRADECIMENTO ESPECIAL AOS AMIGOS USUÁRIOS DE LEITOR DE TELA, QUE COMPARTILHARAM SUAS EXPERIÊNCIAS :) @julianafrost / www.vivendoporai.com.br

×