User Flow & User Stories: Qué son los Flujos e Historias de Usuarios y Cómo Crearlos

A la hora de diseñar una app o web debemos separar el objetivo que persigue nuestro diseño del aspecto que tenga como también de la sensación que nuestro diseño provocará en el usuario.

Por ello, es vital diseñar teniendo en mente siempre lo que el usuario necesita hacer en esa app o web para integrarlo en el diseño de la formas más eficiente posible. Y eso se conoce como definir los flujos de usuario (o user flow).

Esta definición de los flujos de usuario, que coloca el diseño en el centro del proceso, nos ayuda a que nuestra app o web tenga una mejor experiencia de usuario, es decir, sea cómoda y sencilla de usar por parte del usuario.

Pero ojo, este concepto sobre el que queremos centrar este nuevo post y que a priori parece tan sencillo, a veces se confunde con otros conceptos de la disciplina del UX que parecen similares.

En este post te explicaremos esas diferencias entre user flow, task flow y user journey, y te explicaremos cómo puedes crear un flujo de usuarios en pocos pasos.

Una vez explicados los flujos de usuarios (y sus diferencias con otros conceptos), hablaremos de las historias de usuario (user stories) para describir al detalle las características y funcionalidades de un producto desde el prisma del propio usuario respondiendo a un cómo, a un quiero y a un para.

¡Dentro post!

User flow: qué es y como crearlo

Primero, empezaremos con las diferencias que existen entre los diferentes conceptos que evocaremos en este post, para que lo tengas todo claro antes de empezar.

Diferencias entre user flow, task flow, customer journey y user journey

En el mundillo del UX hay muchos conceptos que muchas veces pueden resultar confusos. Tres de estos conceptos son los flujos de tareas (task flow), los flujos de usuarios (user flow) y los user journeys (que nos negamos a traducir porque, siendo sinceros, no se suele usar “viaje del usuario” a no ser que sea para referirnos a otra cosa).

Veamos sus diferencias.

Task flow

El flujo de tareas, más conocido como task flow, es un diagrama en el que pintamos el trayecto que debe realizar un usuario para llevar a cabo una tarea concreta.

Para que el UX researcher (que es quien suele desarrollar los flujos de tareas de una app web) pieda mostrar el trayecto lógico de 1 tarea en cuestión, deberá tener en cuenta siempre su principio y su fin.

User flow

Si en el flujo de tareas lo hemos definido como el trayecto que debe realizar un usuario para una tarea concreta, el flujo de usuarios (más conocido también como user flow) es el trayecto que realizarán distintos usuarios para realizar todas las tareas que permita la app o web sobre la que estemos trabajando. Por ejemplo, si una app te permite comprar y vender productos de segunda mano (guiño, guiño), el flujo de usuario servirá para definir cómo realizarán las distintas tareas (comprar y vender productos de segunda mano) los distintos usuarios (compradores y vendedores).

Te puede interesar | 7 Consejos para Diseñar Botones UX/UI

Determinando todos los trayectos posibles que permite esta app de compra venta (de productos de segunda mano, sí), podremos tanto los trayectos más comunes (comprar y vender) como aquellas tareas o áreas que resulten conflictivas (qué ocurre cuando un comprador quiere poner un producto a la venta) para reducir todo lo posible la fricción*

Y ¿qué es la fricción?

En UX entendemos la fricción como el indicador que mide la dificultad que puede tener un usuario para llevar a cabo una tarea concreta. La fricción se mide tanto cuantitativa como cualitativamente.

Customer journey vs. user journey

Y seguimos rizando el rizo.

Si ya tienes claro la diferencia entre task flow y user flow, agárrate a la silla que vamos ahora con el user journey, un concepto que nos acompaña a lo largo de todo nuestro viaje por el UX, pero que tiene un primo hermano que ya conocemos y que nos lo pondrá más fácil para entenderlo: el customer journey.

En marketing (general y sin apellidos) entendemos el customer journey como el proceso por el que viaja una persona, con una determinada necesidad, para comprar un producto o servicio. Y para definir el customer journey de una persona, se pinta un mapa (también conocido como customer journey map) que tiene en cuenta:

• El mapa de personas (posibles clientes)
• Un timeline (AKA línea del tiempo)
• Las posibles emociones que pueden sentir estos clientes durante su experiencia con este producto o servicios
• Los touchpoints (AKA puntos de contacto)
• Y las interacciones que podemos tener con estos posibles clientes

Pues bien, si el customer journey engloba la experiencia global de los usuarios, el user journey engloba la experiencia interactiva global de los usuarios y está diseñado para guiar a los usuarios hacia la toma de una decisión.

5 pasos para crear un user flow

1. Define a tu usuario

