DISEÑO UX/UI

Clase 9
User Flow
Les damos la bienvenida
Vamos a comenzar a grabar la clase
 Clase 08 Clase 09 Clase 10

Arquitectura de la Información User Flow Repaso e Integración

Detalle: Detalle: Detalle:

● ¿Qué es un User Flow?
● ¿Qué es un mapa de sitio? ● Tipos de flujo de usuario ● Repaso de todos los ejercicios
● Cardsorting ● Task Flow y Flow Chart que forman parte de la Entrega
● Optimal Workshop ● ¿Qué es el Happy Path? Final.
● Whimsical ● Tarea para el Proyecto Final ● Ejemplo de entregas
● Tarea para el Proyecto Final ● Espacio de consulta
 Diseño Centrado en el Usuario (DCU)

Analizar Diseñar Validar

Design Thinking

Empatizar Definir Idear Prototipar Evaluar

POV Arquitectura de Información

MVP User Flow

¿Qué significa User Flow?
Podemos definir User Flow como la ruta que sigue un usuario en un
sitio web o aplicación para completar una tarea. El flujo de usuario
comprende desde el punto de su entrada sumando el conjunto de
pasos que ejecuta hasta que completa la tarea con un resultado
exitoso.
Definir los flujos de usuario conduce a una mejor experiencia de
usuario, ya que lo coloca en el centro del proceso de diseño.
Ejemplo de User Flow
User Flow:
Es importante diseñar teniendo en cuenta los flujos de usuario y por lo
tanto centrarnos en lo que el usuario necesita hacer y cómo integrarlo de la
manera más eficiente y efectiva posible.
Existen una serie de preguntas que nos ayudarán a definir el flujo de usuario:
● ¿Qué está tratando de lograr el usuario?
● ¿Qué es importante para el usuario y qué le dará confianza para
continuar?
● ¿Qué información adicional necesitará el usuario para realizar la tarea?
● ¿Cuáles son sus dudas, frustraciones o barreras para realizar la tarea?
User Flow y Diagrama de Flujo:
Los user flows son un elemento más del diseño y preparación del proyecto
de un entorno digital, ya que nos permite identificar situaciones futuras y
necesidades del usuario dentro de nuestra web o aplicación.
La manera más común para representar los flujos de usuario es
mediante diagramas de flujo (Flow charts), en los cuales representamos,
de manera separada, cada paso que lleva a cabo el usuario.
El diagrama de flujo o flow chart es una manera de representar
gráficamente un proceso a través de una serie de pasos bien estructurados
y relacionados que permiten comprender un todo.
Diagrama de Flujo
Diagrama de Flujo

Los diagramas de flujo se realizan de izquierda a derecha y de arriba

a abajo. Es importante en su realización evitar el cruce de líneas para
facilitar la comprensión global del proceso.

Para el user flow suelen utilizarse una serie de figuras geométricas

que representan cada paso del proceso. Estás formas ya están
definidas y se conectan entre sí a través de flechas y líneas que
marcan la dirección del flujo y determinan el recorrido.
Figuras Geométricas:
Flechas - Dirección de flujo:
¿Cuándo creamos los user flow?

Lo ideal es crear los flujos de usuarios lo más pronto posible, justo

después de definir la arquitectura de la información y
preferiblemente antes de comenzar con el diseño y desarrollo de la
interfaz. Si diseñamos la interfaz visual sin determinar los elementos
con los que interactúa un usuario al navegar podría generarnos
muchos problemas y futuras revisiones.
¿Cómo creamos un user flow?

● Definir la tarea que llevará a cabo el usuario.

● Listar los pasos a hacer por el usuario para completar un objetivo
o tarea determinada (Task flow).
● Agregar los posibles errores y cómo recuperarse de ellos.

Siempre simplifica la cantidad de pasos para completar una tarea.

 Task Flow

El flujo de tareas, más conocido como task flow, es un diagrama que

representa el trayecto que debe realizar un usuario para llevar a
cabo una tarea concreta.

Entrada donde comienza la tarea - Acción (Seleccionar Elegir Tocar) - Acción (Seleccionar Elegir Tocar) - Acción donde finaliza la tarea
. con éxito.
User flow

El User Flow, es un diagrama que representa el trayecto que realiza

un usuario para realizar todas las tareas posibles en mi app o web.

Inicio

Fin
Whimsical
Es una herramienta online gratuita súper intuitiva y simple de usar, utilizaremos
el “Flowchart” para diagramar:
Usar lo aprendido hasta el momento

Con las conclusiones obtenidas del MVP, POV, Storyboard y la

