Los Wireflows es una combinación de Wireframes y diagramas de flujo. Se utilizan básicamente para complementar la documentación que realiza un UX.
En el sector de la experiencia de usuario son un recurso muy utilizado para documentar el flujo de trabajo y los diseños de las pantallas cuando hay pocas páginas que cambian dinámicamente.
Qué es un Wireflow y por qué usarlos
Los Wireflows se pueden definir como un formato de especificaciones de diseño que combina los Wireframes con diagramas de flujo para representar interacciones.
Los Wireframes son un tipo de artefacto visual o documento muy utilizado para mostrar ideas a nivel de página, mientras que los diagramas de flujo son realmente útiles para mostrar flujos de trabajo complejos y tareas concretas que ejecutan los usuarios.
Ambos entregables forman parte de la documentación que debe entregar un diseñador UX. A pesar de que son documentos que transmiten muy bien la información, a veces, en ocasiones, no son los más óptimos para comunicar ideas de diseño en aplicaciones móviles o web que no tienen muchas pantallas únicas.
Los Wireflows están muy de moda desde hace ya algunos años. Son útiles cuando se necesita mostrar diseños en el contexto de las tareas comunes de los usuarios.
Los Wireframes son una buena manera de mostrar el diseño pero no contextualizan correctamente la interacción y no son suficiente para explicar productos que tienen mucho contenido dinámico en sus páginas.
Los Wireframes son buenos para explicar productos con páginas estáticas en las que al hacer clic enlazan con pantalla distintas.
Cuando un producto recarga el contenido sin cambiar de página, es decir, el contenido de la página es dinámico o por ejemplo puede tener muchos estados (un carrito de compra de un Ecommerce o tienda online, los estados de un formulario de login o registro) es mejor Wireflows.
Los diagramas de flujo se utilizan para documentar procesos o flujos de trabajo complejos y las múltiples interacciones o rutas que puede realizar un usuario.
Cómo crear un Wireflow y sus componentes
Para crear un Wireflow correctamente y entendible para cualquier persona que lo visualice es necesario:
- Identificar el objetivo del flujo. Por ejemplo: Añadir un producto a la cesta. El objetivo del flujo será diseñar todas las pantallas e interacciones necesarias para lograr el objetivo.
- Crear una página de entrada donde el usuario comenzará el proceso.
- Crear las pantallas y las conexiones entre ellas hasta llegar a la pantalla en la que se logra el objetivo.
- Pensar en las alternativas o atajos para que el usuario logre su objetivo y diseñar las conexiones para esas nuevas rutas.
- Diseñar errores, campos vacíos u otros escenarios en los que se muestre qué sucederá.