Diseñando iDrop con accesibilidad
Más de 10 millones de personas tienen algún tipo de discapacidad, pero solo hay que echar un ojo a Internet para darse cuenta de que las empresas no están involucradas en conseguir productos realmente accesibles.
Una gran cantidad de usuarios encuentren una barrera de acceso y no puedan disfrutar de la experiencia creada, sino pensamos en como optimizar nuestros productos para que sean verdaderamente universales.
He diseñado iDrop, una aplicación para personas con diabetes, pensando en alcanzar la máxima accesibilidad, debido a que la enfermedad, cuando no es atendida correctamente, puede causar afecciones en la visión, incluso ceguera en los casos más graves.
Por ello, he diseñado una App que se preocupa por ser accesible, atendiendo a los siguientes assets para crear un producto universal (y nada aburrido):
- Tipografía
- Color
- Interacción
Antes de empezar a diseñar, es importante conocer las diferentes maneras de consumir nuestro producto, y Microsoft nos ofrece una herramienta muy potente para una primera aproximación a diseños inclusivos. Imprescindible una ojeada a Inclusive: The Film.
Tipografía
La tipografía es uno de los principales elementos para mejorar la legibilidad de nuestro contenido. Necesitaba una combinación de fuentes llamativa, que funcionara en los principios de la accesibilidad para desarrollar iDrop App.
Orbikular es una fuente con serifa clásica, diseñada por Cotype Foundry. Esta funcional familia serif se define por la altura de la x, terminales de bola y alto contraste.
Inclusive Sans es una fuente tipográfica diseñada por la tipógrafa australiana Olivia King. Su objetivo es incorporar características para hacerla altamente legible y garantizar la correcta lectura por parte de todos los usuarios (con especial atención a las personas que tienen problemas de aprendizaje o discapacidad visual)
Estas tipografías se han elegido prestando atención a:
Los contornos abiertos permiten distinguir fácilmente los glifos entre sí. Más espacio en blanco aumenta el reconocimiento de las letras.
Una tipografía con una altura de la X mayor permite aumentar la claridad para textos pequeños.
Inclusive Sans evita las letras espejadas exagerando las astas descendentes y serifas asimétricas.
Encontrar una sans serif sin letras espejadas puede convertirse en toda una aventura. En siguiente imagen, se muestra la prueba de legibilidad realizada sobre las fuentes de Google más utilizadas.
Las tipografías seleccionadas tienen caracteres únicos, lo que se aprecia en sus letras impostoras.
Las ascendentes se elevan por encima de las mayúsculas, aumentando el reconocimiento de los caracteres.
Puedes encontrar más información en este artículo escrito por Gareth Ford Williams (creador de BBC Reight- considerada una de las tipografías más accesibles)
Paleta de color
La paleta de colores seleccionada para la aplicación iDrop se define de acuerdo con los siguientes principios:
- Inclusividad: La paleta garantiza un contraste accesible.
- Escalabilidad: Una paleta versátil diseñada para ser más grande en el futuro.
- Memorable: El negro, el azul y el naranja son una combinación vibrante, funcional y sencilla que define la marca.
He creado una paleta utilizando el espacio de color LCH, que representa el color de forma natural, similar a como lo hace el ojo humano.
En este artículo del blog de Atmos se explica al detalle el espacio de color:
LCH (Luminance, Chroma y Hue) logra luminosidades percibidas similares. Haciendo de este espacio de color el más adecuado para la interfaz de usuario.
Como se puede ver en la imagen, la luminosidad percibida es uniforme en todos los colores elegidos. Lo que garantiza contrast ratio similares.
Elijo algunos colores de la paleta para diseñar la App. Pero teniendo en cuenta, que hay un sistema escalable detrás, por si necesitamos añadir otro color en el futuro.
Contrast ratio para niveles AAA
Contrast ratio mide la diferencia entre la luminosidad de dos colores. Obtener un contraste mayor implica mejorar la usabilidad.
He seleccionado una paleta de colores para cumplir con los estándares de nivel AAA.
He utilizado el plugin de Figma Contrast grid para comparar colores de forma masiva. Esa herramienta nos da una pauta para asegurarnos de que nuestra combinación de colores tiene una relación de contraste correcta.
Persigo el nivel AAA con una relación de contraste superior a 7.1:1 con texto normal (más pequeño que 24px o 19px en negrita) y de 4.5:1 con texto más grande.
Para elementos no textuales, como botones con iconos u objetos gráficos, no solo uso la relación de contraste, sino que mantengo el target size en 48x48 px para permitir la accesibilidad a personas con discapacidades físicas. Ya que permiten interactuar de manera más sencilla.
Diseñar los botones en modo disable supone todo un desafio. Prefiero mantener un contraste más alto para optimizar la usabilidad. En mi opinión, es una buena práctica indicar al usuario que hay una opción no disponible.
Este artículo del grupo Stark explica los contrast ratio y los niveles A de accesibilidad:
He diseñado el botón focus para mantener la consistencia en el desarrollo visual de los componentes. Tiene un énfasis fuerte para transmitir eficazmente el estado de navegación cuando los usuarios utilizan el teclado o la voz.
Link
El contrast ratio del link tiene que ser medido con el background (mayor a 4.5:1) y el texto de párrafo (3.1:1)
Al no cumplir con el contrat ratio de color, ofrezco al usuario una guía visual adicional: el subrayado de la parte clickable. Para que sea fácilmente identificable
Not just color
El color no debería ser la única forma de transmitir información visualmente. Por esa razón, ofrezco una alternativa con pistas visuales que ayuden a la comunicación entre el sistema y el usuario.
En el ejemplo a continuación, puedes aceptar o rechazar el consejo proporcionado por la aplicación iDrop. Utilizo un trazo grueso para identificar los aceptados y un tachado para la opción de rechazo.
Gracias al plugin de Figma “Color Blind”, puedo entender cómo se verán los colores desde diferentes tipos de daltonismo y comprobar que el color no es la única forma de comunicar información al usuario.
Input
He diseñado los elementos de formulario, incluyendo un etiqueta fuera de cada campo de entrada, ya que un lector de pantalla solo reconoce los campos en un formulario cuando se incluye una etiqueta.
He documentado los distintos estados de Input: Default, activo, focus y diseable.
Error
Es una buena práctica pensar en los mensajes de error en nuestro prototipo. Para el campo de entrada en la aplicación iDrop, he seguido algunos parámetros:
- Identificar el campo con error.
- Explicar el error cometido.
- No depender únicamente del color para informar sobre el error.
- Utilizar pistas visuales para transmitir el estado de error. En este caso, complemento el campo de error con un ícono.
Componentes con interacciones complejas
Para garantizar que el usuario pueda navegar e interactuar con los elementos utilizando diferentes dispositivos de señalización e interacción (lo que significa poder usar el ratón, el teclado, comandos de voz o un dispositivo táctil), ofrezco una alternativa a los gestos complejos.
En el siguiente ejemplo, realizar un deslizamiento hacia la derecha en las tarjetas para descubrir los diferentes temas podría ser un problema para las personas con discapacidades motoras. Así que ofrezco al usuario la alternativa de utilizar flechas para desplazarse por el contenido.
Orientación del dispositivo
El modo apaisado podría ser más cómodo para usuarios con discapacidades. Al diseñar la vista horizontal, aseguro que la aplicación se adapte a la elección de los usuarios, lo que hace que iDrop sea más inclusivo.
¿Qué he aprendido?
Existen mitos y suposiciones incorrectas sobre la accesibilidad: que es aburrida, fea y compleja. Pero gracias al proyecto iDrop y la aplicación de técnicas prácticas, puedo decir que la accesibilidad es fundamental. Y puede ser compatible con la creación de aplicaciones alegres, joviales y coloridas.
La accesibilidad es mucho más que una relación de contraste. Hay parámetros en los que debemos pensar más allá del color: gestos, tipografías, tamaños... Como diseñador de experiencia de usuario, es necesario conocerlos y pensar de manera inclusiva. Así podemos evitar excluir a una parte significativa de los posibles usuarios.
🪐 Diseñar accesible es diseñar universal
¡Gracias por leer este artículo!
Si quieres conocer más sobre el proceso de creación de la aplicación puedes leer el siguiente artículo:
