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!

Improve this question
1
  • Excellent job writing this question.
    – Ken Mohnkern
    Sep 28, 2017 at 13:31

2 Answers 2

Reset to default
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

Improve this answer
2
  • 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, 2017 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, 2017 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.

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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