<select> alternatives
posted by gchatz No commentsCombo boxes require at least 2-3 clicks to figure out which option to choose (clicking on the arrow for the drop down to pop-up , then moving through the list and selecting). Once you’ve selected there is no way of reviewing your selection and compare it to other selections (you have to repeat the process).
Multiple selects, allow you to review the whole or part of a list, but inexperienced users will never guess the ctrl-click or shift-click operations. Placing instructions like “ctrl-click to select multiple items” may solve some problems, but you are rely on users actually reading instructions, which they don’t.
Moreover, ctrl-click operation can create havoc if user accidentally selects an item without holding ctrl (even worse if selected items are a few scrolls up and the user can’t even see that they are now de-selected).
In most cases select boxes can be replaced with other form elements
Radio boxes instead of select box
If you have 2-5 options (like Visa, MasterCard, Diners, Paypal) you can use radio boxes.
A group of radioboxes:
is better than a select box because users can review their options at once and later on , before submitting they can still check if they made the right choise.
From a design standpoint, radio boxes are far more easily styled (we can put Visa, Mastercard, Diners, Paypal trademarks to make it even easier for the user to select.
Needless to say that select boxes are completely stupid when it comes to “Yes/No” options, where radio boxes are perfect.
Checkboxes instead of multiple-select
Multiple selects are ugly. Don’t use them unless you really have to (more on this below).
Checkboxes can handle the work just fine (and you can style them easily).
Let’s say for example, you need your user to fill in the day or days he wishes to get a report.
A multiple select would look like this.
And using checkboxes
You can provide functions for helping your users select multiple items, based on reasonable defaults. For example we could have “All week”, “Work Days”, “Weekends” links that would select the appropriate days in the list.
What if I have a large number of options?
The most common case where you can’t use checkboxes or radio boxes, is when the number of available options is large. In that case you must ask yourself
- do I really need that field?
- is there any way to narrow down the list of options?
- can I break the process in steps?
For example, if you want the user to fill in his country of origin, then do an IP search and locate it yourself. In 99% percent of the cases you’ll save the user from searching for his country in that 200 option drop down.
If your users must select several categories from a tree, then add a little widget below that will contain the number of selected items so far (and maybe override the ctrl-select feature, by appending the selection to the selected items every time the user clicks on an item).
