WEBVTT 1 00:00:01.200 --> 00:00:16.291 Beyond reading content, most of the actions people take on the web require a form: signing up for a service, buying a product, booking a trip, applying for a job, reporting a problem. 2 00:00:16.688 --> 00:00:21.794 The form is where they accomplish the task, or fail at it. 3 00:00:21.994 --> 00:00:33.428 In a survey by the Baymard Institute, seventeen percent of American online shoppers had abandoned an order because the checkout was too long or complicated. 4 00:00:33.732 --> 00:00:37.584 The average checkout shows twenty-three form fields. 5 00:00:37.725 --> 00:00:40.370 Most could manage with far fewer. 6 00:00:40.674 --> 00:00:47.313 And even when a form is easy, asking people to do something they don't want to do can be worse. 7 00:00:47.710 --> 00:00:55.905 The same survey found that eighteen percent abandoned the process because the site made them create an account. 8 00:00:56.046 --> 00:01:02.418 Clearly we have to be careful about both what we ask and how we ask it. 9 00:01:02.618 --> 00:01:12.636 So let's take a small form, four questions: your name, your email, a mobile number for text alerts, and a password. 10 00:01:12.661 --> 00:01:18.197 And let's fill it in twice, on a phone, the way most people will. 11 00:01:18.897 --> 00:01:20.137 First attempt. 12 00:01:20.221 --> 00:01:27.788 The page loads, and every box is already red, scolding us before we've typed a thing. 13 00:01:27.988 --> 00:01:31.713 The labels are inside the boxes, as placeholders. 14 00:01:31.796 --> 00:01:38.551 Tap the first one and start typing, and the word that said what it was for disappears. 15 00:01:38.634 --> 00:01:40.002 What was it again? 16 00:01:40.144 --> 00:01:43.729 Was this field the first name, or the full name? 17 00:01:43.870 --> 00:01:47.328 The only way to check is to delete what we typed. 18 00:01:47.539 --> 00:01:58.799 Fun fact: this is a limit of short-term memory, and it's why interface designers favor recognition over making people recall something. 19 00:01:58.999 --> 00:02:05.243 Every field brings up the same full keyboard, even for the email address and the phone number. 20 00:02:05.547 --> 00:02:10.178 So we hunt for the at sign, and switch keyboards for the digits. 21 00:02:10.261 --> 00:02:13.974 Every bit of friction adds to the frustration. 22 00:02:14.174 --> 00:02:18.654 The browser could have filled all of this in from what it already knows. 23 00:02:18.864 --> 00:02:26.781 But the form turned autofill off, so we type it, all of it, including our email address twice. 24 00:02:26.981 --> 00:02:30.520 We submit, but apparently we messed up. 25 00:02:30.650 --> 00:02:34.551 "Invalid input," in red, at the top of the page. 26 00:02:34.551 --> 00:02:35.803 Which input? 27 00:02:35.828 --> 00:02:37.208 Invalid how? 28 00:02:37.291 --> 00:02:42.548 And the password we just typed has been cleared, so we type that again too. 29 00:02:42.840 --> 00:02:49.944 Six fields, seventy-nine characters typed, and one error message that doesn't say what's wrong. 30 00:02:50.155 --> 00:02:55.505 The experience is so poor, don't be surprised if people just give up. 31 00:02:55.809 --> 00:03:00.393 Next, let's see how to remove most of that friction. 32 00:03:01.093 --> 00:03:09.288 An interesting thing about making forms frictionless: when you make them accessible, you often get a better result for everyone. 33 00:03:09.592 --> 00:03:17.275 Let's look at the markup, and the meaning of each field, starting with how each one is named. 34 00:03:17.475 --> 00:03:21.792 Now the same form, heard instead of seen. 35 00:03:22.189 --> 00:03:26.947 A screen reader user moving through it hears "edit text, blank." 36 00:03:27.088 --> 00:03:28.387 Four times. 37 00:03:28.412 --> 00:03:31.103 Which one is the email? 38 00:03:31.303 --> 00:03:33.670 A placeholder is not a label. 39 00:03:33.811 --> 00:03:41.530 It disappears when you type, it's usually faint gray, and assistive technology often can't use it as a name. 40 00:03:41.926 --> 00:03:44.188 A label element can. 41 00:03:44.389 --> 00:03:55.254 Give each field a label, tied to it with for and id, and the field has a name that everyone gets: "Email, required, edit text." 42 00:03:55.535 --> 00:04:00.386 Tapping the label puts you in the field, so the target is bigger, too. 43 00:04:00.585 --> 00:04:12.123 Wrap each label, field, and message in a form-field element, and the structure says what it is, with no pile of generic div boxes. 44 00:04:12.824 --> 00:04:16.920 A form control's type attribute does more than check the value. 45 00:04:17.224 --> 00:04:20.148 On a phone it chooses the keyboard. 46 00:04:20.452 --> 00:04:26.313 Type email brings a keyboard with the at sign and the dot right there. 47 00:04:26.513 --> 00:04:31.283 Type tel brings the phone keypad: big digits, no hunting. 48 00:04:31.587 --> 00:04:35.590 It doesn't check the number, so the server still has to. 49 00:04:35.894 --> 00:04:47.572 And for digits that aren't really a number, like a verification code, input mode numeric brings the same keypad without the quirks of a number field. 50 00:04:47.771 --> 00:04:54.050 One more small thing: the enter key hint attribute labels the Enter key. 51 00:04:54.191 --> 00:04:59.530 "Next" between fields, "Done" or "Send" on the last one. 52 00:04:59.834 --> 00:05:03.861 A tiny promise about what pressing it will do. 53 00:05:04.561 --> 00:05:07.160 The fastest typing is no typing. 54 00:05:07.371 --> 00:05:15.356 The browser and the person's password manager already know their name, their email address, and their phone number. 55 00:05:15.556 --> 00:05:23.739 The autocomplete attribute says what each field is for: name, email, tel, new password. 56 00:05:23.904 --> 00:05:27.071 Now one tap fills the whole form. 57 00:05:27.329 --> 00:05:38.472 The accessibility guidelines ask for exactly this on fields about the user, because typing is slow, error-prone, and for some people, painful. 58 00:05:38.673 --> 00:05:42.665 Turning autocomplete off doesn't make a form more secure. 59 00:05:42.748 --> 00:05:47.506 It makes people type, or reuse a short password they can remember. 60 00:05:47.810 --> 00:05:51.291 Let the password manager suggest a strong one. 61 00:05:51.432 --> 00:05:52.975 Never block paste. 62 00:05:53.116 --> 00:05:56.202 And don't ask for the same thing twice. 63 00:05:56.902 --> 00:06:00.000 Errors still happen, so make them help. 64 00:06:00.211 --> 00:06:02.577 First, not too early. 65 00:06:02.881 --> 00:06:07.605 Nobody has made a mistake on a field they haven't touched yet. 66 00:06:07.804 --> 00:06:14.884 The user invalid CSS pseudo-class waits until the person has had a go at the field before it matches. 67 00:06:15.281 --> 00:06:22.315 So the red appears only after they've left it with something wrong, and never on page load. 68 00:06:22.515 --> 00:06:27.029 Second, say what to do, right next to the field. 69 00:06:27.403 --> 00:06:34.262 Not "invalid input," but "Enter an email address like name at example dot com." 70 00:06:34.636 --> 00:06:40.137 In words, not only in red, because not everyone can see the red. 71 00:06:40.337 --> 00:06:43.598 That message goes in the field's output element. 72 00:06:43.681 --> 00:06:54.430 It's tied to the field, so it's read as the field's description, and it's a polite live region, so a screen reader announces it when it appears. 73 00:06:54.630 --> 00:06:58.123 And third, never take away what was typed. 74 00:06:58.426 --> 00:07:07.794 On submit, move to the first problem, keep every value, and let the person fix just the one thing that's wrong. 75 00:07:08.494 --> 00:07:09.827 Second attempt. 76 00:07:09.852 --> 00:07:13.066 Same four questions, same phone. 77 00:07:13.266 --> 00:07:14.913 Tap the name field. 78 00:07:14.996 --> 00:07:18.593 The browser offers the details it already has for Ana. 79 00:07:18.897 --> 00:07:21.623 One tap, and three fields are filled. 80 00:07:21.648 --> 00:07:25.118 The password manager offers a strong new password. 81 00:07:25.329 --> 00:07:26.441 Accept it. 82 00:07:26.525 --> 00:07:27.962 Send. 83 00:07:28.162 --> 00:07:32.839 Four fields, five taps, and not one character typed. 84 00:07:33.119 --> 00:07:37.425 That's this example, counted, not a study of people. 85 00:07:37.554 --> 00:07:42.579 But the difference isn't subtle, and none of it needed a single line of JavaScript. 86 00:07:42.953 --> 00:07:55.118 Like golf, UX is a game where the lowest score wins: forms that need less typing, less scrolling, and less frustration tend to be the winners. 87 00:07:55.819 --> 00:07:58.801 You can check any form in a few minutes. 88 00:07:58.884 --> 00:08:08.983 Put the mouse away and fill it in with the keyboard alone: every field reachable, in order, with a visible focus. 89 00:08:09.183 --> 00:08:16.194 Turn on a screen reader and listen to each field's name, its state, and its message. 90 00:08:16.335 --> 00:08:20.930 Zoom the page to twice its size and make sure nothing is cut off. 91 00:08:21.141 --> 00:08:25.133 And make the targets big enough to hit with a thumb. 92 00:08:25.333 --> 00:08:32.007 Then open the keyboards demo on your own phone, and feel the difference the right type makes. 93 00:08:32.218 --> 00:08:35.652 An easy form is an accessible form. 94 00:08:35.736 --> 00:08:39.983 It's the same work, and everyone gets the benefit.