Module 3: Creating an effective mobile UX
3.2.4 Form entry
Whether it’s making a purchase, getting a quote, or joining an email list, your user’s conversion experience should be as seamless as possible. This section explores how to reduce friction at the finish line through streamlined form entry.
1. Streamline information entry
Offer users a number pad for fields requiring number entry, and automatically advance them through form fields as they input information.
Participants were pleased when sites automatically presented number pads for entering values like zip codes or birth dates. They also appreciated forms that automatically advanced through fields as they entered information. Conversely, they got frustrated when they had to repeatedly tap small form fields and switch their phone keyboard to numeric mode.
2. Choose the simplest input method for each task
Consider if a toggle or drop-down menu is the optimal choice for each entry on your mobile forms, and always make sure they’re easy for users to tap.
When participants needed to make a choice with limited options, it was easier for them to tap a large toggle icon than to enter text or select from a drop-down menu. For selecting one of many options, a traditional drop-down menu was most straightforward. Choose the simplest input method for a task, and always be sure the tap targets are large and easily identifiable.
3. Provide a visual calendar when selecting dates
Keep visitors on your site by offering date selection via a visual calendar with clear instructions.
Participants didn’t always remember the exact dates for “next weekend” when booking a flight. Offer a visual calendar when selecting dates so visitors don’t need to leave your site to check their calendar app. Prevent confusion by providing clear labeling for selecting start and end dates.
4. Minimize form errors with labeling and real-time validation
Use clearly visible labels to let users know what you need, and validate for errors in real time to let them know if there’s a problem before they submit a form.
Label your forms clearly, and make sure the labels are visible when users are actually entering information. One participant mistakenly entered his street address into the email address field, because only “address” was visible. Likewise, putting labels inside fields caused problems if they disappeared when information was entered, leaving participants without guidance. Once information is entered, validate it for errors in real-time prior to submission to prevent users from having to resubmit.
5. Design efficient forms
Minimize the number of fields in your forms, and auto-fill information wherever possible. Use clearly labeled progress bars to help users get through multipart forms.
You should make sure your forms have no repeated actions, only as many fields as necessary, and take advantage of auto-fill. With multipart forms, let your users know what’s coming with a progress bar on top. Participants were intimidated by a multipart form with a very complex initial step, but felt much more comfortable with a different, more straightforward form that clearly labeled each upcoming section. Participants also appreciated multipart forms that prefilled information they had already entered, like their name and zip code.