web forms the right way
TRANSCRIPT
Forms
What are the best practices?
How can you improve today?!
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
● 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: 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.
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: 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">
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.
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
Provide real-time validation
Use JavaScript and the
Constraints Validation API
for more complex validation
requirements.
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
86%spent in apps
14%spent in the browser
Smartphone users spend most of their time in apps
Google Confidential and ProprietarySource: Flurry 2014
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
useautocomplete
30% increase in form fill speed when using Autofill(*Chrome usage data)
Let the browser help you on-board
users
More: https://goo.gl/CGzH9g
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!
Try the Gold elements
Resources
25 Principlesgoo.gl/5MbvDK
Resources
bit.ly/pagespeedinsights
bit.ly/mobilefriendlytest
developers.google.com/web/
Ido Green
@greenido
+GreenIdo
ido-green.appspot.com
Thank you!