Embed Size (px)
Citation preview
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: Morgan Stanley
And growing faster!
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?
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.
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
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">
Label and Name InputsLeverage 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
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
Provide real-time validation
● Use JavaScript and the
Constraints Validation API
for complex validation.
● manage focus when
validation fails.
● Autocorrect when you can!
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.
eCommerce
Google Confidential and Proprietary
Mobile browser traffic is 2X bigger than app traffic
Google Confidential and ProprietarySource: VB Sep 2015 Images: Morgan Stanley
And growing faster!
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
useautocomplete
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
25% increase in form submissions when autofill enabled!
30% increase in form fill speed when using Autofill*Chrome usage data
TL;DROptimize for
AutofillUse
Autocomplete
More: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
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’)
The Future?!Web
Components
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
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" autocomplete="cc-number">
Functionally equivalent
<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
Resources
Resources
bit.ly/pagespeedinsights
bit.ly/mobilefriendlytest
developers.google.com/web/
Ido Green
@greenido
+GreenIdo
ido-green.appspot.com
Thank you!
