Wireflow

Esta herramienta se utiliza para mapear la interacción/navegación de un usuario en una interfaz o plataforma digital, integrando también diseño de interfaces a un nivel básico.

Te permite visualizar mediante un diagrama el paso a paso a detalle de todas las acciones que el usuario debe realizar (clicks, pantallas, selecciones, etc.) para completar una tarea, proceso o acción determinada en la plataforma. Permite entender el resultado de cada clic u opción que tiene el usuario en la navegación, así como visualizar aspectos básicos de diseño de la interfaz (wireframes).

La principal ventaja de esta herramienta es que puede servir como herramienta exploratoria para identificar problemas en el flujo en un momento temprano, e iterar rápidamente. También puede ser usada como un medio para explicar las acciones o tareas del usuario a desarrolladores y stakeholders.

La principal desventaja es que pueden volverse muy técnicos y complejos de entender, ya que los flujos tienen varios niveles de fidelidad y por ende su diseño puede ser bastante libre.

Tips para realizarlo:

Definir el journey, parte del journey o proceso a realizar por el usuario (Pagar, Ver fotos, etc.)

Dividir el proceso en sub tareas/acciones del usuario, paso por paso

Desgranar cada tarea en clicks y pantallas

Añadir los wireframes al proceso o flujo

Mapear todos los diferentes “caminos” que podría hacer el usuario (no solo el happy path): errores, modificaciones, casuísticas, etc. Así el flujo básico se va ramificando.

Ejemplo de wireflow de plataforma de booking

⁠

Loading…⁠

⁠

Si quieres verlo más de cerca, puedes encontrar la imagen aquí:

⁠

https://cdn.dribbble.com/users/3347/screenshots/3229942/attachments/691262/full-flow.png⁠

⁠

Recomendaciones

Definir y acotar cuál será el proceso o journey a mapear: Proceso de compra, actualización de datos, etc. Abarcar la navegación completa de un sitio muy complejo resultaría en una herramienta visual muy cargada y de difícil lectura.

Ir de lo más simple a lo más complejo. Es importante iterar entre cada paso del proceso para hacer Wireflows, ya que mientras menos avanzado esté, más fácil será hacer correcciones.

⁠

Ayúdanos a seguir mejorando nuestro contenido🤩

Puedes dejarnos tu comentarios

aquí⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.