Más allá de la forma: ¿Cómo el Content Design colabora en la definición de un patrón de diseño?

Diseñar no es solo elegir colores y formas. En este artículo te cuento cómo definimos, en conjunto con Design Ops, un patrón de diseño para el Design System de Payway.

Si te ponés a pensar, un botón por ejemplo, por más vistoso y brillante que sea, no te dice mucho más que “va a suceder algo si me cliqueás” (por comportamiento aprendido y convención de la industria), más que “estoy acá” o “soy azul”. ¿Cómo hacemos para que ese botón me diga qué va a pasar luego de que lo toque? o ¿por qué está ahí? o ¿qué espera que yo, persona usuaria, haga?

Es que un componente visual, más allá de los colores, alineación o forma, hasta no estar en un contexto específico, no nos dice mucho, le falta parte de su significado. Para que un componente nos de un mensaje claro tenemos que, además, tener en cuenta el contenido textual y el comportamiento funcional.

Acá es donde entran las otras dimensiones del lenguaje, o del storytelling, porque al tener en cuenta la dimensión semántica y funcional (además de la dimensión morfológica) imprimimos significado y contexto a los elementos visuales de las interfaces.

Como dice Fafa Gari en su artículo “El malentendido del storytelling”:

En una pantalla, las palabras cuentan una historia junto con las imágenes, las interacciones y los sonidos. Si los lenguajes con los que se expresa un producto cuentan cosas distintas, la comunicación se vuelve ruido.

El proceso detrás del Patrón Notificaciones

Cuando comenzamos a desarrollar los patrones de diseño priorizamos el patrón “Notificaciones”, partiendo de la necesidad del producto de comenzar a estandarizar y unificar el uso de componentes y mensajes para comunicar a la persona usuaria avisos, feedback, etc.

1. Relevamiento en Payway:

Empezamos revisando todas las pantallas de Payway que utilizaban componentes del DS para presentar notificaciones a los usuarios. Teníamos como objetivo identificar las prácticas actuales.

2. Investigación de uso en otros productos:

Antes de adentrarnos en el análisis profundo, estudiamos cómo se utilizan los componentes y patrones en otros productos, además de revisar buenas prácticas en otros Design Systems. Esto nos proporcionó un marco de referencia.

3. Criterios de análisis:

En esta etapa detallamos las cuestiones a tener en cuenta para definir el uso de los componentes, tales como las intenciones de comunicación, la criticidad del mensaje a comunicar, la temporalidad, el comportamiento, la anatomía, etc. para tener una panorámica completa.

4. Cruce de información:

Con esa guía en mano, organizamos un cuadro de doble entrada para analizar tanto la dimensión semántica (la intención detrás de cada notificación) como la dimensión morfológica (la forma y función de cada componente).

5. Definición de lineamientos:

Con todo el análisis sobre la mesa, redactamos las directrices claras sobre qué componentes son apropiados para cada tipo de notificación y cuáles se deben evitar. Para responder a la pregunta del millón: ¿cómo se qué componente debo usar según el contexto?

Disponibilizamos todos los lineamientos y definiciones que tomamos, con ejemplos ilustrativos, para que nuestro equipo de Content y Product Designers pueda consumirlo.

Notificaciones en Payway

Criterios de análisis de la dimensión semántica y morfológica

Dimensión Semántica

Acá, nos concentramos en el ‘por qué’ y el ‘qué’ de las notificaciones:

1. Intención de comunicación: El propósito detrás de cada notificación. ¿Qué esperamos del usuario? ¿Qué le estamos tratando de decir? Definir claramente el propósito y la acción que se espera que realice el usuario en respuesta a la notificación es el primer paso para poder identificar qué componente visual es el más adecuado para lo que estoy diseñando.
2. Criticidad: No todas las notificaciones tienen el mismo grado de importancia. Debemos evaluar la importancia y urgencia de la información que se va a comunicar a través de la notificación.
3. Temporalidad: Aquí, consideramos el ‘cuándo’. Es vital entender en qué momento del journey del usuario es más efectivo mostrar una notificación. Ya sea durante una acción específica, al inicio, en medio o al final de un proceso.

Dimensión Morfológica y Funcional

Esta dimensión se sumerge en el ‘cómo’ de las notificaciones:

1. Anatomía Visual: El diseño de la notificación debe ser coherente con la identidad de marca, aprovechando elementos que capten la atención del usuario.
2. Comportamiento y Funcionalidad: No solo importa el aspecto visual, sino cómo se comporta la notificación, cómo interactúa con la persona usuaria. ¿Es intrusiva o discreta? ¿Permite al usuario realizar acciones desde ella o simplemente informa?

Dialog modal: Vista previa de lineamientos

Las intenciones de comunicación del Patrón Notificaciones

Como les conté, al desarrollar el Patrón Notificaciones para el DS de Payway, las intenciones de comunicación jugaron un papel central:

Aviso:

Aquí estamos hablamos de notificar al user acciones necesarias o avisos informativos. Son informaciones o advertencias de algo que está sucediendo o sucederá, no necesariamente provocado por la persona usuaria, sino también a nivel sistema.

• Advertencias: Alertas para que el usuario preste atención a algo importante o a un posible conflicto que sucederá.
• Conflicto: Señala una situación que requiere atención inmediata.
• Información de cambio de estado: Notificaciones que informan sobre cambios relevantes en el sistema o aplicación.
• Información de novedad: Actualizaciones, nuevas características o información que puede ser de interés para el usuario.

Feedback:

Los feedback dan un status sobre algo que ocurrió en pantalla, en consecuencia de una acción o decisión de la persona usuaria, es esencial para que el usuario entienda cómo sus acciones afectaron al sistema.

• Error: Indica que algo no salió bien y, ofrece soluciones o pasos a seguir.
• Éxito: Confirma que una acción se realizó correctamente.
• Pendiente: Notifica sobre tareas o acciones que aún están en proceso o que necesitan ser abordadas.

Cuadro: análisis semántico y morfológico de notificaciones

Conclusiones

Como fuimos explorando, la esencia de un componente, su significado y propósito, es tan crítico como su presentación visual. La convergencia entre la dimensión semántica y morfológica es lo que da vida a nuestras interfaces, lo que les permite contar historias y guiar a nuestros usuarios a través de experiencias significativas.

Entonces, la próxima vez que te encuentres frente a un componente, de cualquier design system, te invito a mirar más allá de su forma y color. Buscá su intención, su historia, así vas a entender no solo cómo funciona, sino también por qué existe.

Agradecimientos

A mis compas de Design Ops de Payway: Solci Kiernan, Pau Martinez. Gracias por enseñarme todos los días. ❤