Los flujos de usuario son la visualización de todos los posibles caminos que los usuarios pueden seguir para alcanzar un objetivo específico, mientras utilizan cualquier producto digital. Este popular documento de UX puede ayudar a los diseñadores a evaluar el flujo que ellos mismos han creado, así como a presentarlo a su equipo y a las partes interesadas para obtener comentarios útiles. Los flujos de usuario también permiten a los equipos de diseño y de producto realizar comparaciones visuales cuando se evalúa más de una versión posible.
La creación de un flujo de usuario elaborado pero limpio facilita considerablemente que cualquier público siga la historia que hay detrás del diseño y proporcione comentarios relevantes y constructivos. Basándonos en nuestra experiencia, hemos elaborado una lista de siete consejos y trucos sin código, dirigidos principalmente a los diseñadores de productos que no han estado expuestos de forma significativa a la diagramación de flujos de usuario.
1. Utiliza títulos que tengan sentido
Los títulos significativos proporcionan a tu audiencia un contexto muy necesario en cualquier flujo de usuario al que intenten dar sentido. La gente suele utilizar el nombre del proyecto paraguas como título de su flujo de usuario, por ejemplo, «Banco XYZ – Nueva aplicación Android» Aunque este título es correcto, en algunos casos puede faltar ese contexto adicional que el público necesita conocer. Por ejemplo, en el caso de flujos de usuario con múltiples subflujos, el título podría incluir información más elaborada sobre cada parte del recorrido del usuario, por ejemplo «Pantallas del Centro de Ayuda, Banco XYZ, aplicación Android» o «Nuevo flujo de pago SEPA, Banco XYZ, aplicación iOS»
Como alternativa, puede elegir títulos de subflujos más cortos pero más puntuales (por ejemplo, «Nuevo flujo de pago SEPA»), mientras que el proyecto en su conjunto puede titularse con el nombre del proyecto y el tipo de dispositivo de destino («Banco XYZ – Nueva aplicación Android»).
En caso de que su proyecto contenga diferentes subflujos para diferentes personas usuarias, podría ser una buena idea añadir esta información en sus títulos también (por ejemplo, «Onboarding – Titular de la cuenta Bancaria»).
2. Deje un espacio adecuado entre las pantallas
Coloque sus pantallas de manera que sean fáciles de seguir y añada suficiente espacio entre ellas para una mayor claridad. Un espacio adecuado también hará que los flujos con múltiples conectores parezcan más ordenados y menos desordenados.
Expande tus subflujos en diferentes direcciones para evitar también el desorden y hacer que cada uno de ellos sea más distinguible. La posición de cada pantalla también es importante y debe reflejar la arquitectura de la información de tu aplicación o sitio web.
Consejo para Desbordamiento usuarios: Puedes espaciar fácilmente las pantallas seleccionadas vertical u horizontalmente con el atajo de teclado ALT + flechas direccionales.
3. Envuelve en dispositivos simulados cuando sea necesario
Las pieles de dispositivos son una forma muy efectiva de añadir consistencia visual y contextual a tu flujo de usuario, especialmente en el caso de los flujos de aplicaciones móviles. Otra ventaja de envolver tus pantallas de diseño en dispositivos simulados es que, en el caso de las pantallas largas y desplazables, esto da a tu audiencia una idea de qué parte de la pantalla será directamente visible sin necesidad de desplazarse.
4. Utiliza etiquetas para explicar las acciones
Los conectores suelen explicarse por sí mismos. Sin embargo, añadir etiquetas de texto a cada uno de ellos puede responder a las preguntas de tu audiencia incluso antes de que tengan que hacerlo.
Hay un par de casos, sin embargo, en los que añadir etiquetas es más que opcional. Por ejemplo, cuando tu flujo contiene árboles de decisión con más de un resultado posible, las etiquetas te permiten añadir ese contexto adicional y exponer la lógica detrás de cada opción sin esfuerzo. Además, en el caso de los primeros flujos de ideación sin diseños acabados, en los que cada pantalla está representada por un simple rectángulo, las etiquetas permiten a tu audiencia entender la lógica que hay detrás de cada paso de tu flujo, aunque falten señales visuales críticas.
5. Estiliza tus conectores para conseguir más claridad
Los conectores son posiblemente el elemento más crucial de tu diagrama de flujo de usuario, ya que dictan el flujo lógico de tu experiencia de producto, a la vez que guían la atención de tu audiencia mientras presentas tu trabajo. En muchos casos, una pantalla puede estar vinculada a otras con múltiples conectores salientes y entrantes, lo que dificulta la comprensión de la interacción entre ellas. Aquí es donde el estilo de los conectores viene al rescate.
Una forma sencilla de personalizar tus conectores para mejorar tu flujo es utilizar un estilo más prominente para los conectores de navegación hacia adelante. Del mismo modo, los conectores de navegación hacia atrás pueden ser menos prominentes, con colores más suaves o incluso con líneas de puntos, como muestra el siguiente ejemplo.
Por último, cuando se utilizan múltiples estilos de conectores, es necesario añadir una leyenda en una esquina de su flujo de usuario, para que su audiencia pueda entender cuál es el propósito de cada estilo.
6. Utiliza las formas de forma intencionada
Junto con las pantallas, los conectores y las etiquetas, las formas son el cuarto elemento principal de cualquier diagrama de flujo de usuario y, posiblemente, el más versátil de todos ellos.
En los flujos de usuario en fase inicial (como el que se muestra arriba), las formas juegan un papel muy crucial, ya que incluso pantallas enteras pueden representarse mediante rectángulos hasta que el proceso de diseño haya terminado. Otro uso de los rectángulos es como fondo para agrupar pantallas y significar la existencia de un subflujo. Los diamantes, por su parte, se utilizan sobre todo para señalar los puntos de decisión, donde el flujo de usuario se divide en ramas, dependiendo de lo que el usuario decida hacer o de la persona a la que pertenezca. Por último, los óvalos se utilizan sobre todo como puntos de conexión entre subflujos o como marcas para el punto de inicio o de finalización de un flujo.
7. Divida los flujos de usuarios grandes en subflujos
Los flujos de usuarios masivos son difíciles de seguir para su audiencia y pueden parecer bastante desordenados. Al dividir cada flujo grande en subflujos más pequeños, es más fácil para el presentador y la audiencia centrarse en el panorama general, pero también en los detalles. Un buen enfoque es dividir las pantallas del flujo de usuarios en diferentes pasos del producto, siendo cada uno de ellos un subflujo distinto: incorporación, registro, exploración del producto, pago, etc.
Conclusión
Crear diagramas de flujo de usuario efectivos requiere práctica. Tanto el diseño como las anotaciones son vitales, ya que contribuyen a que el público pueda seguir la historia que hay detrás de tu trabajo de diseño. Si sigues los consejos descritos anteriormente, facilitarás tanto tu vida como la de tu audiencia en tu próxima presentación de diseño y podrás obtener una retroalimentación mejor y más procesable para mejorar la experiencia de usuario de tu producto.