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:

enter image description here

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:

enter image description here

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:

enter image description here

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:

enter image description here

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:

enter image description here

All advice appreciated! Thank you!


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.

  • I've thought about that, but the filtering gets quite complex and you need the vertical space. This is an example of how the filtering looks: dl.dropboxusercontent.com/u/78522446/filter.png And there would be many directories, many groups, etc. – JLC Jun 11 '14 at 19:16
  • @JLC - I think that'd still be manageable with collapsible menus like in my example above I just made. – Steve Wortham Jun 11 '14 at 19:19
  • didn't see your edited comment. Hmm, looks tricky but possibly doable? I'll give it a shot :) thx! – JLC Jun 11 '14 at 19:21

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.

  • Thank you! I'll give this a whirl too! I don't think people switch between sections often (at least, not when they arrive to the accounts page). – JLC Jun 11 '14 at 20:14

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.


  • 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.

  • you're very welcome! just hope it helps. – Son Do Lenh Jun 11 '14 at 20:32
  • VERY helpful :) – JLC Jun 11 '14 at 20:38
  • @JLC, I just updated the answer to clarify what I meant by collapsible. It is not supposed to be an overlay on top of the list, but it will push the list down the page. – Son Do Lenh Jun 11 '14 at 20:39
  • Agreed - i dont see the overlay menu pattern as much. It could get cluttered, especially with the dense data tables in the UI. Thank u again! – JLC Jun 11 '14 at 21:03

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.