Building Wireflows

A task flow is a diagram showing a linear sequence of steps a user takes to complete a specific task. For example, a login task flow might include steps like "Open app," "Enter credentials," and "Tap sign in."

Task flows use plain, natural language and don't include any visual design. They also don't typically explore deviations from the ideal path, such as what happens when a user forgets their password.

These diagrams are useful for planning optimal paths for task completion. One effective way to create them is through task analysis, where you observe how users actually perform tasks to achieve their goals.

Flowcharts are similar to task flows but more detailed. Beyond showing the path users take, they also document decision points (Is the user signed in? Yes/No) and back-end processes that those decisions might trigger (send request to server).

This structure allows you to document user and system flows more thoroughly, showing how paths branch at decision points and how data moves through the system. Flowcharts are excellent for representing product complexity.

The downside flowcharts share with task flows is that they don't show any UI design. This makes them less effective when you need stakeholders to visualize what users actually see on screen.

The term "wireflow" combines "wireframe" and "flowchart," coined by Nielsen Norman Group.^[1] As the name suggests, wireflows merge the benefits of both wireframes and flow diagrams into a single documentation method.

Wireflows show visual UI changes as users interact with an application or website. They can also contain annotations indicating what happens in the back-end during each interaction. Think of wireflows as illustrated task flows and flowcharts.

Wireflows work best for mobile, desktop, or web apps that don't have many unique pages but feature core pages with content that changes dynamically based on user interaction. This lets designers show UI design in the context of common user tasks.

Choosing between task flows, flowcharts, and wireflows depends on what you need to communicate and to whom. Each method has strengths that make it better suited for different situations and audiences.

Task flows work best in early planning stages when you need to map out the ideal path quickly. Flowcharts shine when documenting complex logic with multiple decision points and system processes. Wireflows are ideal when stakeholders need to see the actual interface alongside the user journey.

Consider your audience too. Developers might prefer flowcharts that show system logic, while clients and product managers often find wireflows easier to understand because they can see exactly what users will experience.

Simplified wireflows take a more abstract approach, diagramming the flow using smaller screen representations. This hybrid method sits between a task flow and a full wireflow, using symbols to represent different screen types instead of detailed wireframes.

This approach works well when you need to show the overall journey without getting into specific UI details. For example, a simplified purchase flow might show icons representing "Home," "Search results," "Product page," "Cart," and "Confirmation" connected by arrows.

Simplified wireflows are faster to create and easier to update than full wireflows. They're particularly useful during early design phases when screen layouts aren't finalized yet.

The classic use case for wireflows is documenting a user's journey through a common task, like adding a song to a playlist or completing a purchase. Organization matters because clear wireflows communicate effectively while messy ones create confusion. Arrows connect specific UI components users interact with, such as buttons or links, to wireframes showing the result of that interaction. Wireframes in the flow don't need to show separate pages. Often the page stays the same but content changes, reflecting feedback like a checked box or pop-up menu.

For complex desktop and web apps, you don't need full-screen wireframes for each step. Creating wireframes for just the portion of the screen that changes provides enough context while keeping the diagram manageable.

Creating effective wireflows follows a structured process.

Let's walk through the steps using a mobile app signup flow as an example:

1. Start by describing the need and problem in a user story. For signup, this might be: "As a new user, I want to create an account so I can access personalized features."
2. Next, identify the key screens by thinking in terms of starting and ending points. The starting point might be the login page, and the ending point is the welcome screen.
3. Finally, connect the screens with arrows in the order users move forward. You can include decision points showing what happens in different cases, like when a user forgets their password or enters an invalid email.^[2]