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.