Before
After
I hate clicking on select boxes to reveal only two or three items to choose from. It bugs the hell out of me. Why? In order to select an item, you have to click to reveal what’s in the select box, then click on the item to choose. That’s one extra step than neccessary. Those few items would be much better suited for radio buttons. The main advantage of using radio buttons over select boxes are that you don’t have to click anything to reveal all the options, they are already presented to you. This makes it much easier to see the opitons, quicker to make a choice, and overall only a single click is needed to choose an option.
So, when should select boxes be used? Well, I typically use the “Country” field as an example. There are a lot of countries in the world and you don’t want to clutter your form with over 300 radio buttons. This is a perfect situation to use a select box. Though, this just made me think, why the hell do I need 300 countries in a select box when I only ever get clients from the United States, Canada, and the United Kingdom?
I recently employed this usability principle for ActiveState‘s Trial request form (the before and after are left).
JeffG
I think people like selects because they’re easier to process, radio groups ae always a bit of a pain unless you have some nice helper functions. The added bonus for you is that you can add in some labelling text for each radio to explain that particular choice – nice!
March 23rd, 2006 at 11:56am
BT
That’s right, I forgot to mention that the ability to add additional information and formatted text is a huge plus for using radio buttons instead of select boxes when there are only a few options.
That’s the primary reason why we converted ActiveState’s form to radio buttons. A visitor commented that the difference between Komodo Professional and Komodo Personal wasn’t obvious when he arrived at this form. He ended up just leaving the form and e-mailing us instead.
Thanks Jeff!
March 23rd, 2006 at 12:07pm
bradt.ca » Using select boxes for selections
[...] From Bell’s attempt, it may seem that creating intuitive controls to choose your language and province is difficult, but it’s not. Just look at Air Canada’s web site. It uses simple select boxes to choose your country and language. A select box is a brilliant UI element (developed in the late 70’s by Xerox PARC) to convey choice to the user. As a bonus, a select box can convey to the user which option is currently chosen. Although Air Canada used select boxes, radio buttons can work better in some situations (as I’ve written about before). [...]
August 29th, 2008 at 4:03pm
bradt.ca » Using select boxes to convey choice
[...] From Bell’s attempt, it may seem that creating intuitive controls to choose your language and province is difficult, but it’s not. Just look at Air Canada’s web site. It uses simple select boxes to choose your country and language. A select box is a brilliant UI element (developed in the late 70’s by Xerox PARC) to convey choice to the user. As a bonus, a select box can convey to the user which option is currently chosen. Although Air Canada used select boxes, radio buttons can work better in some situations (as I’ve written about before). [...]
August 29th, 2008 at 4:06pm