¿Conoces ya a tu usuario? Si no es así, dedica un poco de tiempo a descubrir y definir las necesidades de tu usuario. ¿Cómo es y qué le lleva a necesitar el producto o servicio que ofreces en tu app o web?

Una vez tengas identificado a tu cliente potencial y sepas reconocerlo fácilmente, estarás listo para el siguiente paso.

Para hacerlo más fácil, pongamos que nuestra usuaria se llama Lola, tiene 35 años y está embarazada de 3 meses, por lo que empieza a notar como va creciendo su barriguita. Ya es primavera y los petos que tiene no le sirven, por lo que busca uno premamá de segunda mano que esté casi nuevo y no le cueste un riñón.

Tú, por tu parte, tienes una app de compra venta de ropa de segunda mano.

2. Define los objetivos

¿Qué objetivos quieres estudiar? Siguiendo el ejemplo de Lola, el objetivo de ella es comprarse un peto premamá casi nuevo y a buen precio. Y tu objetivo es ponérselo fácil para que consiga cubrir su necesidad: comprar ese producto que está buscando.

3. Cómo llega el usuario a este objetivo

Una vez llegamos a este punto, debemos definir y dibujar todos los pasos que debe dar Lola para cumplir su objetivo.

Para no entrar en variables infinitas, partimos de la base de que Lola tiene descargada ya tu aplicación y está registrada en ella. En ese caso, los pasos que da Lola serán:

1. Busca “peto premamá” en el buscador de productos de tu app
2. Añade como estado de producto “como nuevo” a su búsqueda
3. Ordena los resultados obtenidos de su búsqueda por precio (de más económico a menos económico)
4. Entra en varias fichas de productos y revisa las fotos. Y decide abrirle un chat a 2 usuarias que venden 2 petos que le encajan por precio
5. Confirma con una de ellas (que encima vive super cerca y tiene muy buenas valoraciones) el peto elegido.
6. Clica en COMPRAR AHORA
7. Verifica sus datos personales y datos de envío (recordamos que Lola ya estaba registrada en tu app)
8. Selecciona y confirma su método de pago (usa Apple Pay)
9. Y finaliza la compra confirmando el pedido.

4. Descubre más vías para alcanzar el objetivo

No todos los caminos llevan a Roma, pero sí muchos de ellos.

Esta es una de las premisas más importantes a la hora de definir un user flow y es que, para nuestra Lola alcance su objetivo de comprarse un peto premamá casi nuevo y económico, no solo podrá seguir el trayecto que hemos explicado paso a paso en el punto anterior. Habrá más opciones que permitan que, si Lola no alcanza su objetivo por la vía A, quizás sí lo consiga por la vía B. Y esto dependerá de uno de los pasos que desde PICKASO consideramos más importantes al crear un user flow: cómo se siente el usuario paso a paso y a cada trayecto.

5. Cómo se siente el usuario

Para detectar los posibles puntos de fuga que hagan que nuestra usuaria, Lola, abandone el proceso de compra, es muy recomendable añadir cómo se siente tras avanzar en cada paso.

Para ello usaremos los principales estados de ánimo como son la alegría, la tristeza, la frustración, la incertidumbre o duda, el miedo, la inseguridad, la prisa o el aburrimiento.

User stories: qué son las historias de usuarios y cómo podemos estructurarlas

En diseño UX/UI, las «user stories» (historias de usuario) son una técnica utilizada para describir las características o funcionalidades de un producto desde la perspectiva del usuario final. Las user stories se centran en las necesidades y objetivos de los usuarios y son una forma efectiva de comunicar y comprender los requisitos específicos que tenga el proyecto en cuestión.

Una user story típica sigue una estructura simple que incluye tres elementos principales: cómo, quiero y para.

Rol del usuario: quién es el usuario o el tipo de usuario involucrado en la historia. Por ejemplo: «cómo una persona que acaba de descargarse tu app y la abre por primera vez»

Acción del usuario: se especifica qué acción realiza el usuario en relación con el producto o la funcionalidad. Por ejemplo: «quiere realizar una búsqueda en la app»

Objetivo del usuario: Se establece el resultado o beneficio que el usuario espera lograr al realizar esa acción concreta. Por ejemplo: «para ver la serie nueva que justo acaba de estrenar la app

Esta user stories se utiliza como base para desarrollar soluciones de diseño centradas en el usuario. Proporcionan una descripción concisa y fácil de entender de los requisitos, lo que ayuda a los diseñadores y desarrolladores a comprender las necesidades de los usuarios y crear experiencias satisfactorias.

Dicho de otra forma: las users stories ayudan a diseñadores y desarrolladores a ponerse en la piel de los usuarios y a diseñar y desarrollar las funcionalidades de su producto con el único objetivo de cubrir las necesidades reales que tengan sus usuarios reales (y dejar de lado la paja).

