El diseño de experiencia de usuario es la manera en la que las personas interactuamos con un sistema o servicio. De forma que planteamos como un usuario se debe desplazar por nuestra app y por nuestra interfaz. Dentro de él entraría la accesibilidad UX como una variable más de este tipo de diseño.

Si le preguntas a cualquier persona como le gustaría que fuesen las apps habitualmente todo el mundo contestaría que una interfaz sencilla, bonita y sin anuncios. Pero estas características abarcan mucho más. Desde que el proceso sea intuitivo hasta que sea lo más accesible posible.

Que es la accesibilidad para móviles

Actualmente la mayor parte del tráfico que se genera en Internet proviene de dispositivos móviles. En ellos tenemos una herramienta de lo más potente para conectarnos con el mundo que nos rodea e informarnos. Pero muchas veces esto supone un problema para personas con discapacidades.

Pero ¿dónde se encuentra la discapacidad? La discapacidad surge en la interacción con un producto o persona. Este es el enfoque que nos plantea la sociedad sobre la discapacidad en donde se nos explica que la interacción con el entorno nos puede desarrollar distintas barreras. Llamemos discapacidad a esa barrera que se produce con la interacción y por lo tanto la discapacidad depende del contexto.

«La accesibilidad nos permite aprovechar el potencial de todos».

Debra Ruh

Estas barreras pueden ser permanentes (parálisis o ceguera) o temporales (un brazo escayolado), congénitas (autismo) o adquiridas (vista cansada o sordera).

Las 10 reglas heurísticas de Nielsen o cómo hacer test sin usuarios

Dibujo de dos personas una boca abajo y otra de pie con distintas gráficas alrededor

Siendo una empresa pequeña como somos en Chubby Apps, siempre nos ha resultado problemático el hacer test con usuarios. Programamos y diseñamos de forma interna tanto apps propias como para terceros, pero uno de los mayores problemas que nos encontramos es que analizamos la usabilidad de la app desde nuestra propia perspectiva y eso nos puede hacer no darnos cuenta de algún problema.

Por ello usamos las 10 reglas heurísticas de Nielsen que, a pesar de estar escritas en los maravillosos 90, nos permiten detectar gran cantidad de errores de usabilidad sin tener que hacer test o antes de hacerlos con usuarios.

Visibilidad del estado del sistema

Uno de los fundamentales. Y de los que más cuesta acordarse en el proceso de diseño. Es aquel que te recuerda que el usuario debe recibir feedback del sistema cuando realiza una acción. De esta forma sabe que ha realizado la acción y que la app la ha recibido sin ningún problema.

Cuatro formas de ver un diseño de relleno de formulario. Según si se tiene daltonismo o no. Recalcando que no se puede argumentar un error únicamente con el color. Si no que son necesarios símbolos

Esto se aplica también a errores que pueda haber en formularios y que se deben señalizar.

Podemos mostrarlos con iconos, ilustraciones, animaciones, etc.

Salida de emergencia, o darle al usuario control y libertad

Esta regla nos habla de darle al usuario la capacidad de controlar las acciones que desee. Incluso el deshacer acciones que puede haber realizado por equivocación. Como cancelar el envío de un correo, modificar una entrada en un diario o deshacer un texto escrito.

Prevenir los errores

Algo tan simple como avisar de errores que cometes como humano. Sugerir palabras clave en una búsqueda, si la contraseña que estás usando es segura o es 123456 o avisar de que te has olvidado de adjuntar un documento o título a un mail. De esta forma preveremos que no se generen entradas en blanco.

No dar por sentado nada

A veces estamos tan metidos en el desarrollo de nuestra aplicación que no tenemos en cuenta los diagramas de flujo y damos por hecho que el usuario va a saber la ruta que tiene que seguir por inercia. Escribiendo texto tan poco humanos como el regístrate cuando el usuario no sabe siquiera a qué, o avisar de que se ha producido un Error 404 y quedarnos tan anchos sin que el usuario que está leyendo esa alerta esté familiarizado con el término.

Lo que ya funciona no hay que cambiarlo

Dibujo de Me gusta, Like y no me gusta interpretando los símbolos de FB al lenguaje de Chubby Apps

No vamos a reinventar la rueda. Y si ya tenemos entendido el símbolo del corazón como algo positivo y no va a significar en nuestra app lo contrario. Así no confundirás al usuario y atenderás a unas expectativas concretas.

