Is there a button configuration that would imply 2 or more options to the user?

Question

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?

Answer 1

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

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.

Answer 2

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

^{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:

^{download bmml source}

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

^{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.

Answer 3

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:

Answer 4

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

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.

Answer 5

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

Option 1:

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.