8 Best Practices for Mobile Form Design

3. Automatically prefill values in fields.

In a 2016 work study with AnswerLab, Google found that mobile users are much more goal oriented (PDF) than desktop users. Therefore, it’s best to cut the fat from forms, automatically prefill values, and allow users to achieve their goals faster. Mobile devices have sensors and user information that you can use to make form-filling less onerous for users. Skyscanner, for example, uses GPS sensors to detect device location, allowing the app to prefill the departure city, as Figure 3 shows.

During a checkout process, you could use GPS sensors to provide alternatives to buying online for ecommerce customers. A recent Pew Research Center survey shows that 64% of US users still prefer to buy from bricks-and-mortar stores. Ikea’s mobile site, shown in Figure 4, uses GPS sensors to let customers know whether the item they’re viewing is available in their nearest store

Because it’s impossible to guess user information correctly 100% of the time, it should always be possible for users to clear prefilled values. Imagine if Skyscanner let mobile users book flights only from the closest airport. That would be a bad experience for users and even worse for business.

4. Make forms accessible.

Of the people who have disabilities, 91% use a mobile device, according to a 2013 study (PDF) by the Wireless Rehabilitation Engineering Research Center. Advances in mobile technology have brought new opportunities for those with disabilities to connect with the world around them. But their ability to take advantage of these opportunities depends on accessible mobile design.

Users who have visual or cognitive impairments face greater challenges when completing mobile forms. UX designers should reduce those challenges wherever possible by following established accessibility best practices. Many of these best practices help users who are not disabled as well—for example, clear, intuitive designs and logical user flows. However, for visually or cognitively impaired users, it’s important that forms adhere to the following guidelines:

• Optimize form controls for screen readers.
• Create high-contrast user interface designs.
• Enable keyboard functionality for mobile forms.
• Support voice input for all form fields, as well as text-to-speech capabilities.

The Web Accessibility Initiative offers a wide selection of resources and papers on accessible mobile design, including form building. While this is a broad topic, I thought the basic best practices of inclusivity were worth mentioning here, if only in brief.

5. Break up lengthy forms into steps or stages.

It’s not always possible to reduce a form to a couple of input fields and a Submit button. For example, online banking, official or bureaucratic procedures, and online purchases require fairly complex forms. For multiple-page forms, let users know how far they’ve progressed toward completing the entire form and what steps are coming up next. A progress bar similar to that at the top of the Autoglass page shown in Figure 5 is an effective way of doing this.

Step-by-step forms break the task into digestible chunks, not only reducing the risks of users’ missing fields, but also alleviating user anxiety about the task’s difficulty and the time it will take to complete it. Autoglass could have improved their progress bar by including a label for each step—for example, Postal Information or Payment Information.

6. Create minimal forms, but ask the essential questions.

In the context of mobile use—when users may be outside, in crowded places, or surrounded by distractions and have a weak connection—forms have high abandonment and failure rates. The more complex and lengthy the form, the higher the abandonment rate. Therefore, the fewer fields users must fill in, the faster they’ll complete the form and the more likely they’ll be successful.

For the mobile form designer, this means pruning all questions that are not strictly necessary, or just nice to have. Questions such as the following fall into this category: How did you hear about us? How likely are you to recommend us to a friend? But less obvious offenders should be eliminated, too—for example, asking for an alternative email address. While such information may be nice for the marketing team to have, such fields may discourage users from clicking OK. You may choose to keep such fields in the desktop version of the form, but remove them from mobile forms and avoid inflicting unnecessary pain on mobile users.

Similarly, avoid asking form-fillers to create an account before they submit their form, particularly on ecommerce sites. Ask users if they want to create an account later, after they’ve submitted the form.

Even though minimalism is your goal, you should ask for all necessary information. Michael Aagaard of Unbounce provides an interesting example: When he was asked to improve the task-completion rate for a lengthy form, he cut the form back to just three fields, only to find out that there was a 14% drop in form completion. He’d “removed all the fields that people actually want to interact with and only left the crappy ones they don’t want to interact with.” Forms should be minimal in the sense of asking the right number of questions, not the fewest.

7. Display mobile-friendly error messages.

Considering another aspect of conversational forms, let’s look at error messages and form validation. Good error messages can help users to get through confusing moments, reduce user anxiety, keep users in task funnels, and increase users’ chances of successfully completing a form. Confusing error messages can prevent users from successfully completing a task.

Error messages must be clear, concise, and explanatory, whether on the desktop or on mobile devices. Designer/developer Nick Babich has defined some basic principles for error messages for mobile users, as follows:

• Use real-time, inline validation to allow users to correct the information faster.
• Make error messages clearly visible, and place them in close proximity to the field in error. Error messages that appear in overlays are not a good solution.
• Use color to convey meaning—for example, red for error, amber for warning.
• Ensure messages adapt to the error. In Figure 6, MailChimp provides a solution rather than just saying something like “Password not valid.”

Because mobile users are often distracted or multitasking, icons and illustrations work well in communicating errors, as long as they convey the necessary information. In Figure 7, Azendoo both explains an error succinctly and builds their brand.

Babich advises avoiding vague or dead-end error messages such as: “An error occurred. Please try again later.” This is especially important for mobile users, who are less likely than desktop users to refresh a page, navigate back and forth, or experiment with different browsers.

8. Avoid using drop-down menus and lists.

Long drop-down menus and lists are particularly problematic in mobile forms. To prevent users from having to scroll through long pages, some mobile interface designers have used collapsible or drop-down menus or lists to pack many options into a small space, as in the example shown in Figure 8, from the clothing firm Asos.

There’s a reason why Google’s Luke Wroblewski refers to drop-down menus as “the UI of last resort” for mobile. Users must guess how a menu is organized to locate the information they need. Is it alphabetical? Geographical? Ordered by popularity? Even once they guess correctly, they still have to tap almost as accurately as if their finger were a mouse pointer. The potential of drop-down menus for error and user frustration is high.

There are some good alternative design solutions for mobile form design. For example, a group of radio buttons can replace menus that comprise fewer than five menu items. You can break down hefty menus into categories to improve their usability on a mobile device.

Replace very long menus—such as a menu for country selection—with an auto-complete box, allowing users to type a value, then select a match from a brief collapsible list. For date selection, present users with a large, thumb-friendly calendar overlay instead of using lengthy drop-down lists.

Takeaway

While mobile forms may seem like a prosaic necessity rather than an exciting user-interface innovation, mobile form design often determines user success or failure. Good form design enables both users and businesses to achieve their goals. With poor form design, everyone loses out. By adhering to these eight best practices for mobile form design, UX designers can be more successful in creating usable forms that are effective in today’s world:

1. Use a single input field wherever possible.
2. Create a conversational, but not overly friendly flow.
3. Automatically prefill values in fields.
4. Make forms accessible.
5. Break up lengthy forms into steps or stages.
6. Create minimal forms, but ask the essential questions.
7. Display mobile-friendly error messages.
8. Avoid using drop-down menus and list boxes.