Estética y diseño simple

La moda minimmal no es simplemente una moda. La información que muestra una app debe ser necesaria y útil en ese momento y si no debe estar oculta.

Reconocible mejor que de memoria

A veces al querer diseñar de forma lo más minimalista posible nos olvidamos cosas por el camino. Y lo que menos queremos generar en el usuario al usar nuestra app es carga mental. Cuanta más información des al usuario de donde esta y a donde va mejor.

Diseña para quien acaba de llegar y para quien lleva mucho tiempo aquí

Tu aplicación va a contar con usuarios recién llegados y con usuarios que ya dominan la app casi mejor que tú. Y para ambos debe ser igual de atractiva. Por ello son necesarias las pantallas explicativas y tours de bienvenida, pero no aburras con consejos pasada esta barrera de entrada.

Sin manual de instrucciones

Esta es una de las reglas heurísticas que más nos gustan y por ello la incluimos en nuestros principios de empresa. Lo ideal es que fuese así, pero aun así unas FAQ (preguntas frecuentes), son un buen ejemplo de cómo evitar mails de asistencia y evitas la barrera de que el usuario te tenga que contactar.

Caerse y levantase

Los errores son el pan de cada día en los usuarios dentro de sus aplicaciones. No siempre se pueden evitar con las reglas dadas anteriormente, pero sí puedes facilitar su identificación cuando suceden. De esta forma el usuario podrá solucionarlos de forma propia y sencilla.

Prácticas a tener en cuenta en la accesibilidad en UX

Dibujo de 9 personas con distintos rasgos edades y sexos. Mostrando diferentes diversidades

Los fabricantes de las distintas plataformas móviles son conscientes de la importancia que debe tener la accesibilidad en nuestros desarrollos y diseños y por eso añaden la accesibilidad dentro de los componentes gráficos predefinidos dentro de las API de sus sistemas.

Utilizando lenguaje nativo y usando los componentes que los sistemas operativos ponen a nuestra disposición, la adaptación que deberemos hacer para dotar de accesibilidad en UX a nuestra aplicación será mínima. Así solamente deberemos realizar las siguientes adaptaciones para ser totalmente accesibles:

  • Añadir texto descriptivo o alternativo a todos los controles de la interfaz, utilizando el atributo apropiado en cada caso.
  • Describir imágenes, iconos y elementos necesarios para el entendimiento de la app de forma correcta y detallada obviando elementos puramente decorativos.
  • Comprobar que se pueda llegar a todos los elementos de la interfaz que puedan implicar una interacción con un controlado direccional físico (ratón, tableta braille, navegación por gestos).
  • Comprobar que los mensajes auditivos estén acompañados por una alternativa háptica o visual. Permitiendo su uso a usuarios con problemas de audición

En el caso de que no podamos alcanzar todas las funcionalidades que requiere nuestra aplicación mediante elementos del sistema. Y tengamos que generar nuestros propios elementos deberemos garantizar la accesibilidad de estos mediante la utilización de los atributos correspondientes y comprobando que los servicios de accesibilidad en UX propios del teléfono funcionen correctamente.

No escribas en mayúsculas

Texto: Accesibilidad en UX.  El diseño de apps que funciona para todos escrito en mayusculas y minúsculas recalcando los espacios que se generan de diferencias de tamaño

Hay veces que por cualquier tipo de motivo diseñamos titulares utilizando mayúsculas en todo el texto. Esto aunque parezca mentira genera gran cantidad de problemas en accesibilidad en UX:

  • Se ralentiza un 10% la lectura
  • A veces los lectores de pantalla leen estos textos letra por letra
  • Son textos más difíciles de leer por la similitud que se generan entre las letras. Eliminando gran parte de la diferenciación visual que encontramos en las minúsculas.
No uses colores en exclusiva para dar información

En ocasiones usamos el sistema de semáforo para dar información de forma rápida. Generando alertas con el rojo, el azul de forma informativa y el verde para indicar que algo es correcto.

Pero tal y como explicamos en el artículo de la teoría del color para mejorar la accesibilidad en UX no todos vemos de forma igual el color y en el caso de ser daltónico vea tanto el verde como el rojo de color gris.

Por ello además de añadir diferencias cromáticas debemos añadir un icono o un mensaje descriptivo.

Evita el mini-padding

Accesibilidad UX Botón Padding Chubby Apps

