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.

My datagrid displays both wagons and locomotives tracked on a network. I find that I am often filtering out one of those types to display just the other and I would like to supply a wagon and a locomotive button which will do this in one click, but I still want to retain the possibility of displaying both types at the same time.

Is there a button configuration that would imply these options (wagons, locomotives, or both) to the user?

share|improve this question

5 Answers 5

up vote 29 down vote accepted

For this kind of filter, I recommend to use button group:

enter image description here

Buttons are easier to select and if you group these to show they work together, it is even more obvious for the user.

Conversely, a dropdown is not efficient because the options are hidden.

share|improve this answer
5  
"A dropdown is not efficient because the options are hidden". THANK YOU. I can't believe how many times I encounter a dropdown menu when it really doesn't make sense. I actually wrote about it: jgthms.com/dont-use-dropdowns-for-a-few-items-only.html –  jgthms Feb 25 at 9:43
    
Maybe adding little icons to the labels would make them perfect. But I also think this is the best solution. If you have more than two options I would recommend checkboxes, but in this case, a simple button group seems to be fine. –  Kweamod Feb 25 at 9:55
    
If button groups are available for your target platform, this would be a good solution. –  Bevan Feb 26 at 0:00

You could use a pair of toggle buttons, or perhaps simply checkboxes.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In both cases, the user can show both sets of data by activating both controls (button is "down", checkbox is "checked") or by selecting just one.

Note that this only needs to be tri-state, not quad-state - if the user turns removes the only selection, respond by activating the other choice.

Eg: If the user has this filter selection:

mockup

download bmml source

Then a click on "Show Wagons" would both uncheck "Show Wagons" and check "Show Locomotives", leaving the filter in this state:

mockup

download bmml source

Or, the analogue for Toggle Buttons. I've seen this approach taken and users understood it quickly. See Tog on Interface by Bruce Tognazzini for more information on this last one.

share|improve this answer
1  
What if the user neither check Show Wagons nor Show Locomotives? –  A.L Feb 25 at 10:03
    
@Bevan I am inclined towards your suggestion of a pair of toggle buttons where at least one is always down, but my worry was does it make sense to the user. After your reassurance that they will 'understand it quickly' I think I will try it out and get feedback from them. –  Michael Sandler Feb 25 at 11:08
    
@n.1 The user wouldn't end up with both options turned off, and would always have something showing on screen. I've reworded my example to try and make it clearer. –  Bevan Feb 25 at 23:56

I like @Renaud's accepted answer and it's correct, but if you wanted to see what it would look like with icons as well, you could do something like this:

button group image

share|improve this answer

What platform are you on? E.g. on Mac OS there is distinct highlighting to indicate the difference:

TextEdit on Mac style selection vs. alignment selection

The styles (Bold, Italic, Underline) are highlighted by coloring the glyph blue, while the mutually-exclusive alignment selection is highlighted by darkening the background. Look what a text editor on your platform does, and mimic that.

That said, I don't like the merged 'cartouche' look for the styles because it indicates a connection between the styles that doesn't really exist (and when none in the group is active, the only indicator is that none is selected, which I find a tad too subtle), so I'd probably use rectangular buttons that sit close to each other but aren't one unit to hint that they are more independent than the alignment selector.

In your case, you could have a little steam engine icon, and a little wagon icon that toggle between blue and black when clicked. At the latest when the user tries to switch over the first time, they'll notice that the old selection didn't deactivate and will click it again.

share|improve this answer

If i was in your place if would go for one of these options:

Option 1:
Option 1

Option 2:

Option 2

I would consider the second one only if there is ample room in the buttons area and not too many buttons on my data-table. Also, You can very easily extend the first option to include more filters.

share|improve this answer

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.