Your Ultimate Guide to Mobile Form Design Best Practices with Over 50 Tips

Adriana Neagu

Author: 

Ms. Neagu is a noted expert on data applications and XML technologies. Adriana was co-inventor of Microsoft Office InfoPath, and co-holds 4 InfoPath patents.

Forms are one of—maybe the—most used ways of interacting the web. That’s true for both the pages you visit from a computer and those you get to while using your mobile devices. But mobile forms have special requirements. Designed the wrong way, mobile forms can get between your users and their goals. In this the ultimate guide to designing mobile forms you’ll find tips that will make users want to opt-in—or complete the sale, including:

Don’t make your mobile forms a barrier. Our mobile UI experts offer over 50 tips for the best form workflow, input and control choices, layout, typography, and more.

What Is a Mobile Form?

Today, almost every web page uses forms to collect information from readers. Whether gathering information, providing users a product or service, or serving another purpose, forms are so ubiquitous we don’t even think about them.

But what is a web form, really?

A web form is an HTML implementation on a web page that collects user information and relays it to a web server for processing. Both mobile and web forms generally comprise five parts:

  • Organization: The look of the page, and the order and groupings of elements on the form.
  • Calls to Action: Every mobile form has at least one action button, such as a Submit button, which relays the information to the backend server for processing.
  • Messages and Feedback: Messages can be negative, such as telling the user they’ve entered something incorrectly, or positive such as telling your user that their information has been successfully submitted. Congratulations! Your new sofa will arrive in two weeks!
  • Input Fields: Input fields aren’t all text boxes and their labels; Mobile forms might also include check boxes and radio buttons.

Forms serve many roles: registrations, subscription, gathering user feedback via surveys and questionnaires, even ordering products or services, or transactions like transferring money between bank accounts.

And yet, according to Sumo fewer than two percent of web page viewers opt-in to forms. Most visitors walk away. Good forms encourage opt-ins and purchases, while bad design discourages these behaviors. You’ve got to make them want to stay!

What’s in a Web Form?

Web Form Definitions

Web Form—Also called an HTML form, a web form provides a structure for collecting user data and then sending it to a server for processing. Web forms include text fields, check boxes, and radio buttons for entering data.
Masked Input or Field Masking—To ensure that input text is entered in the correct format, masking automatically formats text or other data as the user enters it.
Data Slicing—Slicing is the practice of dividing data into separate boxes. For example, entering first and last names in separate boxes instead of one, or entering each part of a phone number in its own box.
(Mobile) Web Form Optimization—The practice of reducing friction or impediments to successful use of a form by making forms more user-friendly
Progressive Disclosure—A design practice that reduces form length and simplifies interactions by displaying increments of content and function as the user advances through the form.
Chunking: Organizing UI information into discrete units to reduce cognitive load for the user.
Progress Tracker—Also known as a progress indicator, a progress tracker indicates the user’s progress through a series of steps. Progress trackers help the user to gauge the time they’ll be spending in your form.
A/B Test—Also called split testing, A/B testing compares two variants of a web page, the A and B, to determine which one performs better.
Predictive Search—When a user types into a mobile or web form field, predictive search suggests words or phrases that are appropriate choices for the field based on the first few letters typed into the field.
Friction—When a user expects an easy-to-use interface and is confronted with surprises and interruptions.
Responsive—Responsive web design adapts web pages and forms according to the platform, screen size, and orientation.
Call to Action—Calls to action (CTA) are written to motivate the user to respond. In mobile forms, the CTA usually appears on a button, labelled with an imperative verb. Examples include, “Submit,” “Send me my free ebook,” or “Register.”
Inline Validation—Inline validation checks the validity of user inputs as text or numbers are entered in the form.

What Is Good Mobile Form Design and Why Do You Need It?

  • Poor design = friction = obstacles = poor conversion

