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 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 ?

share|improve this question

3 Answers 3

up vote 10 down vote accepted

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.

share|improve this answer
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 '13 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 '13 at 2:18

This article explains this well too. http://uxmovement.com/forms/stop-misusing-select-menus/

Typeform (https://www.typeform.com) offer also very intuitive components. If your audience can afford and understand tagging, then you can try also components such as the ones from http://ivaynberg.github.io/select2/, http://harvesthq.github.io/chosen/ or checkboxes inside dropdowns such as in http://wenzhixin.net.cn/p/multiple-select/#the-filter1. JavaScript provides many solutions on this.

Check also options such as List Builders - http://riablog.com/thoughts/the-multi-select-control-dilemma Last, you can try drag and dropping to a specific area, if the number of options offered is not large.

share|improve this answer

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.

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.