Help users save more time with autocomplete
Recently I learnt a ton about Users experience on mobile and web from Pete LePage and Ido Green. Analyses have shown us that filling information in forms and general information consumption is the bulk of what we do online. So let’s get into how to help Users have a fast and happy experience while doing this activities on the web.
Providing repeated data in forms can be tiring, so lets take advantage of autofill autocomplete and using the right input types on form input…
Lets also have it in mind that people hate filling web forms, especially on mobile devices. Modern browsers like Chrome has taken steps to recognise this challenge and introduced Autofill, which help users easily complete forms with pre-populated data. Chrome even expanded support for credit cards and addresses. By using the autocomplete attributes, we can help our users autofill their checkout forms, shipping/home address, phone number etc.
For example, if you designed an input field for a street address you can hint the browser that you are expecting it by using
Research has found that by using autocomplete attributes on your forms, users complete them up to 30% faster.
Lets mention a few Common Attributes:
- Name: name attribute (name, fname, mname, lname) & autocomplete attribute ( name, given-name, additional-name, family-name)
<input name=“name” id=“ fullname” placeholder=“full name” required autocomplete=“name”>
2. Email: name attribute (email) & autocomplete attribute (email)
<input type=“email” name=“email” id=“userEmail” placeholder=“email@example.com” required autocomplete=“email”>
3. Address: name attribute (address, city, region, province, state, zip, postal, country) & autocomplete attribute (For one address input: street-address. For two address inputs: address-line1, address-line2)
<input name=“home-address” required id=“homeAddress” placeholder=“234 my street” autocomplete=“home street-address”>
4. Phone: name attribute (phone, mobile, country-code, area-code, exchange, suffix ext) & autocomplete attribute (tel)
<input type="tel" name="phone" id="myPhoneNum" placeholder=“+234-123-456-789" required type=“tel” autocomplete=“tel”>
5. Credit Card: name attribute (cardnumber, cvc, ccmonth, ccyear, exp-date, card-type) & autocomplete attribute (cc-name, cc-number, cc-csc, cc-exp-month, cc-exp-year, cc-exp, cc-type)
<label for=“ccName">Name on card</label>
<input name=“ccname” id=“ccName” required placeholder=“Full Name” type=“number" autocomplete=“cc-name”>
An example of a payment form
<label for="frmNameCC">Name on card</label>
<input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Card Number</label>
<input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">
<input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">
<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
Finally, a recap on Forms best practices:
- Use input types on form inputs. These input types gives the browser hints about what type of keyboard layout to display for on-screen keyboards. It would be a lot easier for users to enter the required information without having to change their keyboard as they only see the appropriate keys for that input type.
- Use Autocomplete attribute to control how the browser should populate a given form field.
You can learn more about creating amazing forms from Pete https://developers.google.com/web/fundamentals/design-and-ux/input/forms/#use-metadata-to-enable-auto-complete
Also learn more about Helping users checkout faster with Autofill https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill