In the previous note, we talked all about tab bars, their significance and guidelines for proper usage. While it’s extremely useful, it’s not the only method of traversal across an app. The more commonly used method of navigation is Interactions.

If tab bars are used to navigate across different sections in an app (that have little to do with one another), Interactions are used to navigate between viewswithin a tab.

Simply put, this can be done in two ways -

• ‘Pushing’ through the app’s hierarchy by going to one page after another

• Using modals

Pushing is the default way of going through an app. You start at a higher level, and push to get into more detail.

Modals are used when the task at hand is self-contained. It creates focus, and is separate from the information hierarchy of the app.

Hierarchical Navigation (aka Pushing)

Pushing allows frictionless transition between core areas of an app. It reinforces the difference and helps traverse between top level and lower level hierarchy.

When should one use a push?

When your app’s workflow requires a lot of back-and-forth, and where users switch between flows in the app, using push transitions are recommended.

For example, if WhatsApp opened a modal (instead of push) to show a chat, users would think twice before closing it when it’s no longer relevant. By providing a push transition, they know how to access it again (and go back to the main page), so it allows for frictionless task switching. In this case, that refers to going from one chat to another.

What to keep in mind while using a push?

• As you go deeper into the app’s hierarchy, the content should be more specific and the options should be lesser.

• Use the nav bar to orient people in the hierarchy - If I’m inside a page, I should be able to know where I came from. This can be achieved by having a back button (to move up by a step in the hierarchy), and a specific label.

Modal Presentation

A modal interrupts your current workflow and prevents you from using the rest of the app by covering the tab bar. It’s an intentional disruption, because the purpose is to reinforce focus.

It’s primarily used for self-containing tasks, which is of 3 types -

• Simple task → Creating an event, setting a reminder

  Locking in helps users finish without distraction.

• Multi-step task → Adding a transit card to a wallet

  It may seem counterintuitive to use modals for a complicated task, but the purpose here is to make sure this task isn’t abandoned midway by clicking elsewhere in the app.

• Full-screen content → Videos, photos (like Stories on Instagram)

What should every modal contain?

• An option to dismiss - so the user can leave the task, either by clicking ‘X’ or ‘Cancel’

• Label/title

• Primary action

What to keep in mind while using a modal?

• When there is no user input, the ‘X’ button is used to dismiss the modal. However, any input should be followed by a confirmation to submit said input (for clarity).

• Limit modals over modals, because that can be jarring. However, sometimes it is necessary.

  For example, adding photos (a self-contained task) to an itinerary (another self-contained task).

Getting navigation right requires focus and intention, and should always be thought of while designing new features for an app.