Metodologías de UX: Diagrama de flujo

Un diagrama de flujo nos permite visualizar los pasos que sigue un sistema o usuario para realizar una serie de tareas

Diagrama de flujo

Un diagrama de flujo, en inglés flowchart, es un tipo de diagrama que nos permite visualizar, con la ayuda de cajas y flechas, los pasos que sigue un sistema o usuario para realizar una serie de tareas. En este artículo voy a explicar cuándo usarlo y cómo crearlo con Omnigraffle, además de proponerte algunas metodologías alternativas.

¿Cuándo se utiliza un flowchart?

Durante un proyecto enfocado con Diseño Centrado en el Usuario (DCU) podemos aplicar los diagramas de flujo en distintas fases.

• Análisis

En la fase inicial un diagrama de flujo visualiza el workflow general. Éste se puede someter a un análisis heurístico para identificar potenciales de mejora.
También podemos comparar el workflow de diferentes herramientas o sistemas competidores en forma de diagramas de flujo (benchmarking).

• Conceptualización

Durante la fase de ideación la elaboración de un nuevo workflow puede definirse en forma de flowchart.

• Prototipado

Durante la creación iterativa de un nuevo workflow, este se puede visualizar en forma de flowchart.

• Desarrollo y documentación

Los diagramas de flujo son en origen una herramienta de desarrollo para documentar algoritmos y funcionalidades. Si hemos utilizado el flowchart como metodología durante el proyecto es lógico utilizarla como forma de documentación.

Creación de un diagrama de flujo

Los diagramas de flujo tienen un lenguaje común que los identifica y unifica. Es preciso utilizarlo para una correcta interpretación. Básicamente, un diagrama de flujo se compone de abstracciones geométricas que representan acciones conectadas por líneas de flujo con flechas. Los dos tipos principales de acciones constituyen las actividades, propiamente dichas, y las que implican una decisión del actor:

1. Las actividades se representan como cajas rectangulares con un proceso linear (flecha de entrada y salida).
2. Las decisiones se representan como un rombo con una flecha entrante y dos de salida.

Se puede imaginar el diagrama de flujo como una corriente de agua o eléctrica donde hay un proceso que llega a un punto final o vuelve a un punto anterior.

Los diagramas de flujo se desarrollan de izquierda a derecha y de arriba abajo. Es importante evitar cruces de líneas y utilizar el espacio en blanco para agrupar bloques y líneas visualmente (tal y como explicaba Josep Maria Blanco en un artículo sobre las leyes Gestalt).

Antes de empezar a realizar el diagrama de flujo digitalmente es recomendable hacer una planificación sobre papel.

• ¿Cuáles son las principales tareas del usuario/sistema?
• ¿Cuáles son las entidades lógicas que se crean/modifican?
• ¿En qué fases se divide el proceso?

Una vez identificados los procesos a grandes rasgos y los objetos, es hora de pensar en el flujo de trabajo. ¿Qué decisiones toma el usuario a la hora de interactuar con el sistema? Hay que tener en cuenta que cada decisión divide el flujo en dos.

Diagramas de flujo con Omnigraffle

Para digitalizar el diagrama de flujo vamos a utilizar Omnigraffle. A continuación voy a detallar algunos consejos prácticos para agilizar su elaboración con esta herramienta (sólo disponible para Mac).

Punto medio de conexión
Las flechas en los diagramas de flujo salen del punto medio de las cajas. Para habilitar los puntos medios en Omnigraffle debemos seleccionar los rectángulos. En la columna lateral (Inspectores) seleccionar la pestaña “Propiedades”. Seleccionar “8 imanes” en el menú desplegable.
Si creamos nuevos rectángulos duplicando uno anterior, se heredarán las propiedades anteriores (shortcut Alt+Drag&Drop).

Líneas
Las flechas en los diagramas de flujo son ortogonales. Una vez están seleccionadas se configura en los inspectores en el apartado Línea.

Si hacemos doble clic encima de la línea estamos añadiendo un punto intermedio para tener mayor control de su trayectoria.

Si hacemos clic con la tecla Alt podemos introducir una etiqueta de línea. Ésta opción es especialmente importante para las decisiones que se bifurcan en SÍ y NO. Ésta etiqueta de línea se puede mover a lo largo de la línea.

Estilos de figura favoritos

Para optimizar la realización de diagramas de flujo más complejos se pueden utilizar los “estilos de figura favoritos”. Primero seleccionamos un objeto y con el botón derecho del ratón abrimos el menú para seleccionar su opción “Añadir a estilos de figura favoritos”.

Una vez tenemos un “Estilo de figura favorito” nos aparece el estilo en el menú desplegable, a la izquierda de las herramientas en el toolbar superior.

También podemos utilizar la herramienta “pincel de estilos”, haciendo doble clic para pegar el estilo de un objeto a otros, seleccionándolo con el ratón

Metodologías similares

Existen metodologías similares a los diagramas de flujo que serán más adecuadas dependiendo del objetivo. Por ejemplo, si queremos una metodología para empatizar con el usuario y su contexto, será más recomendable usar un Journey map o Storyboard.

• Sitemap: El sitemap, o mapa de contenidos, organiza jerárquicamente una lista de páginas web, independientemente del flujo del usuario. Si el sitemap es interactivo puede usarse como orientación y navegación del usuario.
• Journey map: El journey map muestra los procesos de interacción con un sistema desde una perspectiva más holística. Desde el momento en que el usuario tiene un problema, se entera de la solución y prueba un nuevo sistema. Se trata de integrar el contexto y factores sociales que intervienen en la experiencia de usuario.
• Storyboard: El storyboard representa una forma de visualizar un journey map con dibujos y narraciones para generar empatía con el usuario.

Artículo escrito por Gerard Pàmies