Flow maps are designed to represent all possible navigational paths of an interface to help designers plan. However, there are more that users do on interfaces than navigate. A flow map that only illustrates navigation doesn’t represent interfaces realistically. It fails to account for the various interactions that occur on each screen. If flow maps are documents for planning, such a flow map will only plan to fail.
Real interfaces are dynamic, not static. A static flow map only shows you the next screen users navigate to. But how do users get from one screen to the next? What happens in between those screens? This vital information gets lost in static flow maps.
In contrast, a dynamic flow map shows each screen’s microinteractions. These are the elements and components users interact with that move them to the next screen. They also include non-navigational interactions that occur on the screen. It’s important to plan these out in your flow map so that you and the people you work with know what to expect.
A dynamic flow map should also display context. When you have a sense of context, you can better identify task complexity. You can see which screens are forms to fill out, and which ones are more text-heavy and media-rich than others. These details allow you to plan an interface that’s more aligned with realistic expectations.
Microinteractions Use Case
The example below clearly illustrates what users have to do to go from one screen to the next. To get to map view, they have to interact with the zip code field. To add a resource, they have to log in. The microinteractions tell you the whole story.
Not only that, but you can indicate the unique features a screen has. Notice that map view has a category filter and printing option. Users can also toggle from map view to list view. These are dynamic interactions that a static flow map can’t convey.
Half-Baked vs. Well-Developed Plan
Static flow maps lead to half-baked plans that don’t map to reality. Dynamic flow maps lead to well-developed plans that account for both navigation and microinteractions. The more details you hash out during the planning stage, the less details you’ll miss when you build out the interface.
If you want to start making dynamic flow maps from a library of screens and microinteractions, get Flow Patterns. It’s available for Sketch and Figma.
UI Design Kit
Affiliate
Thanks for this post. I like the fact this helps designers start thinking about the user interactions early on, but I’d argue that these are not micro-interactions, they are macro-interactions and they will certainly help communicating a number of useful information to product owners, design and development peers:
1) Architecting these early one allows good design communication and earlier stakeholders understanding;
2) product owners can detail user stories and acceptance criteria earlier;
3) this dynamic flow map serves as a great starting conversation with front-end developers
4) and finally QA engineer can start thinking about the testing scripts.
Congrats on the plug-in!
Another good