👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Wireframing User Flow with Wireflows

6 min. read

A wireflow is a hybrid design document that combines wireframing with flow diagramming. They are essentially wireframes showing user and system flow.

Simply adding arrows and annotations between wireframes on a single canvas will indicate the paths a user may take while using your product. These small changes to your wireframes will communicate the visual changes in the interface while simultaneously describing state changes and sequences in the user interaction.

Example of a wireflow

In this article we’ll show you how to use this technique in your design process. First we’ll introduce the different types of design artifacts that product designers use for designing interfaces and diagramming flow. Lastly, we’ll show why wireflows may be the most suitable tool for communicating your interface and interaction design at the same time.


Comparing wireframes with flow diagrams

We will start by comparing wireframes with other techniques for designing flow, then move on to how to design a wireflow.

Wireframes

Wireframes are good for representing static interfaces.

Data and layout in an interface commonly change as users interact with a product, however, so the single static wireframe may not represent the complexity of those changes well.

The example below shows a page for a product on a shopping site.

This wireframe gives a good idea of what elements should appear and where they should be laid out on product pages for a store. However, some of these interface elements trigger actions. Add to Cart, is one obvious trigger here. You need to explicitly specify for your team what happens when the user triggers that action. To do that, typically a product designer might wireframe each changed state, as the user steps through the checkout task.

Flow diagrams

Flow diagrams may be used for designing interactions.

There are several types of flow diagrams that are useful in designing software products — task flows, user flows, and flowcharts. The lines between each of these have become blurry, and we’ve seen the term user flow used interchangeably with both task flows and flowcharts. Generally speaking, this class of diagrams is great for showing directional flow and/or decision-based logic.

Task flows are useful for designing how a user will complete a task.

Task flows are usually shown as a linear sequence of steps, and can be designed at a high level, or be very detailed, dividing a task into sub-tasks. They may be the result of task analysis activities, which are designed to observe how users complete tasks.

Task flows are also useful in planning the optimal paths for task completion, particularly since they can be easily expressed in natural language. You might also think of them as visual answers to user stories, because they’re written in a similar way.

If your user story is: User would like a fast way to buy single pieces of apparel, you might propose a task flow such as this:

Simple flow diagram for the task “Purchase a hoodie”, from product view and select size to order confirmation.

While task flows are suited to predicting how the user completes a task, they usually don’t explore deviations from those ideal paths.

Flowcharts are good diagrams for indicating the path the user takes when interacting with the system (the user task flow), decisions they make on that journey, and the reactive back-end processes they may trigger.

The diagrams include starting and endpoints, decisions points, the directional flow of the system, and the reaction of the system as it responds to the user’s input, including how data is handled and transported.

Flowchart for the task “Purchase a hoodie” with all the steps and decisions a user needs to take along the way.
Flowchart example

This type of flow diagramming is good for indicating the user/system flow more thoroughly, showing the branching of paths at decision points and how data flows through the system. While they’re good at representing this complexity within the product, they do not show the design of the interface at different points. This is where wireflows help to bridge the gap between wireframes and flowcharts.

Wireflows

Wireflows combine the benefits of wireframes and flow diagrams. The term wireflow was coined by Nielsen Norman Group after observing the practice emerging in the field.

Wireflows visually show how parts of the interface change, as the user interacts with the application. Additionally, annotations may be added to indicate such factors as transmission of data within the system.

Wireflows can be thought of as simply being an extension of your wireframing practice to add user flow information directly into your interface design. The simplest example just shows a sequence of events in completing a task. They can resemble storyboards with annotation. This essentially illustrates a task flow with the addition of wireframes.

Wireflow of a purchase flow with four screens connected by arrows and actions the user takes on each, like Add to cart.
Illustration using a wireflow to illustrate flow

More complex examples of wireflows can also be created to show how a multitude of actions within an interface can trigger changes or system reactions in a dynamic interface.

The most complex examples may resemble flowcharts, showing the kind of decision branching, back-end process and data movement that you’d expect to see in detailed flow diagrams.

