Tendencias:
Diagrama de flujo UX

Diagrama de flujo UX: qué son y cómo se utilizan

10/10/2022
Número de visualizaciones

Planificar los procesos es una cuestión primordial en UX, para esto tenemos el Diagrama de Flujo UX, que será tu mejor aliado para lograr tus objetivos. Al inicio de un proyecto, suele ocurrir que nada más recibir el Briefing, empezamos a pensar en los wireframes que llevaremos a cabo o el diseño final que tenemos en mente. Esto nos puede llevar a distraernos de lo funcional del diseño, potenciando la estética y esto sería erróneo. Para esto tenemos los Diagramas de Flujo UX.

Se tratan de una herramienta para el diseño UX que nos permitirá entender y comunicar fácilmente las diferentes acciones que pueden llevar a cabo los usuarios con el diseño, sus flujos, las pantallas por las que pasarán, sus interacciones, etc.

¿Qué es un diagrama de flujo?

Estos diagramas se utilizan en multitud de campos diferentes por su utilidad, no son una herramienta exclusiva del diseño de experiencia de usuario. Esto es una ventaja, ya que lo hace más comprensible para el resto de los perfiles implicados en el desarrollo de una aplicación, web, producto o servicio digital.
Los diagramas de flujo UX no representa el tipo de dispositivo para el que se diseña, ni la estética a seguir, esto hace que la discusión se centre en lo que sucede con el usuario en nuestro diseño y no en cuál será la apariencia final. Nos centramos aquí en lo funcional por encima de todo lo demás.

¿Para qué sirve un diagrama de flujo?

  • Visualizar y comunicar procesos: Un diagrama de flujo permite representar gráficamente un proceso, lo que lo hace más fácil de entender y visualizar. Además, son una forma clara y concisa de comunicar un proceso a otros miembros del equipo o a partes interesadas externas.

  • Identificar problemas: Al representar un proceso mediante un diagrama de flujo, es más fácil identificar los problemas y cuellos de botella que pueden estar obstaculizando el proceso.

  • Optimizar procesos: Una vez que se han identificado los problemas y cuellos de botella, es posible optimizar el proceso y hacerlo más eficiente si tenemos una visión integral de la longitud y complejidad de los diferentes flujos de usuarios plasmados en diagramas de flujo.

  • Documentar procesos: Un diagrama de flujo también puede servir como una forma de documentar un proceso, facilitando su comprensión y seguimiento.

  • Planificar proyectos: En la planificación de proyectos, un diagrama de flujo puede ayudar a identificar los pasos necesarios y la secuencia en la que deben ser ejecutados.

  • Programación: En la programación de computadoras, los diagramas de flujo resulta útil para diseñar el flujo de un programa y a detectar posibles errores.

  • Mejora continua: Finalmente, un diagrama de flujo es una herramienta útil en la mejora continua de procesos ajenos al diseño UX, ya que permite identificar áreas de mejora y realizar cambios para hacerlos más eficientes.

¿Cómo desarrollar un diagrama de flujo?

En primer lugar, para preparar un Diagrama de Flujo, debemos de tener claro qué queremos representar, es decir, saber en qué persona se enfoca el proyecto, cuáles son los objetivos y cuáles son los objetivos del negocio.
Será necesario contar con esta información, así como tantos datos cuantitativos, cualitativos y técnicos se precisen para el diseño de la aplicación, web o servicio digital para el que estamos trabajando.

En la definición de un Diagrama de Flujo UX existen elementos predefinidos que nos ayudan la comprensión de los procesos. Estos son los siguientes:

  • El círculo se emplea para identificar el inicio y el fin de un determinado flujo.
  • Un rectángulo ovalado servirá para identificar interacciones que realiza el usuario.
  • Un rombo indica que en ese momento se produce una decisión que normalmente tiene una respuesta afirmativa o negativa
  • Las flechas o conectores servirán para identificar la dirección que sigue el flujo. Este será, normalmente, de izquierda a derecha y de arriba hacia abajo.

Debemos de tener en cuenta, que, aunque estos elementos estén predefinidos, será conveniente añadir a nuestro diagrama de flujo UX una leyenda descriptiva que explique de manera resumida el significado de las geometrías o colores.

