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

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.

Dac45089aeda3bca56193072601a49d4?s=128

Jason Grigsby

August 26, 2019
Tweet

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

  6. None
  7. ☹ I AM NOT A MAGICIAN

  8. None
  9. None
  10. None
  11. Volunteer

  12. None
  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
  20. None
  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)

  23. None
  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)

  27. None
  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

  41. None
  42. None
  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
  46. None
  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/

  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. Volunteer

  57. None
  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
  73. None
  74. None
  75. None
  76. None
  77. None
  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
  84. None
  85. BTW, I didn’t check “Save credit card” so what is

    this error about? Huh? What error?
  86. None
  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 } ) } } } } ]) } )() }
  91. None
  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"
  97. None
  98. None
  99. None
  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
  113. None
  114. None
  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