Web Forms The Right Way
48 likes15,536 views
The document outlines best practices for designing effective forms in eCommerce, emphasizing the importance of autofill, real-time validation, and clear labeling of input fields. It recommends using HTML5 input types, leveraging browser capabilities for autocomplete, and managing focus during validation failures. Additionally, it highlights the potential for increased conversion rates by optimizing forms for mobile use and suggests utilizing web components for improved efficiency.
![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](https://image.slidesharecdn.com/webformstherightway8-2015-150805134156-lva1-app6891/85/Web-Forms-The-Right-Way-20-320.jpg)
Web Forms The Right Way
- 1. Forms What are the best practices? How can you improve today?!
- 2. How do you nail Forms? Image Credit: https://www.flickr. com/photos/russell_darnell/5547532092
- 3. Every page in commerce is trying to convert. +Ido Green @greenido ido-green.appspot.com
- 6. How?!
- 8. ● Use existing data to pre-populate fields ● Ensure forms are auto-fillable by browsers
- 9. ● Show users how far along they are ● Don’t break the “back” button
- 10. Provide visual calendars when selecting dates
- 12. HTML5 input types url emailTel More types: https://goo.gl/Hg7HOO
- 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.
- 14. HTML5 input types url emailTel More types: https://goo.gl/Hg7HOO
- 15. Optimize text entry Let the browser help you on-board users
- 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.
- 23. eCommerce
- 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
- 27. use autocomplete types 30% increase in form fill speed when using Autofill (*Chrome usage data) Optimize for Autofill More: https://goo.gl/CGzH9g
- 28. 4x Increase in conversion 66-93% of Mobile Commerce Mobile Optimized sites *Flurry & Business Insider *Forbes - goo.gl/pIbSlz Forms are the ‘gatekeeper’ for anything (=signup, payment, information etc’)
- 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
- 32. <gold-cc-input name=”cc”></gold-cc-input> <label for="frmCCNum">Card Number</label> <input name="cc" id="frmCCNum" autocomplete="cc-number"> Functionally equivalent
- 33. <gold-cc-input name=”cc” error-message=”Try again” auto-validate></gold-cc-input> ● Built-in support for auto-fill ● Auto-validation attributes ● Display card types ● Custom error messages
- 34. Resources