Consider how phones and tablets are used in the real world—on crowded buses and trains, in the kitchen while cooking, waiting in the parking lot to pick up the kids, while walking the dog. Users—especially mobile users—have too much else going on to struggle with poorly designed forms.

The biggest obstacle to mobile forms success is friction between you and your target audience. Jennifer Lindsay is a UX designer for Qdabra. “Design can seem straightforward from the 60,000 foot view,” she says. “It becomes tricky when you have to reconcile a long list of requirements and possibly even how a form looks with optimal design principles.” She has some general thoughts:

  • To reduce friction, get out of the user’s way so they can send you the information you want or place the order.
  • Understand that form users have a goal. Make it easy for them to achieve that goal.
  • You have less real estate on mobile forms than on the desktop. Optimize fonts. Use smaller fonts for larger spaces like desktops, larger fonts for smaller spaces.
  • “When designing for seniors and non-digital natives, stick to controls they know,” Lindsay advises. “Traditional controls include check boxes and radio buttons. Custom buttons with novel or specific labels and interesting colors can be fun but limit yourself to text that older users know and that explains what controls do.”
  • Make text readable. “Fancy fonts may be nice for browsing but not for trying to understand instructions.”
  • Standard checkboxes and other controls tend to be too small even for a child’s thumbs. Make controls bigger. The average thumb is larger than the average text pointer; use formatting that forgives fingers.”
  • Use a simple design and keep the form short.
  • Avoid complicated functionality. Employ commonly used controls like text boxes, drop downs, and date pickers. “You can do a lot of stuff with these,” Lindsay declares.
  • Don’t expect users to provide a lot of personal information. In countries where GDPR is most adhered to this is especially important.
  • Responsive design rules—whatever you create for the desktop, consider that it must translate well to small devices for your success. Perhaps even design for mobile, first.

Dana Popovici is Director of Project Management for Formotus, with special knowledge of InfoPath and backend data connectors. She says mobile form designers must remember the limitations of small scale devices. “First, of all, they need to keep in mind that the forms will run on mobile devices that have limited capabilities. Limited memory, storage, connectivity. Designers must keep this in mind when designing any kind of form, whether or not they’re designing in InfoPath.”

With mobile forms, the functionality comes from what happens to data. Popovici advises to consider whether form users need to work offline. If this is the case, data must be cached so it’s available offline. Likewise, designers must take care not to push too much data to the backend at once or they risk crashing apps.

Designing in InfoPath for mobile carries its own set of concerns. Explains Popovici, “The main thing to keep in mind is that InfoPath forms are usually run on desktops. Once they are converted to Formotus forms they will be used on a mobile device, with the limited resources of such devices. Whatever is supported on a desktop, like many queries or lots of data, or cached data, or a big view with lots of controls, these things won’t work the same on a mobile device. The app might crash or freeze because of the limited resources. You can’t just convert an InfoPath from the desktop to the mobile device.”

When choosing a design tool, Popovici advises to carefully consider the type of functionality needed. Is the complex functionality of InfoPath required? If not, a tool like Formotus creator might be more appropriate. She also suggests consulting the Formotus Support Portal articles before you plan your design to understand the possibilities and limitations of tools and controls.

Mobile Form Design Challenges

Forms present the greatest challenges to online experiences. This is especially true on mobile devices. In conversion rate optimization (CRO) terms, forms are the step before the money—they are unrelenting, allowing little UX middle ground between a successful form and a usability disaster. Let’s look at a few mobile form design UI issues:

  • You can’t know exactly where a form will be used, high-light, low-light, sitting at home, standing on the subway. And even if you could, presentation varies from one device to another.
  • Therefore, mobile forms have higher abandonment rates due to connectivity issues, background distractions, and poor visibility.
  • Mobile users are less likely to return to a page than desktop users if they encounter a problem that prevents them proceeding.

