Should the tab bar be accessible on sub pages in a mobile app?

Question

I've just joined a team as an UX / graphic designer developing an app for iOS and Android. The app is already in production, and I'm working on implementing new functionality and tweaking the current design.

Our app is tab based, and have five tabs for the main pages in the app. There are also several sub pages from each tab the user can navigate to.

One thing I noticed is that the tab bar is not visible / accessible when the user navigates deeper. Instead, you have to use the back button in the navigation bar to get back to the parent page before you can use the tab bar.

From my experience with other apps like Facebook, Messenger, Instagram, App Store, Spotify, SoundCloud and so on, is that the tab bar is always accessible from every sub page. This is something I think I'm gonna try to convince my team to do.

But still, what are the pros and cons with having the tab bar always accessible? Does anyone here have any experience with this issue?

Answer 1

Material design guidelines rightly points out your problem:

The bottom navigation bar enables quick movement from deep in one topic to the top of another topic. Keep it available as the user descends the hierarchy, either by showing it persistently, or by concealing and revealing it upon scroll.

The bottom navigation bar shouldn’t be used for:
- Views focused on a single task, such as an email “Compose” screen.
- Views containing user preferences or settings

On Android, the Back button does not navigate between bottom navigation bar views.

So with your application, hiding the tab bar whenever the user jumps to one subpage is not always a good method. You need to stack the subpage above the main page of tabs and there will be a '<-' back button on the subpages to go back to the main page. The flow is perfectly done in Instagram.

An exception is for forms. When a subpage is a form, where you need the full attention of the user, you should conceal the tab bar.

Answer 2

You should absolutely always keep the same navigation pattern in your UI, so I would keep the tabs in all the pages. Think of it as a frame where key functions are easily reachable (mainstream apps like Facebook or Instagram are a good example). Inside the frame you want to show the information. If you feel like having space related problems (on old smartphones for example), you should use a disappearing tab when the users interact with the data (scrolling or reading). This solution is good if you have few key functions and you want them to be always visible and easily accessible. Anyway, if these are not "key" functions, I would prefer to use a common lateral menu behind a burger icon. This solution will add a tap to the process (1.burger icon, 2.function icon), but it will keep clean your UI. It is your call!

Answer 3

One rule of usability heuristics is user control or freedom: All sections & subsections have to be navigable and the user should be in control.

This could also be a structural issue, the structure of your app may have many (More than 3) sections that it pushes the user too far deeper, if that is a case, an easy fix would be to provide a "Home aka Emergency Exit ("Cancel" if pages are forms)" Icon on the right side of top-nav.

Here's how I would handle structure of the app.

Layer 1 (Parent Page) - All the main sections of the app should be accessible by tab bar (The Ideal number should be kept at 4-5 tabs if more it should be scrollable horizontally, Max should not be more than 7. If more than 7 you might need to think of different structure).

Layer 2 (Child Pages) - Subsections (First Child) no back button needed in the header. In apps, these are usually "lists".

Layer 3 (Grand Child Pages) - These pages require a back button to go back to child pages. They may also contain activities such as fill a form, details of a particular instance from child page coupled with action buttons. Here and beyond this tab bar here should be discouraged to provide focus and clarity.