Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Jason Grigsby

August 26, 2019
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

Transcript

  1. [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
  2. 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/
  3. 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
  4. 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
  5. 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
  6. 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?
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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.
  18. 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
  19. 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
  20. 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
  21. 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
  22. <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/
  23. 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
  24. BTW, I didn’t check “Save credit card” so what is

    this error about? Huh? What error?
  25. <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="">
  26. <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…
  27. , 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
  28. 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 } ) } } } } ]) } )() }
  29. <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="">
  30. <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"
  31. <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"
  32. <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"
  33. 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"
  34. What if Chipotle could gain half a percentage point INCrease

    in transactions from fixing autofill support?
  35. 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?
  36. 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
  37. 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
  38. 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
  39. 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
  40. 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
  41. 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
  42. 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 • [email protected] • cloudfour.com