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.
   

   View Slide

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
   

   View Slide

3. https://twitter.com/lukew/status/481451048117092353?lang=en
   

   View Slide

4. 4 fields?
   

   View Slide

5. NO FIELDS
   

   View Slide

6. View Slide

7. ☹
   I AM NOT A MAGICIAN
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. Volunteer
    

    View Slide

12. View Slide

13. the Secret?
    

    View Slide

14. + WebAuthn
    SLIDE Embargoed
    until after presentation has concluded
    

    View Slide

15. SLIDE Embargoed
    until after presentation has concluded
    

    View Slide

16. SLIDE Embargoed
    until after presentation has concluded
    

    View Slide

17. Passwords
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

20. View Slide

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
    

    View Slide

22. Two-factor
    Authentication
    (2FA)
    

    View Slide

23. View Slide

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
    

    View Slide

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?
    

    View Slide

26. WebAuthn
    (Plus more devices with biometric sensors)
    

    View Slide

27. View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

38. No Passwords?
    

    View Slide

39. Something you know Something you have Something you are
    

    View Slide

40. Something you have—your device
    Something you are—your fingerprint
    

    View Slide

41. View Slide

42. View Slide

43. More Options
    for making signup and login forms disappear
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

46. View Slide

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
    

    View Slide

48. https://lipis.github.io/bootstrap-social/
    

    View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. Volunteer
    

    View Slide

57. View Slide

58. the Secret?
    

    View Slide

59. http://amasci.com/amateur/irgoggl.html
    SLIDE Embargoed
    until after presentation has concluded
    

    View Slide

60. SLIDE Embargoed
    until after presentation has concluded
    

    View Slide

61. SLIDE Embargoed
    until after presentation has concluded
    

    View Slide

62. Photo by Oliver Thomas https://twitter.com/ulliverti/status/932855554585825280/photo/1
    SLIDE Embargoed
    until after presentation has concluded
    

    View Slide

63. Face ID
    Payment
    REQuesT API
    +
    SLIDE Embargoed
    until after presentation has concluded
    

    View Slide

64. SLIDE Embargoed
    until after presentation has concluded
    

    View Slide

65. SLIDE Embargoed
    until after presentation has concluded
    

    View Slide

66. PAYMENT REQUEST API
    

    View Slide

67. 69%
    average shopping cart
    abandonment rate
    https://baymard.com/lists/cart-abandonment-rate
    

    View Slide

68. Site calls
    PaymentRequest
    // Payment request available?
    paymentRequest.canMakePayment()
    // Show the payment request
    paymentRequest.show()
    

    View Slide

69. Site calls
    PaymentRequest
    Browser displays
    payment UI
    

    View Slide

70. Site calls
    PaymentRequest
    Browser displays
    payment UI
    Payment
    processing app
    

    View Slide

71. Site calls
    PaymentRequest
    Browser displays
    payment UI
    Payment
    processing app
    Browser passes
    response to site
    

    View Slide

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
    

    View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. The Fine Print
    

    View Slide

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
    

    View Slide

80. More Options
    for speeding up web forms
    

    View Slide

81. https://www.youtube.com/watch?v=Ow8gA0qe9SI
    

    View Slide

82. 
    
    
    
    
    
    browser autofill
    https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/
    

    View Slide

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
    

    View Slide

84. View Slide

85. BTW, I didn’t check
    “Save credit card”
    so what is this error
    about?
    Huh? What error?
    

    View Slide

86. View Slide

87. 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="">
    

    View Slide

88. 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…
    

    View Slide

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
    

    View Slide

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
    }
    )
    }
    }
    }
    }
    ])
    }
    )()
    }
    

    View Slide

91. View Slide

92. 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="">
    

    View Slide

93. 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"
    

    View Slide

94. 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"
    

    View Slide

95. 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"
    

    View Slide

96. pattern="[0-9]"
    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"
    

    View Slide

97. View Slide

98. View Slide

99. View Slide

100. What if Chipotle could gain half a percentage point
     INCrease in transactions from fixing autofill support?
     

     View Slide

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?
     

     View Slide

102. Use HTML5
     Input Features
     

     View Slide

103. Test Autofill
     

     View Slide

104. https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/
     

     View Slide

105. How to make YOUR forms Disappear
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

112. Any sufficiently advanced technology is
     indistinguishable from magic.
     —Arthur C. Clarke
     

     View Slide

113. View Slide

114. View Slide

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
     

     View Slide