Done right, optimized mobile forms can deliver more than an increased conversion rate: They can become a competitive advantage—a reason users choose to fill out a form on your site.
Just have a look at the number of interactions it takes to book a room on Hotel Tonight compared to its competitors:
“Booking a hotel happens in 3 taps and a swipe. This is a competitive advantage,” says Sam Shank, the CEO of Hotel Tonight.
Reducing form fields usually works, but, like every “best practice,” it’s not a guarantee. (Indeed, there may be times when increasing form fields boosts conversion rates.)
What follows is a mobile-specific framework for form optimization:
1. Key differences between the mobile and desktop UI
Three key UI differences create challenges for mobile-form design:
1. Aspect ratio. About 80–90% of smartphone use occurs in portrait orientation, which makes width a precious commodity: There’s more vertical space, and vertical scrolling is more intuitive.
2. Touchscreen navigation. There’s no mouse, and smartphone users with a stylus are in the minority. A touchscreen places added demands on the size and spacing of elements.
3. Limited keyboard. Smartphones have a limited keyboard—and an inconsistent one. Those factors justify careful consideration of which keyboard to show for which field and whether to enable (or disable) automated functions, like auto-capitalize.
2. Form-wide considerations
Single-column forms enabled faster completion compared to multi-column ones:
Multi-step forms have the potential to eliminate scrolling entirely by fitting each form section within the smartphone window. They have added benefits for long forms:
- Information can be saved after each step
- They chunk segments of the form to reduce the cognitive load. For long forms, this can make the process seem less intimidating
A 16px font size is standard for body copy on mobile devices. Smaller (or larger) font sizes may cause issues, especially for those with visual impairments.
Small buttons risk imprecision on the part of the user or the device. Touch-targets for mobile devices have minimum size recommendations. The minimum size grows larger as the target moves away from the center of the screen, where user taps are most accurate:
- 7 mm in the center of the screen.
- 9 mm along the edges.
- 12 mm in the corners.
Important: visible buttons or icons may be smaller than the touch targets, but the size of the touch targets should cover the minimum area, even if the icon or button doesn’t fill the space.
Total form fields
Since filling out a form is less convenient on a mobile device—keyboards are smaller and partial, touch is less precise than a mouse click—the reasons that removing form fields usually works on any device are, presumably, more true for smartphones. (That logic won’t bail you out of testing.)
3. Field-specific considerations
HTML tags toggle automated features on and off based on the input field:
- Autocorrect. Autocorrect may mistakenly correct information in fields with proper nouns (e.g. name, address).
- Auto-capitalize. Auto-capitalize saves users effort for name and address fields but should be disabled for password fields.
- Autocomplete or autofill. Autocomplete may be useful for finishing a known email address, but it may erroneously try to complete an order number with a phone number, or vice versa.
- Autodetection. Asking for the credit card type is unnecessary; autodetection identifies the credit card based on the first four numbers, requiring form fillers to complete one less task.
- Location detection. Location detection can identify the user’s country (at a minimum) or, using Google’s Places API or another geolocation API, a more specific place, like the nearest airport. Time your request for location information carefully—if you request access before users see the relevance, they may decline.
Treat dropdowns as a “UI of last resort;” research shows that mobile forms with dropdowns take longer to complete. That’s because mobile dropdowns:
- Require more interactions.
- Obscure user choices.
There are other options:
Steppers. A +/– set of controls can be grouped together or separated by the element label. Steppers work well for quantities that have a reasonable upper bound, like hotel or airline reservations. (Site visitors rarely book rooms or flights for more than a few people.)
Segments. When the options are limited, a segmented control allows a user to see all available choices at once:
Sliders. Sliders can be used for large ranges or those with a Min-Max variable.
Date pickers. A calendar picker, rather than a drop-down list of days, months, and years, can reduce the total number of taps. (Unless you’re asking for a date of birth—clicking back decades in a calendar would be an ordeal.)
The same research study that found that dropdowns slowed form completion also found that a single date picker—despite requiring fewer total interactions—slowed form completion, too. Two separate date pickers (for start and end dates) resulted in faster task completion.
Field masks can help reduce errors and speed up form completion by displaying the proper format for a response that could have many formats, like a telephone or credit card number:
Masks should also:
- Be visible from the start. If the mask reveals gradually, users are still guessing from input to input if they’re on the right track.
- Not include placeholder text. Doing so may cause users to skip over a field because it appears pre-filled. An outline of the expected input, such as “( ) – ” can set expectations while also clearly looking incomplete.
The condensed space on a mobile device makes easy-to-read field labels essential. The aspect ratio alone (portrait instead of landscape) effectively mandates labels above rather than beside form fields. Otherwise, almost any entry would require horizontal scrolling to see the label and entry field at the same time.
Define the input type (e.g. “email,” “tel,” “datetime,” etc.) to return an appropriate mobile keyboard when a user taps into the field.
Keyboard types offer obvious (a number pad for phone numbers) and subtle (the inclusion of the “@” symbol for email addresses) conveniences.
On most mobile forms, users can’t see the entire form; vertical scrolling is necessary to see all fields. That makes real-time, in-line validation—a best practice for forms on any device—more important.
Descriptive text—instead of simple green or red highlighting—helps users correct the error quickly and ensures accessibility for visually impaired users.
If users need to scroll to the top of the form to see errors, then scroll back down to the specific field, they may get lost or frustrated and give up.
Form autofocus. Autofocus highlights the current input field, making it easier for users to see which field they’re working in.
Suggestive field sizing. Sizing fields relative to the length of the anticipated input (e.g. a longer field for a street address compared to a zip code) offers a subtle reminder to users about input expectations.
Disabling the submit button. After a user taps to submit a form or complete a purchase, disabling buttons prevents an accidental click that may cause resubmission or navigate the user offsite before the conversion completes.
4. Tools to measure form performance
Granular measurement helps identify trouble spots within forms:
- Which parts of the form take users the longest to complete?
- At which point do users most often abandon the form?
Mobile forms restrict user interactions—there’s no mouse, an incomplete keyword, and a smaller, vertical screen. Those limitations make an intuitive and efficient user experience more important and, at times, more challenging to deliver.
But they also make some choices easier; not every form “optimization” needs to be tested. Delivering the appropriate keyboard for the appropriate field is a clear win. So, too, is a reasonably sized touch target or the use of a field mask to reject invalid inputs. Those UX improvements are an immediate opportunity for all sites, not just high-traffic ones.
Like all online efforts, form optimization is not a static discipline. Newer features like Touch ID, facial recognition, or photo scans of credit cards promise streamlined interactions at a critical juncture that, every year, occurs more frequently on mobile devices.
PS. Install a form analytics tool before doing any tests. First, you’ll see where people have problems with your form. Then, after testing, you’ll see a clear “before and after” picture.