Wireflows, what they are and when they are used – | Blog

Wireflows are a combination of Wireframes and Flowcharts. They are basically used to complement the documentation that a UX performs.

In the user experience industry they are a popular resource for documenting workflow and screen layouts when there are few dynamically changing pages.

What is a Wireflow and why use them

Wireflows can be defined as a design specification format that combines wireframes with flowcharts to represent interactions.

The are a type of visual artifact or document widely used to show ideas at the page level, while the are really useful to show complex workflows and specific tasks that users execute.

Both deliverables are part of the . Although they are documents that convey information very well, sometimes they are not optimal for communicating design ideas in mobile or web applications that do not have many unique screens.

Wireflows have been very fashionable for some years now. They are useful when you need to display layouts in the context of common user tasks.

Wireframes are a good way to show the design but they do not properly contextualize the interaction and are not enough to explain products that have a lot of dynamic content on their pages.

Wireframes are good for explaining products with static pages that, when clicked, link to different screens.

When a product reloads the content without changing the page, that is, the content of the page is dynamic or, for example, it can have many states (a shopping cart of an Ecommerce or online store, the states of a login or registration form) is better Wireflows.

Flowcharts are used to document complex processes or workflows and the multiple interactions or paths a user can take.

How to create a Wireflow and its components

For create a Wireflow correctly and understandable for anyone who visualizes it is necessary:

• Identify the goal of the flow. For example: Add a product to the cart. The objective of the flow will be to design all the screens and interactions necessary to achieve the objective.
• Create a login page where the user will start the process.
• Create the screens and the connections between them until you reach the screen where the goal is achieved.
• Think of the alternatives or shortcuts for the user to achieve their goal and design the connections for these new routes.
• Design errors, empty fields, or other scenarios that show what will happen.