Cómo hicimos más accesible la elección de medios de pago en Mercado Pago
Lo que aprendimos al mejorar la experiencia con lector de pantalla en nuestro checkout nativo
En Mercado Pago, buscamos democratizar el acceso a servicios financieros. Solo podemos lograr esta inclusión si estamos dispuestos a construir experiencias capaces de atender a todas las personas usuarias. Por eso, es esencial pensar en mejoras en la accesibilidad que eliminen las barreras en el uso de nuestros productos. Esto incluye aspectos visibles, como el uso de un lenguaje escrito simple e inclusivo, o prestar atención a los colores y contrastes.
Pero, ¿alguna vez te has parado a pensar en la parte de la experiencia que no es visible cuando se navega con un lector de pantalla? Para empezar, incluso activar VoiceOver (lector de pantalla de iOS) o TalkBack (lector de pantalla de Android) puede resultar complejo para quienes no están acostumbrados a utilizarlos.
Para contextualizar, en PX somos responsables por el checkout nativo en Mercado Pago. Es a través de nuestro checkout que las personas que utilizan la aplicación seleccionan el mejor medio de pago para transferir dinero, pagar facturas y servicios, pagar con códigos QR, recargar tarjetas de transporte, entre muchas otras cosas.
Cuando descubrimos que los problemas de accesibilidad impedían que las personas con discapacidad visual completarán estas transacciones utilizando lectores de pantalla, supimos que teníamos mucho que aprender.
Entendiendo los problemas
Un primer paso importante fue comprender que, si no hay una configuración específica para lectores de pantalla, la navegación se produce de manera lineal. Al tocar la pantalla, la persona usuaria avanza al siguiente elemento de izquierda a derecha y de arriba abajo. Un poco como los ojos de una persona vidente cuando miran contenido escrito, ¿no?
Bueno, en parte, sí. La diferencia es que cuando vemos, podemos escanear la pantalla. Nos enfocamos en la parte de la pantalla donde se encuentra la acción que nos interesa y seguimos adelante. Esto no ocurre de manera tan natural con los lectores de pantalla, especialmente cuando hay más de una acción disponible en la misma pantalla, como es el caso de nuestro checkout.
Los medios de pago en el checkout nativo se presentan en forma de carrusel. Esto significa que en la misma pantalla hay al menos dos acciones posibles: deslizar para cambiar el medio de pago o hacer clic directamente en el botón para completar la transacción. En nuestro caso, no estábamos ofreciendo todas las opciones a las personas que usan nuestro checkout con lectores de pantalla:
- En uno de los sistemas operativos, la experiencia navegaba a través de los medios de pago, por lo que era imposible llegar al call-to-action (CTA) de la página.
- En el otro sistema, la experiencia llevaba directamente al botón “Pagar”. Por eso solo era posible utilizar el primer medio de pago disponible.
Teníamos graves problemas de navegación, pero también problemas de lectura. Los importes que aparecían en la pantalla no se leían en las monedas correctas y era muy difícil identificar cuántos o cuáles eran los medios de pago disponibles y/o que se estaban utilizando, ya que el lector de pantalla no obtenía la información que aparecía en las cards.
Para identificar (y resolver) estos problemas, contamos con la valiosa consultoría de Martín Pablo Di Luzio, un experto en accesibilidad del equipo responsable de Andes — el design system de Mercado Libre — que proporcionó las herramientas necesarias para identificar eficazmente cada uno de los componentes en el momento del handoff y acompañar al equipo de desarrollo en la aplicación de las mejores prácticas de accesibilidad.
Buscando soluciones
A la hora de resolver los problemas, el primer reto fue: ¿cómo diseñar una experiencia que no tenemos ni idea de cómo se consume en la práctica? Nos sentíamos analfabetos a la hora de utilizar el checkout con lectores de pantalla. Pero muchos vídeos, tutoriales y consultas con Martin después, empezamos a entender lo que nosotros, como equipo de UX, podíamos ofrecer y cómo.
Dentro de las herramientas de Andes, una de las más interesantes es el site de accesibilidad disponible para el equipo. Muchas de las respuestas a nuestras preguntas ya estaban allí, categorizadas por especialidad: diseño, contenido, investigación y desarrollo.
A lo largo del proceso, descubrimos que muchos de los componentes de nuestro design system (como las listas de selección, por ejemplo) ya se habían desarrollado teniendo en cuenta la accesibilidad. Al utilizarlos, podríamos resolver algunos de los problemas siguiendo las mejores prácticas y, al mismo tiempo, mantener la coherencia con el resto del ecosistema.
Sin embargo, había algunos puntos específicos de nuestro checkout que no formaban parte de los componentes core del design system. Nuestra pantalla de selección de pagos tiene muchas posibilidades. Por ejemplo, para ver el saldo de la cuenta, sólo ahí se puede ocultar o mostrar el saldo, pasar al siguiente medio de pago o pagar directamente. Por eso era necesario trabajar en estas especificaciones.
Todas estas acciones se hacen visualmente evidentes mediante elementos como el ícono de un ojo junto al saldo, la pequeña parte del siguiente medio de pago que se muestra en la pantalla actual y el botón en el pie de página. Pero, ¿cómo puede alguien tomar una decisión sin ver todas las opciones? ¿Y cómo podemos transmitir toda esta información con el lector de pantalla sin sobrecargar con demasiados detalles?
Entre hints, acciones personalizadas, etiquetas, links… y un buen handoff
Uno de nuestros desafíos era la lectura de los medios de pago. Por ejemplo, para el saldo en cuenta, utilizamos acciones personalizadas que permiten a la persona ocultar o mostrar su saldo en la pantalla, y en consecuencia, que el lector de pantalla lea o no el saldo. En Mercado Libre, los templates de nuestro sistema de diseño ya cuentan con una biblioteca específica para marcar componentes de accesibilidad, orden y agrupación.
Para las tarjetas de crédito y débito, por ejemplo, fue necesario diseñar una estructura de información que proporcionara datos suficientes para que fueran reconocibles: el nombre de la institución financiera, los últimos cuatro dígitos y la bandera. Desarrollamos una fórmula que agrupaba toda la información necesaria en una etiqueta.
Sin embargo, más allá de los desafíos de la lectura de medios de pago, teníamos problemas de navegación. Trabajamos con el equipo de desarrollo para asegurarnos que la pantalla se leyera correctamente y en un orden coherente. Pero también implementamos otras mejoras y utilizamos un hint para orientar a las personas usuarias sobre cómo cambiar el medio de pago.
Así, para pagar directamente, la persona usuaria puede utilizar el comando estándar para activar el CTA (call-to-action). Pero si desea seleccionar otro medio de pago, sabrá cuántos medios están disponibles y su posición en el carrusel, además de recibir instrucciones sobre cómo navegar al ingresar a la pantalla.
Para hacer el handoff, además del template, contamos con buenas referencias de otros equipos que habían realizado trabajos similares. Esto nos permitió evitar reinventar la rueda y lograr una comunicación eficiente con el equipo de desarrollo.
Nuestras principales aprendizajes
Lo más importante que aprendimos es que crear una experiencia accesible es un trabajo en equipo que requiere soluciones interdisciplinarias. No podríamos haberlo logrado sin el apoyo y la colaboración de nuestro equipo de desarrollo, y la experiencia de los expertos en accesibilidad marcó la diferencia. Aprendimos a identificar los componentes según su uso y funcionalidad, lo que nos permitió diseñar soluciones para que se leyeran de manera eficiente.
Es tentador proporcionar la máxima información posible al lector de pantalla, pero no es la mejor manera de ofrecer la mejor experiencia. Aprendimos del feedback de las personas usuarias a tener cuidado de no ofrecer demasiada información. La carga cognitiva no se refiere solo a lo que se ve en la pantalla, sino también a lo que se escucha.
Un valioso consejo de Martin, nuestro consultor, es que si creemos que la información de la pantalla es suficiente para las personas videntes, no debemos ir demasiado lejos a la hora de describirla. Como profesionales de UX, debemos saber, al menos, lo básico sobre cómo navegar con un lector de pantalla. Esto será útil para crear soluciones y también para probarlas.
Vemos la oportunidad de incluir cada vez más a las personas usuarias en la creación de soluciones. Aunque contamos con consultores especializados y recibimos feedback indirecto, sería increíble colaborar directamente con personas con discapacidad tanto en el diseño de la solución como en nuestros procesos de trabajo. ¿Quién se anima?
Si te interesa el tema de la accesibilidad, te invitamos a echar un vistazo a algunos de los textos publicados anteriormente en Medium por los equipos de Mercado Libre:
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
