forms - Most intuitive multi-select component for the web

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 element

---

Custom made scrollable box with chekboxes

---

Multiple select drop-down with checkboxesNone 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 ? Answer 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. - October 29, 2016 Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest No comments: Post a Comment Newer Post Older Post Home Subscribe to: Post Comments (Atom) technique - How credible is wikipedia? I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res... .image { width: 100%; } resolution - Illustrator giving two values for ppi for a linked raster image, only when rotated? I am trying to place this raster logo supplied by a client on a large format template (this being a raster logo of some text in Arial is a s... indesign equivalent of ms word's "Don't add space between paragraphs of the same style" feature In microsoft word, for paragraph formatting, you have this option: "Don't add space between paragraphs of the same style" Is t... Keyboard shortcut for "Submit form" I use a form maybe 100 times a day. I can tab between the fields with no problem but most of the time I don't have to fill out the entir... Search This Blog