Banco Pichincha apuesta por el diseño inclusivo en su app de Banca Móvil Redacción Banco Pichincha 27 de Julio 2022 Transformación Tiempo de lectura: 3 min Aunque sabemos que el camino hacia la inclusión es largo, en Banco Pichincha asumimos la responsabilidad de dar el primer paso. Por eso, para ayudar a los 54.000 clientes que sufren una discapacidad visual, decidimos ponernos en su lugar y diseñar una nueva experiencia de navegación en nuestra app de Banca Móvil, guiándoles de forma audible para que hagan sus transacciones sin ninguna limitación. 455.000 personas en Ecuador sufren alguna discapacidad visual, según el Instituto Nacional de Estadística y Censos. Por supuesto, esta labor no podíamos llevarla a cabo solos. Fue un ejercicio de cocreación en toda regla. Mauricio Suárez y Lenin Carrera, usuarios con discapacidad, nos ayudaron a que nuestro aplicativo sea más accesible para personas como ellos. Con su guía y apoyados por los softwares asistivos de cada sistema operativo hemos contribuido a mejorar el día a día de nuestros clientes que ya pueden gestionar la app sin ayuda de una tercera persona. La aplicación tiene habilitada la lectura nativa de pantallas en los sistemas operativos iOS y Android que se debe activar desde la configuración de accesibilidad del dispositivo, eligiendo las opciones de VoiceOver y Tallback, respectivamente. Pero, ¿qué es el diseño inclusivo? El diseño inclusivo es un conjunto de metodologías para diseñar y crear productos que puedan ser usados por personas de todo origen con habilidades diferentes y/o discapacidades. Genera empatía para la accesibilidad y respeta las diferencias de edades, situación económica, ubicación geográfica, idioma, origen étnico, género y más. A menudo se confunde el diseño inclusivo con accesibilidad o diseño universal. Los tres conceptos tienen como objetivo reducir las barreras entre los humanos y la tecnología para crear experiencias inclusivas. Te explicamos sus diferencias. Accesibilidad: garantizar que las interfaces y la tecnología puedan ser usadas por personas con discapacidades (cognitivas y físicas). Son un mínimo indispensable para experiencias significativas. Diseño universal: crear experiencias que sea accesibles para la mayor cantidad de personas utilizando una única solución sin necesidad de adaptaciones o diseños especializados. Diseño inclusivo: se diseñan soluciones aceptando y abarcando múltiples variaciones tomando en cuenta la diversidad de las personas y sus diferentes habilidades. Es probable que en algún momento de nuestra vida nos hayamos enfrentado a una discapacidad: permanente, ocasional o situacional. Para que tengas una idea, 7 de cada 10 interfaces digitales no son accesibles a esta realidad. Buenas prácticas de diseño inclusivo en el mundo Sin lugar a dudas, el incorporar el diseño inclusivo permite el lanzamiento de mejores productos que generan una mayor satisfacción del usuario y, por tanto, menos frustraciones en el camino. Hemos recopilado algunos ejemplos de estas prácticas. Legibilidad de texto para usuarios con agudeza visual reducidaEn su web, el Washington Post implementó controles para aumentar el tamaño de fuente en los artículos, pensando en las personas de mediana edad y en los adultos mayores. Es necesario activar el modo oscuro para distinguirlos. Variedad de identificadores demográficosTinder permite a sus usuarios escribir una palabra que describa su identidad de género y ofrece múltiples opciones como sugerencia. Esta capacidad de elegir hace que los diferentes perfiles se sientan incluidos. Ilustraciones diversasAnteriormente, Airbnb y Atlassian usaban ilustraciones simples de personajes sin tono de piel para ser “inclusivos”. Sin embargo, esta ausencia de características étnicas hacía pensar que eran personas únicamente blancas. Ahora, usan colores de piel alineados a diferentes grupos étnicos. Pro Tip Te compartimos los manuales de Shopify, Netguru y React Native para aplicar estas buenas prácticas de accesibilidad en tu producto digital. Las claves de la implementación de tecnología asistiva Para lograr la lectura de pantalla nos adaptamos a la tecnología disponible en el dispositivo que utiliza cada cliente. Hay softwares que emiten en forma audible los textos en pantalla del dispositivo, cumpliendo así con el objetivo de que las personas no videntes también puedan utilizar interfaces. Tanto Android como iOS proporcionan una API para integrar aplicaciones con tecnologías de asistencia como los lectores de pantalla integrados VoiceOver (iOS) y TalkBack (Android). <p style="margin-bottom: 11px;"><em>React Native </em>cuenta con API complementarias que permiten que una aplicación se adapte a todos los usuarios.</p> <p style="margin-bottom: 11px;"> </p> <p style="margin-bottom: 11px;"><em>Android </em>e <em>iOS </em>difieren ligeramente en sus enfoques, por lo que las implementaciones de<em> React Native</em> pueden variar según la plataforma.</p> Propiedades más comunes para implementar accesibilidad Tomando en consideración los siguientes atributos se puede lograr una mejor implementación para la lectura de los componentes o elementos que integran el diseño. Accessible: cuando es verdadero, indica que la vista es un elemento de accesibilidad. Por defecto, todos los elementos táctiles son accesibles. AccessibilityRole: esta propiedad permite comunicar la finalidad o rol de un componente al usuario utilizando lector de pantalla. AccessibilityLabel: el texto asignado a esta propiedad es el que el asistente de voz leerá cuando un usuario pulse un componente, como un texto, un botón o una vista. A continuación, te mostramos dos ejemplos de botones, con el código de la implementación simplificada y cómo se enuncian, tanto con el lector de pantalla de iOS (VoiceOver) como con el de Android (Talkback). No podemos ser inclusivos siendo exclusivos. El compartir nuestra experiencia es una manera de contribuir y abrir el camino para que la tecnología esté al servicio de todas las personas, sin distinción. Aplicaciones Banca móvil Innovación Tecnología
Legibilidad de texto para usuarios con agudeza visual reducidaEn su web, el Washington Post implementó controles para aumentar el tamaño de fuente en los artículos, pensando en las personas de mediana edad y en los adultos mayores. Es necesario activar el modo oscuro para distinguirlos.
Variedad de identificadores demográficosTinder permite a sus usuarios escribir una palabra que describa su identidad de género y ofrece múltiples opciones como sugerencia. Esta capacidad de elegir hace que los diferentes perfiles se sientan incluidos.
Ilustraciones diversasAnteriormente, Airbnb y Atlassian usaban ilustraciones simples de personajes sin tono de piel para ser “inclusivos”. Sin embargo, esta ausencia de características étnicas hacía pensar que eran personas únicamente blancas. Ahora, usan colores de piel alineados a diferentes grupos étnicos.
Pro Tip Te compartimos los manuales de Shopify, Netguru y React Native para aplicar estas buenas prácticas de accesibilidad en tu producto digital.