Why Users Abandon Forms with Select Menus

by on 06/06/16 at 6:39 pm

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

One common reason is if your form contains multiple select menus. Research shows that forms with select menus often get abandoned. This is because they take more time and effort to complete.

Flow Interruption

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.

keyboard-mouse

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.

select-menu-text

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.

select-menus-slow

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.

arrow-keys

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.

mobile-picker-text

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.

Radio Buttons

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.

ideal-radio-buttons

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.

ideal-autocomplete-field

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’.

Triggering Abandonment

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.


OUR PRODUCTS

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

AFFILIATE

Elegant Themes

Author and editor-in-chief of UX Movement. Finds beauty in clear, efficient design and loves fighting for users.

4 Responses to “Why Users Abandon Forms with Select Menus”

  1. Luca De Angelis

    Jul 4th, 2016

    Hi Anthony and thanks for the article.

    Another major issue with the iOS mobile picker is that the list elements are centered instead of being left-aligned -or right-aligned for languages written RTL. Although the list looks nicer with equal spacing on the elements’ sides, this makes it quite hard to scan the list as the eye must travel more to locate the beginning of each item.

    Cheers
    Luca

  2. Dima Popovici

    Jul 25th, 2016

    Thank you for describing the problem in this article. I really enjoyed reading this article. The solution with radio buttons is really great and 100% better and effective.

  3. Devin Smith

    Oct 7th, 2016

    Thanks for writing this piece! I am also not a fan of the select box when it can be avoided. Would you happen to have any supporting research?

  4. Rieke Angersbach

    Feb 22nd, 2017

    What do you suggest for a long list of options. For example a selection of material, when the options are predefined. In my case I’m looking at well over 10 options – followed by a second group of 7 options.
    In this case I think radio buttons would be a huge mess because there are just too many options.

    I agree that mobile pickers can be fiddly – however, aren’t they what mobile users are most used to from date picking, setting alarms etc….

Leave a Reply to Devin Smith