+

# ¿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:


Por ejemplo:

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.


- 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


:::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.


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


### Prueba tus User Flows

La mejor manera de saber si un User Flow tiene sentido es probándolo.


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/)