by anthony on 01/22/13 at 8:34 am
A form has many user interface elements. If you don’t know how to use them all properly, you could make filling out forms difficult for your users. One interface element that’s commonly 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 giant 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 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.
At first glance, a select menu for the main navigation doesn’t cosmetically look right because it doesn’t blend in with the site design. It feels awkward because once you click it, you’ll get the spinning wheel used 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 to mention, the “Previous”, “Next” and “AutoFill” buttons aren’t even applicable in this situation because you’re not filling out a form.
Stop Misusing Select Menus
There are a lot of misused select menus on the web. This happens when people lack a basic of understanding of how to use them. Now that you know, you can help put an end to it by making sure your site uses select menus the right way.