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
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.
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
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
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
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
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
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
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 Instagram, Twitter, Facebook o LinkedIn.
