We recently introduced wire flows to our design process at webkeyz as a combination of two popular deliverables: wireframes and flowcharts.
Wireframes are the most popular deliverable for UX design, used to document the layout for a website or an app. Alternatively, flowcharts are used to document complex workflows and user tasks.
We were trying to find a way to better illustrate interactions within mobile or web apps that don’t have many unique pages, but rather have a lot of interactions within pages. So, we decided to introduce wireflows to our process.
According to NNG, wireflows are defined as “a design-specification format that combines wireframe-style page layout designs with a simplified flowchart-like way of representing interactions”.
Why Wireflows Work Better for Us
They help us think in terms of flows not screens. With wireflows, we don’t work screen by screen but rather with the full flow. For example, imagine a ticket reservation flow where the goal of the user is to reserve a ticket; we think of the full flow and try to identify the best way for our user to complete the action.
No Missing Scenarios
Wireflows insure that no scenarios are missed, because the full flow is layed out in front of the UX designer. This makes it easier to visualize and cover all use cases.
Better Interactions
A wireflow’s main purpose is to document interactions: feedback, changes in layout, confirmations, or popups.
Better Communication
UX design is about the whole experience, not separate screens. Wireflows communicate designs more clearly to developers and visual designers.
Easy to Learn
Introducing a new deliverable may be confusing and difficult to learn by stakeholders or developers, but wireflows are simple and easy to learn.
When is it Better to Use Wireflows?
Wireflows are not the best tool to use in every project. In some cases, they could prove to be time-consuming and not as efficient as wireframes.
Wireflows are useful in projects with complex interactions and a small number of unique pages, or website sections containing a lot of interactions.
However, they are not as useful for static websites or apps where clicking or tapping a button or link will navigate to another static page. Since there will be minimal interactions to map, wireframes are better suited for these cases.
Wireflow Components
In order to create a successful wireflow you need to:
- Identify the goal of your flow e.g ‘buy a new laptop’ or ‘search for a recipe’. Your goal will be to design every screen and interaction needed for achieving this goal.
- Create an entry page where the user will begin the process in order to achieve their goal.
- Continue creating screens and the connections between them until you reach the screen where the goal is achieved.
- Go back and think of possible alternative paths or shortcuts for the user to achieve their goal (the final destination must always be the final screen), and start designing connections and screens for these paths.
- Think of scenarios that could happen during the journey (errors, disconnected internet, empty fields) and design what will happen in these cases.
