USERFLOWS
Clase. DISEÑO UX/UI
Arquitectura de Información: El estudio de la organización de la información con el objetivo de permitir al usuario encontrar su vía de navegación hacia el conocimiento y la comprensión de la información.
Whimsical: Herramienta que nos sirve para generar diagramas tanto de usuario como de arquitectura de información.
GLOSARIO:
Cardsorting: Es una técnica que se basa en observar cómo los usuarios agrupan y asocian entre sí un número de tarjetas etiquetadas con las diferentes categorías/secciones de un producto o servicio digital.
Optimal Workshop: herramienta que nos permite realizar un cardsorting con usuarios de manera virtual.
Idear: tercera etapa de la metodología Design Thinking o Pensamiento de Diseño. En esta etapa todas se combina el pensamiento racional y la imaginación. El objetivo es pensar y evaluar soluciones.
No se trata de encontrar la idea correcta, se trata de crear la mayor cantidad de ideas posibilidades.
GLOSARIO:
OBJETIVOS DE LA CLASE
MAPA DE CONCEPTOS
Empatizar
Definir
Idear
Prototipar
Evaluar
Userflow basado en Flowchart
Design Thinking
Diseño Centrado en el Usuario
Pensamiento de Diseño
Design Sprint
Arq de Información
MVP
Task Flow
Analizar
Diseñar
Validar
¿ARRANCAMOS?
USERFLOW
Es el trayecto o proceso que realizan diferentes usuarios para realizar todas las tareas posibles que permita el sistema.
Si nuestro sistema permite una cantidad X de posibilidades ,
el Userflow sirve para determinar cómo los diferentes usuarios realizan las tareas, para así determinar trayectos más comunes e identificar áreas conflictivas reduciendo la fricción.
USERFLOW
Tarea y decisiones en un Userflow
VEAMOS QUE TIPOS DE DIAGRAMAS EXISTEN
TIPOS DE FLUJOS DE USUARIO
TASKFLOW
FLOWCHART
WIREFLOWS
USERFLOW
Taskflow o (diagrama de tareas) se enfoca en las tareas que tiene que realizar el usuario en cada paso para llegar a un objetivo. Se centran en cómo los usuarios viajan a través de la app o web mientras realizan una tarea específica. Por lo general, sólo muestran una ruta y no incluyen múltiples ramas o rutas como lo haría un flujo de usuario tradicional. Cuando se utilizan flujos de tareas, se supone que todos los usuarios compartirán un punto de partida común y no tendrán variabilidad en la forma en que se lleva a cabo la tarea.
Taskflow
ENTRADA
ACCIÓN
FIN
Flow Chart (diagrama de flujo) es la representación gráfica de un proceso. Se utiliza en disciplinas como programación, economía, procesos industriales y psicología cognitiva. Representación visual de la secuencia de pasos y decisiones necesarias para realizar un proceso. Cada paso en la secuencia se anota dentro de una forma de diagrama. Los pasos están vinculados mediante líneas de conexión y flechas direccionales. Esto permite que cualquiera pueda ver el diagrama de flujo y seguir lógicamente el proceso de principio a fin.
Flowchart
ENTRADA
ONBOARDING
HOME
INICIO SESIÓN
REGISTRO
DECISIÓN
OPCION 1
OPCION 2
Combinación de wireframes con el formato Flow Chart para representar las interacciones del usuario. Utilizan el diseño de pantallas individuales como elementos dentro del diagrama. Los wireframes por sí mismos ayudan a transmitir el diseño en cada página individual, pero carecen de la capacidad de comunicar el flujo de página a página de interfaces muy dinámicas.
Wireflow
Nos ayuda a comprender mejor los pasos que realiza un usuario a través de un servicio, aplicación o sitio web completo. Se centran en la forma en que su público objetivo interactúa con el producto. Enfatizan que todos los usuarios pueden no realizar las mismas tareas y pueden viajar en diferentes caminos. Combina el flowchart, wireflow.
Userflows
AHORA BIEN, VEAMOS EL DIAGRAMA QUE UTILIZAREMOS EN UX
USERFLOW BASADO EN FLOWCHART
Diagrama de usuarios basado en el
diagrama de flujo de procesos
Nos apoyaremos en el task flow para clarificar cuáles son las tareas que el usuario debe realizar. Luego usaremos el userflow (pero ojo, sin los wireframes aun -SPOILER ALERT: la clase que viene veremos ese tema-) solo usaremos el diseño de las cajas y los conectores del flowchart.
USERFLOW BASADO EN FLOWCHART
Diagrama de usuarios basado en el diagrama de flujo de procesos
El diagrama de flujo 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.
Suelen utilizarse una serie de figuras geométricas que representan cada paso del proceso. Estás formas 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.
USERFLOW
Identificar la tarea que queremos que realice el usuario
Diseñar el camino más sencillo en pasos
Empezar a sumar los posibles problemas o fallos
1
2
3
PASOS PARA CREARLO
Utilizaremos 5 modelos de cajas, cada una tendrá una función
DECISIÓN
PROCESO
INTERACCIÓN CON USUARIO
COMIENZO / CIERRE
DIRECCIÓN
ERROR
EXISTEN OTRO TIPO DE SÍMBOLOS. EN ESTE CURSO USAREMOS ÉSTOS:
PROCESO
El rectángulo simboliza los pasos en el proceso. Desde la acción o paso inicial hasta la acción principal que el usuario puede recorrer para obtener la solución que ofrece tu producto o servicio.
Utilizaremos 5 modelos de cajas, cada una tendrá una función
DECISIÓN
El rombo simboliza las decisiones. Define, con flechas, dos caminos posibles. Es una decisión binaria (si o no / a o b)
SI
NO
A
B
Utilizaremos 5 modelos de cajas, cada una tendrá una función
COMIENZO / CIERRE
El óvalo simboliza el inicio
o el final en un diagrama de flujo. Desde una mirada lejana, nos ayuda a identificar dónde comienza y dónde termina el diagrama.
Utilizaremos 5 modelos de cajas, cada una tendrá una función
INTERACCIÓN
El paralelogramo simboliza la interacción del usuario con la app. Puede ser que el usuario deba introducir datos, seleccionar, filtrar elementos, solicitar permiso a otra aplicación etc.
Utilizaremos 5 modelos de cajas, cada una tendrá una función
El círculo se relaciona íntegramente con la caja “decisión” la misma muestra la posible falla o error.
ERROR
Utilizaremos 5 modelos de cajas, cada una tendrá una función
DECISIÓN
NO
DIRECCIÓN
El símbolo de flecha se usa para representar una dirección de flujo. Estas flechas, en la caja de decisión, definen qué camino es. También sirve para identificar el recorrido de un usuario en particular.
Utilizaremos 1 modelos de conector.
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.
DIAGRAMA DE FLUJO
VEAMOS TODO JUNTO
Funcionamiento de un Userflow
PROCESO
PROCESO
INTERACCIÓN
DECISIÓN
COMIENZO
FIN
ERROR
SI
NO
DECISIÓN
SI
NO
VEAMOS SU ANATOMIA
Ejemplo de Userflow con modelo de cajas
HOME
DESTINOS
SELECCIONAR DESTINO
¿PRIMERA VEZ
QUE INGRESAS?
COMIENZO
INICIO SESIÓN
INGRESAR DATOS DE REGISTRO
DATOS DE LOGIN
¿LOGIN VALIDO?
¿REGISTRO VALIDO?
ERROR
ERROR
SI
NO
NO
SI
SI
NO
INFO ACTIVIDADES
SELECCIONAR ACTIVIDAD
RESERVA
INGRESAR CANTIDAD DE PERSONAS
¿COMPRAR?
FIN
INGRESO MEDIO
DE PAGO
SI
NO
Ejemplo de Userflow con modelo de cajas
HOME
DESTINOS
SELECCIONAR DESTINO
¿PRIMERA VEZ
QUE INGRESAS?
COMIENZO
INICIO SESIÓN
INGRESAR DATOS DE REGISTRO
DATOS DE LOGIN
¿LOGIN VALIDO?
¿REGISTRO VALIDO?
ERROR
ERROR
Si
No
NO
SI
SI
NO
INFO ACTIVIDADES
SELECCIONAR ACTIVIDAD
RESERVA
INGRESAR CANTIDAD DE PERSONAS
¿COMPRAR?
FIN
INGRESO MEDIO
DE PAGO
SI
NO
INICIO DE SESIÓN Y REGISTRO
Ejemplo de Userflow con modelo de cajas
HOME
DESTINOS
SELECCIONAR DESTINO
¿PRIMERA VEZ
QUE INGRESAS?
COMIENZO
INICIO SESIÓN
INGRESAR DATOS DE REGISTRO
DATOS DE LOGIN
¿LOGIN VALIDO?
¿REGISTRO VALIDO?
ERROR
ERROR
SI
SI
SI
NO
INFO ACTIVIDADES
SELECCIONAR ACTIVIDAD
RESERVA
INGRESAR CANTIDAD DE PERSONAS
¿COMPRAR?
FIN
INGRESO MEDIO
DE PAGO
SI
NO
MAIN FEATURE
(COMPRAR UN VIAJE)
NO
NO
Ejemplo de Userflow con modelo de cajas
HOME
DESTINOS
SELECCIONAR DESTINO
¿PRIMERA VEZ
QUE INGRESAS?
COMIENZO
INICIO SESIÓN
INGRESAR DATOS DE REGISTRO
DATOS DE LOGIN
¿LOGIN VALIDO?
¿REGISTRO VALIDO?
ERROR
ERROR
SI
No
NO
SI
SI
NO
INFO ACTIVIDADES
SELECCIONAR ACTIVIDAD
RESERVA
INGRESAR CANTIDAD DE PERSONAS
¿COMPRAR?
FIN
MIS RESERVAS
¿RESERVAR O GUARDAR?
NO
GUARDAR
RESERVAR
INGRESO MEDIO
DE PAGO
SI
ACTIVIDAD INDIVIDUAL
10-12 MINUTOS
TE RECOMIENDO QUE ANTES DE HACER TU USERFLOW REALICES TU TASKFLOW
El usuario selecciona destino a partir de filtros
El usuario ve todas las actividades
El usuario selecciona cantidad de personas
El usuario hace el pago de la actividad
El usuario compró la actividad
El usuario entra a la sección DESTINOS
Ejemplo de Taskflow
VEAMOS SU ANATOMIA
Ejemplo de Taskflow
ENTRADA: POR DONDE COMIENZA LA TAREA
El usuario selecciona destino a partir de filtros
El usuario ve todas las actividades
El usuario selecciona cantidad de personas
El usuario hace el pago de la actividad
El usuario compró la actividad
El usuario entra a la sección DESTINOS
El usuario entra a la sección DESTINOS
ACCIONES: LO QUE DEBE SELECCIONAR, TOCAR, ELEGIR EL USUARIO
El usuario selecciona destino a partir de filtros
El usuario ve todas las actividades
El usuario selecciona cantidad de personas
El usuario hace el pago de la actividad
El usuario compró la actividad
Ejemplo de Taskflow
ÉXITO: LA ACCIÓN CON LA QUE SE DA POR FINALIZADA LA TAREA.
El usuario selecciona destino a partir de filtros
El usuario ve todas las actividades
El usuario selecciona cantidad de personas
El usuario hace el pago de la actividad
El usuario compró la actividad
El usuario entra a la sección DESTINOS
Ejemplo de Taskflow
EL USERFLOW ADMITE CAMINOS DIFERENTES PARA CADA ARQUETIPO DE USUARIO. VEAMOS UN EJEMPLO
Ejemplo 1
Ejemplo 2
Ejemplo 3
OBJETIVOS DE UN USERFLOW
BENEFICIOS DE USERFLOW
Mejorar la facilidad de uso del prototipo, asegurando que el tiempo del usuario no se desperdicie buscando qué hacer a continuación. Los flujos de usuarios representan estos posibles patrones de una manera que facilita a los diseñadores evaluar la eficiencia de la interfaz que están creando.
1
Crear una interfaz intuitiva
Ayudan a determinar qué funciona, qué no y qué áreas necesitan mejoras. Ayuda a identificar por qué los usuarios podrían estar atascados en cierto punto y qué puede hacer para solucionarlo. ¿Una pantalla fluye a la siguiente? ¿Tiene sentido el patrón de las pantallas?
2
Evaluar las interfaces existentes
Comunican fácilmente el flujo a tus pares y proporcionan una visión general de cómo funciona la interfaz. Proporcionan un desglose paso a paso de lo que el cliente verá y hará para comprar, iniciar sesión, registrarse, etc. Ayudar a tu equipo de diseño a visualizar cómo los usuarios se moverán por el producto garantiza que todos estén en la misma página.
3
Presentar su producto a clientes
¡PARA PENSAR!
La caja de decisión ¿Admite 3 caminos posibles?
SI O NO
ARMANDO EL USERFLOW
Paso a paso
VAMOS A USAR WHIMSICAL PARA REALIZAR NUESTRO USERFLOW
Herramientas para editar las formas geométricas
Herramientas para editar las formas geométricas
ANTES DE EMPEZAR REFRESQUEMOS EL MVP Y EL ARQUETIPO DE PERSONA
USERFLOW
Buscar Alquiler
Usuario que desea alquilar
Versión
Lanzamiento
Publicar alojamiento
Usuario que desea poner una propiedad para alquilar
Conectar Usuarios
Chat
Santiago
Freelancer
Tipo de Usuario:
Quiere alquilar.
"Me siento atado. Me gustaría viajar mientras trabajo freelance y así conocer nuevas culturas y potenciales contactos o clientes."
Genero:
Masculino
Edad:
30 años
Estado Civil:
Soltero
Ciudad: Colombiano con residencia europea
Es un usuario que por su trabajo quiere encontrar un alquiler que le permita no tener que mudarse todo el tiempo y por lo tanto no puede hacer lo que querría: viajar y trabajar a la par.
Motivaciones y Frustraciones
Frustraciones
Sobre Santiago
Bio: Santiago quiere aprovechar que es freelancer y viajar de lugar en lugar, pero no le gusta mudarse todas las semanas. Prefiere hacer base en un lugar por unos meses para trabajar de ahí e ir visitando en sus tiempos libres. Le gustaría conseguir clientes de otros países viajando.
Objetivos y Metas
Motivaciones
Habilidades
Tecnológicas: utiliza la tecnología tanto para trabajar como para cualquier otra necesidad.
Armando del Userflow
Iremos desarrollando cada una de las partes más importantes en la definición del userflow. Comenzaremos entendiendo el Task Flow (diagrama de tareas) del proyecto. A partir de ahí empezaremos a armar nuestro userflow, primero lo haremos con el camino ideal (sin errores) y definiremos cuáles es la funcionalidad principal que debemos diagramar. Luego se sumaremos posibles problemas. Por último marcaremos dentro del diagrama que recorrido corresponde a cada usuario.
USERFLOW
PRIMERO VAMOS A ENTENDER
SU TASK FLOW
El usuario entra a la sección reservas
El usuario selecciona una reserva que le realizaron
El usuario ve el detalle de la reserva
El usuario acepta la reserva del quien quiere alquilarlo
El usuario chatea con el posible inquilino del alojamiento.
Usuario que que tiene una casa, departamento o cuarto para alquilar
El usuario entra a la sección buscar
El usuario selecciona filtros
El usuario ve todas las búsquedas
El usuario selecciona un alojamiento
El usuario reserva el alojamiento
El usuario chatea con el dueño del alojamiento.
Taskflow de Usuario que desea alquilar por un mediano plazo (1 a 6 meses)
RECUERDA MANTENERLO SIMPLE. EL CAMINO IDEAL (SIN ERRORES)
¿CUAL ES LA MAIN FEATURE?
¿PRIMERA VEZ
QUE INGRESAS?
COMIENZO
INICIO SESIÓN
INGRESAR DATOS DE REGISTRO
HOME
RESERVAS
BUSCAR
FILTROS BÚSQUEDA DE ALQUILER
DETALLE ALOJAMIENTO
RESERVA
REALIZACIÓN DE RESERVA
CONFIRMACIÓN DE RESERVA
INGRESAR DATOS DE LOGIN
NO
SI
Userflow camino ideal
SELECCIÓN DE ALOJAMIENTO
FIN
SELECCIÓN DE RESERVAS
CHAT ENTRE PROPIETARIO Y INQUILINO
NO
¿ACEPTAR?
CHAT
SI
NOTIFICACIÓN DE ACEPTACIÓN
SUMEMOS LOS POSIBLES PROBLEMAS O FALLOS: ERROR DE LOGUEO Y DE BÚSQUEDA
¿PRIMERA VEZ
QUE INGRESAS?
COMIENZO
INICIO SESIÓN
INGRESAR DATOS DE REGISTRO
HOME
RESERVAS
BUSCAR
CHAT
FILTROS BÚSQUEDA DE ALQUILER
DETALLE ALOJAMIENTO
RESERVA
REALIZACIÓN DE RESERVA
CONFIRMACIÓN DE RESERVA
INGRESAR DATOS DE LOGIN
¿ACEPTAR?
ERROR
¿BUSQUEDA VALIDA?
¿LOGIN VALIDO?
¿REGISTRO VALIDO?
ERROR
ERROR
SI
NO
SI
SI
NO
NO
SI
SI
NO
Userflow con problemas y errores incorporados.
FIN
SELECCIÓN DE RESERVAS
CHAT ENTRE PROPIETARIO Y INQUILINO
NO
SELECCIÓN DE ALOJAMIENTO
NOTIFICACIÓN DE ACEPTACIÓN
POR ÚLTIMO PODEMOS MARCAR A QUÉ USUARIO CORRESPONDE CADA FLOW
El usuario entra a la sección buscar
El usuario selecciona filtros
El usuario selecciona un alojamiento
El usuario reserva el alojamiento
El usuario chatea con el dueño del alojamiento.
Taskflow de Usuario que desea alquilar por un mediano plazo (1 a 6 meses)
¿PRIMERA VEZ
QUE INGRESAS?
COMIENZO
INICIO SESIÓN
INGRESAR DATOS DE REGISTRO
HOME
RESERVAS
BUSCAR
CHAT
FILTROS BÚSQUEDA DE ALQUILER
DETALLE ALOJAMIENTO
RESERVA
REALIZACIÓN DE RESERVA
CONFIRMACIÓN DE RESERVA
INGRESAR DATOS DE LOGIN
¿ACEPTAR?
ERROR
¿BUSQUEDA VALIDA?
¿LOGIN VALIDO?
¿REGISTRO VALIDO?
ERROR
ERROR
SI
NO
SI
SI
NO
NO
SI
SI
NO
Usuario que desea alquilar por un mediano plazo (1 a 6 meses)
FIN
SELECCIÓN DE RESERVAS
CHAT ENTRE PROPIETARIO Y INQUILINO
NO
SELECCIÓN DE ALOJAMIENTO
NOTIFICACIÓN DE ACEPTACIÓN
El usuario entra a la sección reservas
El usuario selecciona una reserva que le realizaron
El usuario ve el detalle de la reserva
El usuario acepta la reserva del quien quiere alquilarlo
El usuario chatea con el posible inquilino del alojamiento.
Usuario que que tiene una casa, departamento o cuarto para alquilar
¿PRIMERA VEZ
QUE INGRESAS?
COMIENZO
INICIO SESIÓN
INGRESAR DATOS DE REGISTRO
HOME
RESERVAS
BUSCAR
CHAT
FILTROS BÚSQUEDA DE ALQUILER
DETALLE ALOJAMIENTO
RESERVA
REALIZACIÓN DE RESERVA
CONFIRMACIÓN DE RESERVA
INGRESAR DATOS DE LOGIN
¿ACEPTAR?
ERROR
¿BUSQUEDA VALIDA?
¿LOGIN VALIDO?
¿REGISTRO VALIDO?
ERROR
ERROR
SI
NO
SI
NO
SI
SI
NO
Usuario que que tiene una casa, departamento o cuarto para alquilar
FIN
SELECCIÓN DE RESERVAS
CHAT ENTRE PROPIETARIO Y INQUILINO
NO
SELECCIÓN DE ALOJAMIENTO
NOTIFICACIÓN DE ACEPTACIÓN
¿NOTÁS ALGUNA RELACIÓN ENTRE EL TASK FLOW Y LA CAJA DE INTERACCIÓN?
LAS TAREAS AYUDAN A DEFINIR CUÁLES SERÁN LAS ACCIONES QUE EL USUARIO DEBERÁ REALIZAR EN EL DIAGRAMA. ESTAS ESTARÁN DEFINIDOS POR LA CAJA DE INTERACCIÓN.
WHIMSICAL
ACCEDER
LLEGÓ EL MOMENTO.. VAMOS A CREAR NUESTRO PROPIO USERFLOW
USERFLOW
Realizar el userflow (diagrama de usuario) basado en el flowchart (diagrama de flujo) de tu proyecto.
USERFLOW | ||
Formato: Whimsical (herramienta sugerida para armar el userflow), Sugerencia: activar comentarios en el archivo. | | |
� >> Consigna: Realizar el userflow (diagrama de usuario) basado en el flowchart (diagrama de flujo) de tu proyecto. Respetar el uso de cada caja. Crear el userflow del producto que elegiste desde el inicio hasta la representación principal o main feature. | ||
USERFLOW | ||
Aspectos a tener en cuenta :
| ||
| | |
¡MUCHAS GRACIAS!
Resumen de lo visto en clase hoy: