Balsamiq

Toggle navigation

Wireframing User Flow with Wireflows

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 annotation 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.

Wireflow example
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.

Example wireframe from an e-commerce 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 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 are 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:

Task flow example

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 end points, 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.

Task flow example
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, annotation 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 to 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.

Illustration using wireframes to illustrate flow
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.


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 web sites, 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 the interface changes it’s 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.
  2. Key Screens:
    • Unregistered starting page
    • Sign Up Screens
    • Sign Up Confirmation
    • Sign In Screens
    • First Post
    • Feed (Confirmation)
  3. Wireflow
Illustration using wireframes to illustrate flow
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).

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.