Forms often require a lot of typing. When users do that on a small piece of real estate, data-input fatigue can become a big issue. Also, because of less-reliable connectivity on mobile —input can be lost as a connection is dropped—server-driven problems multiply. Amongst others, consider these:

  • Back-end storage problems can make it difficult to match forms to the remote database.
  • Scrolling—seemingly unavoidable in modern design—can stutter and be interrupted on mobile forms.
  • Limited screen real estate impacts character limits and visibility.

Bad design has demonstrable financial costs. One misplaced field was costing Expedia $12 million.

Design Input Methods and Fields to Improve Mobile Form UX

    1. Practice field minimalism. Get the essential information in as few fields as possible. Remember that the shorter and more efficient your form, the faster the upload.
    2. Make fields only long as necessary to accommodate numbers or text. The length of field helps the user understand how much information is required.
    3. Speed the user through the form by prefilling as much information possible. For example, on an ecommerce form, geolocation apps might suggest the closest brick and mortar store. If the user has entered information on the website or form before, consider reusing it.
    4. Auto capitalize and auto correct fields—but never email or password fields.
    5. Autofill whenever possible. Leverage autofill functionality of browsers like Google Chrome by ensuring that your fields have easily recognizable labels. Use lookup to complete postal codes.
    6. Predictive search fields allow your customers to type keywords or names of the item or service they want and see a list of the possible results. Predictive search helps users streamline their query. This is especially important when there are many possibilities.
    7. The easiest input with the fewest clicks is best, but always consider what is best suited to the context. One click of a clearly defined icon or radio button beats the extra clicks of a dropdown list.
    • A radio button works best to select one exclusive option from a list.
    • Check boxes works for multiple options.
    • A dropdown list serves a large number of options, such as selecting a country, or when items must be presented in alphabetical or chronological order. However, it may be faster for users to type information like states and provinces or years.
    • Tests show that selectable images are among the most engaging types of input. They can provide a straightforward alternative to radio buttons.
    1. Provide field focus. When users are working on a small screen and distracted by glare or motion on a train, help them by highlighting the field they should be working in as they go.Example of right/wrong form design - field focus
    2. Large fields help users to enter text. Large buttons are easier for large fingers to use.
    3. Field must-haves:
    • Always use a label placed as close as possible to the field, left aligned above the field.
      Example of how to arrange labels in mobile forms
    • Top left aligned labels are optimal.
    • Never use inline labels—labels within a field. As a user types, the label is covered and, if distracted, a user could easily forget what they are supposed to type. One exception is simple forms like sign in pages, where convention makes it clear to most users that a user name or email and password are required.
    • Use placeholders to describe correct formatting.
      Lists in Formotus mobile form
    • Copy and paste can speed up information entry. Enable it for any fields except for masked passwords.
    1. Rather than slice fields consider single fields, especially for names, phone numbers, and dates of birth. Otherwise, users must make extra taps. Also consider that some languages and cultures reverse names or use only one name, and phone numbers and postal codes have different formats in different countries. Understand and add rules to ensure input is formatted correctly.
      Example of right/wrong form design - single fields
    2. Use smart defaults when you have pre-captured user information. Be cautious with static defaults presuming defaults for everyone; they can introduce errors because users rarely proofread details in forms.
    3. Indicate mandatory fields and any formatting requirements before the user starts entering text. Do this instead of validating and showing error messages at the end.
    4. Clearly label optional fields rather than using an asterisk.
    5. Don’t cover the form with a keyboard.
      Lists in Formotus mobile form
    6. Typing is labor intensive and prone to errors. Reduce it by leveraging the touch interface and extended functionality of a device, such as the camera, microphone, and even biometric information when applicable. Favor radio boxes, scrolling, swiping, and tapping.
    7. Use the right keyboard for the right task. For numbers, display the keypad; for text, access the qwerty keyboard.

HTML input types:

  • input type=”text” displays the normal mobile device keyboard
  • input type=”email” displays the normal keyboard plus ‘@’ and ‘.com’
  • input type=”tel” displays the numeric 0-9 keypad
  • input type=”number” displays a keyboard with numbers and symbols
  • input type=”password” this hides characters as they’re typed in the field
  • input[mZ8] type=”date” this displays the mobile’s date selector
  • input type=”datetime” this displays the mobile’s date and time selector
  • input type=”month” this displays the mobile’s month/year selector

