Para entender qué es un wireflow, primero tenemos que hablar de wireframes. Los wireframes son una técnica ampliamente utilizada en el campo del diseño de la experiencia del usuario (diseño UX) que permite a los diseñadores y clientes colaborar en la identificación del contenido y la funcionalidad de las pantallas.
Los wireframes se juntan para formar un diagrama de flujo que muestra todas las pantallas involucradas en un escenario específico usando un flujo de alambre diagrama.
En este artículo, aprenderá qué es un flujo de alambre, sus elementos, cómo crearlos y usarlos y, finalmente, todos los beneficios de usarlos en UX Design.
¿Qué es un flujo de alambre?
Un wireflow es una representación visual de las pantallas y las interacciones que sigue un usuario para completar tareas específicas. Combina aspectos de una estructura alámbrica básica, un flujo de tareas y un diagrama de flujo con flujos de pantalla avanzados que representan varias rutas de navegación en un diagrama.
El término “wireflow” se refiere a una combinación de wireframes y diagramas de flujo.
Un diagrama de flujo de alambre ilustra cómo un usuario interactúa con un sitio web o una aplicación. Además, pueden contener anotaciones para indicar lo que está sucediendo en el backend en ese momento. Son esencialmente diagramas de flujo y flujos de tareas ilustrados.
Cuando se documentan aplicaciones de escritorio, web o móviles que no contienen muchas páginas únicas, sino que presentan algunas páginas principales que cambian el contenido dinámicamente cuando un usuario interactúa con ellas, los flujos de conexión son particularmente útiles. Los diseñadores pueden demostrar su trabajo en el contexto de las tareas comunes de los usuarios.
Para comprender mejor la construcción de una estructura alámbrica, analicemos los elementos específicos y sus usos.
¿Qué es un flujo de tareas?
Un flujo de tareas es un diagrama que ilustra un proceso lineal para completar una tarea en particular, como un proceso de inicio de sesión. Los flujos de tareas usan lenguaje natural y no contienen elementos de diseño. Además, rara vez exploran las desviaciones de la ruta ideal, como si un usuario olvida su contraseña.
Un flujo de tareas es útil para planificar la mejor ruta para completar una tarea. Observar cómo los usuarios realizan sus tareas y logran sus objetivos previstos es una forma de crear flujos de tareas.
¿Qué es un diagrama de flujo o diagrama de flujo?
Un diagrama de flujo es similar a un flujo de tareas pero más detallado. Además de mostrar cómo interactúan los usuarios con el sistema, también muestra sus opciones (¿ha iniciado sesión un usuario? sí/no) y las reacciones que pueden desencadenar en el back-end (enviar una solicitud al servidor).
Los diagramas de flujo, por su naturaleza, nos permiten tomar nota de los flujos del sistema y de los usuarios de manera más detallada, mostrando los puntos de decisión y los flujos de datos en cada paso. Sin embargo, no muestran ningún diseño de interfaz de usuario, por lo que comparten el mismo inconveniente con los flujos de tareas.
¿Qué es un flujo de alambre simplificado?
El flujo de alambre simplificado es un flujo de alambre que le permite adoptar un enfoque más abstracto al representar el flujo en una pantalla más pequeña. Caen en algún lugar entre un flujo de tareas y un diagrama de flujo de alambre normal. En lugar de crear estructuras alámbricas personalizadas, diseña un flujo de tareas con símbolos que muestran los distintos tipos de pantallas.
¿Cuál es la diferencia entre estructura alámbrica y flujo alámbrico?
Una estructura alámbrica es un diseño de diseño de baja fidelidad que realiza tres funciones específicas. Muestra el contenido que aparecerá en la página, reduce el esquema de la estructura y el diseño de la página y explica la dirección general del diseño. Mientras que los wireflows combinan wireframes con diagramas de flujo para crear un diseño detallado.
A diferencia de los diagramas de flujo de usuarios, los flujos de cables documentan diseños complejos basados en las rutas y acciones de los usuarios.
Comprender el proceso de creación de Wireflow
Usemos un ejemplo de una aplicación móvil para ver cómo funciona el proceso de creación (con ejemplos de estructura alámbrica).
- Definición del problema y la necesidad en una historia de usuario. Un ejemplo de este paso sería el registro de usuario: crear el nombre de usuario, la contraseña y el correo electrónico.
- Identificar las pantallas principales en la interfaz. Piensa dónde quieres que empiece el usuario y dónde quieres que termine su viaje. Como ejemplo, la página de inicio de sesión podría ser su punto de partida y el modal de bienvenida es su punto final.
- Grafique las pantallas. Esto permitirá a los usuarios pasar de uno a otro en el orden indicado por las flechas. Puede optar por **** incluir puntos de decisión. Por ejemplo, mostrar cuál sería el flujo si un usuario olvida su contraseña.
¿Por qué debería usar un flujo de alambre?
- Documentar el viaje de un usuario. Por lo general, los flujos de conexión se utilizan para describir cómo un usuario navega a través de una tarea común en el producto, como agregar una canción a una lista de reproducción.
- Muestra las pantallas disponibles utilizadas por los usuarios. Cada paso del flujo de trabajo se ilustra mediante estructuras alámbricas. Las flechas conectan componentes de la interfaz de usuario con los que interactúan los usuarios, como botones y enlaces. No hay necesidad de páginas separadas para wireframes en el flujo.
- Documente flujos de trabajo complejos. Wireflows también se puede utilizar para documentar flujos de trabajo complejos para aplicaciones web y de escritorio. No es necesario mostrar una estructura alámbrica a pantalla completa para cada paso; bastará con crear estructuras alámbricas para las secciones de la pantalla que cambien.
- Documente los flujos de tareas. Se pueden usar para documentar flujos de tareas en sitios web estáticos tradicionales. Si bien puede funcionar para dispositivos móviles, puede que no sea la mejor idea para sitios web de escritorio. Como si los wireframes mostraran páginas distintas, es fácil perder el contexto del flujo de usuarios.
¿Cuándo debería usar un flujo de alambre?
Se debe usar un Wireflow para todos los proyectos. En algunos casos, el proceso podría llevar mucho tiempo y ser menos efectivo que los wireframes. Un wireflow es útil en proyectos con interacciones complejas y una pequeña cantidad de páginas únicas, o secciones web con muchas interacciones.
Por otro lado, no son tan útiles para aplicaciones o sitios web estáticos donde seleccionar un enlace o botón lleva a otra página estática. En estos casos, los wireframes son más adecuados ya que habrá menos interacciones para mapear.
¿Por qué usar Wireflow en lugar de Wireframes y diagramas de flujo?
Los wireframes son excelentes para mostrar el diseño, pero son menos efectivos para describir la interacción, especialmente para productos digitales como aplicaciones móviles y aplicaciones web con mucho contenido dinámico.
Una estructura alámbrica es útil para la documentación de sitios web (y otros productos digitales) con una cantidad significativa de pantallas o páginas relativamente estáticas y discretas, donde al hacer clic en un enlace o botón normalmente se navega a otra página por completo.
Sin embargo, muchas aplicaciones web y móviles modernas tienen una pequeña cantidad de páginas generales, con contenido y diseño que cambian dinámicamente según las acciones que el usuario realiza con el producto. El diseño y la información presentados pueden variar drásticamente según las interacciones con las herramientas, los modos u otros parámetros incluidos en la aplicación.
Los ejemplos incluyen productos de comercio electrónico que cambian los productos que se muestran en la página seleccionando facetas o filtros, o aplicaciones técnicas o creativas complejas. Los wireframes no pueden capturar estas posibilidades de diseño o cómo cambia el contenido en estos casos. Los wireframes normalmente no detallan los comentarios importantes que reciben los usuarios después de interactuar con una página.
Por otro lado, los diagramas de flujo se utilizan para documentar exhaustivamente flujos de trabajo e interacciones complejos que tienen múltiples pasos o rutas, aunque generalmente oscurecen el contexto y el impacto de las interacciones.
Cuando los diagramas de flujo se utilizan principalmente para documentar (y delinear) los pasos y las interacciones involucradas en tareas de usuario de varios pasos, es posible que perdamos de vista la información contextual que se muestra en la página que afecta el éxito de la interacción.
Los 4 principales beneficios de usar un flujo de alambre en una organización
1. Los miembros del equipo colaborarán de manera más efectiva
Los desarrolladores pueden evaluar si la aplicación incorpora la retroalimentación correcta (micro interacciones). Este examina los caminos a través de los cuales el usuario debe viajar para llegar a la acción final. Una estructura más detallada resultará en una mejor comunicación.
Con un flujo de conexión, los equipos de desarrollo pueden comunicarse con las partes interesadas más fácilmente. La estructura lo descompone todo, ilustrando el flujo del producto.
2. La lluvia de ideas se elevará a nuevas alturas
Los flujos de alambre se utilizan mejor para la lluvia de ideas. En algún momento durante el proceso de construcción, los gerentes de producto y los miembros del equipo pueden tener problemas. Puede servir como una guía sobre cómo un usuario se movería de una pantalla a otra. Permiten a los miembros del equipo generar muchas ideas al mostrar todas las funciones interactivas en una página.
3. Habrá un mejor entendimiento entre los empleados
Los empleados que participan en el proceso de diseño y desarrollo pueden encontrarlos útiles. Es su responsabilidad observar todas las interacciones, botones, ubicaciones y rutas que tomará el usuario.
Se necesitará más que una simple estructura alámbrica que muestre el diseño. Al proporcionar los detalles de la interfaz de usuario, necesitan un flujo más detallado.
Lo mismo se aplica a los empleados que se ocupan de los productos. Los empleados pueden usar aplicaciones para rastrear artículos o para atender a los clientes. Con wireflows, pueden mirar cada página en detalle y aprender todos los caminos.
Cuando los clientes hacen clic en un botón, la retroalimentación visual (micro interacciones) explica las rutas, las rutas para cada control y si se transferirán a una nueva página o cambiarán la existente.
4. Los errores se reducirán significativamente
Es menos probable que el diseño del producto se vea afectado por errores debido a una mejor colaboración. Cualquier cambio que deba realizarse se puede realizar rápidamente durante el proceso de flujo de alambre.
Debido a que documentan todo el diseño de una aplicación, puede llevar algún tiempo localizar el problema. La ventaja es que los miembros del equipo pueden empezar desde el principio.
Artículos relacionados
