How to handle 2 side navigation bars on a web app

Question

I'm working on a web app that can briefly be described as the following. Every page has a table, and there's a primary side navigation bar that allows users to jump from one page (table) to another. This bar can be used while it's minimized as it shows the icon of each section and when users hover on an icon, a tooltip shows up.

At the same time, users can expand the bar so they can see the name of each section next to its corresponding icon at all times.

This bar was designed like this to allow users to have more space while working on the table by minimizing the bar, while also giving them the option to see clearly the name of each section by expanding it in case they are not that well familiar with the icons yet, and they don't want to guess what section does an icon represent by hovering to see whether the tooltip is the right one or not?

Now, we would like to add a secondary side navigation bar where we can categorize the table information into folders.

Is it a wise decision to give users control over which side navigation bar they want to be minimized and which they want to be expanded? Or should I minimize the primary bar at all times while keeping the secondary expanded?

Answer 1

In a project recently I had the same problem and I solved it using a persistent menu button that let the users navigate to the primary sections of the web. Then, inside a section, the side menu stood for all the secondary navigation (also nested like yours).

So, the user navigates inside a section and sees the side menu and all its content, jumping through every page inside it. This is the secondary navigation.

But if the user wanted to navigate to another primary section of the web then must press the menu button (dark square in the wireframe), and all the primary sections appeared in a popup.

This solution supposed that the user will not jump so many times between primary sections and will stay inside one section the most time. We choose this solution because it was clearer for the user and less confusing. There was a homepage that redirected through every primary section, so the menu button was not the only way to navigate through the primary sections.

Hope it helps! I get inspired in stripe.com main menu and the applications button that you can see in Office 365 online apps.

Answer 2

I think it is more of a decision than saying better or worse. Also, nobody wants to hide information. So..

1. If most users have larger computer or tend to use the platform in a desktop environment, personally I think it is better to keep as it is now because they will have sufficient screen space to display all the information without affecting anything.

2. If most users are using laptop or small screen (tablets) to use the platform. Then maybe shrink the primary bar when they finish navigating, for better use of screen space.

• For solution 2 details, personally I suggest only expand primary bar when mouse hovers onto the bar (or finger touches the bar)

Me personally is also in a project about building a platform with very complicated navigating system. Our team is currently using solution 2 because a lot of people are using laptops and tablets. However it still requires a lot of user testing with dedicated user group for future improvements.

Hope my suggestion helps!

Answer 3

I am struggling with a similar problem. And I got the feedback to always show text with icons without hovering. So far this is what I come up with: https://goapi.go4webdev.org (work in progress)

Is it a wise decision to give users control over which side navigation bar they want to be minimized and which they want to be expanded?

You will make some users happy, while others will be confused. I decided not to confuse the user.

Or should I minimize the primary bar at all times while keeping the secondary expanded?

On mobile I think there should be an option to hide the menu. Se my attempt.