web forms the right way
TRANSCRIPT
![Page 1: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/1.jpg)
Forms
What are the best practices?
How can you improve today?!
![Page 2: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/2.jpg)
How do you nail Forms?
Image Credit: https://www.flickr.com/photos/russell_darnell/5547532092
![Page 3: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/3.jpg)
Every page in commerce is trying to convert.
+Ido Green
@greenido
ido-green.appspot.com
![Page 4: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/4.jpg)
Forms in
General
![Page 5: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/5.jpg)
How Design efficient form
eCommerce Autofill rocks!
Next Gold Elements!
![Page 6: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/6.jpg)
How?!
![Page 7: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/7.jpg)
Take advantage of
the device
![Page 8: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/8.jpg)
● Use existing data to pre-populate fields
● Ensure forms are auto-fillable by browsers
![Page 9: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/9.jpg)
● Show users how far
along they are
● Don’t break the
“back” button
![Page 10: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/10.jpg)
Provide visual calendars when selecting dates
![Page 11: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/11.jpg)
How to choose the best input type?
![Page 13: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/13.jpg)
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.
![Page 15: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/15.jpg)
Optimize text entry
Let the browser help you on-board
users
![Page 16: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/16.jpg)
Dropdowns Should be the UI of Last Resort
Luke Wroblewski - http://goo.gl/7ZmQ4J
![Page 17: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/17.jpg)
Better password form fields
More: https://aerotwist.com/blog/better-password-form-fields/
![Page 18: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/18.jpg)
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">
![Page 19: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/19.jpg)
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.
![Page 20: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/20.jpg)
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
![Page 21: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/21.jpg)
Provide real-time validation
Use JavaScript and the
Constraints Validation API
for more complex validation
requirements.
![Page 22: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/22.jpg)
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.
![Page 23: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/23.jpg)
eCommerce
![Page 24: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/24.jpg)
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
![Page 25: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/25.jpg)
![Page 26: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/26.jpg)
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
![Page 27: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/27.jpg)
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
![Page 28: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/28.jpg)
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’)
![Page 29: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/29.jpg)
The Future?!Web
Components
![Page 30: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/30.jpg)
Web Components - Save you leg work!
Try the Gold elements
![Page 31: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/31.jpg)
Resources
![Page 32: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/32.jpg)
25 Principlesgoo.gl/5MbvDK
![Page 33: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/33.jpg)
Resources
bit.ly/pagespeedinsights
bit.ly/mobilefriendlytest
developers.google.com/web/
![Page 34: Web Forms The Right Way](https://reader034.vdocuments.us/reader034/viewer/2022042717/55d2fc89bb61eb66098b46a5/html5/thumbnails/34.jpg)
Ido Green
@greenido
+GreenIdo
ido-green.appspot.com
Thank you!