Forms are the main 'entry barrier' to anything meaningful on the web. It might be a registration form, sign-up form or a shopping cart. In all of them, you wish to do the best in order to make your users happy with the experience.
In these slides, we will cover the best practices so your forms will rock.
13. Offer suggestions during input with datalist
Live example: https://goo.gl/RdwFhd
<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: https://goo.gl/TqLAh2
● 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
More: https://goo.gl/TqLAh2
Leverage the browser’s ability to
auto-complete the form
a. Use established name's for
elements
b. Include the
autocomplete attribute.
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: https://goo.gl/f8N29E
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
86%
spent in apps
14%
spent in the
browser
Smartphone users spend most of their time in apps
Google Confidential and ProprietarySource: Flurry 2014
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 Google Confidential and Proprietary
30. 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