Any meaningful experience on the web comes with boxes that need to be filled. It might be a registration form, shopping cart or a login form. Moreover, we see the eCommerce revolution flourishing on the mobile web. In these slides, we will see how to improve our forms, make more money and put a smile on our users' faces.
2. Google Confidential and Proprietary
Mobile browser traffic is 2X bigger than app traffic
Source: VB Sep 2015
Images: Morgan Stanley
And growing faster!
14. Offer suggestions during input with datalist
Live example: codepen.io/greenido/pen/ZbPWOa
<label for="frmFavChocolate">Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmChocolate"
list="chocType">
<datalist id="chocType">
<option value="white">
<option value="milk">
<option value="dark">
</datalist>
(!) The datalist values are provided as suggestions. Users are not restricted to the suggestions provided.
16. Dropdowns Should be the UI of Last Resort
Luke Wroblewski - http://goo.gl/7ZmQ4J
17. Better password form fields
More: https://aerotwist.com/blog/better-password-form-fields/
18. Label and Name Inputs
More: auto-complete-attribute-will-improve-your-profit
● Use labels on form
inputs, and make them
visible.
● Use placeholders to
provide guidance.
<label for="frmAddressS">Address</label>
<input type="text" name="ship-address"
required id="frmAddressS"
placeholder="123 Any Street"
autocomplete="shipping street-address">
19. Label and Name Inputs
Leverage the browser’s ability to Autofill
the form
a. Use established name's for
elements
b. Include the autocomplete
attribute.
More: auto-complete-attribute-will-improve-your-profit
20. Provide real-time validation
Leverage the browser's built-in validation attributes like:
● pattern - <input type="text" pattern="^d{5,6}(?:[-s]d{4})?$" ...>
● required - <input type="text" required pattern= "^...$" ...>
● min / max - <input type="number" min="1" max="13" step="0.5" ...>
More: codepen.io/greenido/pen/XmpgBr
21. Provide real-time validation
● Use JavaScript and the
Constraints Validation API
for complex validation.
● manage focus when
validation fails.
● Autocorrect when you can!
22. Provide real-time validation
● Show validation errors in
real time: bit.ly/form-
validation
● If the user tries to submit
an invalid form, show all
fields they need to fix.
24. Google Confidential and Proprietary
Mobile browser traffic is 2X bigger than app traffic
Google Confidential and Proprietary
Source: VB Sep 2015
Images: Morgan Stanley
And growing faster!
25.
26. Google Confidential and Proprietary
94%
of users look to
take commercial
action via the
mobile web
Reach more users looking to spend money
Source: Google/Ipsos 2014
27. use
autocomplete
types
30% increase in form fill speed
when using Autofill
(*Chrome usage data)
Optimize for
Autofill
More: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
28. 25% increase
in form
submissions
when autofill
enabled!
30% increase
in form fill
speed when
using Autofill
*Chrome usage data
TL;DR
Optimize for
Autofill
Use
Autocomplete
More: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
31. Web Components - Save you leg work!
● Custom elements can bake in best practices, cutting down
on boilerplate and missed opportunities
● Polymer has built a dedicated set of ECommerce
elements, a.k.a. “Gold Elements” which you can use in
any application
● Live Example