Successfully reported this slideshow.

Web Forms The Right Way

48

Share

Loading in …3
×
1 of 37
1 of 37

Web Forms The Right Way

48

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Web Forms The Right Way

  1. 1. Forms What are the best practices? How can you improve today?!
  2. 2. How do you nail Forms? Image Credit: https://www.flickr. com/photos/russell_darnell/5547532092
  3. 3. Every page in commerce is trying to convert. +Ido Green @greenido ido-green.appspot.com
  4. 4. Forms in General
  5. 5. How Design efficient form eCommerce Autofill rocks! Next Gold Elements!
  6. 6. How?!
  7. 7. Take advantage of the device
  8. 8. ● Use existing data to pre-populate fields ● Ensure forms are auto-fillable by browsers
  9. 9. ● Show users how far along they are ● Don’t break the “back” button
  10. 10. Provide visual calendars when selecting dates
  11. 11. How to choose the best input type?
  12. 12. HTML5 input types url emailTel More types: https://goo.gl/Hg7HOO
  13. 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. 14. HTML5 input types url emailTel More types: https://goo.gl/Hg7HOO
  15. 15. Optimize text entry Let the browser help you on-board users
  16. 16. Dropdowns Should be the UI of Last Resort Luke Wroblewski - http://goo.gl/7ZmQ4J
  17. 17. Better password form fields More: https://aerotwist.com/blog/better-password-form-fields/
  18. 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. 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. 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. 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. 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. 23. eCommerce
  24. 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
  25. 25. 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
  26. 26. use autocomplete types 30% increase in form fill speed when using Autofill (*Chrome usage data) Optimize for Autofill More: https://goo.gl/CGzH9g
  27. 27. 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’)
  28. 28. The Future?! Web Components
  29. 29. 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
  30. 30. github.com/notwaldorf/polymer-gold-elements-demo
  31. 31. <gold-cc-input name=”cc”></gold-cc-input> <label for="frmCCNum">Card Number</label> <input name="cc" id="frmCCNum" autocomplete="cc-number"> Functionally equivalent
  32. 32. <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
  33. 33. Resources
  34. 34. 25 Principles goo.gl/5MbvDK
  35. 35. Resources bit.ly/pagespeedinsights bit.ly/mobilefriendlytest developers.google.com/web/
  36. 36. Ido Green @greenido +GreenIdo ido-green.appspot.com Thank you!

×