Rediseño UI/UX de la app PICTOS

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:

• Accesibilidad del target: Existían elementos como los listados de “servicios” y “lugares” donde el diseño no delimitaba la zona cliqueable de cada uno, por lo que se hacía complejo identificarlos como interactivos.

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

• Paleta de colores: Si bien en el proyecto existía una paleta de colores que incluía azules y amarillos, en la app sólo se utilizaba un color y sus variaciones, lo que generaba un ritmo monótono al navegar las diferentes vistas.

• Foco en la acción a realizar: Se identificó la posibilidad de 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 la actualización gráfica

Moodboard

En esta etapa nos propusimos coleccionar 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ó la paleta cromática, incorporando la totalidad de los tonos principales y añadiendo variantes claras para cada uno.

• Ilustración: Inspirados en la simplicidad y el trazo lineal de los pictogramas, diseñamos un personaje que interactúa con representaciones abstractas de los objetos presentes en cada instrucción.
  
  Ambos elementos —el personaje y los objetos— se diferencian mediante una paleta de colores contrastante, logrando que la repetición de estas composiciones genere una sensación de familiaridad y cohesión visual.
  
  Asimismo, se priorizó el uso de un lenguaje visual neutro y universal, pensado para facilitar su adaptación y escalabilidad en un contexto de internacionalización.

• Escala tipográfica: Se rediseñó la escala tipográfica con nuevos tamaños para establecer una jerarquía visual clara entre contenidos y componentes (ejemplo: títulos de sección vs. títulos de cards, metadatos, textos secundarios)

• Componentes: Teniendo en cuenta lo importante que es agrupar información para digerir de forma eficiente las zonas de contenido de una interfaz, se incorporaron dos componentes: Cards y Cabeceras, que permitieron soportar metadatos, íconos y enlaces agrupados en contexto.

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

Mejoras estructurales

Al incorporar nuevas funcionalidades, se rediseñó la arquitectura de información para integrar de forma coherente los servicios digitales (“lugares en internet”) junto a los servicios presenciales ya existentes. Para facilitar su distinción, se implementó un código cromático:

• Amarillo: Acciones vinculadas a servicios digitales.
• Celeste: Acciones asociadas a servicios presenciales.

Navegación

1. Se reorganizaron los accesos principales en la pantalla de inicio, incorporando un buscador con filtros predeterminados para ambas categorías.
2. Al ingresar a un “Servicio”, las secciones ahora se destacan mediante títulos jerárquicos, mejorando la orientación del usuario.

Etiquetados y lenguaje fácil

Realizamos una revisión estratégica del contenido con foco en:

1. Claridad:
   • Se añadió un título principal descriptivo que comunica el propósito central de la app.
   • Reemplazo del llamado “Buscar un lugar específico” por “Encuentra ayudas por categorías”.
2. Consistencia semántica:
   • La palabra “lugares” se reservó exclusivamente para listados dentro de un “Servicio”, acompañada de su especificador (“en internet” o “presenciales”).

Componentes y jerarquía visual

• Cards: Se incluyeron metadatos contextuales para complementar la información que contiene cada tipo de contenido, anticipando al usuario la cantidad o el tipo de información que encontrará.

• Cabeceras: Estructuran un relato visual cohesivo mediante una lectura vertical, reforzando conceptos como servicios, lugares del servicio, listado de tareas del lugar, resultados de búsqueda y evaluación

---

Antecedentes relevantes del proyecto

1. En este post está el detalle de la implementación original y sus actualizaciones anteriores a ésta.
2. En nuestro blog está descrito el razonamiento detrás de la estructura de pictogramas.
3. Pictos es un proyecto de bien público y código abierto, revisa estos enlaces para más información:
   • Repositorio en Github
   • Sitio web del proyecto
   • Progressive Web App
   • Núcleo de investigación: Accesibilidad & Inclusión
   • Crea y descarga tus pictogramas