10 more tips for optimising web forms

After publishing 12 tips for optimising web forms last week, there were some very useful comments left by readers. 

These comments contained some very useful tips for web forms that I hadn't included in the original article, so here they are...

Optimise forms for mobile

Don't neglect your tablet and even more specifically your mobile visitors.

Think about which aspects of mobile are harder for customers. For instance, text entry can be a real pain thanks to 'fat fingers' so entry fields should be large enough to click in, and buttons bug enough to click easily. 

Here, though Graham and Green's checkout is mobile friendly, the entry fields for email address and password aren't visible so it isn't immediately apparent where touch screen users should aim for:

Meanwhile, Schuh provides a good example of clear buttons for touch screen users on its shopping basket page: 

Disable auto suggest for tablet and mobile users

According to PRWD's Paul Rouke:

When your intelligent device is trying to auto correct your name or email address it just disrupts the user journey and creates friction. 

Auto-correct can be useful at times, but is often more likely to be a barrier to purchase on mobile/tablet. Read this example of an auto-correct issue on mobile forms which was causing abandonment. 

In this case, the customer was unable to add their correct town as the iPhone kept correcting her. Yes, she could have clicked the x, but it's all about making it easier for the customer: 

Make it clear what the next step involves

Paul Rouke:

Don't leave users need to take a leap of faith when submitting a form. They should be 100% confident what they are committing to ie. moving to an order review page or actually placing their order. The use of descriptive button wording is key to this. 

Amazon's checkout is a good example of this. First of all, before the final order page, just as you have entered card details, it says 'you will confirm in the next step' so customers are reassured that they have a chance to review the order. 

Then, as Paul says, the button wording, 'place your order' is nice and clear: 

Provide a progress indicator

This makes it 100% clear to the user which stage in the process they are on, and how far they have to go to complete the purchase. If clickable, these indicators also provide a means of easy navigation back and forth between the checkout pages. 

Here's an example from Simply Piste:

 

Trust symbols on calls to action

Another great tip from Paul Rouke:

For retailers, on both your 'proceed to checkout' button and your 'place order' button, test introducing either a padlock symbol on the button and/or updating the wording to emphasise this will be a secure transaction. "Checkout Securely Now" has performed well in some of our tests.

Use trust logos to reassure visitors

Paul Rouke:

On the subject of trust (and yes even the most reputable retailers need to emphasise this, believe me) ensure you have prominent trust logos and messaging in your enclosed checkout and particularly on your payment page.

Here, Lovehoney provides reassurance in the form of Verisign and Shopzilla logos. Also, and this is something which is important for this retailer, it reassures customers about the discreet packaging and how the charge will show on customers' bank statements. 

Use autocomplete to speed up progress

The next two tips come from Albie Attias. First of all, use autocomplete to speed up customers' progress through web forms. 

This is also useful for avoiding any mistakes in data entry which may result in delivery issues. 

Explain why you're asking for the information

If you're asking for information which isn't strictly necessary for the completion of the transaction, then it makes sense to explain this. 

On a side note, I would avoid asking for unnecessary information, or at least not making these fields compulsory. 

Here, ASOS does explain why it asks for customers' gender, though it should explain why date of birth is needed. 

Tailor input methods for mobile devices

A great tip for mobile / tablet forms from LBi's Glynn Davies:

Using the email and url values of the type attribute for input fields is handy on mobile, too: brings up an keyboard with convenient things like ampersands and pre-set TLDs in a more accessible places.

Here, the Santander app recognises that I'm about to enter a numerical code, and so the phone style keyboard is much more suitable: 

Use 'search engine-style validation'

This tip comes from Natalie Green of Postcode Anywhere, and it effectively reduces address entry to just one field. 

On the Reiss site, I just need to type part of Econsultancy's office address, and it recognises the full address: 

Then it's just a case of clicking on the correct one, and the address fields are automatically completed. Bingo...

Thanks to Paul Rouke, Albie Attias, Natalie Green and Glynn Davies for the tips. Any more tips? Let me know in the comments...