Diagrama de flujo: una herramienta esencial para el diseño UX

Tiempo de lectura aprox: 2 minutos, 47 segundos

Como diseñadores, a menudo nos encontramos con un resumen de un proyecto (brief) y de inmediato comenzamos a pensar en cómo serán los bocetos (wireframes) y prácticamente ya tenemos en mente el diseño final. En este contexto, los diagramas de flujo son una herramienta esencial que nos permite comprender y comunicar fácilmente los flujos de los usuarios y las tareas.

Esto a veces nos lleva a tener discusiones con las partes interesadas que ya se centran en pantallas específicas, lo que puede desviar la conversación hacia el aspecto estético y olvidar lo funcional.

Este artículo se centrará en explicar qué son los diagramas de flujo, cuándo se utilizan y cual es su importancia.

 

¿Qué es un diagrama de flujo?

Es una herramienta que te permite entender y comunicar fácilmente cómo se mueven los usuarios y las tareas dentro de un proyecto. Es útil tanto para los equipos de desarrollo como para los gerentes de producto o cualquier persona interesada en el proyecto. Se utilizan en diversos campos y no están limitados solo al diseño de experiencia de usuario. Esto los hace comprensibles para todos los perfiles dentro del equipo.

En pocas palabras, un diagrama de flujo es una representación visual de cómo se desplaza el usuario en una página web o aplicación. Su objetivo es analizar y optimizar los diferentes flujos de manera detallada, y comunicarlos al resto del equipo.

Además, permiten representar tanto los flujos de tareas (task flows) como los flujos de usuarios (user flows). Una característica importante es que no están relacionados con el tipo de dispositivo o la estética. Esto facilita que las discusiones se centren en lo que sucede y no en cómo se verá.

Momentos clave para utilizar el diagrama de flujo

El diagrama de flujo es una herramienta práctica que se utiliza en varios momentos dentro del proceso de diseño. Algunos de estos momentos incluyen:

  • Al diseñar una nueva funcionalidad por primera vez.
  • Durante el análisis de la competencia (benchmark) para evaluar su flujo.
  • Para corregir y ajustar un flujo existente.
  • Cuando se necesita agregar una nueva funcionalidad a un flujo ya existente.

La importancia de una representación clara en el diagrama de flujo

Para preparar un diagrama de flujo de manera práctica, es importante tener en claro qué es lo que quieres representar. Esto implica tener una comprensión clara de la persona a la que te estás enfocando, cuáles son sus objetivos y cuáles son los objetivos del negocio en cuestión.

Además de esta información, es necesario contar con otros datos cuantitativos y cualitativos, así como también considerar aspectos técnicos. En algunas ocasiones, la forma en que se realiza una operación o la tecnología existente puede influir en el ejercicio del diagrama de flujo, ya sea de manera positiva o negativa.

Elementos comunes en un diagrama de flujo

El diagrama de flujo es una herramienta ampliamente utilizada en diversas disciplinas y, por lo tanto, tiene una serie de elementos y terminología predefinidos que deben ser respetados. A continuación, se presentan los elementos más comunes:

  1. Círculo: se utiliza para representar el inicio y el fin del flujo. Es decir, marca el punto de partida y el punto de conclusión del proceso.

  2. Rectángulo ovalado: se usa para representar las interacciones que realiza el usuario dentro del flujo. Este elemento suele utilizarse para identificar acciones o actividades específicas.

  3. Rectángulo: se utiliza para representar los diferentes «escenarios» o estados dentro del flujo. En el contexto del diseño de experiencia de usuario (UX), estos rectángulos suelen representar pantallas o interfaces.

  4. Rombo: indica que en ese punto del flujo se debe tomar una decisión. El rombo se divide en dos caminos diferentes, que representan las posibles respuestas o acciones que se pueden tomar.

  5. Flechas o conectores: se usa para indicar la dirección del flujo, es decir, la secuencia en la que se deben seguir los pasos. Estas flechas generalmente van de izquierda a derecha o de arriba hacia abajo.

Además, es recomendable agregar una leyenda al diagrama de flujo que explique de manera concisa el significado de cada forma geométrica o color utilizada. Esto ayuda a que cualquier persona pueda entender rápidamente el flujo representado en el diagrama.

Ejemplos:

 

Propuesta de diagrama de flujo para compartir canciones en Spotify

Propuesta para compartir canciones en Spotify (fuente)

Propuesta de diagrama de flujo para buscar recetas de tortitas

Propuesta para buscar recetas de tortitas (fuente).

Conclusión

En resumen, el diagrama de flujo es útil para trabajar el flujo y comunicarlo a otras personas interesadas en el proyecto. Además, ayuda a diseñar de manera efectiva la aplicación o página web al representar de forma sencilla los pasos que sigue el usuario. Esto permite identificar la cantidad adecuada de pantallas a diseñar y anticiparse a la necesidad de mostrar alertas, estados vacíos y otros aspectos relevantes. Y lo mejor es que se puede crear un diagrama de flujo con un lápiz y papel, en una pizarra o utilizando herramientas digitales como Mural, Miro o FigJam de Figma.

Así que, aprovecha esta poderosa herramienta para representar de forma sencilla y comprensible los pasos y decisiones de tus flujos de trabajo.