Raising Completion Rate with Good Mobile Form Design

    1. Eliminate roadblocks to success—on a mobile form, avoid asking for non-essential information like alternative email addresses and how the user found the site. Also, especially on an ecommerce site, don’t require a user to create an account before completing a form Let users create an account later, perhaps at check-out time.
    2. Shorten forms through conditional logic also called conditional branching which allows fields to appear only when specific answers are entered or other conditions are met. Conditional logic eliminates those fields that are irrelevant to your user.
    3. Start with shorter and easier questions and lead up to those requiring longer, more in-depth answers. In addition, ask for personal information at the end of the form, after you’ve built some trust and affinity.
    4. Make your mobile form fast. Not only does mobile page loading time affect your page ranking in Google, fast load times encourage more completions.

Designing Mobile Forms for Accessibility and Usability

    1. Ninety-one percent of people with disabilities use mobile. Consider accessibility. High contrast UIs, voice to text, and voice input for all fields are essential. Ensure that even on mobile devices users can call or text a real person. Prominently provide live chat or a phone number for customer support.
    2. Make your mobile form easy to use in both bright and low-light environments.
    3. Ensure that users can move through the entire form using the tab key.
    4. Test your form in all major browsers and on many devices. Strive for one responsive form for all device displays or different views.
    5. Use color to help convey messages but don’t overdo it; color is just one aspect of visual communication.
    6. Implement the Viewport meta tag to control accidental zooming which can make users lose their place.
    7. Avoid Captcha. Use an alternative spam detection service.

Validation and Error-Handling in Mobile Forms

    1. Validate in real-time and inline the form gets completed so users don’t need to scroll back after they’ve finished.
    2. Don’t put error messages at the top of the page; ensure that error messages are easily seen and placed to the right of the errant field, or in close proximity.
    3. Don’t add error messages via overlays on top of your app’s screen. It adds effort for the user to dismiss the overlay and the user can forget what the error was and where the error occurred.
    4. Write friendly error messages; don’t blame the user. Be clear and specific. Validation shouldn’t be overly strict.

Good Layout and Control Design in Mobile Form UIs

    1. No menus—use autocomplete for long lists, like countries and calendar overlays. Single columns work better than side by side columns and are less confusing in a small space. Always avoid sideways scrolling. They may prevent complete user input from being visible, which will increase typos.
    2. Vertically stack radio buttons and checkboxes.

Optimization in Mobile Form Design

    1. Make forms responsive—fonts should fit size and orientation and match needs of users and the form factor.
    2. Size matters. Large typography is essential in mobile forms. Buttons and fields should be about 48 pixels wide, and field and label fonts should be 16 px or larger.
    3. Don’t mask, passwords by default. Although password masking is a security practice, it can increase user frustration because typos are also masked. Let users choose password masking.
    4. Don’t ask users to confirm their email and password.
    5. To keep the UI clean, if you need to explain anything in detail, add Learn More buttons. However, especially if a question may be complicated or confusing, do offer explanatory text.
    6. Data persistence. Warn users when info is unsaved.
    7. Avoid fast blink rates. Cursors of other items than flash more than twice per second should be adjusted.
    8. When asking for sensitive information, clearly explain in no more than 100 characters why the information is necessary. Also, understand many dislike sharing their phone number.
    9. Use security seals only if you need to take payments. Visually they can suggest that people need to pay for something.

