by anthony on 01/22/13 at 8:34 am
There are many user interface elements you can put on a form. If you don’t know how to use them, you could make it hard for users to fill out your form. One element 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 less 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 less than 5 options, it’s better to visibly lay them all out on the form with radio buttons so that users can scan them quicker.
A select menu with over 15 options is just as bad as one with less 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 lengthy that the menu takes up the entire screen.
When you have more than 15 options in a menu, you should either lessen the amount 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 Select Menu 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 Select Menu 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 navigates them to a new page. This approach is accessible to screen readers only if users can tab to the select menu and move through the options with their arrow keys without navigating to a new page.
Select Menus are Best for Forms, Not Navigation
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, accessibilty 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 used for picking options on mobile forms.
A more accessible menu is a dropdown that opens when the user tabs to it, and allows them to tab to select an option. This works because the options in a dropdown are actual links, whereas the options in a select menu are not. Having links as menu options will also give you search engine optimization benefits. If you want to optimize your navigation for search engines, avoid select menus and offer users a dropdown menu instead.
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. Now that you’re aware, you can help put an end to select menu misuse by making sure your site follows these best practices.