Artículos

El
_
superpoder
_
invisible
_
del
_
diseño
_
accesible

Diseño UX UI

Diseñar pensando en una minoría puede hacernos abarcar de forma implícita a la gran mayoría. En publicidad, una campaña triunfa cuando rompe barreras, llegando a cuanta más gente mejor. Seamos un caso de éxito y hagamos que nuestras interfaces se acerquen al máximo número de personas posible.

Aproximadamente una de cada siete personas sufre algún tipo de discapacidad, y es que cualquiera podemos llegar a tener algún impedimento (permanente, temporal u ocasional) para interactuar con nuestro entorno a lo largo de nuestra vida e incluso en nuestro día a día. Las estadísticas nos alertan de una necesidad inmediata, la de cambiar el paradigma actual, y es posible contribuir a este cambio a través del diseño. Para ello hay que abrazar la diversidad y despojarse de los prejuicios y las habilidades adquiridas, dejando a un lado todo a lo que una persona está acostumbrada porque es lo normal. Se deben desaprender ciertos conocimientos para volver a aprenderlos de mejor manera. Todo lo que esto conlleva hace que la accesibilidad sea el trabajo más humano, comprensivo y equitativo de un equipo de diseño, y por lo general el más complejo, ya que lleva implícita una responsabilidad social.

En el diseño inclusivo no solo se piensa en personas con necesidades especiales, en él también caben aspectos tan cotidianos como la diferencia cultural, de género, de edad… A la hora de llevar a cabo un diseño pensado para un conjunto muy diverso de personas usuarias, con diferentes necesidades, límites y tecnologías, hay que entender que la relación entre un usuario y su entorno es lo que define sus discapacidades. Buscar puntos de exclusión (de capacidad y de contexto), y comprender cómo y por qué las personas están excluidas, nos permitirá establecer nuestros propios principios para ser más inclusivos. Una exclusión se puede generar a nivel de capacidad (una persona sorda que no pueda acceder a los sonidos) y/o a nivel de contexto (una aplicación que no se pueda usar en un determinado país porque sus leyes lo prohíben).

Los impedimentos que nos pueden afectar se agrupan bajo cuatro categorías principales:

Visión

ceguera, daltonismo, pérdidas y problemas de visión y situaciones que hacen que ver bien una pantalla resulte complicado (por ejemplo, interactuar con un dispositivo móvil en un día soleado).

Audición

sordera, pérdidas de audición y cualquier situación que dificulte la escucha o haga necesario interactuar con los dispositivos sin que estos suenen (por ejemplo, reproducir un vídeo en una biblioteca).

Física y motora

problemas para sostener o manejar un dispositivo electrónico.

Alfabetización y aprendizaje:

dificultad para leer y/o hablar, no dominar un idioma…

Se está muy lejos de la realidad si se piensa que la accesibilidad limita la innovación. Las restricciones que aparecen a la hora de componer una interfaz universal pueden ser una gran oportunidad para impulsar la creatividad y explorar nuevas formas de crear. Enfrentarse al reto de eliminar obstáculos nos dirige automáticamente a obtener mejores productos y a prosperar los resultados de un negocio al llegar a más gente.

¿Cómo lo hacemos y qué se necesita entonces para hacer más accesible una interfaz?

Nuestro objetivo debería de ser el de impulsar la autonomía de personas con discapacidades, independientemente de si usan la vista, el oído o las manos para interactuar; nuestra prioridad lo simple y entendible. La accesibilidad se debe abordar desde las primeras fases del diseño, ya que no se trata de hacer ajustes en función de los diferentes tipos de usuarios sino de hacer una interfaz genérica, en la que todos los grupos queden representados.

Aunque una sección exclusiva de accesibilidad en nuestras interfaces nunca está de más, algunas pautas a tener en cuenta en esta primera toma de contacto con la accesibilidad son:

Jerarquía

