4

Problem and current situation:

I'm looking for a filtering control with a functionality that is similar to multiple checkboxes: The user has a (short) list of options, and he can tick some or all of the options.

As seen in the screenshot below, today the user can select "EEE" or "FFF" or "ALL". enter image description here

But in the upcoming update, I'm going to have more than 2 possible categories, i.e. I'm going to have "EEE", "FFF", "GGG", "HHH" etc. So the current control is no longer relevant.


Possible solutions:

I've considered multiple checkboxes, but it looks kinda bad, and if you put them vertically as suggested in some places (for example here and here) it takes a lot of real estate, which I can't afford.

  1. The main alternative I found was chosen's multiple select control (can be seen here) enter image description here

But I don't think it suits my needs, because I only have a few (4-5) items in the list, and because I want the user to see all of the options without activating a control (typing or clicking on the control).

  1. I'm also considering the following control, in which the user clicks the categories he want to "turn on" by clicking a button, and the button changes its color.

enter image description here


I'd be happy to get your feedback for the controls I'm considering, and finding out about a new controls that might suit my needs.

Additional needs:

  • My users are "semi" technological, but it is relatively important for me to use as standard as possible controls.
  • Also, I prefer that it will not be possible to deselect all of the options, because in my application this state is useless. It is not a must though

Thanks a lot!


  • Excellent job writing this question. – Ken Mohnkern Sep 28 '17 at 13:31
3

Considering the above scenario, option2 that you have suggested is most relevant as it satisfies both conditions,

1) It shows all options

2) It is easily understood by semi-technical users and maintains the basic standards

For styling to related to tabs you can check here

Also as much as I am understanding, "show only" comes under "group by", if thats the case you can do styling as in the image below. enter image description here

Check this second image below.

enter image description here

  • Thanks for the reply @Angiras. I'm just wondering if indeed option 2 will be intuitive enough, as I don't think I saw it anywhere. Have you seen it in other places? – Hagai Sep 28 '17 at 10:39
  • Hi @Hagai, Designing is all about innovation. With new Needs comes new design patterns. Being true, I haven't seen such UI pattern till now, but with correct UI design, you can make users easlly understand what exactly needs to be done. For inspiration, you can see the above image that I have shared. Above I have shared one more design for your help, it is of mobile, but you can check out the tab styling and design accordingly. – Angiras Joshi Sep 28 '17 at 12:24
1

Apple use option 2 (called a "segmented control" by them) in their text editor TextEdit:

TextEdit font/style toolbar with segmented controls as both radio buttons and checkboxes

Particularly, the B/I/U for setting font styles work like checkboxes, while the text alignment options function as radio buttons.

Personally, I prefer grouping checkbox-like buttons together but leaving a (smaller) space between them and rounding all their corners. That gives a similar visual look as the "radio button" style segmented control, but also makes them obviously separate so it's obvious they are not mutually exclusive.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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