Balsamiq Community Discussion

Overview of all screens, and how navigation is possible between them?


#1

Hi,
We would like to generate an overview like this: https://docs-assets.developer.apple.com/published/83ef757907/navigation_interface_2x_8f059f7f-2e2f-4c86-8468-7402b7b3cfe0.png This way we can catch if there are problems in the navigation between screens.
Is this possible with Balsamique?
We use Balsamiq Mockups, Version: 3.5.16

Thank you!
Emile Sonneveld


#2

Hi @Emile_Sonneveld,

Are your screens placed on the separate mockups (pages) of the Balsamiq file?
As an easy option, you can generate Sitemap.

I used the different approach, which is a bit more time-consuming. If Sitemap will not work for you, I’ll share my way. :slight_smile:


#3

Hi @Alexey_Kolchenko,

Thanks for the option! For us this is almost good enough. :wink:
In best case, the site map would be constructed by following the links between screens. Is this what your different approach does? It sounds quite interesting, I’d be happy to test it out :slight_smile:


#4

Small App

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

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:

  1. 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:
    image
    .
    I implement this with Lists in Balsamiq:
    .

  2. Then design screens, each one is on a separate mockup, possibly having variants on the same view, or alternates, etc.

  3. Finally, create navigation. It’s easy, just add links to each screen on the flow to the designed screen somewhere in the Balsamiq document.
    image
    .
    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

#5

Take a look at the upper post :wink: