Rediseño PICTOS App

Contexto y desafío

PICTOS es una aplicación de uso gratuito y de código abierto, que tiene como objetivo dar apoyos visuales para hacer que los servicios sean más inclusivos y accesibles. Actualmente se encuentra disponible y sus apoyos están siendo utilizados como herramienta en el sector de Salud, Transporte, Trámites y Ocio a lo largo de Chile. En el contexto de sumar apoyos para lugares en internet, apareció  la posibilidad de mejorar también aspectos visuales, de experiencia y navegación.

Análisis UX/UI

Para iniciar el proceso de rediseño gráfico de la app, se realizó un análisis del estado actual de las interfaces, donde rescatamos los siguientes puntos a mejorar:

• Cliqueabilidad: Existen elementos como los listados de “servicios” y “lugares” donde el diseño actual no delimita la zona cliqueable de cada uno, por lo que  se hace más complejo identificarlos como botones.

• Coherencia del lenguaje visual: Observamos algunas inconsistencias visuales al comparar componentes, ilustraciones y pictogramas, ya que no se percibe una decisión transversal  sobre el uso de bordes, figuras llenas, sombras o redondeados. Identificamos una oportunidad de mejora del diseño de la App a partir de la creación de una propuesta gráfica que rescate la esencia de los pictogramas (elemento central del proyecto), con el objetivo de construir una identidad visual consistente en todos sus puntos.

• Paleta de colores: Si bien existe una paleta de colores que incluye azules y amarillos, en la App sólo se utiliza un color y sus variaciones, generando un ritmo monótono al navegar las diferentes vistas.

• Foco en la acción a realizar: Se podría mejorar la agrupación de elementos con el fin de resaltar de forma más notoria las zonas relevantes de la pantalla para operar.

Desarrollo de una propuesta

Moodboard

En esta etapa nos propusimos encontrar referencias sobre cómo construir un ecosistema visual a partir de elementos gráficos que faciliten la comprensión de las acciones dentro de la aplicación.

Definiciones gráficas

• Color: Se amplió el uso de los colores disponibles en la paleta, usando la totalidad de tonos principales y añadiendo versiones claras de cada uno.

• Ilustración: Inspirados en lo simple y lineal de los pictogramas creamos un personaje que interactúa con las abstracciones de los objetos de cada instrucción, ambos se diferencian mediante el uso del color, así a partir de la repetición de estos se construye una familiaridad entre ilustraciones. También nos preocupamos por mantener un lenguaje neutral que permitiera escalar en una eventual internacionalización. 

• Escala tipográfica: Se incorporan nuevos tamaños en la escala, para generar contraste entre contenidos y componentes (títulos de secciones, títulos de cards, metadatos, etc).

• Componentes: Teniendo en cuenta lo importante que es agrupar para digerir de forma eficiente las zonas de la pantalla, se incorporan dos componentes: Cards y Cabeceras, que permiten soportar metadatos, íconos y enlaces agrupados en contexto.

• Iconografía: Se utilizan íconos de Material Symbols para complementar acciones puntuales en la App, como enlaces externos, activar sonido, entre otros. También se utilizan los íconos de apoyo para las cards de categorías e instrucciones en evaluaciones.

Mejoras estructurales

Al agregar nuevas funcionalidades, se hace necesario replantear cómo se navega la App, ya que a partir de esta intervención, se suman “lugares en internet” a los ya existentes “lugares presenciales”. Como ajuste visual, diferenciamos ambas opciones por color (amarillo para tareas en lugares en internet y celeste para tareas en lugares presenciales). 

Para reforzar esta idea desde la navegación, reestructuramos los accesos en la vista de inicio, agregando accesos directos a un buscador que filtra estas dos categorías, además de diferenciar mediante títulos las secciones al ingresar a un “Servicio”.

La nueva estructura nos llevó a mejorar la definición de los etiquetados teniendo en cuenta el lenguaje fácil y la coherencia entre secciones. Realizamos una iteración con el objetivo de mapear las posibles inconsistencias de agregar apoyos para servicios web, llegando a los siguientes cambios:

• Agregamos un título descriptivo al inicio, enfocado en transmitir la utilidad de la App.

• Reemplazamos el uso de “Buscar un lugar específico” por “Encuentra ayudas por categorías”.

• La palabra “lugares” sólo es utilizada para el listado dentro de un “Servicio”, teniendo como complemento “en internet” o “presenciales”.

• Cada card contiene metadatos que complementan la información que contiene cada tipo de contenido, de esta forma se anticipa al usuario la cantidad o el tipo de información que encontrará.

• Las cabeceras construyen un relato de lectura en vertical, reforzando conceptos como servicios, lugares del servicio, listado de tareas del lugar, resultados de búsqueda y evaluación.