Reputation, Social Proof, and Impressions

    1. Make coupon fields small. Consider the customer who isn’t lucky enough to have a coupon.
    2. Don’t auto enroll people in your mailing list. It’s long been considered a poor practice, and under GDPR, consent must now be explicit.
    3. Minimize legalese. If people must agree to something, group messages and legal fields together when possible.
    4. To build user trust, allay any obvious user fears by addressing concerns about product or service costs, whether personal information is shared and how, and any others concerns.
    5. Incorporate social proof such as testimonials and good reviews into your mobile form.
    6. Looks matter. A clean, friendly, attractive appearance encourages people to trust your form and use it.
    7. For non-ecommerce forms, give people a reason to provide their email address or other contact information. Offer something for free in exchange for registering, such as an ebook with tips and resources.

Designing Calls to Action and Submit Button in Mobile Forms

    1. Disable submit after it has been clicked. This is particularly important to avoid payments being submitted twice.
    2. Explain what “submit” means and what will happen after the user clicks the button.
    3. Test widely on different systems, browsers, and devices.
    4. Cancel and Reset all buttons are not necessary in a form. Users know they can refresh and start all over.
    5. Add a clear call to action.
    6. Phrase the CTA button name from the user’s perspective to answer the question “I want to…” For example, a SaaS bookkeeping registration page might say, “Start my bookkeeping subscription now.” One trial suggests that changing “You” to “My” on a button raised click through rate by 90 percent.
    7. Consider the size of the CTA button as compared to other elements on the form; bigger is better. If you have several CTA buttons on one page, size them accordingly. Some designers say a button should be one-third the size of the page.
    8. Use contrasting colors to make the CTA pop.
      Example of Do/Don't when designing forms
    9. Thoroughly A/B test your calls to action.

Mobile Form Workflows

Formotus mobile form on iOS deviceUI experts have described the mobile form workflow as a conversation. As people increasingly use chatbots, apps that mimic conversations with humans online for tasks like setting appointments or even job interviews, the tone for mobile design must feel conversational.

“For more complex workflows, be careful not to have too many views,” advises Lindsay. “In desktop workflows, there may be a view for the workflow instigator, a view for the reviewer, and another view for the approver. On mobile, all these views become complicated. Use hide/show logic so all views are part of one display and appear only when triggered by the appropriate action.”

To aid workflow, place a premium on the logical clarity in a form. Cover only one topic at a time, with related questions in groups. Consider using progressive reveal to help forms appear shorter. Although presenting a whole form may work in a desktop app, a mobile form should be chunked. Multi-step forms have higher completion rate and are less overwhelming to look at on first sight. Show progress with numbered steps, percentage-filled indicators, or graphical progress bars. Let users know where they are and allow them to go back to make changes. Use breadcrumbs to track pages and provide navigation.
Autoglass logo

6 Tips for Motivating Users
As in a real conversation, relationship is built with charm and exchange of valuable information. Let your mobile form be personable—but don’t waste the user’s time.

    1. Ask for personal information and email in the last step of a form. By starting with simple questions, you build rapport and imply investment in finishing because of sunk time costs.
    2. Likewise, progress bars encourage users to carry on to the end.
    3. Consider using milestone submissions, which allow users to submit a minimum set of data or to choose to continue to add more info.
    4. Don’t auto-advance to the next field or question; this can surprise and disorient users.
    5. Use icons and visual cues to guide the user.
    6. Watch transition speeds so you don’t lose people.

Designing InfoPath Forms for Mobile Devices with Formotus

Looking for a tool that will let you convert InfoPath forms into mobile forms? The Formotus mobile forms service is one tool you can use to seamlessly convert InfoPath forms for use on mobile devices. Use the mobile design tips in this article to customize the forms to fit the business needs of your mobile users. You can use InfoPath 2010 or InfoPath 2013 to create forms that the Formotus service can convert your InfoPath forms to run on mobile devices. Optionally, you can use the Formotus drag-and-drop form creator. The Formotus creator has more power than InfoPath and the Formotus creator is optimized to create forms that run well on mobile devices with intuitive UI and easy-to-use on touch screens.

Signup for a free trial to learn more about our advanced drag-and-drop mobile form design tools and how we support InfoPath forms.

Leave a Reply

Your email address will not be published.