Consejos para diseñar un diagrama de flujo

Asegúrate de conocer tu audiencia objetiva

Antes de adentrarnos en cuestiones puramente estéticas, lo primero antes de diseñar un diagrama de flujo es entender realmente quiénes y cómo son los usuarios que van a comprar los productos que quieres comercializar. Para ello, deben llevarse a cabo investigaciones de mercado concienzudas para definir las características de tu buyer persona, sus necesidades y su comportamiento. Una vez conozcas de verdad a tus usuarios, plantéate cómo van a acceder los usuarios a tu sistema y cómo deberían avanzar cómodamente por la estructura que quieres crear.

En caso de tener varios buyer persona y/o diferentes puntos de acceso, se deberán crear diagramas de flujo secundarios alternativos para tener una visión más global y abarcar todos los recorridos de usuario posibles.

Sé consistente con los elementos de diseño que emplees

Todas las formas, líneas, textos y formato escrito de un mismo diagrama de flujo deben seguir una misma línea de estilo unificada. La consistencia a la hora de diseñar aplicaciones, páginas web, infografías y también diagramas de flujo es un elemento vital para facilitar la percepción y comprensión de los gráficos de forma más rápida. Comprueba que todas las figuras geométricas comparten el mismo tamaño y que su espacio de separación sea el mismo. También es importante prestar atención a la alineación para crear una sensación de orden visual.

No te compliques la vida

Recuerda que el objetivo principal de todos los diagramas de flujo es simplificar la percepción de información. Por tanto, si lo enrevesas demasiado y los usuarios tienen que volcar sus cinco sentidos para sacar alguna conclusión de tu diagrama de flujo, probablemente tengas que replantearte toda la estructura de tu diagrama de flujo. No lo satures con texto e imágenes, especialmente si no son 100% necesarios y relevantes para el asunto en cuestión. Si tu diagrama de flujo comprende un recorrido demasiado grande, sepáralo en varias páginas numeradas para facilitar la comprensión al máximo.

Añade puntos de comienzo y final

No te olvides de dejar claro y resaltar con, por ejemplo, figuras y colores especiales, dónde empieza y dónde acaba el diagrama de flujo. De lo contrario, podrías generar confusión respeto a dónde accede el usuario por primera vez, qué sentido tiene el diagrama, qué conclusiones se pueden inferir y hacia dónde lleva todo este diagrama de flujo al usuario. Has de contemplar el diagrama de flujo como una historia que tiene su principio, su desarrollo y su desenlace para que cualquiera que estudie tu diagrama de flujo no se desoriente.

Diseña y comunica

Más allá de la utilidad para el diseño de los movimientos de los usuarios en la web, aplicación o servicio digital, el diagrama de flujo UX también te servirá para la comunicación con el resto de los equipos implicados, que deben de entender los procesos. Al tener identificado de forma sencilla todos los pasos que sigue un usuario podrás identificar las pantallas a diseñar. También identificarás cuando debes de mostrar alertas, estados vacíos, etc.

El diagrama de flujo UX se puede realizar de manera sencilla mediante papel y lápiz, dibujando en tu cuaderno o en un folio, aunque también encontrarás multitud de herramientas digitales que te ayudan a esto, como; Miro, Figma, Mural

¿Quieres conocer más sobre qué es UX y cómo utilizarlo? ¡Echa un vistazo a este Máster en Usabilidad y Experiencia de Usuario de INESEM!

Puede que te interese leer más sobre:

Categorizado en: Diseño y Arquitectura

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Descubre nuestro contenido más actualizado en TERRITORIO INESEM

PRÓXIMOS EVENTOS

Bienestar Tecnológico y Desconexión Digital

Bienestar Tecnológico y Desconexión Digital

Eduard Alcaraz
45 minutos
15/04/2024 17:00
LinkedIn: la Red Mundial que conecta a cualquier Profesional

LinkedIn: la Red Mundial que conecta a cualquier Profesional

Ana Cabello
1 hora
22/04/2024 17:00
Universidades colaboradoras
La universidad Antonio de Nebrija es Universidad colaboradora con INESEM Business School La universidad a Distancia de Madrid es Universidad colaboradora con INESEM Business School