Como tornamos a escolha de meios de pagamento mais acessível no Mercado Pago
Nossos aprendizados ao melhorar a experiência com leitores de tela em nosso checkout nativo
No Mercado Pago temos como propósito democratizar o acesso a serviços financeiros. Só é possível pensar nessa inclusão se estivermos dispostos a construir experiências capazes de atender a todas as pessoas usuárias. Por isso, pensar em melhorias na acessibilidade que possam eliminar barreiras ao uso de nossos produtos é essencial. Dentro disso, temos coisas que os olhos veem: como o uso de linguagem escrita simples e inclusiva ou ter atenção às cores e contrastes.
Mas você já parou para pensar na parte da experiência que não é visível, navegando com um leitor de tela? Para começar, para quem não está habituado a usar, até ativar o VoiceOver (leitor de tela do iOS) ou TalkBack (leitor de tela do Android) pode ser complexo.
Vale contextualizar: em PX, somos responsáveis pelo checkout nativo do Mercado Pago. É por meio do nosso checkout que pessoas que usam o aplicativo selecionam o melhor meio de pagamento para transferir dinheiro, pagar contas e serviços, pagar com QR, recarregar cartão de transporte, entre outras várias coisas.
Ao descobrir que problemas de acessibilidade limitavam que pessoas com deficiência visual pudessem concluir essas transações usando leitores de tela, a gente soube que tinha muito o que aprender.
Entendendo os problemas
Um primeiro passo a entender é que se não há uma configuração específica para leitores de tela, a navegação acontece de forma linear. Ao tocar na tela a pessoa usuária vai passando para o próximo elemento da esquerda para direita, de cima para baixo. Um pouco como os olhos de uma pessoa vidente fazem sobre o conteúdo escrito, certo?
Bom, em parte, sim. A diferença é que quando estamos vendo, podemos escanear. Nos deter no ponto da tela em que a ação que nos interessa está e seguir em frente. Isso não acontece tão naturalmente com os leitores de tela, especialmente quando há mais de uma ação disponível na mesma tela — o que é justamente o caso do nosso checkout.
Os meios de pagamento no checkout nativo são apresentados na forma de um carrossel. Isso significa que na mesma tela vamos ter pelo menos dois acionáveis: posso deslizar para o lado (swipe), para mudar o meio de pagamento ou clicar diretamente no botão para concluir a transação. Em nosso caso, não estávamos dando todas as opção às pessoas que usam nosso checkout com leitores de tela:
- Em um dos sistemas operativos, a experiência navegava através dos meios de pagamento. Então, era impossível chegar até o call-to-action (CTA) da página.
- No outro, a experiência guiava diretamente até o botão “Pagar”. Por isso só era possível usar o primeiro meio de pagamento disponível.
Tínhamos sérios problemas de navegação. Mas havia também problemas de leitura. Os valores que aparecem na tela não eram lidos nas moedas corretas e era muito difícil identificar quantos ou quais meios de pagamento estavam disponíveis e/ou sendo utilizados, já que o leitor de tela não chegava a informação que se mostrava nos cards.
Para identificar esses problemas (e para resolvê-los) tivemos o privilégio de contar com a consultoria de Martin Pablo Di Luzio, especialista em acessibilidade do time responsável pelo Andes — o design system do Mercado Livre — que disponibilizou as ferramentas necessárias para identificar cada um dos componentes de forma eficiente na hora do handoff e acompanhar a equipe de desenvolvimento na implementação das melhores práticas de acessibilidade.
Em busca de soluções
Na hora de resolver os problemas o primeiro desafio foi: como desenhar uma experiência que não fazemos ideia de como é consumida na prática? Nos sentíamos analfabetas no que dizia respeito ao uso do checkout com leitores de tela. Mas muitos vídeos, tutoriais e consultas ao Martin depois, começamos a entender o que nós, enquanto time de UX, poderíamos entregar e como.
Dentro das ferramentas de Andes, talvez uma das mais interessantes seja o site de acessibilidade que temos disponível para o time. Muitas das respostas para as nossas perguntas já estavam ali, inclusive categorizadas por especialidade: design, conteúdo, research e desenvolvimento.
Ao longo do processo descobrimos que muitos dos componentes do nosso design system (como as listas de seleção, por exemplo) já são desenvolvidos com acessibilidade. Só ao utilizá-los já iríamos resolver alguns dos problemas com as melhores práticas e, de quebra, ainda manter consistência com o resto do ecossistema.
Porém, havia alguns pontos específicos da experiência do nosso checkout que não faz parte dos componentes core do design system. Nossa tela de seleção de pagamento tem muitas possibilidades. Se você está olhando para o saldo em conta, por exemplo, só ali você pode ocultar ou mostrar o saldo, passar para o próximo meio de pagamento ou diretamente pagar. Por isso, foi necessário trabalhar nessas especificações.
Todas essas ações ficam visualmente explícitas por elementos como o ícone de olho ao lado do saldo, pelo pedacinho do próximo meio de pagamento que fica visível na tela atual e pelo botão no rodapé. Como alguém faz essa escolha sem estar vendo todas as opções? E como nós podemos passar toda essa informação para o leitor de tela sem verbalizar demais?
Entre hints, ações personalizadas, labels, links… E um bom handoff
Um dos nossos desafios era a leitura dos meios de pagamentos. Por exemplo, para saldo em conta, usamos ações personalizadas para permitir que a pessoa ocultar ou mostrar seu saldo na tela. E, consequentemente, que seu saldo fosse lido ou não pelo leitor de tela. No Mercado Livre, os templates do nosso design system já contam com uma biblioteca específica para sinalizar componentes de acessibilidade, o ordenamento e os agrupamentos.
Para os cartões de crédito e débito, por exemplo, foi necessário pensar em uma estrutura de informação que pudesse passar dados suficientes para serem reconhecíveis. O nome da instituição financeira, os quatro últimos dígitos e a bandeira. Chegamos a uma fórmula que agrupava tudo o que a pessoa usuária precisa saber em uma label.
Porém, mais do que os desafios de leitura dos meios de pagamento, tínhamos problemas de navegação. Contamos com desenvolvimento para garantir que a tela fosse lida corretamente e em uma ordem coerente, mas foi com outras melhorias e o uso de uma hint (em português, uma dica) que pudemos orientar sobre mudar o meio de pagamento.
Assim, para pagar diretamente, a pessoa usuária pode usar o comando padrão para acionar o CTA. Porém, se quiser escolher um outro meio de pagamento, vai saber quantos meios tem disponíveis e a sua posição no carrossel, além de ser orientada sobre como navegar ao entrar na tela.
Para fazer o handoff, além do template, contamos com boas referências de outras equipes que já haviam feito um trabalho semelhante. Assim, não precisamos reinventar a roda e foi possível nos entendermos de forma eficiente com o time de desenvolvimento.
Nossos principais aprendizados
Criar uma experiência acessível é um trabalho em equipe e que precisa de soluções interdisciplinares. Não faríamos nada sem o apoio e abertura do nosso time de desenvolvimento e contar com especialistas em acessibilidade fez toda a diferença. Com eles aprendemos a identificar os componentes segundo seus usos e acionáveis, e assim conseguimos desenhar soluções para que sejam lidos de maneira eficiente.
Fornecer o máximo de informação para o leitor de tela é tentador. Porém, não é assim que se entrega a melhor experiência. Aprendemos com feedbacks das pessoas usuárias a ter cuidado para não verbalizar demais. Carga cognitiva não é só sobre o que se vê na tela, mas também sobre o que se escuta dela.
Uma dica preciosa do Martin, nosso consultor, é que se acreditamos que as informações que estão na tela são suficientes para as pessoas que enxergam, não deveríamos ir tão além da hora de descrevê-la. Enquanto profissionais de UX, precisamos saber — pelo menos o básico de como navegar com um leitor de tela. Isso vai ser útil para criar soluções e também para testá-las.
Vemos a oportunidade de incluir cada vez mais pessoas usuárias na criação das soluções. Claro, contamos com consultoria especializada e recebemos feedback indireto, porém, seria incrível desenhar em conjunto e ter cada vez mais pessoas com deficiência fazendo parte dos nossos processos de trabalho. Quem topa?
Se você tem interesse no tema de acessibilidade, convidamos a acessar alguns textos que foram publicados anteriormente no Medium dos times do Mercado Livre:
Precios accesibles, nuestro aprendizaje desde la perspectiva iOS
Qué aprendimos al trabajar en accesibilidad digital
Aprendizajes al desarrollar precios accesibles en Mercado Libre
Precios accesibles, nuestro aprendizaje desde la perspectiva Android
Cómo creamos una experiencia más accesible de validación de identidad
