Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to make (more) money on the web?

1,151 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
  • 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

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!

×