Written by Anthony.
Form abandonment is like someone agreeing to meet up with you but then canceling last minute. Users who are interested in what a site offers have no trouble starting a form. But when it comes to completing it, they’ll have many reasons not to.
Select Menus Slow Users Down
Most forms begin with text fields where users type in their input. But when a select menu appears, they have to move their hands from keyboard to mouse to select an option. This interrupts their typing flow and slows them down.
Hard to Read
Once they open the select menu, they have to scan through the options and select the right one. This takes time and effort because the option text is hard to read. They appear as a lengthy list scrunched together with minimal line spacing.
Dexterous Mouse Maneuvering
To make a selection, the user has to point their mouse to the right option without straying off it. This requires dexterous mouse maneuvering because it’s easy to land on the wrong option if they don’t go slow and steady. The menu is limited in size and has minimal padding between the options. Moving the mouse just a few pixels too far can result in clicking the wrong option.
After they make a selection, they have to check to see if they selected the right option. Then they have to move their hands back to their keyboard to prepare for the next text field. All these actions add up and make select menus difficult to interact with. It’s no wonder why users abandon forms that have them.
Excessive Arrow Keying
Some users may use their keyboard to make a selection instead of their mouse. But this is an even slower experience. They have to press the down arrow key to scroll through each option. This is a tedious task when there are many options.
Mobile Picker Flicking
Desktop users need extra dexterity when maneuvering through a menu. But mobile users also need dexterity when flicking through options in a picker.
When users open a mobile select menu, a picker wheel displays. They have to flick their finger slowly to land on the option they want. If they’re not careful, they can over flick and make the wrong selection. This forces them to fiddle with it to get it right which takes up unnecessary time and effort.
Not only that, but lengthy option text can get truncated. An ellipsis displays at the end of the text where the user can’t read it all. This makes it hard for users to select an option which leads to abandonment.
Better Alternatives to Select Menus
You should avoid using select menus on your form as much as possible. There are better alternatives that don’t slow users down and interrupt their task flow.
It’s far better to list out the options with radio buttons instead of cramming them in a select menu. Each option remains visible so that users can scan them without having to open the menu. They have more spacing to click each option and won’t get punished if they overshoot their target.
When users click a radio button, they get immediate visual feedback. They don’t have to scroll through the menu again if they click the wrong one. All they need to do is scan the options and click.
Radio buttons should look like buttons. They should have ample button padding and a clear border around it. When it’s clicked, activation should show through a change of color and shape.
Autocomplete Text Fields
When you have several options to display, use autocomplete text fields. These allow users to type in their input and get suggested options that match it.
The more the user types the more specific the suggested options become. Users can save time by selecting a suggested option instead of typing out their entire input.
Autocomplete text fields should display the option that best matches the input first. You should distinguish the user’s typed input text in the suggested options. The option text that matches the input text should highlight with different color contrast.
The Only Time to Use a Select Menu
There’s only one situation where you should use a select menu. That’s when you want the user to answer with your specific terminology.
For example, if you want to know the ethnicity of your users, you have to provide options in your own terminology. If you don’t provide specific options, users could give you vague answers. They could type in ‘Asian’ instead of ‘Chinese’ or ‘European’ instead of ‘German’.
More users start forms than finish them. Don’t give them a reason to abandon your form. The last thing they want to do is maneuver and flick through a select menu.
Most sites spend a lot of effort getting users to their form, but then lose them by using select menus. Think about saving your user’s time and effort. Opt for better alternatives that won’t trigger form abandonment.