arquitectura de la información, podremos realizar un Task flow
rápidamente basado en la problemática y necesidad de mi user
persona, permitiéndole realizar la tarea, con éxito, para la cual
descargo la app de la forma más simple posible.
¿Qué es el Happy Path?
En el contexto del modelado de software o información, un camino
feliz es un escenario predeterminado que no presenta condiciones
excepcionales o de error.
En Design Thinking empleamos el término Happy path para describir el
escenario de uso, en el cual un usuario toma el camino más corto para
la consecución de un objetivo concreto, y en el que además todos los
puntos de contacto e interrelación entre él y el producto le satisfacen.
Happy Path:
Cuando empezamos a imaginar un producto, lo hacemos pensando en el camino óptimo para el usuario. Y en cuán
satisfactoria será su experiencia al finalizar su recorrido por este Happy Path. El siguiente Task Flow muestra el proceso de
compra de una barra de pan a través de un Happy Path.

Sin embargo, todos sabemos que los errores ocurren constantemente. Y que, para llegar a Roma el usuario puede usar más de
un camino. Si quieres evitar que tus clientes se vayan a casa sumergidos en un mar de lágrimas, o a otra panadería, debes tener
en cuenta la mayoría de caminos probables y prevenir cuantos más errores o distracciones mejor.

Para empezar, y antes de ponerte a diseñar pantallas, piensa. De lo que se trata es de no dejar al usuario en un callejón sin
salida cuando esté utilizando tu aplicación. Dibuja el diagrama de flujo de cada Happy path de tu aplicación, que resuelva un
objetivo concreto (pedir cita médica, cancelar una cita, cambiar la contraseña…).
 Ejercicio
Clase 9
Realizar el Task Flow con
Whimsical
Tarea para el Proyecto:
Para comenzar a diseñar la interfaz del prototipo del Proyecto Final que vamos a desarrollar:

Comenzaremos realizando en whimsical el Task Flow de nuestro proyecto. Luego podremos realizar el User
Flow, empezando con la Función principal de nuestra app (happy path), después le sumaremos los posibles
errores que puedan surgir y por último las demás tareas o funcionalidades que vayan a formar parte de la
primera versión (MVP) de nuestro proyecto.

Para ello necesitaremos previamente tener hechos:

● User persona
● MVP
● POV - Storytelling + Storyboard
● Arquitectura de la información
● Analizar e interpretar las conclusiones de nuestros informes previos.

Aclaraciones: Deben utilizar las figuras geométricas sugeridas en esta clase como código para los diagramas, el
diagrama se realiza de izquierda a derecha, arriba a abajo, tiene un comienzo y un fin, en lo posible acomodarlo
de forma que no se crucen las flechas.
Ejemplo de entrega:
POV
Pilar es una estudiante avanzada
que vive en Buenos Aires. Ya ha
hecho terapia antes.
Ella necesita encontrar a un
psicólogo que se adecue mejor a
sus necesidades y la ayude a
superar esta etapa de su vida,
porque quiere sentirse mejor y más
realizada.
STORYBOARD
Nos ayuda a predecir y
explorar visualmente la
experiencia de un usuario
con un producto.

Facilita la tarea de
comprender cómo las
personas podrían
interactuar con la app.
 MVP
IMPRESCINDIBLES DESEABLES
(versión lanzamiento) (más adelante)

Mi cuenta Mi cuenta
● Datos personales: nombre y apellido, dni, ● Gestionar mis turnos.
email, ciudad, género, fecha de ● Configurar preferencias que permitan búsquedas y
nacimiento, motivo de consulta. sugerencias más efectivas.
● Sugerencias. ● Mis valoraciones y reseñas realizadas sobre el profesional.
Buscar psicólogo ● Dar de baja (cuenta).
● Medios de pago.
● Filtrar por problemática del paciente
(ejemplo: adicción, trastorno alimenticio, Conectar usuarios
fobias, duelo, depresión, ansiedad, etc.), ● Chat entre paciente y profesional.
tipo de terapia (psicoanálisis, TCC, Buscar psicólogo
sistémica, etc.), costo, disponibilidad
● Mejorar el filtro (valoraciones).
horaria del profesional, zona geográfica.
● Gestionar todos los turnos con el profesional.
● Agendar un primer turno con el
● Testimonios sobre la app.
profesional.
Historia clínica
● Gestionar la historia clínica del paciente para que el
psicólogo que derive pueda registrar información del
paciente.
 ARQUITECTURA
