Web Forms: Now You See Them, Now You Don't!

We've long known that shorter forms make for happier users and higher completion rates. Now new technology allows us to simplify forms further—to a point where they no longer feel like forms. We can make forms so easy to to fill out that you could complete them blindfolded. What is this wizardry? Join Jason as he shows you how to amaze and delight your users using new APIs and inputs to make your forms magical.

Transcript

1. Web Forms NOW YOU SEE THEM. NOW YOU DON’T.
2. [E]ach question in a Web form has a cost… If there are too many questions in the form, you’ll lose users. —Caroline Jarrett Author of Forms that Work: Designing Web Forms for Usability, 2008 https://www.uxmatters.com/mt/archives/2010/06/the-question-protocol-how-to-make-sure-every-form-field-is-necessary.php
3. https://twitter.com/lukew/status/481451048117092353?lang=en
4. 4 fields?
5. NO FIELDS
7. ☹ I AM NOT A MAGICIAN
11. Volunteer
13. the Secret?
14. + WebAuthn SLIDE Embargoed until after presentation has concluded
15. SLIDE Embargoed until after presentation has concluded
16. SLIDE Embargoed until after presentation has concluded
17. Passwords
18. 65% share password across multiple sites 51% have a favorite password they reuse https://www.forbes.com/sites/daveywinder/2019/02/05/google-reveals-a-big-problem-with-passwords-on-safer-internet-day/
19. 1.9B passwords exposed in data breaches in 2017 2.2B passwords in a 2019 megaleak file https://www.wired.com/story/collection-leak-usernames-passwords-billions/amp https://static.googleusercontent.com/media/research.google.com/en//pubs/archive/46437.pdf
21. The only people who love usernames and passwords are hackers. —Alex Simons Corporate vice president at Microsoft’s identity division Username and Password Hell: Why the Internet Can’t Keep You Logged In, Wall Street Journal, March 10, 2019
 https://www.wsj.com/articles/username-and-password-hell-why-the-internet-cant-keep-you-logged-in-11552222800
