22

My target audience are users that are not familiar so much with computers so i try to simplify the UI elements in use as much as possible.

For instance I try to avoid drop down menus and use big radio buttons instead (when possible).

Now I have to provide a multiple select option list. I could use check boxes but there are just too many properties. It seems that there is no simple component to allow such an action.

Here are several options:

Regular Multiple select <select> element

Regular Multiple select <select> element


Custom made scrollable box with chekboxes

Checkbox list


Multiple select drop-down with checkboxes

enter image description here

None of them seem simple enough for me. The 1st one is the worst I believe as it asks the user to press ctrl to multi-select. Are there any other options you have in mind? Is there any research on the subject ?

1
  • Personally, I like 2 > 3 > 1. I'd like the 1st one fairly well if it treated a regular click as a Ctrl+click, for "sticky" selecting. Shift+click could still be supported. (Gmail currently does this, though it uses checkboxes rather than click-row-to-select.)
    – Jon Coombs
    Feb 5, 2016 at 23:17

2 Answers 2

12

Go with check boxes for multi-select inputs. It is a norm in implementation since the first GUIs and it a standard practice in UX too. Nielsen's article confirming the use of check boxes: http://www.nngroup.com/articles/checkboxes-vs-radio-buttons/

Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others.

And as for your question regarding how to implement in a good way.

Use subheads to break up a long list of checkboxes into logical groups. This makes the choices faster to scan and easier to understand. The risk is that users might view each subgroup as a separate set of options, but this is not necessarily fatal for checkboxes — each box is an independent choice anyway. A list of radio buttons, however, must always appear unified, so you cannot use subheads to break it up.

2
  • 2
    I don't know if I would say always, but they are the less frustrating of the two from a user's perspective; however, it should be pointed out, they don't have to look like checkboxes...you could, essentially create a combo-box look, without the irritating part of holding down ctrl/cmd/shift and then accidentally not.
    – Josh Bruce
    Apr 3, 2013 at 0:47
  • Thanks for the detailed answer, the last design is there to support more examples.. i really would like to avoid it as it requires an additional click (open the drop-down).
    – Mortalus
    Apr 3, 2013 at 2:18
1

You could try modified datalists. Instead of having to select from a wide range of options they would have to enter them - or at least parts of them - manually.

They search, you show some results, they click on a result and the clicked on item gets listed next to the list. You might want to give some hints on what to search for or you can even prepopulate some suggestions after one or two suggestions have been made based on previous selections from other users.

Instead of searching you can also just list all the possible options like a word cloud and they can click on items to select them, which you shoulds show somehow (e.g.: different background color). Although there will be some usability issues here but probably mostly for more experienced users.

Your Answer

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

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