User flow

The user flow is a top-down view: it shows how screens follow one another and which decisions guide navigation. The wireframe is a front-on view: it shows what a given screen contains. Flows are designed before the wireframes, to check the navigation logic before going into the detail of the screens.

The user flow describes a journey at product level, with its branches and its alternative paths. The task flow follows a single, linear task, with no decision to make. The wire flow replaces the boxes of the diagram with the corresponding wireframes, which shows the screens at the same time as the way they are sequenced.

Before mockup work. The user flow works on the navigation logic, not the interface, and it is there precisely to spot missing paths before investing in the detailed design of the screens. It also lets you align the technical team on the structure of the product and make sure that edge cases are anticipated: error, empty state, logged-out user.

The first test is about the alignment of the teams. A flow that does not match the reality of the product does not deserve to be taken any further. The second is run with users: you show them the diagram and ask them how they would accomplish a given task. What matters then is the breakdown into steps, the order in which they follow one another and the clarity of the information offered at each screen.

Collaborative design tools and online whiteboards are suitable, most of them offering ready-made diagram shapes. The choice matters less than the readability of the result and the possibility of sharing it with the technical team. A flow drawn by hand on a board does its job if it is tidied up afterwards.