Wireflows

Les comparto algunas herramientas para hacer diagramas de flujo:

• Miro
• Lucidchart
• Creately

Wireflow

Definición

Es una representación de los caminos y navegaciones que se sigue entre cada interfaz basada con ciertas interacciones.

.
Nos ayudan a pensar en términos de flujos y no en vistas. Por ejemplo:
.

“Imaginemos una reservación de tickets donde el fin de cada usuario es el reservar y obtener su correspondiente ticket.”

.
💡Nosotros, pensaríamos en un flujo e intentaríamos identificar la mejor forma para el usuario complete esa acción.
.

Objetivos

• Sin pérdida de escenarios. Ya que el diseño se orienta a todas las vías posibles para contemplar casos de usos.
• Mejores interacciones. El propósito principal es documentar las interacciones (feedback, cambios, confirmaciones, modales, etc.).
• Mejor comunicación. Siendo un diseño para toda una experiencia, se comunica de forma más clara el concepto a los desarrolladores y UI designers.

.

Casos de usos

Si bien, es una modalidad de trabajo interesante, es posible que sea un paso de más en la etapa de concepción del producto donde sea más que obvia la ideación de UI y prototipado.
.
Para el caso donde la interacción sea compleja y necesite refinar pasos, su inversión de tiempo es crucial para el éxito de los objetivos anteriormente mencionados.

Un wireflow me permite crear todas las posibles pantallas en un punto de decisión del usuario y contemplar distintos casos. Reduce significativamente las dudas del desarrollador al momento de crear las lógicas de backend y el front.

**Interacción: **

Estímulo: Todo lo que el usuario hace en la interfaz

Control: El usuario tiene que poder controlar todo lo que pasa en la interfaz

Respuesta: Lo que el sistema muestra a partir de ese estímulo

Wireflow: Es la representación de los caminos de navegación que puede seguir el usuario. Va a sugerir lo que ocurre cuando se hace una interacción. Muestra la relación entre todos los wireframes.

Un wireflow muestra la agrupación, clasificación y jerarquía de los contenidos...

14. Wireflows

• Como llevo esos conceptos a la realidad
• Wireflow
  • Muestra la agrupación y clasificación de la jerarquía de los contenidos.
  • Muestra cómo están conectadas las pantallas
  • Es un reflejo de cómo el usuario va a interactuar con el sistema
  • Sugiere lo que ocurre cuando se hace una interacción
• Interacción = Estímulo > control > respuesta
  • Estímulo: Todo lo que el usuario hace en la interfaz
  • Respuesta: Es la respuesta del sistema
  • Control: El control que tiene el usuario con el estímulo y la respuesta
• El Wireflow va a pintar lo que hago cada vez que doy un click y hacia donde voy y como están conectadas las pantallas
• Pensar en las pantallas principales y como están relacionadas
• User flow > Wireflow

Hola, es decir, un wireflow es lo mismo que un flujo de navegación? O que los diferencia?

Wireflow => Es una representación de los caminos y navegación que se sigue entre cada interfase base a cierta interacción. => Sugiere lo que ocurre cuando se hace una interacción. => Muestra la relación entre todos los wireframes.

**La herramienta de prototype en Fugma es básicamente un Wireflow. ** 😁

Les recomiendo si utilizan herramientas como Figma o adobe para el wireflow usen OverFlow que lo hace mucho mas ordenado y especifico.

Un wireflow muestra la agrupación, clasificación y jerarquía de los contenidos, es un reflejo de la interacción del usuario con el sistema. Una interacción involucra un estímulo y una respuesta por parte del usuario.

Gracias

¿Qué elementos hay en una interacción? - Estimulo: Todo lo que el usuario hace en la interfaz - Control: El usuario debe estar en capacidad de controlar lo que sucede - Respuesta: Lo que el sistema le reporta al usuario a partir de ese estímulo

👌 También es valido hacerlo al revés. Primero los wireflows y luego los sitemaps, aunque es más recomendable variar entre las dos metodologías.

Cuando dice que el usuario tiene que tener la capacidad de controlar y manipular todo lo que pasa en la interfaz sería un principio de usabilidad de “Control y libertad del usuario”, ¿no?

Como ayuda un wireflow de muy baja fidelidad a estructurar un flujo

Excelente insumo de baja fidelidad para navegación

Estímulo: Todo lo que el usuario hace en la interface
Respuesta: Las opciones que el sistema arroja ante el estímulo
Control: Todas las acciones que puede ejecutar el usuario para controlar su interacción con el sitio.

Los wireflows son representaciones gráficas de los caminos y navegación que sigue el usuario entre cada ventana en base a cierta interacción con algún elemento, como dar clic en un botón o registrarse en un formulario. Nos permite ver cómo están conectadas las distintas pantallas siguiendo un proceso de pasos o path de interacción. Son muy útiles especialmente para interfaces o aplicaciones complejas y con mucha información, ya que así se da una mejor idea del flujo de contenido y los posibles caminos que puede tomar el usuario para completar una tarea o llegar a cierto nivel en la jerarquía de información, según cada caso posible dentro de la interfaz o aplicación.

No hay que pensar que por colocar una barra de navegacion nuestro usuario se convertirá en un experto navegante de nuestra interfaz

Cafe Platzi , k riko

Interacción: influencia recíproca.
Diseño de interacción: muestra cómo reacciona el producto ante la acción del usuario.

Wireflows

Creo que con Figma se puede hacer eso interactivamente.

![](

Básicamente un WIREFLOW es la relación entre pantallas a partir de click o llamadas a la acción y como se conectan entre si

un wireflow es un digrama de flujo en este caso nos permitiria una mejor clasificacion de contenidos.

muy útil el aterrizarlo ya que muchas veces creemos que como lo tenemos en la mente es infalible

Esto no sería lo mismo a flujo de navegación?

Es como un diagrama de flujo

Wireflows

Un wireflow nos va a mostrar la agrupación y clasificación de la jerarquía de los contenidos, nos va a permitir ver como a grandes rasgos están conectadas las pantallas.

Tenemos que pensar en la interacción, debemos pensar en que al hacer clic en cierta parte a que otra pantalla nos dirigirá y donde va a aterrizar el usuario en esa pantalla.

Una interacción quiere decir: Estimulo ------ Control------> Respuesta

Estimulo es todo lo que el usuario hace en la interfaz, la respuesta es lo que el sistema le dice a partir de ese estimulo pero el usuario también tiene que estar en capacidad de controlar todo lo que pasa en esa interfaz

Rescato la parte, que después de hacer el Sitemap se tiene que ver si tiene sentido entonces Wireflow es lo ideal, para comprobarlo. Genial esta clase.

diferencia entre flujo de navegación y wireflows