Descarga la aplicación para disfrutar aún más
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.
Compartir