We've created Zuko, our next-generation form analytics platform. Explore Zuko

The Pros and Cons of Autofill in Webforms

Accessibility

Autofill is a term for the functionality in a browser that automatically adds text in to fields. It reduces the hassle of typing the information in yourself. Sounds great right? The best forms are the ones we don’t have to fill in after all.

Autofill has both pros, such as increased conversions and cons, like causing form abandonment. In this post I’ll explore the user experience of autofill, pre-filled form fields and autocomplete in search engines.

Browser autofill

Faster form filling increases conversions

As Talia Wolf explains The less you ask of a user the more inclined they will be to fill in the form.

Code your form fields with the autocomplete attribute. Make sure you carry out extensive cross-browser testing to ensure that your form works well in different browsers. Fortunately data handling and autofill will be handled by each browser so that job is done for you.

Browser confusion

Browsers don’t always get it right though, frequently putting the wrong stored data in to the wrong fields. When this happens the user has to delete that data from the input boxes and type it in fresh.

It can also be buggy.

Formisimo co-founder, Al Mackin, experienced browser autofill competing with postcode lookup. You can see in the screenshot below that, in this case, browser autofill makes the form harder to complete.

Store passwords securely

There are a few options for automatically creating and saving passwords, including those in your browser:

  1. Creates more complicated passwords that are harder to crack.
  2. Allows you to fill out forms more quickly as you don’t have to remember your password and won’t make errors guessing it.
  3. Your passwords are stored securely for you (as long as you don’t allow other people access to your computer).

In practice, browser plugins e.g. 1Password, or browser features such as Chrome’s Password Generation, detect a password field in a form and allow you to automatically fill it with your password of choice.

Chrome's password generator on Twitter signup form

Example of Chrome password generator

So autofill, in this case, saves you time and energy creating a password. Users are saved the pain of accurately remembering and typing a complicated passwords. Additionally you can store passwords against a username. Passwords are thus synced across different devices wherever you log in.

Some people believe storing lots of passwords behind one ruling password is the equivalent of writing them down. Elizabeth Palermo explored the pros and cons of password management tools

Address validation

Accurate addresses fast

I asked Natalie Green of PCA Predict (formerly Postcode Anywhere) to share her thoughts on autofill technology. PCA Predict’s product Capture+ is an address validation tool that allows end users to search for their address using any part of their address and provides businesses with a verified address.

“There’s lots of ways you can implement address validation. For example, retailer Heal’s have the postcode field at the top, as in the UK this is the fastest way to get an address with the fewest keystrokes.” – Natalie Green, @NataliePCA

Heals address form

Heal’s delivery address form

If a user doesn’t know the delivery postcode, traditional postcode lookup options can be limited in their usefulness, validation tools improve on this situation. They also accommodate for countries where postal codes do not exist. Allow users to find their address whether they start at the beginning or the end.

Natalie went on to warn:

“From a user experience point of view, it’s essential that customers have a way to edit their address manually if a search feature cannot locate them. Failure to provide this option could lead to form abandonment.” – Natalie Green, @NataliePCA

Case study: Broken validation causing form abandonment

One of our own customers discovered that postcode lookup in their checkout was causing customers to drop off and abandon the form.

Customers have to select their billing address using postcode lookup. In many cases, the lookup tool failed to recognise or validate genuine postcodes. The form didn’t allow customers to enter their address manually and so they couldn’t proceed, forcing them to abandon the process.

Our client was able to clearly identify this popular drop off point in their form analytics reports, alerting them to a major issue. 45% of dropoffs happened at the Find Address button, while 27% occurred at the Confirm Address stage.

Popular Dropoffs summary report showing 45% and 27% dropoff at address related buttons

Formisimo’s Popular Dropoffs summary report

Craig Sullivan, an experienced optimisation consultant, explains that bugs of this kind can make users think the site is broken.

Copy address from shipping to billing

Shipping and billing addresses are frequently the same. A user-friendly way to handle address forms in the checkout is to:

  • Show only a shipping address form with a pre ticked checkbox for the instruction ‘Use shipping address for billing’.
  • If the user unticks the checkbox this should reveal a second form.

Geolocation based pre-filling

In a discussion on designing more user friendly forms, Gil Remy suggested that forms with an address or location questions should pre-fill this field.

However, for prominent and simple fields such as Country, pre-filling the answer will save most users from scrolling through a long list of options. Our own sign up form sets the country dropdown field to match any visitor’s IP address. In the example below the form has detected that I’m in the UK, meaning one less task for me in this form.

Formisimo signup form

Formisimo’s signup form

The easyJet app uses geolocation to suggest the nearest airports to you to your current location.

easyJet app showing list of Fly From airports

The easyJet app uses geolocation

Speeds up and improves search

Search engines use autocomplete to allow users to select the most popular searches quickly. Shoppers who use internal search are six times more likely to convert. However, the quality of the search results effects a searcher’s ability to find what they’re looking for. Autocomplete is the first place you can improve the search results. The Home Depot’s internal site search uses autocomplete to great effect.

The Home Depot internal search panel Looking at the screenshot above from The Home Depot’s site (courtesy of TheUXChap), there’s a wealth of ways the retailer enriches the search suggestions. The suggestion panel includes:

  • a list of products containing the letters typed in
  • filtering by category
  • images
  • links to buying guides

“It’s simply brilliant! Not bad at all, considering I have all these options at my disposal, from entering just two characters into the search input box — Pa.” – TheUXChap

Pre-filled fields are less noticeable

Pre-filled answers could be mistaken for placeholder text (as the opposite is also true), causing them to delete and re-enter an answer.

Scan readers will also find it more difficult to identify which fields they have to complete or check if some answers are already supplied. Eyetracking studies by Nielsen Norman Group found that “users’ eyes are drawn to empty fields.”

Accessibility problems

Autofill or autocomplete suggestions aren’t naturally accessible to screen readers, because the user must leave ‘forms mode’ to navigate the list. This means that any conversion boosting benefits of autocomplete will be lost.

Worse, if users of assisstive technology, such as a screen reader, interact with the list of suggestions they get kicked out of ‘forms mode’. This means having to re-engage with the form.

Follow Vision Australia’s guide to accessible autocomplete to ensure it’s usable by everyone. The guide includes a code snippet that makes it easier for users of assisstive technology to interact with autocomplete suggestions.

Vision Australia warn that if multiple autocompletes are used on the same page you should make additional efforts to make the labels quick and easy to understand.

Should I use autocomplete=off?

Coding certain fields in your web form with autocomplete=off tell browsers not to remember information from those fields. However, lots of browsers ignore this and users can also add extensions to ensure that command is ignored.

A feverish debate continues online on whether websites should use autocomplete=off. On the one hand, websites are trying to ensure that their users data is less vulnerable. On the other hand, lots of developers say it’s more secure to allow users to use password managers.

This is not a straightforward issue so I don’t have a definitive answer. You can read more about the war against autocomplete=off.

To find out if your forms are tripping up users, start a free trial of Formisimo.





Start A Trial




Image credit: www.SeniorLiving.Org