22. Two-factor Authentication (2FA)
24. g00gle google Password One Time Password Password? One Time Password? Password? Password OTP OTP? Password One Time Password google Original diagram from Eiji Kitamura and Balázs Engedy’s presentation at Google I/O 2018: https://www.youtube.com/watch?v=kGGMgEfSzMw
25. g00gle google Original diagram from Eiji Kitamura and Balázs Engedy’s presentation at Google I/O 2018: https://www.youtube.com/watch?v=kGGMgEfSzMw Is this google.com? No Password?
26. WebAuthn (Plus more devices with biometric sensors)
28. Original diagram from Eiji Kitamura and Balázs Engedy’s presentation at Google I/O 2018: https://www.youtube.com/watch?v=kGGMgEfSzMw User Jane Doe Challenge 0x3b1337a8u7… Web Server Create Account
29. Original diagram from Eiji Kitamura and Balázs Engedy’s presentation at Google I/O 2018: https://www.youtube.com/watch?v=kGGMgEfSzMw User Jane Doe Challenge 0x3b1337a8u7… Web Server Challenge User info Web Site Authenticator Challenge User info Create Account
30. Original diagram from Eiji Kitamura and Balázs Engedy’s presentation at Google I/O 2018: https://www.youtube.com/watch?v=kGGMgEfSzMw User Jane Doe Challenge 0x3b1337a8u7… Web Server User info Jane Doe Domain name example.org Credential ID 0x9c2218b234… Private Key 0x29516ba287… Challenge User info Web Site Authenticator Challenge User info Create Account
31. Original diagram from Eiji Kitamura and Balázs Engedy’s presentation at Google I/O 2018: https://www.youtube.com/watch?v=kGGMgEfSzMw User Jane Doe Challenge 0x3b1337a8u7… Web Server User info Jane Doe Domain name example.org Credential ID 0x9c2218b234… Private Key 0x29516ba287… Challenge User info Web Site Authenticator Public key Credential id Signed challenge Challenge User info Public key Credential id Signed challenge Create Account
32. Original diagram from Eiji Kitamura and Balázs Engedy’s presentation at Google I/O 2018: https://www.youtube.com/watch?v=kGGMgEfSzMw User Jane Doe Challenge 0x3b1337a8u7… Credential ID 0x9c2218b234… Web Server User info Jane Doe Domain name example.org Credential ID 0x9c2218b234… Private Key 0x29516ba287… Challenge User info Web Site Authenticator Public key Credential id Signed challenge Challenge User info Public key Credential id Signed challenge Create Account
33. Original diagram from Eiji Kitamura and Balázs Engedy’s presentation at Google I/O 2018: https://www.youtube.com/watch?v=kGGMgEfSzMw User Jane Doe Challenge 0x3b1337a8u7… Credential ID 0x9c2218b234… Public Key 0x89889fb234… Web Server User info Jane Doe Domain name example.org Credential ID 0x9c2218b234… Private Key 0x29516ba287… Challenge User info Web Site Authenticator Public key Credential id Signed challenge Challenge User info Public key Credential id Signed challenge Create Account
34. Original diagram from Eiji Kitamura and Balázs Engedy’s presentation at Google I/O 2018: https://www.youtube.com/watch?v=kGGMgEfSzMw User Jane Doe Credential ID 0x9c2218b234… Public Key 0x89889fb234… Web Server User info Jane Doe Domain name example.org Credential ID 0x9c2218b234… Private Key 0x29516ba287… Web Site Authenticator Login Challenge 0x527878af87… Challenge Credential Id Challenge Credential Id
35. Original diagram from Eiji Kitamura and Balázs Engedy’s presentation at Google I/O 2018: https://www.youtube.com/watch?v=kGGMgEfSzMw User Jane Doe Credential ID 0x9c2218b234… Public Key 0x89889fb234… Web Server User info Jane Doe Domain name example.org Credential ID 0x9c2218b234… Private Key 0x29516ba287… Web Site Authenticator Login Challenge 0x527878af87… Challenge Credential Id Challenge Credential Id Verify Credential ID Verify Domain
36. Original diagram from Eiji Kitamura and Balázs Engedy’s presentation at Google I/O 2018: https://www.youtube.com/watch?v=kGGMgEfSzMw User Jane Doe Credential ID 0x9c2218b234… Public Key 0x89889fb234… Web Server User info Jane Doe Domain name example.org Credential ID 0x9c2218b234… Private Key 0x29516ba287… Web Site Authenticator Login Challenge 0x527878af87… Challenge Credential Id Challenge Credential Id Signature Signature
37. Challenge Prevents replay attacks Domain check Prevents phishing User consent Prevents silent tracking Key pair per site No shared passwords Site verification Prevents phishing and person-in-middle attacks https://www.youtube.com/watch?v=03sAfmCDjFg
38. No Passwords?
39. Something you know Something you have Something you are
40. Something you have—your device Something you are—your fingerprint
43. More Options for making signup and login forms disappear
44. Credential Management API Makes it easy for someone to select existing accounts stored in browser password manager including federated logins. 
 
 WebAuthn extends the Credential Management API and may have more momentum than the API that it extends.
45. 50% increase in new user sign up and the number of signed in users browsing the site is up 2x 80% increase in sign-up and new users that return 5+ times has increased 40% https://www.youtube.com/watch?v=kGGMgEfSzMw
47. Federated Login Do it both for your users and your company. For users: makes registering and signing in easier. For your company: increases sign ups and decreases your risk of being the next company to create headlines from passwords leak or GPDR. https://www.tutorialrepublic.com/snippets/preview.php?topic=bootstrap&file=sign-in-from-with-social-login-button
48. https://lipis.github.io/bootstrap-social/
56. Volunteer
58. the Secret?
59. http://amasci.com/amateur/irgoggl.html SLIDE Embargoed until after presentation has concluded
60. SLIDE Embargoed until after presentation has concluded
61. SLIDE Embargoed until after presentation has concluded
62. Photo by Oliver Thomas https://twitter.com/ulliverti/status/932855554585825280/photo/1 SLIDE Embargoed until after presentation has concluded
63. Face ID Payment REQuesT API + SLIDE Embargoed until after presentation has concluded
64. SLIDE Embargoed until after presentation has concluded
65. SLIDE Embargoed until after presentation has concluded
66. PAYMENT REQUEST API
67. 69% average shopping cart abandonment rate https://baymard.com/lists/cart-abandonment-rate
68. Site calls PaymentRequest // Payment request available? paymentRequest.canMakePayment() // Show the payment request paymentRequest.show()
69. Site calls PaymentRequest Browser displays payment UI
70. Site calls PaymentRequest Browser displays payment UI Payment processing app
71. Site calls PaymentRequest Browser displays payment UI Payment processing app Browser passes response to site
72. 75% decrease in average time spent in the checkout process with Payment Request API 65% decrease in cart abandonment and 10% increase in completed checkouts https://www.wompmobile.com/payment-request-api-case-study
 https://www.youtube.com/watch?v=1-g1rvkORQ8&feature=youtu.be&t=6m21s
