No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Wireflows

14/26
Recursos

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.

Aportes 36

Preguntas 5

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Los wireflows

Les comparto algunas herramientas para hacer diagramas de flujo:

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.

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:
.

鈥淚maginemos 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.

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...

**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

**La herramienta de prototype en Fugma es b谩sicamente un Wireflow. ** 馃榿

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

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

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

驴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 鈥淐ontrol 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