There are many controls to choose from when designing a form. Choosing the wrong one can make your form hard for users to fill out. One control that’s often misused is the select menu.

When to Use a Select Menu

Sometimes you’ll find a select menu with 2 options and sometimes with over 20 options. In both cases, the select menu is used wrong. When you have fewer than 5 options for users to select from, you should use radio buttons. This allows users to make their choice faster and easier because all they have to do is look at their options and click once.

With a select menu, users have to click the menu, scroll to an option and click again. A select menu also keeps the other options hidden until the user clicks it. When you have fewer than 5 options, it’s better to visibly lay them all out on the form with radio buttons so that users can scan them quickly.

A select menu with over 15 options is just as bad as one with fewer than 5. When you put that many options in one menu, you’ll slow users down because they’ll have to scan and scroll through the long list. Sometimes the list of options can get so long that the menu takes up the entire screen.

When you have more than 15 options in a menu, you should either reduce the number of options or use a text field to allow users to enter their own data. An open text field prevents users from having to fiddle with a long select menu and makes filling out the form faster and easier.

Labeling Select Menus

Like other form elements, a select menu should always have a label next to it. However, you should also have a label inside the select menu that tells users what they’re selecting. The label should clearly and distinctly describe the group of options.

A generic label such as “Please Select” isn’t clear enough for accessibility users who use screen readers to fill out forms. Adding a label outside and inside the select menu allows all users to take action quicker without any confusion.

When to Use a Default Option

Most of the time, you should avoid giving users a default menu option. This is because if users fill out the form and accidentally miss the select menu, the wrong option could get submitted. It’s safer for users to get an error message for not selecting an option than to submit the form with the wrong option.

The only time you should give users a default menu option is when you are certain that over 90% of your users will use that option. This saves the majority of your users time from having to mess with the select menu.

Grouping Options

If the options in your select menu have a hierarchy, you should split them into groups using the ‘optgroup’ tag. This allows users to find the option they want quicker by scanning the group labels instead of every single option.

Users won’t be able to select the group labels. They’re only there to give the menu hierarchy and make scanning options easier. Accessibility users also won’t confuse group labels as options because screen readers can’t read them.

Using Select Menus for Navigation

Select menus are mainly used on forms, but sometimes they’re used for navigation. Some websites will use a select menu to allow users to filter or sort page content. When users select an option, it automatically navigates them to a new page. This approach is only accessible to screen readers if users can tab through the options without navigating to a new page.

The select menu should only navigate to a new page when the user hits enter. A small minority of screen reader users will have Javascript turned off. In order for select menus to work with Javascript turned off, you need to have a submit button next to it. This will navigate users to a new page after they select an option and hit the button.

Select Menus Are Best for Forms

Although you’ll see select menus used for navigation, it is recommended that you only use them for forms. Mobile websites will often use a select menu for their main navigation to save space. However, there are problems with this approach that affect usability, accessibility and SEO.

One way it affects usability is that it doesn’t blend with the site design. Mobile form elements have their own default style and can look awkward when you use it for site navigation. It also feels awkward once you click it because you’ll get the spinning wheel for picking options on mobile forms.

Users have to tap the menu, flick their finger to the right option and press the ‘Done’ button, which is a lot of work. Not only that but the ‘Previous’, ‘Next’ and ‘AutoFill’ buttons don’t work because the user is not filling out a form. Screen reader users won’t be able to use your select menu navigation because most will have Javascript turned off.

A more accessible menu is a dropdown that allows users to finger tap or keyboard tab to select an option. This is better because the options in a dropdown are links, whereas options in a select menu are not. Using links as menu options will also give you search engine optimization benefits.

Stop Misusing Select Menus

There are a lot of misused select menus on forms. This happens when designers and developers don’t know how and when to use them. You can help put an end to select menu misuse by making sure your site follows these best practices. You may get everything else right on your form, but one misused select menu can cost you users.

Toolkits