Este 2022 nos tocó tomar una nueva etapa en el proyecto PICTOS, donde el desafío que abordamos fue proponer una nueva lógica para las capas que componen los pictogramas, además de ajustes gráficos y estructurales para la escalabilidad del sistema de ayudas.
Hasta la versión anterior la biblioteca estaba compuesta por 5 capas: floor, subject, landmark, context y icons. El principal problema que detectamos es que, teniendo una perspectiva de crecimiento, no era intuitivo el agregar nuevos elementos a cada capa, habían muchas excepciones que “rompían” con la estructura del sistema pictográfico.
También el estilo de los elementos de cada capa tenían una complejidad visual que era innecesaria considerando el contexto de uso.
Ambas observaciones provocaron dos instancias de reflexión, en la primera definimos una nueva propuesta para el personaje principal lo que nos sirvió para aplicar nuevas reglas constructivas al resto de elementos, con el cuidado de simplificar sin caer en lo abstracto.
En la segunda instancia redefinimos la función que cumple cada capa (ver propuesta).
En un taller del interno del equipo hicimos una descripción de los desafíos de cada capa y cómo poder abordarlos:
Capa subject
Iniciamos con subject, que es la que tiene mayor impacto en el resto de las capas (se podría decir que fuimos “subjectcentristas“). En base a la modificación de subject movimos el resto de los elementos para que calzaran con su posición dentro de cuatro cuadrantes.
Desafío
La capa del personaje principal estaba llena de variaciones de una misma pose en distintos cuadrantes o con distintos elementos detallados (billetes, tarjetas, documentos con “texto”). Debido al tamaño de visualización (especialmente en móviles) no tenía sentido que alcanzara ese nivel de detalle.
Propuesta
Eliminamos los elementos auxiliares de esta capa y dejamos sólo las poses, también definimos como lugar fijo el segundo cuadrante. Esto permite ubicar elementos alrededor de éste, dejando la interacción principal al centro del frame.
Capas landmark y context
Para este caso revisamos los elementos de ambas capas de forma simultánea, con el objetivo de identificar sus particularidades y clasificarlas según su función dentro de la composición.
Desafío
No había claridad sobre la racionalización de los elementos que componían cada capa.
Propuesta
Para el caso de la capa landmark dejamos todos los elementos genéricos como puertas de acceso, escritorios, módulos de atención, asientos y en general cualquiera que no tuviera relación directa con las categorías específicas de la app (Salud, Trámites, Transporte, Entretención).
La misión de especificar el pictograma se le otorgó a la capa context.
Así, el criterio para agregar nuevos pictogramas a landmark debe ser: “elementos que podrían servir para más de un caso”, por ejemplo: un escritorio puede servir para atención de una oficina del registro civil, para una entrevista, una consulta médica, entre otros.
Para el caso de context, la lógica debe ser: “teniendo en cuenta los elementos de landmark, crear elementos que especifiquen y evidencien el lugar donde se estará desarrollando la acción”, por ejemplo: un muro de actividades, un guardia, un paradero de metro o de bus.
Capa icons
Para el caso de esta capa, ajustamos el estilo para que fuera consistente con la nueva imagen de los pictogramas y en conjunto con el equipo de PICTOS hicimos un levantamiento de qué iconos se debieran mantener en la biblioteca, pensando en simplificar el número de opciones para tareas actuales y futuras de la app.
Perspectiva del entregable
Para la documentación de este proceso de refactoring y entrega de las capas con sus elementos rediseñados, tomamos la decisión de crear un archivo que sirva como herramienta y tutorial para futuros aportes en el diseño e implementación de nuevos pictogramas. Para esto trabajamos con la función de componentes de Figma, lo que permite realizar pruebas previas a la actualización del repositorio en github.
En el mismo archivo de figma dejamos una página “readme“ donde se explica el orden del archivo, las funciones de cada capa y tutoriales para la construcción y exportación de los pictogramas.
Pictos es un proyecto de bien público y código abierto, revisa estos enlaces para más información: