I’ve spent an extraordinary amount of time this week thinking about radio buttons. And I’d like to tell you what I’ve concluded.
I’m designing a complex web form with lots of fields to fill in, most of which are text fields or mutually exclusive option lists. My decision, for a public-facing website, is between drop-down lists and radio buttons.
The popular guideline, and I have found this written in many many places, is that it depends on the size of the list. If the list is long use a drop-down, if it is short use radio buttons.
But in real life, when you actually think about what you are trying to achieve, it is rarely as simple as black and white guidelines.
I’ve been thinking about the decision more deeply and have concluded that it has nothing to do with length of a list, and everything to do with the user context.
For this design decision, the following user contexts are the most relevant:
- Familiarity with the domain – when users are unfamiliar with the domain (or the fields to fill in) they need additional assistance to understand what they are being asked to do. Radio buttons assist by showing all options on the screen, communicating the domain/field at a glance. However, when users are familiar with the domain it is OK to hide the options in a drop-down list – users can determine what they need to supply from the label (think of a list of States as an example).
- Task efficiency – On a long form, or something that will be used frequently, users want to complete it quickly. A drop-down list requires the user to read the label, interpret it, click on the box, locate the correct item and click on it again. A radio button list allows the user to read the label and list at one glance, locate the correct item and click on it. Radio buttons are far easier and faster to interpret and select.
- Screen real estate – In the GUI days, screen real estate was a real issue. Drop-down lists were preferred to radio buttons simply because they took up less room. Most of us are now designing for browsers and this isn’t as important. Not only do we have no control over the window anyway, but there’s a magic gadget called a scroll bar.
- Size of list – In the GUI days, this was the determining attribute – long lists used drop-downs, short lists used radio buttons. In reality, there is little cognitive difference. The size of the list doesn’t change, so the time to identify the correct item and select it is similar between the two situations. However, as mentioned above, a radio button list may be faster as it doesn’t need to be opened and can be easier to take in at a glance.
- Frequency of use – For infrequent users, radio buttons are clearly better, due to the concepts outlined above. For frequent users, two things are relevant. Spatial familiarity is important – we become familiar with placement of items on a screen and can fill them in quickly by remembering the spatial placement of items in radio button lists. However, frequent users often use a keyboard; in which case, drop-down lists are better as they allow people to type the first letter of the list and use the keyboard to get to the target item.
- Interface balance – It is still important that the screen has overall balance and directs the eye appropriately to the flow of the form. When the factors above are equal, go with whatever balances the interface.
It should be clear from the above description that my preference is often for a radio button list, particularly for complex interfaces for infrequent visitors with imperfect domain knowledge.
I’m not usually one to issue declarations or write guidelines, so please don’t take this as a list of rules. Instead, please think about your situation, your users and your domain, and make a decision based on that. Don’t listen to stupid, glib rules that were written 15 years ago