Antes de comenzar

El diagrama de flujo es un método de diseño centrado en el usuario que se inscribe en las fases de definición y generación que permite representar cada uno de los pasos de la interacción del usuario hasta alcanzar su objetivo.

Esta técnica se basa en la información que previamente se haya manejado en los escenarios y los user journeys, y representa un paso más en la definición del diseño. En la fase de modelado, los escenarios nos sirven para describir, de manera narrativa, cómo utiliza un usuario el producto o servicio y nos ayudan a responder a la pregunta «¿Qué?»: ¿qué debe hacer el producto o servicio y qué funcionalidades debe incluir para facilitar a los usuarios el logro de sus objetivos? A partir de esta información, elaboramos los user journeys incorporando las expectativas, emociones y nivel de satisfacción del usuario en cada paso de la interacción. Esta técnica nos ayuda a entender mejor el contexto, detectar puntos débiles de la interacción y también oportunidades de mejora.

Tomando como punto de partida toda la información obtenida en los escenarios y los user journeys, los diagramas de flujo se centran en definir y analizar en detalle la interacción con la representación de todas las posibles opciones que puede encontrar un usuario realizando una tarea. Por tanto, realizar los diagramas de flujo permite:

  • Visualizar las páginas o el contenido con el que interactúa el usuario y las acciones que son necesarias para que alcance su meta.
  • Entender de dónde viene y cuál será su próximo destino.
  • Identificar caminos sin salida, acciones que requieren feedback y posibles errores en la lógica de la interacción.

Por otro lado, según el tipo de interacción, los diagramas de flujo pueden representar:

  • Task flows: flujos que son únicos para todos los usuarios y que, por tanto, se realizarán de la misma manera, como, por ejemplo, el registro en una aplicación. En este tipo de flujos, es necesario analizar la interacción y determinar la navegación óptima. Siguiendo con el ejemplo del registro en una aplicación, no podemos extenderlo en demasiados pasos o campos de formularios, sino que debe encontrarse el equilibrio óptimo entre la información que necesitamos y el tiempo que los usuarios están dispuestos a dedicarle.
  • User flows: flujos no cerrados que representan la interacción de un usuario específico. No son únicos ni lineales, sino que cada persona traza un camino a lo largo del producto o servicio, como, por ejemplo, la búsqueda de un producto en una tienda en línea. En este caso, es necesario analizar todas las rutas posibles y tratar de optimizar la experiencia.

El objetivo de los diagramas de flujo es, por tanto, analizar con detalle los journeys más importantes del producto o servicio para optimizarlos y también comunicar al resto del equipo cómo debe desarrollarse la interacción.

Preparación

Antes de elaborar los diagramas de flujo es necesario tener en cuenta, por un lado, la información que van a representar y, por otro, los elementos visuales que utilizaremos para dibujarlos.

En cuanto a la información, resulta muy útil haber realizado el modelado (personas y escenarios), así como los user journeys (u otros métodos, como el storyboard o los casos de uso) y el árbol de contenidos del producto o servicio.

Respecto a la representación visual de los diagramas de flujo, es recomendable seguir el estándar de formas y colores que se define a continuación:

Fuente: elaboración propia

Aunque no existe un estándar cerrado sobre el aspecto que deben tener los diagramas de flujo, el uso de estas formas se ha extendido y, dado que permiten representar la interacción de forma relativamente rápida, se utilizan habitualmente con este fin. No obstante, existen otros formatos que se pueden considerar en función de las características del producto o servicio.

Desarrollo / ejecución

Para elaborar los diagramas de flujo se recomienda seguir el siguiente proceso:

  1. Definir el punto de inicio y el punto final de la interacción: definir cómo comienza la interacción del usuario con el producto o servicio y tener claro cuál es su objetivo final (siempre en base al modelado de personas y escenarios).
    Ejemplo: punto de inicio = abre la aplicación; objetivo = encargar comida a domicilio.
  2. Determinar la secuencia de pasos: en función de la estructura del árbol de contenidos, definir la secuencia de pasos de la interacción del usuario desde el inicio hasta que logra su meta.
    Ejemplo: log in > menús disponibles > detalle del menú x > selección del menú x >  introducir dirección > pago > confirmación.
  3. Aplicar las siguientes preguntas para cada uno de los pasos identificados:
    a .¿Qué pasa antes de este paso?
    b.¿Qué pasa a continuación?
    c. ¿Este paso es una acción directa o el usuario debe tomar una decisión?
    d. ¿Es necesaria alguna acción para proceder al siguiente paso?
    e. ¿Qué ocurre si las cosas no van como deberían?
    f. ¿Son necesarios caminos alternativos?
    El objetivo en este punto es identificar qué pasos de la interacción implican que el usuario tome una decisión para tener en cuenta todas las vías posibles.
  4. «Dibujar» el diagrama con toda la información definida en los tres pasos anteriores, crear el diagrama siguiendo el estándar de formas descrito en la sección «preparación».

Análisis / Resultados

Una vez elaborados los diagramas de flujo, analizar los resultados teniendo en cuenta que permiten:

  • Detectar posibles errores antes de dar paso al desarrollo del producto o servicio.
  • Identificar cada paso en la interacción para analizar de dónde viene el usuario y a dónde va de manera que en todo momento se tengan en cuenta las necesidades de los usuarios y que la interacción tenga sentido.
  • Ejecutar iteraciones rápidas durante el proceso de diseño o desarrollo.

Ejemplos

Fuente: elaboración propia

Referencias

Baskanderi, N. (2017). «UX Glossary: Task Flows, User Flows, Flowcharts and some new-ish stuff».  https://uxplanet.org/ux-glossary-task-flows-user-flows-flowcharts-and-some-new-ish-stuff-2321044d837d

Handley, A. (2018). «User flow is the new wireframe». https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a

Hanington, B.; Martin, B. (2012). Universal methods of design: 100 ways to research complex problems, develop innovative ideas, and design effective solutions. Rockport Publishers.