Web Usability: Down with select boxes

Before
Before

After
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).