Form interface with large radio and checkbox groups

Question

User interface

There is a search form with several radio groups and several checkbox groups. Radio can be replaced with select (the meaning does not change), but then the user does not see all the options at once, and 2 clicks will be required to switch. It will not work to place elements of the same group under each other (there are from 5 to 10 of them for each filter, and there can be quite a lot of filters). Standard horizontally arranged elements do not look very good. Is there an alternative? First of all, I would like to get links to pages where the designer was given a similar task (I couldn’t find anything myself).

Answer 1

I don’t see anything wrong with the “extra” click and select. The latter is just what is needed to group several options. By making an “extra” click, the user will see all the options, and this is definitely better than a heap of radio.

Answer 2

twitter.github.com/bootstrap/javascript.html#buttons

Answer 3

1. You can use a multiselect. Then some of the items will be visible immediately, some will need to be wound.
2. place in several columns, although this is worse for perception.
3. You can make something like a wizard in the form of an accordion, so that one question and all items are visible at the same time. Though on sense it is the same select.

Answer 4

I use Chosen, normal and multiselect. A compact display of selected options outweighs the extra click. Users like it more than a bunch of full-screen checkboxes.