DonnaM » Blog Archive » It’s not about size, it’s about context – radio buttons or drop-downs

It’s not about size, it’s about context – radio buttons or drop-downs

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 ;)

7 Responses to “It’s not about size, it’s about context – radio buttons or drop-downs”

  1. Vinson Says:

    What about check boxes vs boolean radio buttons? Some would say that your “Remember personal info?” field should use a checkbox. :)

  2. donna Says:

    Yes, it could and would work just as well.

  3. John S. Britsios Says:

    Considering accessibility, I suggest using the “multiple select” tag instead of drop-down lists.
    Sure you may also use radio buttons, if the user has only one choice within more, and checkboxes instead of radio buttons, if the user has more options to choose.

  4. donna Says:

    John, I’m not sure what you mean by the ‘multiple select’ tag.

  5. Vinson Says:

    John,

    In my opinion, the multiple select box is the worst HTML form component to use in any case. No other component forces the user to use the keyboard and the mouse simultaneously. I don’t like to assume the user even knows how to use the shift and control buttons with the select box. I would use it only as a last resort.

  6. eikogo Says:

    John, et al:

    The multi-select combobox seems to me to be one of the worst controls ever, particularly for a new user and especially for a long(ish) list. Which items are selected is nearly impossible to tell. The idea of Contol-Clicking to select additional items is not easily explained to the new user. My suggestion is the alternative of many checkboxes, all with the same name or ID, and a little extra code on the loading of the form to check those boxes that need to be.

  7. donna Says:

    I agree. At a recent conference I shocked the room by saying that the multi-select box was pure evil and should never be used.

    I have never seen anyone use it properly – in one usability test with experienced web authors and a couple of developers, not one person could successfully select more than one keyword from a long list.