Copia de NO-Clase 7 Userflow_

Vista previa del material en texto

USERFLOWS
 Clase 07. DISEÑO UX/UI
Obligatoria siempre. Lleva el ícono y el color del curso (provisto por CH).
RECORDÁ PONER A GRABAR LA CLASE
LO MAS RELEVANTE DE LA CLASE 6
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:
Clase 6
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:
Clase 6
Clase 7
Userflow
USERFLOW
ARMANDO EL USERFLOW
Clase 6
Arquitectura de Información
ARQ. DE INFORMACIÓN
ARMANDO LA ARQUITECTURA
Clase 8
Prototipado (Wiframe a Mano) & Creatividad
GENERANDO EL BOCETO
ENTREGA PROYECTO 2
LAS 8 IDEAS
CRONOGRAMA DEL CURSO
Profundizar en el Userflow y Taskflow.
Entender cómo se realiza correctamente un Userflow.
Profundizar Whimsical como herramienta para la realización de un userflow.
OBJETIVOS DE LA CLASE
No va, es para guiar el uso del template.
MAPA DE CONCEPTOS CLASE 7
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
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
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
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Tarea y decisiones en un Userflow
Usar para slides de imagen completa.
VEAMOS QUE TIPOS DE DIAGRAMAS EXISTEN
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
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
Usar para slides de imagen completa.
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
Usar para slides de imagen completa.
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 y 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
Usar para slides de imagen completa.
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
Usar para slides de imagen completa.
AHORA BIEN, VEAMOS EL DIAGRAMA QUE UTILIZAREMOS EN UX
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
USERFLOW BASADO EN FLOWCHART
Diagrama de usuarios basado en el
diagrama de flujo de procesos
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
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
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
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
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
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
Usar para slides de texto con gráfico de etapas/pasos.
Utilizaremos 5 modelos de cajas, cada una tendrá una función
DECISIÓN
PROCESO
INTERACCIÓN CON USUARIO
COMIENZO / CIERRE
DIRECCIÓN
ERROR
Usar para slides de imagen completa.
EXISTEN OTRO TIPO DE SÍMBOLOS. EN ESTE CURSO USAREMOS ÉSTOS:
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
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
Usar para slides de imagen completa.
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
Usar para slides de imagen completa.
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
Usar para slides de imagen completa.
INTERACCIÓNEl 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
Usar para slides de imagen completa.
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
Usar para slides de imagen completa.
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.
Usar para slides de imagen completa.
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
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
VEAMOS TODO JUNTO
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Funcionamiento de un Userflow
PROCESO
PROCESO
INTERACCIÓN
DECISIÓN
COMIENZO
FIN
ERROR
SI
NO
DECISIÓN
SI
NO
Usar para slides de imagen completa.
VEAMOS SU ANATOMIA
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
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
NO
SI
NO
SI
SI
NO
INFO ACTIVIDADES 
SELECCIONAR ACTIVIDAD
RESERVA 
INGRESAR CANTIDAD DE PERSONAS
¿COMPRAR?
FIN
INGRESO MEDIO
DE PAGO
SI
NO
Usar para slides de imagen completa.
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
NO
SI
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
Usar para slides de imagen completa.
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
Usar para slides de imagen completa.
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
NO
SI
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
Usar para slides de imagen completa.
TE RECOMIENDO QUE ANTES DE HACER TU USERFLOW REALICES TU TASKFLOW
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
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 
Usar para slides de imagen completa.
VEAMOS SU ANATOMIA
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
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
Usar para slides de imagen completa.
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 
Usar para slides de imagen completa.
EXITO: LA ACCIÓN CON LA QUE SE DA POR FINALIZA 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 
Usar para slides de imagen completa.
EL USERFLOW ADMITE CAMINOS DIFERENTES PARA CADA ARQUETIPO DE USUARIO. VEAMOS UN EJEMPLO
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Ejemplo 1
Usar para slides de imagen completa.
Ejemplo 2
Usar para slides de imagen completa.
Ejemplo 3
Usar para slides de imagen completa.
Sirve para observar el comportamiento del usuario.
Ayuda a visualizar objetivos que generan una experiencia del usuario positiva, tanto para obtener un mejor resultado para el usuario como para el negocio.
Como hay muchos tipos de usuarios, con distintos conocimientos y diferentes objetivos, se deben enfocar y priorizar los flujos (o trayectos del usuario) que impacten a la mayor cantidad de usuarios.
OBJETIVOS DE UN USERFLOW
Usar para slides de sólo texto con el contenido más importante de la clase. En una presentación de 50 slides usar máximo 5 de estas.
BENEFICIOS DE USERFLOW
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
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 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
CONTESTÁ LA ENCUESTA DE ZOOM
SI O NO
Duración estimada: 3 minutos
Espacio: Encuesta Zoom
El docente deberá habilitar esta encuesta desde poll zoom para que los alumnos respondan. Esto es una actividad de comprobación.
NOTA: retomar y mostrar los resultados de la encuesta a los estudiantes al volver el break. 
Pregunta: La caja de decisión ¿Admite 3 caminos posibles?
Opciones:
SI
NO
☕ BREAK
¡5/10 MINUTOS Y VOLVEMOS!
Obligatoria siempre.
ARMANDO EL USERFLOW
Paso a paso
Armado de Userflow: Paso a Paso
Duración estimada: 60 minutos
Herramientas: Whimsical
Consigna: El docente realizará el userflow del proyecto testigo. Se recomienda, como primera instancia, recordar el desafío de"MVP" y el de "Arquetipos de Personas". Esto se debe a qué para poder realizar el userflow es necesario tener presente el recorrido del usuario y cual es el MVP definido. Primero se recomienda realizar el task flow (diagrama de tarea) del usuario para comprender qué acción debe realizar para cumplir con su cometido. 
Una vez transcurrida la instancia de task flow pasamos directamente a la generación del userflow, el cual se llevará a cabo con whimsical (herramienta qué ya vimos la clase 6 cuando se realizó la arquitectura de información). En este punto tener presente y remarcar todo el tiempo los tipos de cajas y su uso ¿por qué usamos esta caja en esta instancia?. Una buena práctica es finalmente colocar en el recorrido la foto del usuario. Se puede empezar haciendo el userflow simple (sin las cajas de error) y luego sumarlo para qué se entienda el uso de esa caja dentro del diagrama. 
NOTAS:
1. Se incluye acá el segundo usuario ya qué la app tiene también la opción de quien quiere alquilar y que forma parte del userflow.
2. Diferenciar con colores cada una de las cajas y mostrar lo fácil que es hacerlo con whimsical.
3. Mostrar cómo de debe habilitar la opción de compartir para que los tutores puedan comentar el userflow directamente en el programa.
¿Cómo llevar adelante la actividad?
Paso 1: Recordar los puntos más importantes de Whimsical (uso de las cajas, como editarlas, cambio de color, uso de las líneas para conectar). 
Paso 2: Retomar el arquetipo y el MVP para el armado del userflow. Ambos documentos son importantes para mantenernos siempre en la generación del diagrama.
A partir de acá se comenzará a crear el userflow:
Paso 3: Comenzaremos entendiendo el task flow (diagrama de tareas). Es importante acá remarcar el mantenernos en una o dos funcionalidades para que el diagrama no se haga extenso e incontrolable. ¿CUAL ES LA MAIN FEATURE?. Si se trabaja a bajo nivel, entrando en mucho detalle en las acciones pueden generar diagramas de flujo de difícil comprensión.
Paso 4: Una vez definidas la tareas, comenzaremos a armar el userflow. Primero comenzaremos con la instancia de logueo y registro. 
Paso 5: Segundo continuaremos con el camino del usuario que sea alquilar. 
Paso 6: Tercero continuaremos con el camino del usuario que quiere poner un departamento para alquilar. 
Paso 7: Introducir al userflow, al menos uno de los errores posibles que pueden suceder. En este punto relacionar la caja de decisión con la caja de error. 
Paso 8: Identificar dentro del userflow a que usuario corresponde cada recorrido. 
VAMOS A USAR WHIMSICAL PARA REALIZAR NUESTRO USERFLOW
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Herramientas para editar las formas geométricas
Usar para slides de imagen completa.
Herramientas para editar las formas geométricas
Usar para slides de imagen completa.
ANTES DE EMPEZAR REFRESQUEMOS EL MVP Y EL ARQUETIPO DE PERSONA
USERFLOW
Armado de Userflow: Paso a Paso
Duración estimada: 60 minutos
Herramientas: Whimsical
Consigna: El docente realizará el userflow del proyecto testigo. Se recomienda, como primera instancia, recordar el desafío de "MVP" y el de "Arquetipos de Personas". Esto se debe a qué para poder realizar el userflow es necesario tener presente el recorrido del usuario y cual es el MVP definido. Primero se recomienda realizar el task flow (diagrama de tarea) del usuario para comprender qué acción debe realizar para cumplir con su cometido. 
Una vez transcurrida la instancia de task flow pasamos directamente a la generación del userflow, el cual se llevará a cabo con whimsical (herramienta qué ya vimos la clase 6 cuando se realizó la arquitectura de información). En este punto tener presente y remarcar todo el tiempo los tipos de cajas y su uso ¿por qué usamos esta caja en esta instancia?. Una buena práctica es finalmente colocar en el recorrido la foto del usuario. Se puede empezar haciendo el userflow simple (sin las cajas de error) y luego sumarlo para qué se entienda el uso de esa caja dentro del diagrama. 
NOTAS:
1. Se incluye acá el segundo usuario ya que la app tiene también la opción de quien quiere alquilar y que forma parte del userflow.
2. Diferenciar con colores cada una de las cajas y mostrar lo fácil que es hacerlo con whimsical.
3. Mostrar cómo de debe habilitar la opción de compartir para que los tutores puedan comentar el userflow directamente en el programa.
¿Cómo llevar adelante la actividad?
Paso 1: Recordar los puntos más importantes de Whimsical (uso de las cajas, como editarlas, cambio de color, uso de las líneas para conectar). 
Paso 2: Retomar el arquetipo y el MVP para el armado del userflow. Ambos documentos son importantes para mantenernos siempre en la generación del diagrama.
A partir de acá se comenzará a crear el userflow:
Paso 3: Comenzaremos entendiendo el task flow (diagrama de tareas). Es importante acá remarcar el mantenernos en una o dos funcionalidades para que el diagrama no se haga extenso e incontrolable. ¿CUAL ES LA MAIN FEATURE?. Si se trabaja a bajo nivel, entrando en mucho detalle en las acciones pueden generar diagramas de flujo de difícil comprensión.
Paso 4: Una vez definidas la tareas, comenzaremos a armar el userflow. Primero comenzaremos con la instancia de logueo y registro. 
Paso 5: Segundo continuaremos con el camino del usuario que sea alquilar. 
Paso 6: Tercero continuaremos con el camino del usuario que quiere poner un departamento para alquilar. 
Paso 7: Introducir al userflow, al menos uno de los errores posibles que pueden suceder. En este punto relacionar la caja de decisión con la caja de error. 
Paso 8: Identificar dentro del userflow a que usuario corresponde cada recorrido. 
Buscar Alquiler
Usuario que desea alquilar
Buscar alquiler por ubicación y fechas o ofertas
Reservar alquiler por un mediano plazo
Versión
Lanzamiento
Publicar alojamiento
Usuario que desea poner una propiedad para alquilar
Publicar alojamiento
Aceptar reserva de alquiler
Conectar Usuarios
Chat 
Chat entre inquilino y anfitrión
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: Argentino 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
Su cartera de clientes es muy pequeña y no logra expandirse por el resto del mundo. 
No existe ningún servicio que le facilite alquileres por mediano plazo. Lo que consigue es muy costoso.
Tuvo que alquilar por 2 años porque era lo que le ofrecía la inmobiliaria, y se siente atado a un solo lugar.
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
Quiere viajar trabajando (aprovechando que es freelancer)
Quiere vivir en distintos países y conocer distintas culturas.
Quiere conocer contactos y clientes nuevos en los países a visitar.
Motivaciones
Viajar.
Conocer gente nueva, compartir experiencias-
Disfrutar la vida.
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 funcionalidadprincipal que debemos diagramar. Luego se sumaremos posibles problemas. Por último marcaremos dentro del diagrama que recorrido corresponde a cada usuario. 
USERFLOW
Armado de Userflow: Paso a Paso
Duración estimada: 60 minutos
Herramientas: Whimsical
Consigna: El docente realizará el userflow del proyecto testigo. Se recomienda, como primera instancia, recordar el desafío de "MVP" y el de "Arquetipos de Personas". Esto se debe a qué para poder realizar el userflow es necesario tener presente el recorrido del usuario y cual es el MVP definido. Primero se recomienda realizar el task flow (diagrama de tarea) del usuario para comprender qué acción debe realizar para cumplir con su cometido. 
Una vez transcurrida la instancia de task flow pasamos directamente a la generación del userflow, el cual se llevará a cabo con whimsical (herramienta qué ya vimos la clase 6 cuando se realizó la arquitectura de información). En este punto tener presente y remarcar todo el tiempo los tipos de cajas y su uso ¿por qué usamos esta caja en esta instancia?. Una buena práctica es finalmente colocar en el recorrido la foto del usuario. Se puede empezar haciendo el userflow simple (sin las cajas de error) y luego sumarlo para qué se entienda el uso de esa caja dentro del diagrama. 
NOTAS:
1. Se incluye acá el segundo usuario ya que la app tiene también la opción de quien quiere alquilar y que forma parte del userflow.
2. Diferenciar con colores cada una de las cajas y mostrar lo fácil que es hacerlo con whimsical.
3. Mostrar cómo de debe habilitar la opción de compartir para que los tutores puedan comentar el userflow directamente en el programa.
¿Cómo llevar adelante la actividad?
Paso 1: Recordar los puntos más importantes de Whimsical (uso de las cajas, como editarlas, cambio de color, uso de las líneas para conectar). 
Paso 2: Retomar el arquetipo y el MVP para el armado del userflow. Ambos documentos son importantes para mantenernos siempre en la generación del diagrama.
A partir de acá se comenzará a crear el userflow:
Paso 3: Comenzaremos entendiendo el task flow (diagrama de tareas). Es importante acá remarcar el mantenernos en una o dos funcionalidades para que el diagrama no se haga extenso e incontrolable. ¿CUAL ES LA MAIN FEATURE?. Si se trabaja a bajo nivel, entrando en mucho detalle en las acciones pueden generar diagramas de flujo de difícil comprensión.
Paso 4: Una vez definidas la tareas, comenzaremos a armar el userflow. Primero comenzaremos con la instancia de logueo y registro. 
Paso 5: Segundo continuaremos con el camino del usuario que sea alquilar. 
Paso 6: Tercero continuaremos con el camino del usuario que quiere poner un departamento para alquilar. 
Paso 7: Introducir al userflow, al menos uno de los errores posibles que pueden suceder. En este punto relacionar la caja de decisión con la caja de error. 
Paso 8: Identificar dentro del userflow a que usuario corresponde cada recorrido. 
PRIMERO VAMOS A ENTENDER
SU TASK FLOW
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
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)
RECORDÁ, MANTENERLO SIMPLE. EL CAMINO IDEAL (SIN ERRORES)
¿CUAL ES LA MAIN FEATURE?
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
QUIERO ALQUILAR
TENGO UNA PROPIEDAD PARA ALQUILAR
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
¿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
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
¿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
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
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?
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
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.
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
WHIMSICAL
ACCEDER
LLEGÓ EL MOMENTO.. VAMOS A CREAR NUESTRO PROPIO USERFLOW
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
USERFLOW
Realizar el userflow (diagramade usuario) basado en el flowchart (diagrama de flujo) de tu proyecto.
	USERFLOW		
	Formato: Whimsical (herramienta sugerida para armar el userflow), generar un nuevo archivo con el nombre “Userflow+Apellido”. Se puede copiar el link en un archivo .doc o .ppt para subir a la plataforma o adjuntar el link directo en la entrega.
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 incluir en el entregable:
Crear el userflow del producto que elegiste desde el inicio hasta la representación principal o main feature. 
Usar correctamente los modelos de cajas:
Decisión: dos caminos posibles
Interacción: simboliza la interacción del usuario con la app. Puede ser que el usuario deba introducir datos, seleccionar, filtrar elementos, etc.
Proceso: instancias del trayecto del usuario. 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.
Error: Relacionado íntegramente con la caja “decisión” la misma muestra la posible falla o error. 
Inicio / Cierre: el inicio o el final en un diagrama de flujo.
Te podrás ayudar generando, en primera instancia, el task flow (diagrama de tareas).
El gráfico debe ser claro y ordenado. Las flechas deben mantenerse recta.
Marcar, en los recorridos, qué arquetipo de usuario deberá llevar adelante esa tarea (esto se puede reforzar dejando todo el userflow en gris y solo marcando el que corresponde a cada uno de los usuarios).
		
			
 VER EJEMPLO
¡IMPORTANTE!
Los desafíos tienen fecha de entrega 7 días después de finalizada la clase. Te sugerimos llevar las entregas al día. 
Usar para slides de sólo texto con el contenido más importante de la clase. En una presentación de 50 slides usar máximo 5 de estas.
¿QUERÉS SABER MAS? TE DEJAMOS BIBLIOGRAFÍA AMPLIADA DE LA CLASE 7
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Hanington, B.; Martin, B. (2012). Universal methods of design: 100 ways to research complex problems, develop innovative ideas, and design effective solutions. Rockport Publishers.
LIBROS
Los libros los encontrarás en nuestro repositorio.
Usar para que los estudiantes puedan explorar en sus casas los recursos vistos en clase: artículos, herramientas, websites, videos.
¿PREGUNTAS?
Obligatoria siempre.
¡MUCHAS GRACIAS!
Resumen de lo visto en clase hoy:
Profundizar en el Userflow y Taskflow.
Entender cómo se realiza correctamente un Userflow
Profundizar Whimsical como herramienta para la realización de un userflow.
Obligatoria siempre. Completar el resumen con palabras claves de lo visto.
OPINÁ Y VALORÁ ESTA CLASE
Obligatoria siempre.