Posted on: 1 September 2015
Drop-downs, Radio buttons, Checkboxes… Oh My!
When creating forms, interaction designers are often faced with having to select a Graphical User Interface (GUI) element that dictates the interaction of option selection. Of course, we all have rules of thumb that we follow but often these choices are also governed by the overall design goals and components of the interface. Nonetheless there are some considerations to keep in mind when selecting the element you would like to use for, er … selection.
Drop-downs and Radio Buttons
Drop-down menus can be used for any situation in which you need to select one option from a list of multiple. Technically you can also have multi-select drop-downs, however these are not always intuitive to the user.
Should you have a drop-down for two or three items? Many designers would say it is best to use a drop-down for 5 or more options. The reason: because it is tedious for users to click-scroll-click when they don’t have to. Instead, it is often recommended that radio buttons be used for anything below five options because the user would simply have to look at the options and click once. Efficiency wins, right? Maybe, yes, in terms of click rate. But some users don’t operate at the rate of clicks, but rather at the rate that they can process what is on the screen. I have seen many usability tests in which users are overwhelmed simply by the number of things they see on the screen, which ultimately increases their cognitive load. The advantage of a drop-down menu is that it doesn’t take up too much space and a user can clearly identify their selection after the fact. Radio buttons on the other hand can be somewhat distracting when trying to go back and check your work. And if screen real estate is limited in the first place, a single drop-down will be more preferable than four radio buttons. Simplicity wise, drop-downs might have an edge up.
Radio buttons do have some other advantages though, besides click rates. Especially in the case where a default option is pre-selected for the user, radio buttons make clear to the user what the other options are, where as a drop-down hides those options. Radio buttons can reduce the cognitive load of making a selection if it is important for users to compare options. If the list of options, however, is obvious (e.g. just a list of numbers), then the case for radio buttons decreasing cognitive load is debatable. Finally, with radio buttons there is more room to explain the available options. If your options require a bit more than the character limit allowance of a drop-down menu, then radio buttons are a good option. Notice I said a bit more—if the descriptions are more on the order of paragraphs, it is probably better to think beyond basic selectors.
Checkboxes are interesting select options. Whereas radio buttons and drop-downs are generally used for mutually exclusive options, a series of checkboxes are well suited for multiple option selection. Unlike radio buttons, users are generally accustomed to checkboxes staying checked if they select an additional choice.
The other situation in which it is ideal to use a checkbox is when the user is presented with a binary choice (turning an option on or off). For example if the user would like to opt-in to a weekly newsletter, a single checkbox will suffice (radio buttons in this scenario with yes/no options may be unnecessary and take up too much space). As long as the label beside the checkbox is well written and obvious, users will understand the consequences of checking and unchecking the checkbox. When possible, positive labels are best because users will associate a word like “yes” with checking the box to opt-in to the action. If the label beside the checkbox ends up being too convoluted and confusing for users to understand and it is not readily apparent what the consequences are, a radio button with two clear choices might indeed be better.
Large Lists of Options
Some selection lists are long and unwieldy. You may have heard a rule of thumb that says a drop-down list of more than 15 options is taboo. Date selection is one of those tricky interactions but it is heavily dependent on context. Calendar date pickers are a wonderful alternative for travel websites, as they make picking a date in the near future an easy task. Let’s say I want to travel during the third week of September and I want to depart on a Friday, a calendar date picker helps me easily select an option that meets my needs. If you have ever used a calendar date picker to select your birthday, however, and you were not born in this decade then you know how tedious it can be to scroll back multiple years… by month.
So what is the best option for date-of-birth entry? You may have seen some websites with three drop-downs, one each for component: day, month and year. Some designers would argue that text entry is better, especially for something like day of the month in which there are up to 31 options. Where this becomes a challenge, however is in validation. For example, if a user accidentally enters the month in place of day or vice versa. A drop-down has the benefit of indicating to the user which field they are selecting and prevents such mistakes. Additionally, allowing users to enter text that leads them to their desired drop-down option mitigates the burden of having to scroll through a long list. Imagine another scenario in which there may be a vast number of options such as selecting a country or language. Often, users just enter the first letter/digit of the option they are looking for to avoid having to scroll down. Allowing text-entry and auto-complete in drop-down menus greatly alleviates the tedium of scrolling through a large list and allows users who know what they are looking for to quickly type it in.
As you can see, rules of thumb are helpful, but each situation is different. As interaction designers we must carefully weigh the benefits and drawbacks of the various options and evaluate how they affect the overall design. There are many factors to consider when selecting selectors!