How to hide main navigation?

Question

I'm designing an application where the main nav is on the left. This is because there isn't enough space if I put the main nav on top (to fit both the main nav and the utility nav).

So this is how the navigation looks like:

When the user clicks into the 'accounts' tab, there will be a list of accounts shown. One of the main features of the accounts page is the ability to filter accounts (by name, email, etc). So the accounts page looks like this:

The filtering navigation is also vertical, and I'm having trouble figuring out how to fit it on the page. One idea was to put a fly-out right nav, like this:

But it seems really cluttered (and potentially confusing?)

Another idea I had was to completely hide the main navigation, and allow the option to switching out the main nav to the account filtering nav, like this:

But it seems like bad UX to hide the main navigation.

I've also considered having a navigation that drops down from the top, but I don't like the idea of having to open and close the nav every time you make changes to filtering (its a tool that is used a lot).

This is an example of how the filter looks, expanded:

All advice appreciated! Thank you!

Answer 1

Since these filtering options are exclusive to the accounts page my inclination would be to place them at the top of that page, just above the list of accounts.

The filtering controls could look something like this...

^{download bmml source – Wireframes created with Balsamiq Mockups}

Then the only other thing you'd have to worry about is scrolling and how you want to solve that problem. If this is not an AJAX thing then the scrolling position is going to change every time you change the filter and the page is reloaded. That experience could be slightly jarring. If you are using AJAX to pull in the results, however, this could be a non-issue.

Answer 2

Agree with Steve that filter at the top would be better than having it to the left. If you need the real estate, consider displaying something like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

As to having it to the left, the question to ask about the main nav would be this. "How often does a user switch between different sections of your site?" If the answer is often, then the main nav should not be compressed.

Answer 3

Some tests already suggested that filter area on top is more likely to be used by users.

The only problem in your situation is that you would like to keep the space for the content, which is a perfect argument.

My take on this would be:

• Having a COLLAPSIBLE filtering area that will push your account list down the page (NOT a collapsible overlay). The reason is for users to still be able to scroll down the page for the list below.

This area could be as big as necessary for all of your criteria. I've seen apps with this area occupying almost a third or half the screen estate. You could have tabs inside this area as well for the categories.

For first time use (when users see the list for the first time), the app shows only a link "Filter results". Clicking on this link will expand the filtering area right above the list.

• Let users define their filtering criteria in this large enough area. As soon as they click Filter button, or as soon as they choose a criterion (improvement on this later), you collapse the area

• Display only a SUMMARY of the chosen filter criteria in a text label. E.g. "Showing 28 results for Directory ABC, Group XYZ." and 2 link buttons "Show all results" and "Apply other filters", the last of which will expand the area again.

IMPROVEMENTS:

• Having a Filter button inside the filter area might not be good usability as it requires an extra click to refresh the results. On the other hand, collapse right away the area would become annoying if users are to specify multiple criteria at once. You could implement a strategy which only collapses the area after a time-out. This let users continue to choose filters if they intend to, or see the full list of results after an inactive period.

• Of course, any design decision has to take into account the frequency of the action. In your case, depending on how often the user want to filter results, that you can think of a corresponding response. Maybe they just need to browse the account list, and filtering is just an extra nice thing to have (my suggestion falls nicely in that case). On the other hand, if they use filtering extensively, then having a dedicated filtering area is necessary.

Answer 4

I see your dilemma here, and it's good to see that you have thought upon all possible options. Here's what I think about it. One of the options that you suggested, where the filter overlaps over the main navigation seems like a good solution to me. You cited that it seems to be a bad UX, here's my argument for it.

UX Case: In this case, when the filter overlaps the main navigation, it doesn't occupy any other real-estate and all other area remain interactive and visible, no overlapping on tabular records. Also, at this moment it is very less likely that the user will use the main navigation while using the filter option. Also, by hiding the main navigation, you are reducing the clickable option thereby reducing the cognitive load (Hick's Law). So, I think that's a better solution.

Let me know if you disagree.