1

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

Illustration to illustrate the 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.

  • Do you have a visual representation of this? – Mike M Oct 26 '17 at 14:22
  • @MikeM see updated question. – Rolf ツ Oct 26 '17 at 15:14
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.

  • Thanks for your answer! In my opinion not returning directly to the top-level screen destroys some of the advantages of having a bottom/top-navigation that is always visible. The idea is that users can quickly switch between top-level views. But in case of having a back-stack the user cannot quickly return to the top-level views (back navigation is needed). 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? – Rolf ツ Oct 26 '17 at 15:13
  • @Rolfツ updated my answer – nathangitter Oct 26 '17 at 15:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.