User Experience

Autocomplete/ Autofill as an important subset of Great Form Design UX

When designing forms, web developers concern themselves with putting up the required input fields, while mostly or completely ignoring the UX design of the form. This could spell trouble conversions and thus the business in the long term.

We summarise the following video where Mustafa Kurtuldu, Design Advocate at Google speaks to Adrienne Porter Felt, Engineer and Manager at Google Chrome, about how the autocomplete and autofill features can be used to create better UX design for forms.

One of the features that rank quite high with respect to form design UX is the autocomplete or autofill feature. It has been proven that using autocomplete elevates the user experience vastly. Whether it is to make a payment online, apply for jobs or renew your Netflix subscription, it makes the task of filling up forms much quicker, efficient and hassle-free, even on mobile phones.

To be precise, autofill makes form-filling about 30% faster, thereby increasing form-submission rates as well.

Easy to set up

Adding autocomplete to forms is really not a time-consuming process. You only need to add autocomplete attributes to form elements. You also need to make sure that you are not doing anything that will replace native form elements with other fancier elements.

One thing that needs to be kept in mind is that using divs to create a beautiful, custom form would lead to disabling autofill because the browser would be unable to figure out whether the item was intended to be a form in the first place.

How can developers get to the sweet spot of having a custom experience that’s unique to their product without breaking the native behaviour of the form? While with some work, most kinds of form elements can be replaced with custom elements without affective their autocomplete behaviour, the look and feel of a dropdown in a select element cannot be replaced. But apart from that, there are many ways you can customise the look of the form in a page.

Challenge facing Autofill Implementation

The major challenge for autofill implementation is that developers, having made and tested it a hundred times themselves, are usually unable to look at it from an end users’ perspective. If developers could put themselves in the users’ shoes and accept that users’ experience might be vastly different from their own, the process of adoption of autocomplete would be much faster.

Browser Compatibility

With regards to browser compatibility, autocomplete attributes are standardised and all browsers respect them. However the autocomplete-off implementation is not uniform across browsers.

The Process of creating great Form Design UX

The Product, Engineering and Design divisions can brainstorm and come up with ideas that can deliver all that they hope from the feature. With feedback from the Product and Engineering teams, the Designers can throw up some mockups of what the feature would look like when implemented across various platforms (Windows, Mac, ios, android etc).

This would get them to the final set of designs which can be implemented or shipped.

For effective implementation, the UI should be kept standardised and the focus should be on the UX, with the UI being built around it.

The Future of Autofill

While we are approaching Chrome’s 10-year anniversary, we wonder what the future of autofill and Chrome itself would look like. Most people that have used the autofill feature would agree that it is an essential requirement for a good user experience. Large transactions are now completed in a fraction of the time, with only a fraction of the effort. With all these innumerable benefits, what exactly is hindering the use of autocomplete?

Contrary to popular belief, lack of cross browser collaboration is no more the biggest challenge with respect to autofill as there has been a lot of work on it in the recent past. The main challenge that still remains is actually, developer apathy.

Conclusion

Failing to provide autocomplete for forms could cause serious problems in a product’s UX. Even in case of certain niche businesses, overlooking autocomplete could even affect the company’s very business model.

In all probability though, steps to popularise autocomplete would be rolled out in phases, much like how the use of http was phased out to make way for https and now http2 – slowly and steadily, while educating the developers and users simultaneously.

Adopting autocomplete would be a win-win situation for all parties involved. Web developers can build products with better form design UX and hence get increased conversions. Companies will be able to engage in more effective communication with the users, which would translate to better business. And lastly, end users would have a pleasant, less time-consuming and trouble-free experience.

You may also like
bad design
Is your Landing Page Raising more Questions than it is Answering?
Web Fonts- The State of the Web