--- # System prepended metadata title: ¿Cómo crear un User Flow? --- +![UCOM logo](https://res.cloudinary.com/duxh2q7vn/image/upload/v1602119393/ucom-pro-1024x379_xshc0m.png =150x) # ¿Cómo crear un User Flow? ## Learning Goals - Producir y presentar User Flows ## ¿Cómo crear un *User Flow*? Primero que nada, **siempre construye un flujo con el usuario en mente**. Conocer las motivaciones y necesidades de tus usuarios, te ayudará a crear mejores *User Flows*. Antes de comenzar a elaborar el flujo, debes saber: - Para que usuarios/personas estás creando el flujo - Qué historias de usuario o tareas estás documentando en el User Flow - De dónde vienen los usuarios y cómo llegan a este flujo (puntos de entrada) - Dónde comienza el flujo. Por ejemplo, ¿es una *landing*, una pantalla de registro, una página principal? ### El primer flujo Una forma rápida en la que puedes comenzar a explorar diferentes flujos es **creando un simple bosquejo del contorno del flujo**. Antes de hacer los bocetos o los prototipos, puedes incluso escribir una lista de los trazos del flujo. Esto te permitirá explorar la parte más importante de tu aplicación: el contenido. La construcción de flujos alrededor del contenido te da una idea más acertada del número de páginas, pantallas y elementos requeridos para completar una tarea/ Este es un ejemplo de bosquejo del contorno de un User Flow: ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_5e783f259eeaf4a2aec0870be05e0435.png) Por ejemplo: ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_188e410cfc7953feb85a374968abc18a.png) Este método fue creado por Ryan Singer, un especialista en producto digital y está explocado con más detalle (en inglés) [aquí](https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows). ### Diagramas de Flujo Los diagramas de flujo constituyen el siguiente nivel para crear User Flows. Una vez que tienes el boceto o el listado, puedes utilizarlo para crear un gráfico que visualmente describa cómo el usuario se mueve a través de la aplicación y cómo la aplicación responde a las interacciones con el usuario. ### Símbolos de un Diagrama de Flujo Los diagramas de flujo utilizan formas especiales para representar diferentes tipos de acciones o pasos en un proceso. ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_eeb07246e4587eadc20182e83dd66e7f.png) - Las líneas y flechas muestran la secuencia de pasos y las relaciones entre ellos - Los rombos representan puntos de decisión, pueden ser del usuario o del sistema - Ejemplo: Registrarse o Identificarse? Pagar compra o Seguir comprando? El usuario es válido o no existe? - Puedes incluir una leyenda que explique qué representa cada símbolo o color que utilices ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_8bcfd4ed1bd729c2bdd7cfc1e6a162f5.png) :::warning Los Stakeholders (Grupos de Interés) pueden no estar familiarizados con estos símbolos. Como verás en los ejemplos siguientes, diferentes diseñadores, empresas y grupos de trabajo utilizarán formas distintas. Incluir la leyenda para explicar cómo muestras tu trabajo es una buena práctica. ::: ### Más cerca del prototipo Una vez que tienes el Diagrama de Flujo, puedes utilizarlo para crear un mapa con las páginas de tu aplicación y elaborar un boceto de baja fidelidad para cada página en tu flijo. Estas pantallas te ayudarán a llevar tus ideas a la realidad con más detalle en su estructura. ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_1a5b54070d89315045c095de980edb1f.png) Este diagrama te puede servir principalmente para dos cosas: 1) Evaluar con otros miembros del equipo o grupos de interés que has entendido el proceso o que has elaborado uno que ayuda al usuario a completar sus objetivos en la aplicación 2) Te sirve de guía para comenzar a diseñar las pantallas. Al final del proceso, el prototipo mostrara el User Flow que diseñaste con solo palabras ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_0cf57100c5632b8a705a4dcc28b5c453.jpg) ### Prueba tus User Flows La mejor manera de saber si un User Flow tiene sentido es probándolo. ![](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_e4188206d0a720c5b1e2a5ff98b17627.jpeg) Cuando estés diseñándolos es importante preguntar algunas cosas en conversaciones con usuarios y grupos de interés: - ¿Qué intenta lograr el usuario? - ¿Qué es importante para el usuario y qué le dará confianza para continuar el proceso? - ¿Qué información adicional necesitará el usuario para completar la tarea? - ¿Cuáles son las posibles dudas o barreras que pueda tener el usuario para completar la tarea? Estas respuestas te ayudarán a definir qué le falta o le sobra a tu User Flow. ## Recursos Adicionales en Inglés - [ConversionXL: How to design User Flows](https://conversionxl.com/how-to-design-user-flow/) - [UX Movement: Site Flow vs User Flow](http://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/) - Nielsen Norman Group: [Wireflows](https://www.nngroup.com/articles/wireflows/) - Combining User Flows and Wireframes: [User Flow Diagrams](http://wireframes.linowski.ca/tag/user-flow/) - [Optimizely: User Flows](https://www.optimizely.com/optimization-glossary/user-flow/)