DE LA INFORMACIÓN
04 Se organiza la información de la forma más clara
posible para que la app tenga una buena usabilidad.
Realizamos un Card Sorting, técnica que se basa en
observar cómo los usuarios agrupan y asocian entre sí
una serie de tarjetas.
Cards utilizadas 1.
2.
Agenda
Blog
3. Chat con el terapeauta
4. Cómo funciona?
5. Datos personales
6. Disponibilidad horaria
7. Edad del terapeuta
8. Género del terapeuta
9. Historia clínica
10. Medios de pago
11. Mis turnos
12. Preferencias
13. Problemática
14. Reseña del terapeuta
15. Sobre nosotros
16. Testimonios
17. Tipo de terapia
18. Valor de la sesión
19. Valoraciones
20. Zona de atención
MATRIZ DE SIMILITUD
Utilizando la Matriz de Similitud basada
en los resultados del Card Sorting Abierto
podemos ver que las personas que
completaron el estudio agrupan las
siguientes palabras/conceptos:
● Datos personales - Historia Clínica
● Género del terapeuta - Tipo de
terapia - Disponibilidad Horaria -
Zona de atención - Valor de la
sesión - Reseña del terapeuta
● Valoraciones - Testimonios
● Sobre nosotros - Cómo funciona?
● Mis turnos - Historia Clínica
 DENDROGRAMA
A partir del estudio de Card Sorting Abierto, 10 de 17 personas completaron el estudio, el
80% de Argentina, con un tiempo promedio de 7 minutos, y la mayoría generando 4
categorías.
Conclusión
Visualizando el Dendrograma (Best Merge Method) y analizando su
información se concluye lo siguiente:

1 Comprensión
No se comprendió correctamente la
etiqueta “Medios de pago” ya que

2
apuntaba a ser la sección donde la
persona realice el pago de sus sesiones. Categorización
El “Chat” fue separado y convertido en
3 Agrupación una categoría aparte por la mayoría de
las personas que completó el estudio.
La mayoría de las personas agrupó los
distintos filtros de búsqueda en una
categoría llamada “Buscador” o similar.
Se colocaron los datos personales dentro
de “Mi perfil” o similar.
Estructura de la App
Con toda la información obtenida realicé el
siguiente diagrama para la App utilizando
las 4 secciones principales:
● BUSCADOR
● SOBRE NOSOTROS
● MI PERFIL
● CHAT
 DIAGRAMAS DE FLUJO
05 Mediante los diagramas, comenzamos a pensar el trayecto
que recorren los usuarios para realizar todas las tareas
posibles que permitirá el sistema.
TASK FLOW
Pilar entra a la app para buscar un terapeuta.
 USER FLOW

Link: Ejemplo de User Flow

 Conclusión
● Se construyó el Task Flow (diagrama de tareas) en base
al POV, MVP, Arquitectura de la Información y el
Storyboard para clarificar cuáles serán las tareas que el
usuario deberá realizar.
● Se realizó el Task Flow del user persona para solucionar
la problemática seleccionada. A partir de este flujo se
generó el User Flow.
● Se armó el User Flow y se definió la funcionalidad
principal (Happy Path) para diagramar la búsqueda de
psicólogo, luego se sumaron posibles problemas
(errores de validación). Finalmente, se completaron el
resto de las funcionalidades (reservar primera sesión).
● El User Flow proporcionó una visión general de cómo
será la interfaz de la App.
 06
CONCLUSIÓN
GENERAL
Toda nuestro proyecto en pocas palabras
 CONCLUSIÓN GENERAL
La idea principal fue crear una app para la búsqueda de psicólogo, para solucionar el problema de
dificultad y tiempo que conlleva normalmente dicha búsqueda.
Investigamos qué otras aplicaciones similares había en el mercado y las comparamos mediante
un benchmarking que nos definió cada una de sus fortalezas y debilidades.
Se creó el perfil de Pilar para darle voz y vida a todos nuestros futuros usuarios que sufren esta
problemática, validando con 5 entrevistas su perfil, necesidades, frustraciones, pensamientos y
sentimientos. Con Pilar en mente creamos el Point of view y le dimos forma con un Storyboard.
Realizamos un Card Sorting Abierto donde 10 participantes nos ayudaron a definir las categorías y
grupos de nuestra futura App, y basándonos en sus resultados creamos el Task Flow y el User
Flow para ver cómo sería paso a paso la usabilidad de nuestra aplicación.
Al finalizar esta toda esta etapa de análisis tenemos en claro quién es nuestro usuario, cuál es su
problema y qué funciones debe tener nuestra App para solucionarlo, cómo debe estar organizada
para que sea comprensible y fácil para el user persona (Pilar) y como podría ser en su versión 2.0.
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.

Todo en el Aula Virtual.

Muchas gracias por tu atención.
Nos vemos pronto