A woman fills out a mobile form while sitting in the sun on her lunch break.

Mobile Friendly Form Design: 10 Essential Elements

Today, most of us spend hours scrolling through websites and filling out forms as we wait in line, commute, or during lunch breaks on our phones. Making sure that your business is using mobile friendly form design is a must.

At Northwest Media Collective, our designers and developers have come up with a list of the top ten mobile forms best practices to help you make sure your mobile forms are user friendly.

Why is Mobile Friendly Form Design Important?

A successful mobile form will create a positive experience and boost your conversions. Most times, the focus is on grabbing the user’s attention and informing them about your product or service. But if they find the form too difficult or frustrating to fill out, they may not submit it, and you could lose business.

 

10 Essential Elements for Mobile Friendly Form Design

There are so many ways to design a mobile form that it can be easy to feel overwhelmed or bogged down by all the information. So, to help make things easier, we created a short list of the top ten most important design elements for mobile friendly forms.

 

1. Reduce Input

It’s easy for mobile screens to become cluttered with content and form fields. So, minimize and simplify the number of fields the user has to fill out. Combine form fields and label them with the least amount of words possible.

 

Graphics to show how to reduce input to make a mobile friendly form design.

 

2. Design Finger-Friendly Touch Targets

How many times have you heard someone say “I have such fat fingers” when trying to text or click a link on their phone? The average adult finger is around 11mm, so a good rule of thumb would be to make sure your touch targets are no smaller than 9mm or 48 x 48 DP.

 

H3: 3. Provide Matching Keyboards to Data

Make sure the keyboards that appear for each field match the data that’s being asked for. This may seem like a small detail in the grand scheme of mobile friendly form design, but users will appreciate it.

There are seven types of form fields and here is the HTML for each that will call the matching keyboard:

  • Input type=”text” provides users with a normal keyboard
  • Input type=”number” provides users with a keyboard that displays numbers and symbols
  • Input type=”email” provides users with a normal keyboard, but with the ‘@’ and ‘.com’
  • Input type=”date” provides users with their mobile device’s date selector
  • Input type=”datetime” provides users with their mobile device’s date and time selector
  • Input type=”month” provides users with their mobile device’s month and year selector
  • Input type=”tel” provides users with a numeric 0 to 9 keyboard 

 

4. Avoid Dropdowns

Dropdowns take up valuable space and require multiple steps of the user. Instead, opt for toggle buttons or separate buttons for each item. These will create a much better user experience.

 

A graphic to show an example of changing a dropdown menu to a short button list as a mobile form design strategies.

 

5. Group Related Fields

Using the Gestalt theory, related questions and fields should be grouped together. This rule helps the flow of your overall form and will help your users keep track of where they are.

 

Another graphic to show an example of touch screen user interface guidelines regarding grouping fields under headers.

 

6. Minimize # of Fields Visible

If a form seems to scroll endlessly, users may feel overwhelmed by the prospect of filling it in. So, along with breaking fields up into related groups, help your users by allowing them to minimize fields as they go. This will make your form feel more doable and go by faster.

Here are two ways that this can be done:

  • Progressive DisclosureProgressive disclosure shows users only a few of the most important options and then reveals more parts as the user interacts with it.

A graphic explaining the design element progressive disclosure.

  • ChunkingChunking breaks up sections of your form into easy to follow parts.

A graphic chunking information on separate mini pages on a mobile form.

 

7. Keep Action Buttons Descriptive

Don’t let the energy of your words fade on your form, especially on action buttons. Buttons are the final step to users submitting their data and completing the form. Stay away from generic words and use words that describe the action of each button.

An example of others from buttons describing “submit” in more actionable words.

 

8. Make Form Location Visible

It’s okay if your form is longer or has more to it, there is no rule on how many fields you need to have or how short your form should be. But, regardless, allowing your users to see where they are at any given time in the process is important.

 

9. Distinguish Optional Fields from Required Fields

Don’t leave your users guessing which information is necessary for them to fill out vs which information they can skip if they want to. In a mobile friendly form design, fields that are optional have small text either at the top right corner of the form field or the lower right corner.

 

10. Add Help Text to Make Form Fields Understandable

If you’re the one creating the field forms, the questions you are asking may make perfect sense to you, but they may be confusing to your users. Use help text for fields that seem confusing or users may have a question about. The more you can help your users fill out the form correctly and avoid errors, the more likely they will finish the form and submit it.

 

Northwest Media Collective’s Design Team

There are a lot of mobile friendly form design strategies to choose from, but by at least adding these ten design elements, your form will be user friendly. At Northwest Media Collective, our designers and developers make sure that every design is user friendly for every device. Check out our portfolio to see our designs for a range of clients from construction to brewing to the art.

Share This

Copy Link to Clipboard

Copy