Un diagrama de flujo ( flowchart) te ayuda a visualizar los pasos que sigue un usuario para completar una tarea o alcanzar un objetivo en su sitio o app. Identificar y reflexionar sobre cómo los usuarios navegan por tu sitio te ayudará a satisfacer sus necesidades de una manera más eficiente.
Cuanto mejor diseñado esté tu diagrama de flujo, más cerca estarás de construir un producto que a los usuarios les encantará utilizar.
Siempre los diseñadores UX debemos empezar por la fase de investigación e ideación para poner al usuario en el centro y de frente. El diseño de un flowchart eficaz empieza por el usuario: ¿quién va a utilizar el sistema?. Si no lo has hecho aún, empieza por realizar una investigación de usuarios y diseñar user personas, mapas de empatía, user journeys .. ya que te ayudará a definir tu público objetivo, sus necesidades y sus puntos de dolor.
Te recomiendo comenzar bocetando el diagrama de flujo con papel y lápiz. Te permitirá asentar los principios básicos de la solución que buscas con mayor velocidad. Después pasa a una fase de precisión con herramientas de diagramas de flujo digitales como Lucidchart, Figma o incluso con una herramienta de esquemas como Justinmind. Una de las principales ventajas de crear un diagrama de flujo digital (en lugar de uno de papel) es que hay un montón de kits de interfaz de usuario gratuitos y recursos disponibles en línea para ayudar a definir y acelerar el proceso. En cualquier caso, e importante que en esta etapa de definición seas meticuloso, lo más explícito posible.
Los elementos básicos del flujo de usuarios
A la hora de crear flowchart digital, es importante tener en cuenta las reglas habituales de los diagramas de flujo. Seguramente tu flowchart pasará por muchas manos con diferentes perfiles, y atenerse al lenguaje común garantizará que el diseño y su funcionalidad sea clara.
Los elemento más comunes son:
- Óvalo: Simboliza el inicio y/o el final en un diagrama de flujo.
- Rectángulo: Simboliza los pasos del proceso. Es el símbolo más utilizado en cualquier diagrama de flujo. Muestra un proceso, tarea, acción u operación. Esta forma representa algo que hay que hacer o una acción que hay que realizar. El texto dentro de la forma Proceso casi siempre incluye un verbo. (Filtrar, Elegir, Seleccionar, realizar pago … )
- Diamante: El diamante simboliza las decisiones. Esto suele ramificar el diagrama de flujo mediante flechas. Estas ramas son respuestas Sí y No.
- Paralelogramo: Se utiliza para mostrar la entrada o salida de una fuente de datos. Podrías usarlo para determinar qué acción debe ocurrir al recibir un email, generación de algún informe, la descarga de un documento …
- Hexágono: Esta forma se utiliza para representar un paso que implica la preparación, como la configuración del equipo, la instalación de un software, o completar un formulario con adjuntos para completa el alta por ejemplo.
- Flecha: El símbolo de la flecha se utiliza para representar la dirección del flujo. Este será, junto con el rectángulo, tu símbolo preferido.
Legible, coherente y consistente. Breves reglas para realizar un flujo de usurios
Los mismos principios que se siguen al diseñar una interfaz pueden y deben aplicarse al diseñar un diagrama de flujo de UX. Las reglas básicas son de sentido común, pero no por eso menos importantes:
- Etiquetas legibles y con sentido
Los rótulos son una ayuda vital para el lector, ya que ayudan a entender el flujo de usuarios. Intenta utilizar un título que describa exactamente lo que representa el flujo de usuarios. En la medida de lo posible no utilices el bloqueo de mayúsculas ni abuses de negritas, se ha demostrado que el formateo normativo de un texto facilita la lectura. - Coherencia en el uso de colores
El objetivo de la utilización de colores es agregar información de valor y para ello es habitual regirse por el código de colores universal: rojo, verde, amarillo, azul. Creo que todos reconoceríamos el contexto de un símbolo por el uso adecuado del color. - Consistencia con la normativa
No cambies las formas o el sentido de las formas. Forman parte de un código que es universal, si para explicar los pasos del proceso utilizas círculos confundirás al lector del flowchart. Mantén tu lienzo ordenado y alineado, con separación suficiente entre elementos que faciliten la lectura.
Intenta en la medida de lo posible no cruzar nunca líneas, aunque el camino visualmente sea más largo un cruce de líneas puede confundir. Con el FigJam de Figma resulta muy sencillo evitar estos cruces y verás como los conectores se ajustan al recorrido de manera casi automática.
Los diagramas de flujo (flowcharts) de UX son útiles, pero nunca hay que olvidar que son una representación visual que puede contener mucha información. Podrás encontrar puntos de entrada y salida, personajes de usuario, acciones y reacciones, puntos de decisión, navegación… el diagrama de flujo incluirá diferentes variables que el equipo necesita entender tanto en el proceso de diseño como en programación.
Nunca pierdas de vista el principal objetivo de un flowchart, para qué ha sido diseñado y quienes serán los lectores. a menudo deberás adecuar el lenguaje dependiendo del interlocutor, la información en el diagrama no tiene porque ser la misma si nuestro diagrama se dirige al departamento de IT o a los stakholders.
¿ Cuando realizar Flujos de usuario (flowcharts)?
Los flujos de UX se sintetizan en una fase temprana, durante las etapas de planificación del diseño y una vez realizada la investigación de usuarios. Constituyen una parte importante de la base sobre la que se construye el producto y deben servir de referencia a otros integrantes del equipo.
Cuando se llega a la creación de un flujo de usuario, ya se han completado los diagramas de afinidad y los mapas de empatía, así como el desarrollo de personas. Una vez que se han reunido los datos de las pruebas de usuarios, los flowcharts ayudan a determinar cuántas pantallas se necesitan, en qué orden deben aparecer y qué componentes deben estar presentes.
Los diagramas de flujo también se pueden hacer para las interfaces existentes para mejorar la experiencia del usuario o aclarar cualquier problema que los usuarios estén teniendo con la interfaz.