Slide 1

Slide 1 text

Web Forms NOW YOU SEE THEM. NOW YOU DON’T.

Slide 2

Slide 2 text

[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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

4 fields?

Slide 5

Slide 5 text

NO FIELDS

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

☹ I AM NOT A MAGICIAN

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Volunteer

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

the Secret?

Slide 14

Slide 14 text

+ WebAuthn SLIDE Embargoed until after presentation has concluded

Slide 15

Slide 15 text

SLIDE Embargoed until after presentation has concluded

Slide 16

Slide 16 text

SLIDE Embargoed until after presentation has concluded

Slide 17

Slide 17 text

Passwords

Slide 18

Slide 18 text

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/

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Two-factor Authentication (2FA)

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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?

Slide 26

Slide 26 text

WebAuthn (Plus more devices with biometric sensors)

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

No Passwords?

Slide 39

Slide 39 text

Something you know Something you have Something you are

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

More Options for making signup and login forms disappear

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Volunteer

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

the Secret?

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

SLIDE Embargoed until after presentation has concluded

Slide 61

Slide 61 text

SLIDE Embargoed until after presentation has concluded

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

SLIDE Embargoed until after presentation has concluded

Slide 65

Slide 65 text

SLIDE Embargoed until after presentation has concluded

Slide 66

Slide 66 text

PAYMENT REQUEST API

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Site calls PaymentRequest Browser displays payment UI

Slide 70

Slide 70 text

Site calls PaymentRequest Browser displays payment UI Payment processing app

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

The Fine Print

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

More Options for speeding up web forms

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

Slide 88

Slide 88 text

So it’s Angular…

Slide 89

Slide 89 text

, 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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

Slide 93

Slide 93 text

text"

Slide 94

Slide 94 text

number"

Slide 95

Slide 95 text

maxlength="2"

Slide 96

Slide 96 text

pattern="[0-9]" maxlength="2"

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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?

Slide 102

Slide 102 text

Use HTML5 Input Features

Slide 103

Slide 103 text

Test Autofill

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

How to make YOUR forms Disappear

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

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