Select Box vs. Radio Buttons
The first user interface gem I learned was “links go places, buttons do things.” It was the first time I remember understanding how all of the nuanced decisions I made about interface design weren’t just arbitrary.
I ran across a discussion recently about using select boxes versus using radio controls. A UX designer was arguing with one of the “engineers” (fancy thing to call a programmer) about whether or not a certain option should be represented by a dropdown or three radio buttons. They went so far as to run usability testing to find out the winner. Yes, they spent money on the engineer’s ego, but money spent usability testing is never too bad of a thing.
Here are some good rules to follow when faced with a similar problem:
Use a select box when…
- …space is limited. If you have 5 or more options and only so much space, a select box is going to be your only way out.
- …there is a good default option. The most efficient control is one a user doesn’t have to ever touch. Sure, you could have a radio button checked by default, but at the same time you are showing the user several other options that they don’t need to see. A defaulted select box looks like a pre-filled text box.
- …little or no comparison is required with regard to the user’s options. When a user makes a selection, the rest of the options will disappear. If the user wants to mull over the effects of their decision, requiring extra clicks won’t be very welcomed.
Use radio buttons when…
- …options require descriptive text. There’s just no way (no pretty way) a select box option can have supporting text. With radio buttons, it’s easier to juxtapose text and imagery to help the user.
- …comparison is welcomed or required with regard to the user’s options. For example, if a user is picking between a range of numbers (like prices), it’s helpful to present all their options at the fore so they can compare without needing the aide of their pointing device to reveal the other choices.
- …the act of making a decision leads to immediate interface changes. The key here is about reducing clicks and interface movement. With a select box, you have to invoke the display of all the options (click), possibly scroll to an option (more clicks), and finally make your selection with a (click). Plus, with radio buttons, you might be able to preview the result of the choice when the user merely hovers the radio button or label.
- …there aren’t too many options. There’s no hard number to go by so you’ll just need to know what feels right.
These are just general rules. Always consider the context of your decisions, and don’t be afraid to do a little usability testing if that’s what it takes to shut the “engineer” up.