Tab navigation: top-level and second-level targets, how to deal with them?

Question

My question is quite straight forward, however difficult to explain. I assume we are all familiar with tab navigation, in my case I'm dealing with bottom-navigation but it's not really relevant for the question whether it is top or bottom navigation.

In my case I'm developing an app which has a:

• Top-level (T1) screen witch can bring you to a second-level detail screen (S1).
• This second-level screen contains a list.
• When the user presses a list item a "third-level" popup is shown.

Most UX guides tell us that tabs within bottom-navigation should always bring the user to the same top-level target. So essentially a tab can have two states: active or inactive (either the current screen is the top-level target or not).

Question 1

I'm wondering what should happen to the tab-navigation if a user navigates to a second-level target:

• Should the tab-navigation remain visible?
• If so which item should be selected, should any be selected?

Question 2

This question is way more intrestring and more important to me. The problem I'm going to describe here only occurs if we show the tab-navigation on second-level screens.

Let's say we have two top-level destinations T1 and T2. From T1 you are able to navigate to the second-level screen S1 and from T2 you are able to navigate to S2. Assume we show the tab-navigation also on second-level destinations. We are dealing with two tabs (1 and 2).

Should the two tabs keep track of the screen that was historically showing to the user (ether the top-level screen or the second-level screen)? Or in other words should there be a back-stack for each tab?

Example (starting point is T1):

• From T1 click on list-item > Current screen: S1
• From S1 click on tab 2 > Current screen: T2
• From T2 click on tab 1 > Current screen: T1 or S1?

Reasons for S1: Because that was where I left when I navigated to T2.

Reasons for T1: Because tab-navigation should always bring you to a top-level screen.

Illustration for both questions

I personal would not show the top-level navigation but rater let the user navigate back using the back-button (physical or virtual).

Advantage: Very clear which item to select. The problem described in question two can never occur. (huge win, no confusion)

Disadvantage: More clicks needed to switch to a different top-level screen.

Answer 1

Think about these two questions:

1. What is the purpose of the tab-based navigation?
2. What is the mental model of the user?

A tab-based navigation is great because it allows for multiple independent sections in your app, increases context of where the user is and where they can go, and lets users jump between places in the app quickly.

---

Question 1

I would propose that the tab navigation remains visible on any level, and that the item for their current tab is selected. This shows the user where they are, and allows them to switch tabs at any time.

Question 2

When the user selects a tab, it should show the previous status of that tab (meaning there is an independent "back-stack" for each tab). This aligns more closely to the user's mental model that each tab is it's own "space" independent of the other tabs.

---

I think iOS does an excellent job with their tab-based navigation. Each tab exists independently, state is saved between tab switches, and each tab usually has its own navigation stack.

Apple's Human Interface Guidelines have a great section on navigation (link). The principles they describe are useful even if you are designing an app for a different platform.

---

Edit: Response to comment

The idea is that users can quickly switch between top-level views.

This behavior depends if you want the tabs to represent top-level views or different independent "sections" of the app. Generally the user's mental model is that each tab represents an independent section, although this may vary based on your particular use case.

But in case of having a back-stack the user cannot quickly return to the top-level views (back navigation is needed).

One solution is to make a click/tap on the currently active tab return the user to the top-level view for that tab. This would mean in order to switch to a previous tab's top-level view, they would need to click/tap the tab twice.

Can you explain a bit more in your answer why you think having a back-stack is important in relation to the top-level navigation requirement that is often mentioned when talking about bottom or top navigation?

I'm not entirely sure what you're asking, but the general idea is keeping the state of your application aligned with the user's mental model. In the situation where each tab is its own independent space, it makes sense for each to have its own independent "back-stack" so that the user can come back to the exact place where they left.