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'm not sure how to best word the title for this question (apologies).

I have a scenario where on default, my screen will show all data for a data comparison. The user can then apply filters to hone in on specific facets of the data being compared.
So, here's what I want to happen:

[_] Apply a filter to delimit age ranges being displayed.

If the user selects this, the following should display:

[X] Apply a filter to delimit age ranges being displayed
     [_] 18-25
     [_] 26-36
     [_] 37+

The issue here is that i have several types of filters that a user can apply. I don't want to put all of the checkboxes on the filter screen explicitly because I have very limited real estate and only want to show checkbox options the user can select only if it's needed.

I only want the checkboxes to display only if the initial condition is met (in this case, the checkbox initially asking a user if they want to apply age range delimiters). I'm just not sure it's the most elegant solution. Does anybody have any ideas on how to better accomplish this?

Additionally, if this is the best way to do this, does anybody know of a good jquery or animation where the area around this checkbox expands to make room for the additional checkboxes?

share|improve this question
add comment

4 Answers

For the one given, you could use a drop-down box

All Ages v
18-25
26-36
37+

However, in your case, your approach of progressive disclosure appears better to me. There are jut a few requirements I would put to it:

It should be immediately obvious which filter type I have to expand to find a particular option (e.g. the one I remember having used last week).

For this, the number of filter types should be small (<10, ideally 5 or less). The options per filter should be few and simple. Visually it must be absolutely clear they rank below the filter types. Consider additional highlighting for the filter types (e.g. a different background for the master checkboxes)

The filter types must also be obviously "distinct" - the options and filter types must be chosen so that there is absolutely no ambiguity for any user where an option goes.

The pattern is usually called "Accordion" - I'm not sure if this implementation can be customized (you must be able to expand multiple panels, and the collapsed7expanded state is part of your result)

share|improve this answer
add comment

Hiding stuff may harm the learn-ability of the interface.

In principle you should therefore only hide stuff that a user is not allowed to see. In other words visibility should only be controlled based on security/authorization considerations.

In your case, hiding the ranges may raise questions in the user's mind as to what filter will be applied when they check the option. To alleviate this, you can employ a standard that is used in menu's and on buttons to signal a dialog will follow: the ellipsis.

Consistently adding an ellipsis to the end of option text when checking that option will reveal more options, will be soon be picked up by your users as a signal that they can safely check the option to find out what other options it reveals.

share|improve this answer
add comment

Use an accordion or single-select panelbar.
Each section contains all the multitude of filter options that can be applied. Each section title tells the use what is contained in each section.

Some examples of these in action:
http://jqueryui.com/accordion/
http://demos.kendoui.com/web/panelbar/index.html

For your example I'd probably go with a default of all items checked (so that they are included in the filter) and then the user can de-select items as required. Add some 'select-all' and 'clear' buttons for each section and then the user has full power to easily amend the filters in each section as they desire.

That was our approach on our dashboard. Here's how it looks (some details removed):

enter image description here

share|improve this answer
add comment

Use a range slider with specified breaks and show it conditionally. ex,

=====[25]====<-D->==[36]====

User will select a range and you use that as your business model dictates.

share|improve this answer
1  
In all honesty, I've never seen a range selection slider that doesn't suck in production. –  peterchen Dec 11 '13 at 10:38
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.