Flows are just as important to good interfaces as individual screens are. Customers don’t land on screens from out of nowhere. Specific sequences of actions lead customers through your digital platform as they try to accomplish their tasks. I recently read a blog post from Ryan Singer "Shortland for user flows" which gives a simply explanation about the process.
Preliminary user flow diagrams usually take the form of a chart comprising some or all of the following shapes with often universal meanings.
Rectangles (notes)
Diamonds (decisions)
Circles (entry points)
Transition arrows (user navigation)
Squares (sometimes used for notes)
However, once the design team wireframes their product’s screens, their user flow diagrams often substitute the rectangles for wireframe screens. This combination of a user flow and a wireframe is sometimes referred to as a “wireflow".
When designing user flow diagrams, there are right ways and wrong ways to go about it. What you don’t want is to end up with a mind-boggling, confusing document that very few people, apart from the design team, can read. Let’s take a look at some of the best practices to design workflow diagrams.
Descriptive name. Always give a descriptive, straightforward name to your user flow that describes what it's about
One-directional flows
One goal per flow
Always have a legend key
Decide on an entry point
Clear labels
Use colors wisely
Provide a clear resolution
Mapping out and validating user flows is to shine a light on the path to UX success. User flows help us to identify any possible problems before we start designing high fidelity screens and prevent re-designs after the product has entered the development stage.