Wireflow

A wireflow is a user flow drawn with the actual screens in it. Instead of abstract boxes labelled “Login” and “Dashboard”, each node is a low-fidelity wireframe, and arrows between them leave from the button, link or gesture that triggers the move.

That last detail is what separates it from both of its parents. A flowchart says a step exists. A wireframe says what a screen holds. A wireflow says which element on this screen takes you to that one.

What it is for

It catches the gaps that appear in the join between screens. Where does the back button go after a successful save? What does the empty list show before the first item exists? How does someone recover from an error that appears on step three of five? These questions do not show up when screens are designed one at a time.

It is also a good handover document, since developers can read a path through the product without needing an interactive prototype.

Wireflow, prototype

A wireflow is static and shows all branches at once. A prototype is clickable and shows one path at a time. For review, the wireflow is better, because everyone can see the exceptions together. For testing with users, you need the prototype.

In practice

Annotate the arrows, not only the screens. “Tap row”, “swipe left”, “after 30 seconds, automatically” carry the interaction logic. Keep the fidelity low enough that no one starts debating colours.