Forms are used on websites to collect information from users. Sites use this information to complete transactions and registrations, or to complete other tasks such as submitting an insurance claim online.
When approaching form design for mobile devices, keeping the physical mobile experience in mind is important. If you make your form slow to load or overly complicated, your visitors will likely abandon the form in the middle, or even before they begin.
Keep these best practices in mind when designing your mobile-friendly forms:
Keep forms short and sweet. Make your forms easy to complete by minimizing the number of required fields. Having one field for “Name” rather than two fields for first and last name is a good example of an easy way to make your form one field shorter.
Ask for too much and you may end up with nothing at all.
When they can’t be short, create multipage forms. If you must have a long form, break it up into multiple pages, present only a few above-the-fold fields on each page (“above the fold” means before you have to start scrolling down the screen), and include clear Next buttons so that visitors don’t have to scroll excessively. A progress bar can also help keep users committed to multipage mobile forms.
Make the Submit button and the form fields finger size. Your mobile users are completing forms with their fingertips, so your fields and buttons need to be big enough to make tap interaction easy. No standard size exists that works best for every mobile device, but creating buttons and form fields that are 44 pixels wide by 44 pixels tall is generally a safe rule of thumb.
Minimize typing by using drop-down menus, radio buttons, and auto-selected answers. Anything you can do to limit the amount of typing required will help speed up the process and improve your customer satisfaction. For example, if your form asks for a state, let users select their state from a drop-down menu so that they don’t have to type it.
Make what you’re asking for clear. Above each field, clearly specify exactly what you want the user to put in the form field. If you’re asking for a birthday, for instance, clarify whether the form wants the birth year entered as two or four digits. See an example from Progressive.
Show users how they should enter birth date information.If you’re asking for a piece of information that requires additional explanation, including a button that offers more information when tapped (often called a tooltip) can aid user experience. Here is a form using a tooltip to explain what CCV means.
A tooltip button explains the form field requirement.Clearly specify which fields are required. If your form has more than one field, make sure that your users know exactly which fields are mandatory and which they can skip. Placing an asterisk (*) next to required form fields is a common convention. If all your form fields are required, place an asterisk next to all your fields. Don’t assume that your visitors will understand that they are all required.
Allow log-in using a third-party provider like Google or Amazon.com. Sometimes a registration form can become a barrier to entry for a first-time user. Allowing your customers to sign in using a third-party provider that they are already connected to can speed up the process and eliminate the registration barrier.
Check out an example of a third-party integration that allows first-time users to sign in using their Google account information. This is much easier for the user than typing registration information into a form.
Because HubSpot Sidekick has optional third-party authentication, first-time mobile users can skip the form and register with their Google account information.Third-party log-in is also a great way to get customers through the purchasing form. By allowing users to log in and pay using a service for which they already have credit card information stored, such as Amazon.com, you allow your customer to skip a multifield credit card authorization form.
An example of third-party integration.Keep the focus on the form and minimize other content on the page. When your visitors have landed on a web page with a form, they are on a conversion page, and you want the content of the page to do everything in its power to keep the conversion momentum going. You want to get your visitor interacting with the form and tapping the Submit button as soon as possible.
Adding a lot of content on top or next to your form can end up being a conversion distraction that can slow down or completely derail the form submission process. To minimize distraction, try to include only explanatory content that helps the user complete the form. If you do want to include content that isn’t explanatory, keep it concise and directly related to the form — just like the example from BruceClay.com.
Keep language on forms to the point to increase conversion.Visually validate when a form line is completed correctly. Mobile users don’t love filling out forms the first time, and they really don’t love having to go back and fill them out a second time because the form has errors.
Using visual cues to let your user know they have completed each line of the form correctly — or incorrectly — can save time and limit frustration. A green check mark next to the field is a great way to clearly indicate that the field has been completed the right way, and a red X works well to communicate when something is wrong. If something is wrong with the line, make sure to clearly explain how the user can correct the error.
Use visual and verbal cues to let users know whether they have completed each line of the form correctly.