5

We are looking into converting our hamburger navigation into a tab bar, we have too many items in the side menu right now and we want a tab bar with 3-4 items and a menu where the user can customize what appears on the bar.

We want to show the bar on our few top-level views like email, tasks, calendar, etc. But some of these views provide navigation to subviews, we don't want to show the tab bar there to avoid confusion and to save screen space, but the only way to handle that I could find was to hide it upon scrolling down and show it when scrolling up.

We think this is a really ugly solution that wouldn't fit our app and our users at all. Is there any common alternative? How would you handle a bottom navigation system that should not be present in every view?

Improve this question
1
  • Add some diagrams to help explain!
    – dalearn
    Mar 21, 2018 at 14:31

2 Answers 2

Reset to default
6

One solution which may fit your problem is to keep focus on the current page by limiting top-level navigation.

For example, Facebook does this on their mobile app:

If the user is on the 'news feed tab' they can see all top level navigation on the tabs - when the user then drills down into a post (sub-level content) the navigation tabs are removed and the user is then focused on the sub-level content whilst having the option of backing out. This keeps a clear hierarchy throughout.

Visual example of top level, where tabs are visible:

enter image description here

Visual example of the sub-level, where tabs are replaced by a back naviagation:

enter image description here

Hope this helps!

Improve this answer
10
  • Thanks for the response. We discussed this option as well, isn't this bothersome for users? I would imagine having to press back 2-3 times just to get to another module in the app to be very bothersome after a while, our users switch a lot between different parts of the app. We also thought about this solution with an extra 'home' button in the navigation bar, but we're not sure we can fit it in there.
    – kevin
    Mar 21, 2018 at 10:10
  • It depends on how many levels of navigation there are. It could be bothersome for your users, it might also not be bothersome for your users - it can be risky to leave design decisions up to assumptions. You could run a simple A/B test to see which variation feels best.
    – RobbyReindeer
    Mar 21, 2018 at 10:15
  • @kevin Mobile design kind of depends on not having too deep layers. Generally if an app is too complex to navigate, it is a tell tale sign it shouldn't be compressed into one app. Testing is key here to see what fits your app and your users.
    – Wendy Wojenka
    Mar 21, 2018 at 10:26
  • @Wanda Wether this product should exist in app form is not up to me, we offer our customers a complete software solution for their daily tasks that happens to also be available in app form. Our mobile team has little say in what modules from the main product are added to the app version. So we, like many other developers, try to find an elegant solution instead of just saying it shouldn't be like this.
    – kevin
    Mar 21, 2018 at 10:33
  • 1
    FWIW I find Facebook mobile's navigation to be extraordinarily frustrating. You only have to scroll a little too far in a sub-level and suddenly it's swiped away, taking you back to the News Feed, which then promptly refreshes and you can't find the content you were reading any more. I'd argue that Facebook is a poor example to hold up as a paragon of mobile design.
    – Lightness Races in Orbit
    Mar 21, 2018 at 12:41
1

You could use the bottom navigation to navigate between the main parts of your application and then in each provide tabs at the top that are switchable by swiping left or right for your "sub-categories". For example the app Wattpad does this: Wattpad screenshot

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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