You can also take a more abstract approach, diagraming the flow using smaller screen representations. In Balsamiq, search Quick Add for Wireflow Elements to create this style of wireflow.

Wireflow Elements Library available in Balsamiq

How to approach wireflow creation

Product designers have been using hybrid methods for wireframing for a long time. Most commonly, we see people breaking out of the single view to show what happens to the dynamic portions of the view.

Another common wireflow practice we see repeatedly is in the design of mobile applications. Because mobile viewports are small compared to desktop applications and websites, it is common to reproduce entire key screens and show state changes.

Let’s use a mobile app example to discuss how to start making wireflows. Here are 3 simple steps to think about when wireflowing:

  1. Start with words
  2. Define key screens
  3. Connect screens

1. Start with words

A good way to start is to work with words to think through sequences. Often times, we start from describing the need and problem in a user story. Then, as in the task flow example above, we might express a solution in words, or using a simple task flow.

2. Define key screens

Next we might start to think of key screens in the interface. A good way to approach this is to think in terms of starting and ending points. In our “buy a hoodie” task example for instance, the starting point is the product page and the ending point is the confirmation page.

The goal is to identify screens where the interface changes its state, for instance when data is dynamically updated during a process like checking out of a store. You might see a form that progressively asks for more input, e.g. contact information, shipping information, and billing information in one view. Each of those would need design.

3. Connect screens

Next we might start to think of connecting the key screens. Draw arrows between the boxes to define the space between the key screens and move the user forward through their task. We might include decision points and show what happens in different cases if the user chooses one option, and what happens if they choose another.

An example

Let’s say we are designing a cat photo-sharing app and we want to design the sign-up and first-time user experience. Let’s break this approach down:

  1. Tasks: Sign Up and First Time Experience
  • Sign Up: User signs up, setting a username, email and password.
  • First Post: User's first task is to take their first picture right after sign-up confirmation.
  1. Key Screens:
  • Unregistered starting page
  • Sign Up Screens
  • Sign Up Confirmation
  • Sign In Screens
  • First Post
  • Feed (Confirmation)
  1. Wireflow
Illustration using wireframes to illustrate flow

Conclusion

Flow diagramming helps define optimal paths for user task completion and we can also predict and deal with potential diversions from best-case scenarios and can help the user get back on track (or take a different intended path).

An exhaustive exploration of flow ensures that the application is ready to help with well-written messaging, as opposed to vague error text. It also lets us offer useful options for moving forward when hitting a roadblock as opposed to the user feeling stuck and having to figure out what to do next.

As we’ve seen in the comparison above, wireflows give us quite a few advantages over using each of these design techniques separately. The primary reason for using wireflows is to empower you as the product designer to visually communicate the interface and flow in the most effective way with one design artifact.


By Mike Angeles
Got questions or feedback? Email mike@balsamiq.com.


Related Articles

What are wireframes and why are they used?

A comprehensive guide to user interface wireframes. Learn what wireframes are, why they matter, and how they’re used through examples and demonstrations.

By Peldi Guilizzoni

Ten Principles of Effective Wireframes

Guiding principles to help designers wireframe better and encourage the entire team to participate in the design process.

By Billy Carlson

Five Steps to Creating Great Wireframes

Good wireframes solve real problems and lead to strong products. From writing out the scenario to gathering inputs, here is a proven path to a great website or app.

By Leon Barnard

Get the Inside Scoop!

Want to get exclusive early updates on our
Products, Wireframing Academy, and our Company?

Subscribe to our monthly newsletter and be part of our Inner Circle!

See what people think of our past issues!

Dazz Knowles
"Of all the e-mail newsletters I get, @balsamiq is the one I always read, they're brilliant!" - Dazz Knowles
M. Pesente
"It's always a big pleasure receiving such an inspiring newsletter. Love the Balsamiq culture!" - M. Pesente
Jérémie André
"Another great newsletter from @balsamiq!! 😁" - Jérémie André
Looking for more ways to get closer to Balsamiq? Join our Research program or Slack community!