What are Wireflows? course lesson

Task flows, user flows, and flowcharts — these terms describe diagrams designers use to document user interactions and show directional flow and decision-based logic. What differentiates task flows from flowcharts is the level of detail and processes they include, and the term "user flow" is often used interchangeably with both task flows and flowcharts.

However, product designers have been using hybrid methods for wireframing for a long time. We're talking about wireflows — a series of wireframes connected to document a user flow. The type of diagram you want to use for a specific user flow depends on the type of app you are designing — specifically, how many unique pages it has or if the page's content dynamically changes based on user interaction.

Exercise #1

Task flow

A task flow is a diagram that shows a linear sequence of steps that illustrate how a user will complete a particular task — for example, a login task flow. Task flows use plain and natural language and don't show any design. They also don't usually explore deviations from the ideal path — for example, if a user forgets their password.

Task flows are useful in planning optimal paths for task completion. One way to create task flows is to conduct task analysis to observe how users perform their tasks and achieve their intended goals.^[1]

Exercise #2

Flowchart

Flowcharts are similar to task flows but more detailed. Besides the path users take when interacting with the system, it also shows their decisions on that journey (is a user signed in? yes/no) and the reactive back-end processes they may trigger (send a request to the server).

Because of their nature, flowcharts allow us to document the user and system flows more thoroughly, showing the branching of paths at decision points and how data flows through the system. They're excellent for representing the product's complexity, but the downside they share with task flows is that they don't show any UI design.

Exercise #3

Wireflow

The term 'wireflow' comes from the combination of words 'wireframe' and 'flowchart,' coined by Nielsen Norman Group.^[2] As the name suggests, wireflows combine the benefits of both wireframes and flow diagrams.

Wireflows show visual UI changes as users interact with an application or website. They can also contain annotations to indicate what happens in the back-end at that time. Think of wireflows as illustrated task flows and flowcharts.

Wireflows are particularly useful when documenting mobile, desktop, or web apps that don't have many unique pages but instead feature a few core pages that change content dynamically based on user interaction. This allows designers to show design in the context of common user tasks.

Exercise #4

Simplified wireflow

Simplified wireflows allow you to take a more abstract approach, diagraming the flow using smaller screen representations. This type of simplified wireflow is something of a hybrid between a task flow and a regular wireflow. Instead of creating custom wireframes for different screens, you basically create a task flow illustrated with symbols representing different screen types.

In the example, you can see a simplified purchase flow that starts with users searching for the item on the home page and ultimately ends with the purchase confirmation screen.

Exercise #5

Wireflow organization and usage

The classic use case for wireflows is to document the journey of a user working through a common task on the product — for example, adding a song to a playlist.

Simple wireframes show the screens available to users at each step in the workflow. Arrows connect specific UI components that users interact with — for example, tap a button or a link — with wireframes that show what happens as a result of the interaction. Wireframes in the flow don't need to show separate pages. Very often, the page stays the same but the content changes, reflecting feedback to users' actions (a ticked checkbox or a popup menu).

You can also use wireflows to document complex workflows of desktop and web apps. No need to show a full-screen wireframe for each step — creating wireframes for the portion of the screen that changes will provide enough context.

Can you use wireflows for documenting task flows in traditional static websites? It works for mobile but might not be the best idea when it comes to desktop websites — when wireframes show different big pages, it's easy to lose the context of the user flow.

Exercise #6

Wireflow creation process

Let's look at the steps of the wireflow creation process in an example of a mobile app:

Describe the need and problem in a user story. For example, user signup — setting the username, email, and password.
Identify the key screens in the interface. A good way to approach this is to think in terms of starting and ending points. For example, the starting point is the login page, and the ending point is the welcome modal.
Connect the screens with arrows in the order users would move forward. You can also include decision points and show what happens in different cases — for example, if a user forgets their password.^[3]