78. The Fine Print
79. Apple Pay Google Pay Microsoft Pay Samsung Pay No additional fees ✔ ✔ ✔ ✔ Access to users email for order fulfillment ✔ ✔ ✔ ✔ No cigarettes, drugs, porn, firearms, illegal activities ✔ ✔ No personal fundraising or nonprofit donations w/o approval ✔ ✔ No promotion of hate, violence, or intolerance ✔ ✔ No purchasing of currency or establish pre-paid accounts ✔ No fraud ✔ ✔ No IP violations ✔ ✔ No misusing the company's products, brand, etc. ✔ Right to disable at any time ✔ ✔ ✔ Branding and UI guidelines ✔ ✔ Must offer parity and must be set as default or sole payment option ✔ Recommended Must include privacy statement ✔ Subscriptions ✔ ✔ Terms seem fine, but IANAL
80. More Options for speeding up web forms
81. https://www.youtube.com/watch?v=Ow8gA0qe9SI
82. <input type="email" autocomplete="email" name="email"> <input type="text" autocomplete="cc-name" name="card-name"> <input type="text" autocomplete="cc-number" name="card-num"> <input type="text" autocomplete="cc-exp-month" name="card-exp-month"> <input type="text" autocomplete="cc-exp-year" name="card-exp-year"> <input type="text" autocomplete="cc-csc" name="card-csc"> browser autofill https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/
83. name honorific-prefix given-name additional-name family-name honorific-suffix nickname email username new-password current-password one-time-code organization-title street-address address-line1 address-line2 address-line3 address-line4 country country-name postal-code cc-name cc-given-name cc-additional-name cc-family-name cc-number cc-exp cc-exp-month cc-exp-year cc-csc cc-type transaction-currency transaction-amount language bday bday-day bday-month bday-year sex tel tel-country-code tel-national tel-area-code tel-local tel-extension impp url photo Many autofill Options
85. BTW, I didn’t check “Save credit card” so what is this error about? Huh? What error?
87. <input class="form-control payment-control ng-pristine ng-isolate-scope ng-valid-mask ng-empty ng-invalid ng-invalid-required ng-touched" aria-label="expiration year" cmg-cc-expiration-validator="cmg-cc-expiration-validator" cmg-cc-expiration-validator-func="$ctrl.isCardExpired($ctrl.card.expiration)" ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }" id="expirationDateYear" name="expdateyear" ng-required="true" ng-model="$ctrl.card.expiration.year" placeholder="YY" autocomplete="cc-exp-year" ui-mask="99" type="text" required="required" aria-invalid="true" style="">
88. <input class="form-control payment-control ng-pristine ng-isolate-scope ng-valid-mask ng-empty ng-invalid ng-invalid-required ng-touched" aria-label="expiration year" cmg-cc-expiration-validator="cmg-cc-expiration-validator" cmg-cc-expiration-validator-func="$ctrl.isCardExpired($ctrl.card.expiration)" ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }" id="expirationDateYear" name="expdateyear" ng-required="true" ng-model="$ctrl.card.expiration.year" placeholder="YY" autocomplete="cc-exp-year" ui-mask="99" type="text" required="required" aria-invalid="true" style=""> So it’s Angular…
89. , function(e, t) { var a = Math.abs; (function() { 'use strict'; angular.module('ui.mask', []).value('uiMaskConfig', { maskDefinitions: { 9: /\d/, A: /[a-zA-Z]/, "*": /[a-zA-Z0-9]/ }, clearOnBlur: !0, clearOnBlurPlaceholder: !1, escChar: '\\', eventsToHandle: ['input', 'keyup', 'click', 'focus'], addDefaultPlaceholder: !0, allowInvalidValue: !1 }).provider('uiMask.Config', function() { var e = {}; this.maskDefinitions = function(t) { return e.maskDefinitions = t } , this.clearOnBlur = function(t) { return e.clearOnBlur = t } , this.clearOnBlurPlaceholder = function(t) { return e.clearOnBlurPlaceholder = t } , this.eventsToHandle = function(t) { return e.eventsToHandle = t } , this.addDefaultPlaceholder = function(t) { return e.addDefaultPlaceholder = t
90. l.$observe('uiMask', s), angular.isDefined(l.uiMaskPlaceholder) ? l.$observe('uiMaskPlaceholder', d) : l.$observe('placeholder', d), angular.isDefined(l.uiMaskPlaceholderChar) && l.$observe('uiMaskPlaceholderChar', c), i.$formatters.unshift(m), i.$parsers.unshift(p); var Z = o.val(); o.bind('mousedown mouseup', k), !Array.prototype.indexOf && (Array.prototype.indexOf = function(e) { if (null === this) throw new TypeError; var r = Object(this) , t = r.length >>> 0; if (0 == t) return -1; var o = 0; if (1 < arguments.length && (o = +arguments[1], o == o ? 0 != o && o != Infinity && o != -Infinity && (o = (0 < o || -1) * Math.floor(a(o))) : o = 0), o >= t) return -1; for (var n = 0 <= o ? o : Math.max(t - a(o), 0); n < t; n++) if (n in r && r[n] === e) return n; return -1 } ) } } } } ]) } )() }
92. <input class="form-control payment-control ng-pristine ng-isolate-scope ng-valid-mask ng-empty ng-invalid ng-invalid-required ng-touched" aria-label="expiration year" cmg-cc-expiration-validator="cmg-cc-expiration-validator" cmg-cc-expiration-validator-func="$ctrl.isCardExpired($ctrl.card.expiration)" ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }" id="expirationDateYear" name="expdateyear" ng-required="true" ng-model="$ctrl.card.expiration.year" placeholder="YY" autocomplete="cc-exp-year" ui-mask="99" type="text" This restricts input to two digits. required="required" aria-invalid="true" style="">
93. <input class="form-control payment-control ng-pristine ng-isolate-scope ng-valid-mask ng-empty ng-invalid ng-invalid-required ng-touched" aria-label="expiration year" cmg-cc-expiration-validator="cmg-cc-expiration-validator" cmg-cc-expiration-validator-func="$ctrl.isCardExpired($ctrl.card.expiration)" ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }" id="expirationDateYear" name="expdateyear" ng-required="true" ng-model="$ctrl.card.expiration.year" placeholder="YY" autocomplete="cc-exp-year" ui-mask="99" type=" required="required" aria-invalid="true" style=""> text"
94. <input class="form-control payment-control ng-pristine ng-isolate-scope ng-valid-mask ng-empty ng-invalid ng-invalid-required ng-touched" aria-label="expiration year" cmg-cc-expiration-validator="cmg-cc-expiration-validator" cmg-cc-expiration-validator-func="$ctrl.isCardExpired($ctrl.card.expiration)" ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }" id="expirationDateYear" name="expdateyear" ng-required="true" ng-model="$ctrl.card.expiration.year" placeholder="YY" autocomplete="cc-exp-year" ui-mask="99" type=" required="required" aria-invalid="true" style=""> number"
95. <input class="form-control payment-control ng-pristine ng-isolate-scope ng-valid-mask ng-empty ng-invalid ng-invalid-required ng-touched" aria-label="expiration year" cmg-cc-expiration-validator="cmg-cc-expiration-validator" cmg-cc-expiration-validator-func="$ctrl.isCardExpired($ctrl.card.expiration)" ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }" id="expirationDateYear" name="expdateyear" ng-required="true" ng-model="$ctrl.card.expiration.year" placeholder="YY" autocomplete="cc-exp-year" ui-mask="99" type="number" required="required" aria-invalid="true" style=""> maxlength="2"
96. pattern="[0-9]" <input class="form-control payment-control ng-pristine ng-isolate-scope ng-valid-mask ng-empty ng-invalid ng-invalid-required ng-touched" aria-label="expiration year" cmg-cc-expiration-validator="cmg-cc-expiration-validator" cmg-cc-expiration-validator-func="$ctrl.isCardExpired($ctrl.card.expiration)" ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }" id="expirationDateYear" name="expdateyear" ng-required="true" ng-model="$ctrl.card.expiration.year" placeholder="YY" autocomplete="cc-exp-year" ui-mask="99" type="number" required="required" aria-invalid="true" style=""> maxlength="2"
100. What if Chipotle could gain half a percentage point INCrease in transactions from fixing autofill support?
101. 1,000,000 .005 5,000 $17 $85,000 52 $4,420,000 * = * = * = Online transactions per week Half a percentage point Equals 5k transactions per week Times average online order in 2018 Equals $85k per week Multiplied by weeks in a year for maxlength="2" What if Chipotle could gain half a percentage point INCrease in transactions from fixing autofill support?
102. Use HTML5 Input Features
103. Test Autofill
104. https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/
105. How to make YOUR forms Disappear
106. How to make YOUR forms Disappear 1. Start with a web form that follows best practices • Reduce the number of fields • Minimize typing • Use HTML5 input types • Provide helpful form validation
107. How to make YOUR forms Disappear 2. Support autofill and alternative input • Add autocomplete attributes • Support password managers and one-time passcode pasting • Support camera for credit card scanning, voice, and alternative input • At minimum, don’t prevent people from using what they prefer
108. How to make YOUR forms Disappear 3. Add alternative ways to create accounts and sign in • Delay creating accounts until needed • Email login links like Slack • Federated (or social) login • Credential management API
109. How to make YOUR forms Disappear 4. Include autofill and other form features in your test plans • Every test plan should include autofill • Test alternative ways to fill out forms • Ensure changes don’t break features your users rely on
110. How to make YOUR forms Disappear 5. Replace forms with biometrics • Use progressive enhancement to replace forms • Eliminate passwords with WebAuthn • Simplify checkout with Payment Request API
111. How to make YOUR forms Disappear 1. Start with a web form that follows best practices 2. Support autofill and alternative input 3. Add alternative ways to create accounts and sign in 4. Include autofill and other form features in your test plans 5. Replace forms with biometric sensors
112. Any sufficiently advanced technology is indistinguishable from magic. —Arthur C. Clarke
115. Thank You Thanks to these fabulous people who graciously shared their work under Creative Commons:
 • hacker by Peter van Driel from the Noun Project • Cloud by Rfourtytwo from the Noun Project • person by sandra from the Noun Project • Browser by ProSymbols from the Noun Project • block by AomAm from the Noun Project • knowledge by Hea Poh Lin from the Noun Project • wifi by DIVYA A from the Noun Project 
 Fingerprint by icon 54 from the Noun Project • Fingerprint by Adrien Coquet from the Noun Project • Person spreading arms against sun by Victor Freitas • Face ID by Oleksandr Panasovskyi from the Noun Project • Waterfront Property Infrared Photo by Zach Stern • Credit Card by kamalm from the Noun Project • Payment process by Gregor Cresnar from the Noun Project • website by Dennis from the Noun Project • Mobile Shopping by icon 54 from the Noun Project Special thanks to these kind folks who made this presentation possible: • Caleb Eby for helping configure and modify both demos. • Toby, Mike and the rest of the AEA crew for making it run smoothly. • Aaron Gustafson for providing Microsoft’s perspective, a test device, and perking my interest in WebAuthn in the first place. • Eiji Kitamura for all of his role creating the payment standards, helping me understand them, and brainstorming ideas for the trick. • Adam Powers for creating the WebAuthn demo I forked and pointing me in the right direction when I couldn’t get it running. • Bill Beaty whose DIY goggles were a blast to build and play with. • Megan Notarte, Aileen Jeffries, Tyler Sticka and everyone else at Cloud Four for their assistance and support. • My daughter Katie who helped build the blindfolds and was my eyes as I tested and rehearsed the talk. She’s such a great kid! Would love to hear from you:
 @grigs • jason@cloudfour.com • cloudfour.com