I have a bunch of report views, which essentially are tables. They should enable the user with sorting, paging and filtering capabilities.

My idea is to add those features via menu-bars.

Paging would go at the bottom:


download bmml source – Wireframes created with Balsamiq Mockups

Sorting and Filtering should go on top.

But they're displayed differently because if paging is needed is determined at opening time, but filtering and sorting are optional.

In the case, that everything is needed, it would look like this:


download bmml source

It's sorted by multiple columns and has a bunch of expert filters.

The question is, how should I handle the visibility? I don't want to show GUI elements that aren't needed every time, but I also don't want to let the user miss them.

Maybe my menu-bar idea isn't that good at all and I should use external dialogs or something.

  • 1
    Who is going to use this? Potentially 'everybody' or is it more a group of users that will use this more frequently, maybe in combination with a dedicated user account? If it's the latter one then this will give you some more options. Apr 23, 2013 at 11:34
  • A dedicated group of users (online marketing people), but they probably won't use it on a daily basis.
    – K..
    Apr 23, 2013 at 11:59
  • 1
    Great, IMHO makes it a bit easier. Maybe build one version, observe users and figure out how often they use filters. If using filters is the main case I'd make the more visible and easier accessible by default. Apr 23, 2013 at 12:01
  • Yes, this was my plan. I just wanted to see if there are some other ideas, which would suite better than mine.
    – K..
    Apr 23, 2013 at 12:07

2 Answers 2


The best implementation of this that I have seen is from OkCupid. When searching for matches, there are a number of filters that can be added (via the advanced tab), which you only see once you have chosen them.

enter image description here

The two bottom ones are examples of advanced filters, and can be removed by selecting the 'x'.

This has been tried and tested on millions of users, and has proven to be flexible, and easy to use. I would suggest modelling your filtering on theirs. I would however consider changing the 'advanced' tab to something like 'add filter'.

  • That seems like a nice idea. The only difference is, that our expert filters are nestable and can be concatenated with and and or
    – K..
    Apr 23, 2013 at 12:55
  • 1
    @K.. then you change the content of a filter option to include that. This is more about the layout than what is being filtered. 'Height' for example has different content.
    – JohnGB
    Apr 23, 2013 at 13:02

Your solution is good.

I am assuming the paging is always visible (unless content is <1 page)

Given that you want to hide the other elements: Sorting, Filter unless needed, I would simply provide two clickable buttons/links at the top of the table that would expand inline to reveal the GUI you have shown above. That's it, very simple and you are done. e.g.


download bmml source – Wireframes created with Balsamiq Mockups

The important thing is to have Elements to show that the feature exists, if you want to hide the corresponding UI element.

Though for Sorting I would stick with conventions, i.e. titles of the column, rather than providing a separate interface, as it is confusing. In your mockup, you have the sorting indication arrows and the sorting bar. However, assuming you can't do header sorting, the menubar idea is ok.

  • Problem is, those buttons would occupy as much space as the toolbars, because I would have to add them as a additional toolbar to the table :\
    – K..
    Apr 23, 2013 at 11:57
  • 1
    This problem will exist in any way, since you have to have an indication of those features else discoverability will go down. Any alternative you choose will use some screenspace, optimizing the space is upto you.
    – Vijay
    Apr 24, 2013 at 4:52
  • Yes, you're probably right. My system allows for column-menus, which indicated by tiny down-arrows. I will probably use those for "initializing" purposes and after that the user can use the bars or the menus.
    – K..
    Apr 24, 2013 at 7:54

Your Answer

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

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