Muchas veces diseñamos botones en que el padding (el espacio de relleno requerido por los lados de un elemento) es tan residual y tan pegado a otros elementos del diseño que puede producir complicaciones a la hora de hacer Tab.

Si dejamos un espacio muy reducido donde hacer tab dificultamos el uso a personas con discapacidades motrices que tienen dificultades a la hora de realizar ciertas acciones.

Para evitarlo tenemos plugins muy útiles en sketch como Paddy o siempre podemos recurrir a los UI design tips de Apple.

Incluirlos en nuestros procesos de diseño

Dibujo de una persona invidente junto a una mujer sujetando un elemento del sistema con gráficas.

A medida que vayas incluyendo mejoras de accesibilidad en tu aplicación, hay varias herramientas que te pueden ayudar a probar la experiencia y mejorar la accesibilidad en UX.

  • Accesibility Scanner: Esta app desarrollada por Google y disponible para dispositivos Android sugiere mejoras de accesibilidad para tus aplicaciones. Ayudándote a encontrar elementos de la aplicación que podrían beneficiarse de mejorar de accesibilidad.
  • Stark: Plugin para sketch que te ayuda a solucionar gran cantidad de inconsistencias desde el proceso de diseño. Te permite simular problemas visuales relacionados con el color e incluso comprobar el contraste para pasar los test de WCAG.
  • Cluse: Otro plugin para sketch que nos permite controlar el contraste pero en este caso de forma gratuita.

“Necesitamos hacer que cada cosa sea accesible a cada persona con discapacidad”. — Stevie Wonder

Pero la mejor herramienta siempre es incluir a tus futuros usuarios en tus procesos de diseño. De esta forma los incluirás en el co-desarrollo de tu aplicación y te ayudarán a encontrar nuevas funciones y a ser más accesible. Algo que tuvimos muy en cuenta desde Cori y por eso lanzamos la app directamente en una beta abierta que nos está permitiendo ver que inquieta a nuestro público. Si quieres ayudarnos a mejorar la app no dudes en suscribirte a la beta o mandarnos un mail.

Principales diferencias entre Android e iOS

Dibujo de tres mujeres desnudas tocando elementos figurativos que forman el sistema

Las funciones básicas de accesibilidad en UX se aplican todas las plataformas móviles. La interfaz y las opciones de diseño deben hacer que una aplicación sea accesible para todos. Sin embargo las soluciones que nos dan los distintos sistemas operativos son distintas. Por ello he querido reflejar las principales características:

Lectores de pantalla

Tanto iOS como Android cuentan con lectores de pantalla dentro de su sistema operativo. Con el fin de ayudar a personas con discapacidades visuales o de alfabetización tengan acceso a la misma información. Gracias a ellos se transforma el texto de la pantalla en voz. Pudiendo escuchar el texto en lugar de tener que leerlo. Cada plataforma tiene su propio lector. Google Voice Assistant dentro de Android y VoiceOver para iOS.

Los lectores de pantalla tratan la interfaz como componentes, los cuales debemos etiquetar de la forma correcta para que el lector los pueda interpretar y el usuario pueda navegar entre ellos. De forma predeterminada el lector usará la jerarquía de estos componentes para iniciar la lectura. Basándose en la posición de izquierda a derecha y de arriba a abajo. Los gestos usados para navegar y para proceder a la lectura son muy similares en las dos plataformas.

Diferencias en el teclado

En la actualidad las diferencias existentes entre iOS y Android han ido despareciendo poco a poco a favor de ser más accesibles. Ambos aceptan teclados externos para navegar por su interfaz como si se manejase un ordenador. Incluso el año pasado Apple añadió la compatibilidad con pantallas de braille (Algo en lo que Android le llevaba la delantera gracias a Braille Back).

¿Por qué somos accesibles?

Al desarrollar aplicaciones móviles teniendo en cuenta la accesibilidad en UX podremos desarrollar una buena experiencia de usuario a todo tipo de personas. Desde nativos digitales hasta personas de la tercera edad con discapacidades. La accesibilidad no solo es moral sino que no hay ninguna razón que nos impida ignorar la accesibilidad. Ya que no es solo una característica. Si no una necesidad para el diseño y desarrollo de aplicaciones.


Si quieres saber más sobre nosotros y lo que hacemos síguenos en InstagramTwitterFacebook o LinkedIn.