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. 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 • [email protected] • cloudfour.com

    View Slide