4 pasos para crear User Stories

1. Identifica y entiende a los usuarios

Antes de comenzar a escribir user stories, es fundamental comprender a los usuarios y las necesidades que tienen. Realiza investigaciones, entrevistas o encuestas para recopilar información sobre tus usuarios objetivo. Esto te ayudará a definir los roles de los usuarios y comprender sus objetivos, motivaciones y desafíos.

2. Establece un formato claro

Utiliza un formato estándar para tus user stories que sea comprensible para todo el equipo de diseño y desarrollo. Un formato comúnmente utilizado sigue la estructura Cómo ->rol del usuario<- quiero ->acción del usuario<- para ->objetivo del usuario<-. Mantén las user stories breves, específicas y orientadas a resultados.

3. Prioriza las user stories

No todas las características o funcionalidades son igualmente importantes. Utiliza técnicas de priorización, como el método MoSCoW (Must have, Should have, Could have, Won’t have), para clasificar las user stories en función de su importancia para los usuarios. Esto ayudará a que los equipos (de producto y desarrollo) sepan dónde poner el foco a la hora de priorizar aquellas features que resulten más relevantes para los usuarios. Usease (vol. 2) a dejar de pensar desde nuestro prisma y visión para pensar desde el prisma y la visión de nuestros usuarios.

4. Feedback tolrato

Las user stories no son estáticas, pueden evolucionar a medida que se va obtieniendo más información o se van realizando pruebas de usabilidad. Fomenta la colaboración entre los equipos de diseño, producto y desarrollo junto a los usuarios para obtener feedback constante. A medida que se avanza en el proceso de diseño, las user stories pueden modificarse, agregarse o eliminarse según vayan cambiando las necesidades tanto del producto como de los usuarios.

4 Consejos Extras PICKASO a la hora de crear User Stories

1. Mantén el enfoque en el usuario

Recuerda que las user stories deben estar centradas en las necesidades y objetivos del usuario. Evita descripciones técnicas y concéntrate en lo que el usuario desea lograr. Punto pelota.

2. Utiliza un lenguaje claro y comprensible

Asegúrate de que las user stories sean fáciles de entender para todos los miembros del equipo, incluidos los diseñadores, desarrolladores y usuarios. Evita el uso de jergas o tecnicismos innecesarios. Emplea un lenguaje sencillo y conciso para transmitir claramente la intención de la user story.

3. Divide las user stories en tareas más pequeñas

Si una user story es demasiado grande o compleja, es recomendable dividirla en tareas más pequeñas y manejables. Esto permite un seguimiento más preciso del progreso. Además, las tareas más pequeñas son más fáciles de comprender y abordar por parte del equipo.

4. Involucra a los stakeholders relevantes

Los stakeholders desempeñan un papel crucial en la definición de los requisitos del producto. Asegúrate de involucrar a los stakeholders clave en el proceso de creación de user stories. Su perspectiva y conocimiento pueden enriquecer las historias y garantizar que se aborden las necesidades y expectativas de todas las partes interesadas.

En resumen…

No diseñamos una app o web para que nos resulte bonita visualmente (que también). Diseñamos para ponerle fácil el uso de nuestra app o web a nuestros usuarios, para que su paso por ella sea lo más intuitivo posible y consiga el objetivo que le hemos propuesto, haciendo que nuestra app o web sea eficaz y eficiente.

Una forma de dictaminar la eficiencia y usabilidad de nuestra app es definiendo su flujo de usuarios o user flow, a través del cuál podremos pintar todos los trayectos posibles por los que pueden moverse nuestros usuarios en nuestra app o web.

Pero crear el user flow no es solo cuestión de dibujar el total de trayectos con el que cuenta nuestra app o web. No. A la hora de definir un user flow, hemos de tener también muy claro, cómo son nuestros usuarios (y qué necesidades tienen para llegar a nuestro producto o servicio); cuáles son los objetivos de nuestro producto o servicio así como los objetivos de nuestros usuarios; de qué formas y por cuántas vías pueden nuestros usuarios alcanzar sus objetivos; y en función de los trayectos que les presentamos en nuestra app o web, cómo se sienten nuestros usuarios.

Y sí, se trata de un proceso realmente bonito, estratégico y metódico, donde se mezcla diseño, arquitectura de la información, diseño de contenidos y psicología.

Si tienes una app o web y necesitas que te echemos una mano con tu producto o servicio, no dudes en ponerte en contacto con nosotros. Estaremos encantados en ayudarte a pintar el flujo de usuarios de tu app para llegar de una forma más eficiente a tus usuarios, haciendo tu app más accionable a la par que aumentas su retención.