Top tips for optimizing forms for mobiles

Have you ever started to fill out a form and then given up halfway through? The data we’ve seen from retailers shows that this behavior is extremely common, particularly on mobiles.

Whether a user is logging into a website, part way through a sign-up process or in the final stages of completing an online order, form filling is an essential part of the ecommerce journey. However, it can also be one of the biggest sources of frustration and one of the most likely barriers to completion if they’re not optimized properly. Mobile forms tend to have significantly more constraints than their desktop counterparts: screens are smaller, connections may be slower, and text entry is a lot trickier. So, reducing form friction in your mobile applications is generally a good idea.

Listed below are 5 more ways you can speed up the performance of your customers’ mobile transactions to improve the user experience.

Use top-aligned labels and fields


Smartphones have a significantly limited view compared to desktops, so it’s important you design a form that minimizes this constraint. One way to do this is by using vertical alignment for the field labels on your form.

When users click on an input field, the page is often automatically zoomed in to focus on the field. If side-by-side labels are used, it is almost impossible to view both label and input field in one screen without additional effort from the user. According to Luke Wroblewski (Product Director at Google and all round digital design guru) – this is one of the main reasons why top aligned labels also tend to reduce completion times.

Don’t make the user fill in the same field twice


Everyone has gone through this – a registration form that requires you to type an email or password twice in order to cut down on typographical mistakes and increase the chance of a correct input. In reality, though, this allows for greater error, because it forces users to type more. More often or not, password input fields usually obscure all characters to keep sensitive information hidden, making it trickier to know whether they’re typing the right thing each time, creating even more friction.

A better approach would be to ask users to input only once, but then include a box they can check to unmask the password, and inline email validation to assure the user what they have typed is correct. For selection options and where input must meet specific standards (e.g minimum 8 characters in a password) give clear feedback that the choice of entry is acknowledged and accepted.

Launch the right keyboard


If you’re using HTML5, make sure you’ve identified the field types in the code correctly so the relevant keyboard appears on screen. For example, type ‘url’ brings up a virtual alphanumeric keyboard with “.”, “/”, and “.com” keys. Specifying an input of the type email brings up a virtual alphanumeric keyboard with “.” and “@” keys. These input-specific keyboards make entering the particular type of data required that little bit easier.

Auto-detect as much data as possible


Whichever type of phone you use entering text on a small touch keyboard isn’t easy. It’s not only painfully slow but also prone to errors. To combat this and limit the amount of data entry, many retailers opt for tiresome drop-downs which are almost impossible to maneuver through on mobile devices. For these reasons predictive search fields and auto-completion will be your friend, and we’d advise to use them wherever technically possible.

Avoid splitting single input fields


A study from Baymard found that users struggle when single input entities are split across multiple fields, such as a phone number divided into three fields (area code, central office code, subscriber number) or addresses requiring street, city and zip. While it may have a valid purpose in desktop versions of your site, the fields prove difficult for the users to both understand and navigate between on a mobile device causing needless friction.

Like these? We’ve got more:

30 tips for mobile-friendly forms

mCommerce UX: where to start and what you should focus on

Mcommerce UX