Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Sorting and Filtering should go on top.

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

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

mockup

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.

share|improve this question
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. –  greenforest Apr 23 '13 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 '13 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. –  greenforest Apr 23 '13 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 '13 at 12:07
add comment

2 Answers

up vote 3 down vote accepted

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

share|improve this answer
    
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 '13 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 '13 at 13:02
add comment

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The important thing is you have Elements to show feature exists, if you want to hide the corresponding GUI

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.

share|improve this answer
    
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 '13 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 '13 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 '13 at 7:54
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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