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.

1. How to
make
(more)
money
on the
web?
Dec 2015

2. Google Confidential and Proprietary
Mobile browser traffic is 2X bigger than app traffic
Source: VB Sep 2015
Images: Morgan Stanley
And growing faster!

3. How do
you nail
Forms?
Image Credit: https://www.flickr.
com/photos/russell_darnell/5547532092

4. Every page in
commerce is
trying to
convert.
+Ido Green
@greenido
ido-green.appspot.com

5. Forms
in
General

6. How
Design efficient
form
eCommerce
Autofill rocks!
Next
Gold Elements!

7. How?!

8. Take
advantage of
the device
Tell the user
WHY

9. ● Use existing data to
pre-populate fields
● Ensure forms are
auto-fillable by
browsers

10. ● Show users how far
along they are
● Don’t break the
“back” button

11. Provide visual
calendars when
selecting dates

12. How to
choose
the best
input
type?

13. HTML5 input types
url emailTel
More types: https://goo.gl/i0vY1M

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.

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: 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.

23. eCommerce

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!

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

29. 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. The Future?!
Web
Components

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

32. github.com/notwaldorf/polymer-gold-elements-demo

33. <gold-cc-input name=”cc”></gold-cc-input>
<label for="frmCCNum">Card Number</label>
<input name="cc" id="frmCCNum"
autocomplete="cc-number">
Functionally
equivalent

34. <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

35. Resources

36. 25 Principles
goo.gl/5MbvDK

37. Resources
bit.ly/pagespeedinsights
bit.ly/mobilefriendlytest
developers.google.com/web/

38. Ido Green
@greenido
+GreenIdo
ido-green.appspot.com
Thank
you!