Colocar las acciones importantes (accesos directos) en la parte superior o inferior de la pantalla y los elementos de una misma jerarquía uno al lado de otro. El tamaño y peso elegidos para los textos también establecen una jerarquía, donde los textos con mayor tamaño de fuente o en negrita tendrán mayor importancia y así se representa. Si se usa un lector de pantalla el orden de los elementos interactivos es primordial y deberían seguir una estructura de arriba a abajo y de izquierda a derecha.

Contraste

La relación entre un color y su fondo varía de 1 a 21 según la intensidad de luz emitida. Un tamaño de texto pequeño requiere mayor contraste para ser más legible. El WC3 recomienda una relación de al menos 4.5:1 entre el color del texto y el color de fondo, disminuyendo a un mínimo de 3:1 cuando la fuente es más grande (14 pt en negrita / 18 pt o superior). Estas relaciones son aplicables también a iconos y otros componentes destacables.

Color

No usarlo como único medio para transmitir información sino como un complemento que se apoye de textos, símbolos y texturas. Las personas daltónicas o con problemas de visión deberían ser capaces de identificar lo que está pasando en una interfaz en blanco y negro.

Etiquetas y formas

En formularios y búsquedas tener siempre visible la etiqueta del campo que estamos rellenando, y que el tamaño y ubicación de dicho campo esté bien definida. La etiqueta nos indica el propósito del campo en todo momento, por eso debería de permanecer incluso después de escribir en él. Evitar elementos sin bordes y crear formas tangibles para desencadenar una acción o desplazamiento.

Objetivos táctiles y de puntero

Con los componentes de la interfaz que responden a las interacciones de los usuarios y que se pueden extender más allá de los límites que ocupan visualmente. Hay que considerar objetivos táctiles (en dispositivos móviles) de al menos 48×48 dp para la mayoría de plataformas (44×44 dp en iOS) y objetivos de puntero (para ratón o lápiz óptico) con un mínimo de 44×44 dp

Indicadores de enfoque (en web)

Sirven de guía para saber dónde se está cuando se usa el tabulador para moverse por una web. Es importante no prescindir de estos focos ya que personas ciegas que necesitan lectores de pantalla, o personas con movilidad reducida, hacen gran uso de ellos.

Texto

Evitar el justificado porque crea patrones que entorpecen la lectura a personas con dificultades para el aprendizaje o que padecen dislexia. No abusar ni de la cursiva ni de las mayúsculas en párrafos largos. Servirse de texto alternativo para transmitir lo que muestra una determinada imagen, tanto a personas invidentes a través de lectores de pantalla, como a los que pueden ver pero han tenido un problema al cargar la imagen.

Adentrándonos en el desarrollo app, teniendo ya en las manos nuestro diseño inclusivo, tendremos que hacer uso de lectores de pantalla, VoiceOver (iOS) y Talkback (Android), de controles por voz… También se tendrá que integrar el tipo de visualización dinámico, para que la app (iconos y textos) se adapte al tamaño elegido por el usuario en su dispositivo. Es preferible no truncar los textos y que el usuario se desplace, a no ser que haya una vista separada donde se muestre el contenido al completo.

En Cuatroochenta hemos desarrollado apps con lector de pantalla como Metro de Málaga, EMT Valencia y Subús. Aplicaciones que facilitan la manera de moverse en transporte público a personas con capacidades visuales reducidas, las cuales se ven condicionadas a usar este medio prácticamente a diario.

Hay muchas herramientas en línea y complementos para los navegadores que ayudan a comprobar si un diseño cumple los requisitos de accesibilidad. Leer sobre accesibilidad y formarse en ello es fundamental para posteriormente concienciar. Se pueden dar unas bases iniciales pero esto es un trabajo de fondo, en el que poco a poco se irá interiorizando esa manera de diseñar y se adoptarán las guías de accesibilidad como se ha hecho con cualquier conjunto de restricciones de diseño

Diseña en pro de la diversidad para mejorar y crear interfaces en las que todo el mundo quepa. En definitiva, supón menos y empatiza más.