For a small app / site, you can have all the screens on a single page and draw the nav / flow between these.
But once your app grows, or you are dealing with a complex one, which requires a number of iterations for many screens, this approach works bad. Particularly, in the image below I faced Balsamiq Desktop 3 limits of a mockup height.
Complex app requires development of the task flow and the app’s screens. And these are the completely different tasks, which can be even performed by different people!
The approach which works for me is:
Developing a task flow first. I borrow a notation from the article A shorthand for designing UI flows. It is very light-weighted and quick:
I implement this with Lists in Balsamiq:
Then design screens, each one is on a separate mockup, possibly having variants on the same view, or alternates, etc.
Finally, create navigation. It’s easy, just add links to each screen on the flow to the designed screen somewhere in the Balsamiq document.
Then you can jump to any screen from the flow just with
ALT + Click!.
The pro are:
- Flow is a bird eye view of your app. You can see a general logic and navigation here, possible points of entry, etc. And there is no distraction of the details, you can see on the screen level. So you are totally focused on a flow part of the app
- Designed screens allows to focus on interaction details. And you have a plenty space to do so!
- Both the UX artifacts, flow and screens, are independent and can be presented to customers as separate docs, and combined one