Cómo crear y presentar los flujos de usuario con Overflow

en una anterior vídeo he hablado sobre la importancia que tiene la efectiva colaboración con desarrolladores o con otras personas que trabajan con west y sanders y gran parte del éxito de esta colaboración está en utilizar herramientas que nos faciliten la comunicación así que en este vídeo quiero hablarles de una herramienta muy útil overflow es una herramienta muy fácil de usar que nos ayudará a presentar wire friends diagramas de flujo mapas de sitio y mucho más y en este vídeo les quiero mostrar como yo creo estas presentaciones en tan solo unos minutos si es tu primera vez en el canal mi nombre es eugenia soy un ex tester argentina viviendo en barcelona y aquí hablamos de diseño de experiencia de usuario y diseño de interacción 1 obra flow es una herramienta muy útil para equipos de producto y se la puede utilizar para diferentes casos de uso durante todo el proceso de diseño pero aquí en este vídeo nos vamos a focalizar en su funcionalidad más destacada que es la creación de diagramas de flujo de usuario off load charts que nos sirven para poder mapear estos y user flows estos flujos de usuario bueno quiero comentarles que este vídeo está patrocinado por overflow pero ya saben en este canal yo os recomiendo herramientas que utilizó y que realmente considero que son muy útiles y efectivas para nuestro trabajo bueno primero veamos qué son los y usher flows o flujos de usuario en diseño de interacción y veamos específicamente de dónde viene este concepto de flow o flujo bueno esto viene del psicólogo que es difícil de pronunciar que bueno él determina qué es un estado mental del usuario donde se encuentra totalmente inmerso en la actividad que está realizando la tarea que está realizando específicamente este psicólogo describe flow como un estado mental de total absorción en la experiencia actual con esto quiero decir que el flujo se produce cuando hay un equilibrio entre lo desafiante que es la tarea y el nivel de habilidad que tiene el usuario tiene que haber ahí un equilibrio si es muy desafiante muy complicada la tarea para realizar va a generar ansiedad va a generar frustración al usuario y si es muy fácil de realizar si el nivel de habilidad que tiene el usuario es muy alto y la tarea es muy fácil de realizar va a resultar aburrido para el usuario entonces tiene que haber un equilibrio entre estos dos bueno pero cuál es el beneficio de crear estos flujos de usuario el beneficio es que ayuda a nosotros los diseñadores a poder comprender y anticipar los patrones cognitivos de los usuarios para que podamos crear productos que permitan este estado de flujo y debido a que hay muchas rutas que los usuarios pueden tomar los flujos de usuario a menudo se modelan como diagramas de flujo o en inglés flow sharp como el que ven aquí que es un tipo de diagrama que nos permite visualizar con la ayuda de cajas y flechas los pasos que sigue un usuario para realizar una serie de tareas bueno cuando realizar un flow chart como comenté anteriormente podemos realizar estos diagramas de flujo en todas las etapas del proceso de diseño por ejemplo en la etapa de análisis si queremos comparar nuestro diagrama de flujo de usuario con otros diagramas con otros flujos de otras herramientas de competidores de otras aplicaciones está muy bueno eso porque podemos comparar y ver cómo podemos mejorar nuestro propio diagrama de flujo en nuestro propio shell flow y también podemos utilizarlo en la etapa de ideación cuando estamos comenzando con una idea podemos empezar a plasmar como sea cómo será este virus el flow también en la etapa de prototipado como ya tenemos los prototipos podemos también hacer este diagrama en la parte de documentación esto es muy importante y es de dónde provienen en realidad estos diagramas de flujo de qué es una herramienta para documentar entonces podemos documentar aquí cómo va a ser toda la experiencia todo este flujo de usuario de nuestra aplicación nuestro sitio web del producto que creamos muy bien ahora ya sabiendo todo esto les voy a mostrar como yo creo estos diagramas de flujo con overflow bueno aquí ya estamos en overflow que pueden ingresar por overflow punto i voy a dejar el link en la descripción de este vídeo y antes de comenzar les quiero mostrar lo siguiente si va de aquí para ver qué overflow integra con muchas herramientas de diseño por ejemplo con skate confirma con adobe exit pero también con jira y controló y se hacen clic aquí van a poder ver todas estas integraciones también con photoshop y van a poder ver la explicación de cómo integrar con todas estas herramientas que es muy fácil yo les voy a mostrar cómo integrar confirma y tres y aquí en ejemplos pueden ver los diferentes casos de uso pueden utilizar overflow para realizar diferentes flows diferentes presentaciones de diseño y también para otros casos que ya vamos a ver bien para los y usher flows podemos presentar y usar flows de alta fidelidad para la etapa de ideación cuando queremos validar nuestra idea también para los wire frames y algo muy interesante es que podemos capturar y uso el flow ya existentes aquí vemos por ejemplo la captura del user flow de netflix podemos realizar esto con un producto ya existente para poder mejorarlo también podemos usar overflow para presentaciones de diseño si queremos en una pantalla sola presentar a nuestro equipo como nuestro diseño se va a ver en diferentes dispositivos si queremos también por ejemplo hacer comparaciones de dos diseños o si queremos tener un historial de como nuestro diseño ha evolucionado también para los motivos y también para otros casos que son por ejemplo si queremos crear un usuario story mapping o un mapa de sitio para tener entonces en una sola pantalla viene aquí toda la arquitectura de un sitio web o de una aplicación aquí tenemos entonces lo que un mapa de sitio que no es lo mismo que un diagrama del flujo de usuario porque aquí lo que se presentan son las secciones son las páginas todo el contenido que tiene nuestro sitio o nuestra aplicación en cambio el diagrama de flujo de usuario lo que va a hacer es mostrarnos cuál es la ruta a las diferentes rutas que pueden tomar los usuarios bueno también podemos usar overflow para my maps o líneas de tiempo como ya ven es una herramienta muy flexible que podemos adaptarla a lo que nosotros necesitemos presentar ahora vamos a ver cómo crear un diagrama de flujo de usuario bien vamos a comenzar por nuestra herramienta de diseño de preferencia yo aquí voy a usar firma y como pueden ver aquí tengo una aplicación y tiene dos y user flows en realidad tiene tres aquí tenemos el user flow cuando el usuario tiene que registrarse en la aplicación luego cuando el usuario tiene que activar el bluetooth y la localización entonces vamos a usar este ejemplo que voy a dejarles el enlace por si quieren descargar también esta aplicación y probarla overflow en la descripción del vídeo bien lo primero que tenemos que hacer es asegurarnos de que tenemos el plugin instalado de overflow así que vamos a ir aquí en plugins y vemos que quiero tenemos instalado si no lo tenemos vamos a ir aquí habrá dos plugins in community y vamos a buscar overflow y luego hacemos clic aquí en plugins y aquí ya lo tenemos hacemos clic en instalar y se va a instalar automáticamente bien entonces ahora lo que vamos a hacer es seleccionar las pantallas que queremos enviar a overflow y lo interesante de esto es que firma va a conectar automáticamente con overflow es que cada vez que hagamos un cambio en firma también se va a cambiar en overflow y para que esto suceda sin ningún problema tenemos que asegurarnos de que aquí ponemos un nombre específico para cada uno de nuestros árboles y que bueno mantengamos ese nombre no lo cambiamos entonces eso es muy importante así que por ejemplo aquí pueden ver que yo he puesto un número y luego una descripción a cada uno de los árboles entonces lo que voy a hacer ahora es seleccionar todas las pantallas y voy a hacer clic aquí en plugins overflow y voy a hacer clic en xing xu overflow y se va a exportar todo listo aquí la tenemos entonces overflow y tenemos todas las pantallas que teníamos en firma pero como ven es una herramienta muy sencilla y muy fácil de entender aquí tenemos la opción de agregar algunos elementos como por ejemplo formas texto imágenes y hotspots y también aquí algunas opciones para darle estilo a los elementos que agregamos también aquí para organizar las pantallas y aquí las opciones de visualización exportación y presentación y aquí en la izquierda si hacemos clic en esta parte de aquí podemos ver que podemos agregar más pantallas es decir más páginas que contengan diferentes y user flows bien lo que vamos a hacer primero es hacer una anotación de la división de cada uno de estos y user flows entonces voy a ir aquí al rectángulo voy a agregar un rectángulo aquí un texto entonces voy a poner aquí sign up y aquí le puedo dar entonces el formato al texto y en esta parte de aquí esto lo voy a copiar y vamos a poner aquí que este es el isr flow de el bluetooth muy bien tonces ahora podemos empezar a crear ya nuestro user flow bien fíjense como overflow importo todas las pantallas no lo hizo como si fuesen imágenes completas sino que ha importado cada uno de los elementos de firma entonces yo puedo seleccionar por ejemplo este botón de aquí y me va a aparecer estas opciones donde yo puedo hacer clic en esta flechita de la derecha arrastrarla a la otra pantalla y de esta forma se me va a generar esa conexión entre las pantallas cuando yo quiera presentar esto puedo hacer click en el botón y entonces voy a ir automáticamente a la otra pantalla bueno voy a borrar eso y fíjense que también esto sucede si simplemente me posiciono sobre la pantalla si sin hacer clic ya me aparecen estas opciones entonces puedo hacer una conexión entre las pantallas bueno lo que voy a hacer ahora es darle un estilo a esta flecha que se me ha creado entonces voy a seleccionar la flecha y voy a ir aquí arriba fíjense que tenemos las opciones de estilo y voy a seleccionar esta de aquí también lo puedo hacer mi propio estilo si hago clic en esta opción de aquí y le doy el color que yo quiero la forma y luego puedo actualizar fíjense que voy a seleccionar esta de aquí voy a cambiarle el color y me va a aparecer una opción que dice update dupliquen update entonces ya aquí puedo tener actualizada esta este estilo y también le puedo dar un nombre hago aquí en reims y le doy un nombre y ya entonces tengo mi propio estilo de flecha pero bueno voy a seleccionar esta de aquí que me gusta mucho y voy a dividir un poquito más estas pantallas porque quiero también aquí dar una explicación de hacia dónde va a ir el usuario cuando ya termine de visualizar esta pantalla de aquí entonces hago doble clic aquí y entonces puedo seleccionar aquí una descripción y entonces ahora ya puedo ir conectando todas las pantallas y agregando las explicaciones bueno voy a mover un poquito estas pantallas porque están muy juntas y fíjense lo que sucede si yo muevo estas pantallas en otra posición la flecha se mantiene y eso es genial porque esto bueno ha sido siempre un problema con las herramientas de diseño aquí no tenemos ese problema es una herramienta muy flexible fíjense cómo puedo mover las pantallas y las flechas se van a mantener conectadas y ahora vamos a continuar con la detección del bluetooth y la localización por aquí el usuario tiene que tomar dos caminos tiene que haber una decisión que tiene que tomar entonces lo que vamos a hacer para crear esa decisión es seleccionar aquí la forma de diamante entonces voy a crear una forma de diamante aquí que va a preguntar si el usuario tiene activado el bluetooth o no bien lo que voy a hacer ahora es conectar entonces esta última pantalla de confirmación a esta pregunta y luego vamos a conectar dos flechas una que es la que dice que no está parte sería no que el usuario no tiene bluetooth activado entonces vamos a ponerle aquí al no y esta parte de aquí va aa conectar una flecha que va a hacer si entonces aquí vamos a poner c entonces aquí tiene el usuario activado el bluetooth no entonces tiene que mostrar esta pantalla si lo tiene activado entonces muestra esta pantalla bien y hay otra decisión que tiene que tomar el usuario vamos a mover estas pantallas un poquito más para la derecha y vamos a crear entonces otra decisión aquí y ahora voy a conectar las siguientes pantallas a las pantallas finales bien aquí voy a corregir un error estas 2 pantallas tienen que ir conectadas y voy a eliminar esta flecha de aquí que esto no tiene que ir y voy a conectar mejor a la decisión esta otra pantalla bien entonces ahora vamos a continuar les voy a mostrar cómo se ve en modo presentación pero antes quiero mostrarles algo muy interesante si seleccionamos todas estas pantallas y hacemos clic aquí podemos agregar el diseño del dispositivo fíjense que se agrega automáticamente esto es fabuloso porque no tenemos que hacerlo a mano y además detecta el dispositivo que deberíamos agregar así que eso es genial ahora vamos a hacer clic en el play y ya entramos aquí en modo de presentación si hago clic en una de las pantallas fíjense que se va moviendo y también puedo acercarme un poco más aquí vemos la pantalla bien si hacemos clic en las flechas podemos ir navegando fíjense cómo navega de esta forma que nos hace es un zoom y muse un out y bueno de esta forma podemos ir presentando nuestro prototipo a nuestro equipo a nuestro cliente y si hacemos clic aquí entramos a el modo de prototipo interactivo que fíjense también podemos navegar todas las pantallas y también tomar las decisiones para ir viendo los diferentes y user flows aquí es muy interesante mostrarlo de esta forma si queremos poner un poco más de foco en algún user flow de nuestros prototipos bien y también desde aquí podemos ver la selección de short cuts o de atajos de teclado que podemos utilizar para poder trabajar mucho más rápido bueno ya la van a ver qué voy a hacer algunas modificaciones fíjense que al no le he puesto a otro color para diferenciarlos y también ahora voy a conectar las pantallas desde los botones no desde una pantalla entera a otra sino que cuando se haga clic desde un botón se pueda ir a la siguiente pantalla así que ahora ustedes no todas esas modificaciones para dejarlo mejor bien ahora si hago clic en esta explícita de aquí vamos a poder exportar nuestra presentación en un enlace vamos a ponerle un título habilitar los comentarios hacemos clic aquí y fíjense que se va subiendo a la nube y podemos copiar este enlace voy ahora a poner el navegador y fíjense que podemos navegar lo en modo presentación también y en modo prototipado bien y también podemos dejar comentarios y aquí hay un tal carlos martínez que nos deja un mensaje hacemos clic en un post y ya se ha agregado el comentario para qué bueno podamos mejorar nuestro diseño y vamos a responder a este comentario fíjense que aquí dejo mi respuesta hago clic en post y ya se agregó a la derecha mi comentario vamos hacer clic en un verso que es resolver el comentario y listo de esta forma podemos interactuar entonces con otros colaboradores bueno ahora les quiero mostrar cómo integrar contra el otro es una herramienta fantástica para la gestión de proyectos y aquí tenemos un típico campan que tenemos bueno el backlog las tareas que están por realizarse las que están pendientes y las que están ya realizadas ahora tengo aquí una tarjeta en el backlog y voy a hacer clic en añadir power apps voy a buscar overflow voy a añadir overflow voy a hacer clic en la tarjeta y ya lo tenemos aquí agregado ahora voy a ir nuevamente a overflow voy a copiar el enlace y desde el navegador voy a copiar una de las urls de por ejemplo si queremos mostrar esta parte de la presentación copio la url voy a la tarjeta de trelew y voy a copiar aquí y fíjense que se va a mostrar esa parte de la interacción de liu share flow aquí automáticamente entre lo y también se puede interactuar desde aquí eso es fantástico si queremos mostrar por ejemplo aquí a la persona que nos solicitó un cambio como hicimos ese cambio y como puede navegar desde ahí muy muy bueno bueno ahora voy a hacer algunos cambios más fíjense que estoy agregando etiquetas a las flechas para poder identificarlas mejor a las que están en naranja que son el camino triste a las que están en azul que son el camino feliz el happy pub y a las que son grises con líneas punteadas se las utiliza para ir hacia atrás para por eso le he puesto de nombre back y entonces ahora ya tengo tres flechas que son las que voy a utilizar voy a hacer más modificaciones de diseño para dejarlo un poco mejor más profesional así que ahora voy a agregar unos fondos a cada una de las partes que yo quiero llamar la atención en mi diagrama de flujo por eso le pongo de nombre a este cuadrado highlight para poder remarcar estas zonas y bueno voy a usar esto para remarcar zonas de diferentes del diagrama de flujo voy a también agregarle un título para que se entienda de qué se trata esa zona y fíjense cómo ha quedado ya mi diagrama de flujo esta es la forma que ustedes puedan presentar entonces sus diseños de una forma muy interactiva muy ágil y muy profesional ahora les quiero mostrar esta funcionalidad de aquí que me encanta que es que podemos agregar otros user flows fíjense que podemos tener la parte de ideación de wire frames y de prototipo entonces tenemos todo en un solo archivo y podemos conectar estas páginas estos covers fíjense acá estoy conectando yo la parte de ideación con el prototipo y si vamos a presentación hacemos clic aquí y podemos ir al otro board para mostrar entonces el avance de nuestro diseño y para finalizar veamos las opciones de exportación si hacemos clic aquí en la pizarra en el board podemos ver que podemos exportarlo como png o como pdf pero les quiero mostrar algo que a mí me encanta y es que podemos imprimir esto en diferentes páginas para poder ponerlo en la pared en una pizarra y presentarlo para nuestro equipo o si trabajamos a distancia que es lo más probable para nosotros mismos para tenerlos ahí disponible en todo momento bueno esto me parece una idea genial bueno como en atrás han quedado los días donde diagrama vamos todo esto en papel aunque bueno sigo recomendando que es muy bueno comenzar siempre en papel pero realmente aquí vemos una herramienta fácil de usar muy intuitiva y que realmente es muy efectiva porque se integra con muchas otras herramientas y esto nos va a ayudar a agilizar mucho más nuestro trabajo y no solamente eso sino que también podemos elegir qué presentar y cómo presentarlo algo que desde fycma o sketch no sería un poquito más complicado porque tenemos todo ahí y bueno con overflow podemos como mostrarlos de una forma más limpia y más profesional bueno si quieren comenzar hoy con overflow voy a dejar el enlace para que descarguen esta aplicación en la descripción de este vídeo espero que esto les haya sido de utilidad para su aprendizaje en you ex o en su trabajo y no se olviden de darle like para que otras personas también puedan encontrar este vídeo de suscribirse para que yo sepa que están del otro lado y nos vemos en un próximo vídeo