Diseño UX

Diseñando un widget de accesibilidad

Diseño 7 min. de lectura

Durante un proceso de rediseño de interfaz para la aseguradora de cesantía en Chile, nos enfrentamos al desafío de crear una herramienta que facilitara su uso para todas las personas.

Iconos que hacen referencia a los tipos de Accesibilidad.

Hace un tiempo AFC Chile, la aseguradora de cesantía en Chile, nos propuso el desafío de avanzar hacia el desarrollo de un widget de accesibilidad para su sitio. Uno de los objetivos de nuestro cliente, era poder disponer de una herramienta que pudiera ayudar a todos aquellos usuarios que tuvieran la necesidad de usar un instrumento de estas características

En la línea de la mejora de su sitio web y la implementación de un nuevo diseño de interfaz, AFC Chile necesitaba entregar una mejor experiencia de usuario basada en la usabilidad y accesibilidad de los contenidos. El objetivo era lograr un mejor entendimiento de sus distintos contenidos alojados en la nueva interfaz, pero acorde a las expectativas de su audiencia, eliminando las trabas experienciales de los usuarios gracias a un despliegue de información óptima, accesible y usable.

Esta necesidad se alineaba con la definición de accesibilidad, la que trata de velar por el acceso para todos, y que, en el caso del nuevo sitio público de la aseguradora, consideraba implementar una solución accesible que permita a personas con distintos tipos de discapacidades, ingresar al sitio web sin fricciones ni barreras; ya sea para cobrar su seguro de cesantía o informarse sobre el mismo. 

Las estadísticas lo avalan

Los datos del Banco Mundial son claros. Al menos un 15% de la población mundial tendría algún tipo de discapacidad. Lo anterior equivale a más de mil millones de personas; una cifra no menor teniendo en cuenta lo comercial, ya que puede marcar una gran diferencia y por lo que, debemos considerar desde nuestra área.

Ahora bien, centrándonos en el territorio nacional, según un estudio del SENADIS (2015), un 16,7% de la población chilena tiene algún tipo de discapacidad. Si traducimos este porcentaje llegamos a casi 3 millones de personas. Por este motivo, la accesibilidad puede impactar y beneficiar a un amplio sector de nuestro país.

Analizar la industria y definición de funcionalidades

La accesibilidad web deriva de la accesibilidad universal, pero como lo indica su nombre, su aplicación se lleva principalmente a un ambiente digital. En ese contexto, una de las primeras tareas que desarrollamos en el equipo para realizar una propuesta técnica y comercial, fue la de  realizar un análisis de herramientas digitales existentes en el mercado y que, al mismo tiempo, respondiera a las necesidades de la organización y lograra resolver técnicamente lo propuesto por cliente en un sitio como el que desarrollamos en WordPress.

Posterior a este análisis, y en conjunto a nuestro equipo y la contraparte, decidimos ir por una versión desarrollada por nosotros mismos por sobre una versión de industria. Esto por los altos costos que puede tener una aplicación de mercado de alta gama, sobre todo por la cantidad de volumen que el sitio de nuestro cliente podría llegar a aceptar. 

Además, en primera instancia no eran necesarias todas las funcionalidades que se pueden encontrar en una herramienta como las analizadas. Por este motivo, decidimos desarrollar una funcionalidad que además se desenvolviera como plugin para ser activado y/o desactivado al momento de querer contratar otra herramienta del mercado.

La construcción del widget de accesibilidad

Cuando ya estaban definidas las funcionalidades necesarias, se planteó el diseño y desarrollo de la solución la que consideró las siguientes etapas.

Diseño del widget: 

  • Definición de estructura mediante Wireframes
  • Definición de nuevos estilos visuales  para este elemento
  • Confección de familia de estilos iconográficos

Diseño Front-end y Desarrollo Back-end de Plugin:

  • Producción de HTML para módulo desplegable del widget
  • Desarrollo de despliegue y ocultamiento del widget
  • Aplicación de nuevos CSS según la selección del usuario.
  • Habilitación y deshabilitación del plugin

Sitio de AFC junto al widget de accesibilidad.

Dentro de las funcionalidades que se acordaron junto al cliente y que parecían las principales de una primera etapa, estaba el manejo y uso de diferentes contrastes por parte del usuario, así como el manejo y uso de distintos tamaños tipográficos.

Controlar contraste

Sitio de AFC con contraste invertido.

Permite al usuario seleccionar entre cuatro niveles de contraste. El usuario deberá desplegar cada nivel de contraste de los tres nuevos propuestos; esto implica la redefinición de la paleta cromática de todo el sitio para ambos dispositivos. 

Las opciones consideradas en esta funcionalidad fueron:

  • Contraste Normal: Corresponde a la paleta cromática de la  interfaz actual.
  • Alto contraste: Incrementa los contrastes entre elementos (Textos, título, cajas contenedoras, botones, etc.) de la interfaz y los respectivos  fondos en que se disponen estos elementos. Definiendo una nueva paleta cromática.
  • Contraste Invertido (negativo): Invierte los colores de la paleta cromática original para todos los elementos de la interfaz a excepción de las imágenes de diseño y contenido.

Controlar magnificación de textos y contenedores

Títulos con un mayor tamaño en el sitio de AFC.

Permite al usuario seleccionar entre cuatro tamaños de textos y los elementos que los contienen. Se considera la modificación controlada de tamaños de letra y sus contenedores para que en las tres nuevas escalas de magnificación no se presenten desconfiguraciones o rupturas en la interfaz. 

Los tamaños considerados en el widget de accesibilidad fueron:

  • Normal: Corresponde a los tamaños de  la interfaz actual.
  • Mediano: Aumenta los tamaños de las tipografías en un porcentaje moderado sin afectar las actuales proporciones de los elementos.
  • Grande:  Aumenta los tamaños de las tipografías en un porcentaje mayor junto con los elementos que las contienen velando por las proporciones de estos.
  • Muy Grande: Presenta el mayor aumento posible de las tipografías y elementos de la actual interfaz.

El valor de generar herramientas accesibles

Como lo hemos expresado en diversas ocasiones, los procesos de diseño de experiencia de usuario siempre deben tener como objetivo mejorar la calidad de vida de las personas y con este proyecto lo dejamos en claro una vez más. 

Todas las personas esperan empatía y seguridad de los servicios que utilizan, sobre todo, cuando se enfrentan a situaciones de estrés o alta carga mental. En contextos de crisis como el actual, es fundamental que este tipo de plataformas funcionen correctamente; pero además, también deben contar con herramientas que permitan que sean accesibles para todos.

Este widget de accesibilidad nos muestra la importancia de diseñar desde la empatía y nos invita a seguir mejorando nuestros servicios en torno a las experiencias de las personas.

Acerca del Autor

Rodrigo Vera - Director Experiencias de Usuario

Director UX

Diseñador Gráfico especializado en Diseño UX con el interés de desarrollar experiencias memorables en la interacción de las personas con productos y servicios. Me intereso en el diseño de interacción más allá de la plataforma digital y de cómo puede proporcionar mejores experiencias en espacios públicos y hacer cambios reales en las vidas de las personas.

Agregar un comentario