How to
make
(more)
money
on the
web?
Dec 2015
Google Confidential and Proprietary
Mobile browser traffic is 2X bigger than app traffic
Source: VB Sep 2015
Images: Morga...
How do
you nail
Forms?
Image Credit: https://www.flickr.
com/photos/russell_darnell/5547532092
Every page in
commerce is
trying to
convert.
+Ido Green
@greenido
ido-green.appspot.com
Forms
in
General
How
Design efficient
form
eCommerce
Autofill rocks!
Next
Gold Elements!
How?!
Take
advantage of
the device
Tell the user
WHY
● Use existing data to
pre-populate fields
● Ensure forms are
auto-fillable by
browsers
● Show users how far
along they are
● Don’t break the
“back” button
Provide visual
calendars when
selecting dates
How to
choose
the best
input
type?
HTML5 input types
url emailTel
More types: https://goo.gl/i0vY1M
Offer suggestions during input with datalist
Live example: codepen.io/greenido/pen/ZbPWOa
<label for="frmFavChocolate">Typ...
Optimize text
entry
Let the
browser help
you on-board
users
Dropdowns Should be the UI of Last Resort
Luke Wroblewski - http://goo.gl/7ZmQ4J
Better password form fields
More: https://aerotwist.com/blog/better-password-form-fields/
Label and Name Inputs
More: auto-complete-attribute-will-improve-your-profit
● Use labels on form
inputs, and make them
vi...
Label and Name Inputs
Leverage the browser’s ability to Autofill
the form
a. Use established name's for
elements
b. Includ...
Provide real-time validation
Leverage the browser's built-in validation attributes like:
● pattern - <input type="text" pa...
Provide real-time validation
● Use JavaScript and the
Constraints Validation API
for complex validation.
● manage focus wh...
Provide real-time validation
● Show validation errors in
real time: bit.ly/form-
validation
● If the user tries to submit
...
eCommerce
Google Confidential and Proprietary
Mobile browser traffic is 2X bigger than app traffic
Google Confidential and Proprieta...
Google Confidential and Proprietary
94%
of users look to
take commercial
action via the
mobile web
Reach more users lookin...
use
autocomplete
types
30% increase in form fill speed
when using Autofill
(*Chrome usage data)
Optimize for
Autofill
More...
25% increase
in form
submissions
when autofill
enabled!
30% increase
in form fill
speed when
using Autofill
*Chrome usage ...
4x Increase
in
conversion
66-93% of
Mobile
Commerce
Mobile
Optimized
sites
*Flurry & Business Insider *Forbes - goo.gl/pIb...
The Future?!
Web
Components
Web Components - Save you leg work!
● Custom elements can bake in best practices, cutting down
on boilerplate and missed o...
github.com/notwaldorf/polymer-gold-elements-demo
<gold-cc-input name=”cc”></gold-cc-input>
<label for="frmCCNum">Card Number</label>
<input name="cc" id="frmCCNum"
autocom...
<gold-cc-input name=”cc” error-message=”Try again” auto-validate></gold-cc-input>
● Built-in support for auto-fill
● Auto-...
Resources
25 Principles
goo.gl/5MbvDK
Resources
bit.ly/pagespeedinsights
bit.ly/mobilefriendlytest
developers.google.com/web/
Ido Green
@greenido
+GreenIdo
ido-green.appspot.com
Thank
you!
How to make (more) money on the web?
Upcoming SlideShare
Loading in …5
×

How to make (more) money on the web?

986 views

Published on

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.

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • they are money management, market analysis, and entry/exit rules. to me money management is important in trading. i opened another account and start to trade profitably after i learnt from my past mistake. i don't trade emotionally anymore. from when GINO SHEARER TRADING is in my hands it is absolutely easy to run my binary option as well.. but some times it broken down when i use.. have a good ofer for you..see you later..
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
986
On SlideShare
0
From Embeds
0
Number of Embeds
146
Actions
Shares
0
Downloads
6
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

How to make (more) money on the web?

  1. 1. How to make (more) money on the web? Dec 2015
  2. 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. 3. How do you nail Forms? Image Credit: https://www.flickr. com/photos/russell_darnell/5547532092
  4. 4. Every page in commerce is trying to convert. +Ido Green @greenido ido-green.appspot.com
  5. 5. Forms in General
  6. 6. How Design efficient form eCommerce Autofill rocks! Next Gold Elements!
  7. 7. How?!
  8. 8. Take advantage of the device Tell the user WHY
  9. 9. ● Use existing data to pre-populate fields ● Ensure forms are auto-fillable by browsers
  10. 10. ● Show users how far along they are ● Don’t break the “back” button
  11. 11. Provide visual calendars when selecting dates
  12. 12. How to choose the best input type?
  13. 13. HTML5 input types url emailTel More types: https://goo.gl/i0vY1M
  14. 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. 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: 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. 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. 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. 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 Mobile browser traffic is 2X bigger than app traffic Google Confidential and Proprietary Source: VB Sep 2015 Images: Morgan Stanley And growing faster!
  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
  26. 26. 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
  27. 27. 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
  28. 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’)
  29. 29. The Future?! Web Components
  30. 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
  31. 31. github.com/notwaldorf/polymer-gold-elements-demo
  32. 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. 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. 34. Resources
  35. 35. 25 Principles goo.gl/5MbvDK
  36. 36. Resources bit.ly/pagespeedinsights bit.ly/mobilefriendlytest developers.google.com/web/
  37. 37. Ido Green @greenido +GreenIdo ido-green.appspot.com Thank you!

×