1
00:00:00,000 --> 00:00:05,093
[MUSIC]

2
00:00:05,093 --> 00:00:10,059
Forms are notoriously difficult to use for
even the most capable users.

3
00:00:10,059 --> 00:00:15,093
Online shopping carts, for
example, have an abandonment

4
00:00:15,093 --> 00:00:20,037
rate of almost 70%,
according to Baymard Institute.

5
00:00:20,037 --> 00:00:26,169
While many users are merely browsing and
not ready to buy, Baymard found that

6
00:00:26,169 --> 00:00:32,504
over 40% of abandonments are due to
problems with checkout form usability.

7
00:00:32,504 --> 00:00:35,135
In the final stage of this course,

8
00:00:35,135 --> 00:00:40,046
we'll be using Figma to build
a mock-up of an accessible form.

9
00:00:40,046 --> 00:00:44,184
We'll cover form design
accessibility principles and

10
00:00:44,184 --> 00:00:46,920
take a look at resources to guide us.

11
00:00:46,920 --> 00:00:48,999
And by the end of this stage,

12
00:00:48,999 --> 00:00:54,115
you'll be better prepared to
communicate accessibility concerns to

13
00:00:54,115 --> 00:00:59,329
your development team as you reach
the designer-developer handoff.

14
00:00:59,329 --> 00:01:06,206
Before we open Figma, let's examine
the components of an accessible form.

15
00:01:06,206 --> 00:01:10,827
One critical principle when
you're in the planning stage

16
00:01:10,827 --> 00:01:14,324
is to avoid asking unnecessary questions.

17
00:01:14,324 --> 00:01:19,322
Many users object to providing
a phone number unless it's extremely

18
00:01:19,322 --> 00:01:22,689
obvious why the form
recipient might need it.

19
00:01:22,689 --> 00:01:27,211
But requiring a phone number
can be a particular burden for

20
00:01:27,211 --> 00:01:32,101
deaf or nonverbal users who,
depending on the availability of

21
00:01:32,101 --> 00:01:37,195
Video Relay Services,
might be unable to make or receive calls.

22
00:01:37,195 --> 00:01:43,290
If you're a food delivery service and
rely on phone calls to clarify orders,

23
00:01:43,290 --> 00:01:46,682
that's a legitimate reason to be asking.

24
00:01:46,682 --> 00:01:49,798
But provide an alternative
method of contact for

25
00:01:49,798 --> 00:01:52,084
users who can't answer your call.

26
00:01:52,084 --> 00:01:57,166
Questions about gender could
also frustrate your audience.

27
00:01:57,166 --> 00:02:02,684
If your website or app has an extremely
compelling reason to ask about gender,

28
00:02:02,684 --> 00:02:06,196
such as trying to gather
accurate demographics,

29
00:02:06,196 --> 00:02:11,808
check out the teacher's notes for
tips on designing inclusive form language.

30
00:02:11,808 --> 00:02:16,911
You'll need to either give the user
plenty of response options or

31
00:02:16,911 --> 00:02:21,850
provide a text input rather than
a list of predefined options.

32
00:02:21,850 --> 00:02:26,421
Assure your users their information
will be private, anonymous, and safe.

33
00:02:29,776 --> 00:02:34,223
But again, if the question isn't
absolutely essential, don't ask it.

34
00:02:34,223 --> 00:02:39,046
Avoiding unnecessary questions
will also reduce the number of

35
00:02:39,046 --> 00:02:41,052
overall form questions.

36
00:02:41,052 --> 00:02:46,153
Which brings us to the next
principle of accessible form design,

37
00:02:46,153 --> 00:02:51,173
minimizing the number of questions
that appear on each screen.

38
00:02:51,173 --> 00:02:55,684
Limiting the number of tasks
presented to the user on

39
00:02:55,684 --> 00:02:58,872
each screen has multiple benefits.

40
00:02:58,872 --> 00:03:02,971
In addition to faster loading time,
a big plus on mobile,

41
00:03:02,971 --> 00:03:07,840
it helps screen readers jump straight
to the relevant information.

42
00:03:07,840 --> 00:03:12,101
Correcting errors will also
be easier since the number

43
00:03:12,101 --> 00:03:16,001
of fields facing the user
at once will be limited.

44
00:03:16,001 --> 00:03:22,237
And simplifying the presentation of
information can reduce cognitive load:

45
00:03:22,237 --> 00:03:27,621
in other words, the amount of
information the user has to process or

46
00:03:27,621 --> 00:03:29,143
remember at once.

47
00:03:29,143 --> 00:03:33,948
This one-task-per-page approach
benefits all users, but

48
00:03:33,948 --> 00:03:38,855
especially those with cognitive
disabilities or dementia.

49
00:03:38,855 --> 00:03:45,964
To further assist such users, make
sure your form provides context clues.

50
00:03:45,964 --> 00:03:51,741
Chunking, a term used to describe
breaking a form into steps,

51
00:03:51,741 --> 00:03:56,658
only works if all the following
are perfectly clear:

52
00:03:56,658 --> 00:04:01,750
the purpose of the form,
what step the user is on,

53
00:04:01,750 --> 00:04:08,929
how many tasks have been completed,
and how many steps still remain.

54
00:04:08,929 --> 00:04:11,515
While users with cognitive and

55
00:04:11,515 --> 00:04:16,098
memory impairments benefit
most from context clues,

56
00:04:16,098 --> 00:04:20,666
distracted users, who may have
received a phone call in the middle of

57
00:04:20,666 --> 00:04:25,893
attempting to complete a mobile form,
will appreciate the reminder as well.

58
00:04:29,018 --> 00:04:33,752
Grouping related questions visually
further reduces cognitive load.

59
00:04:33,752 --> 00:04:37,913
If some questions deal
with personal information,

60
00:04:37,913 --> 00:04:43,500
some with account information, and
some with contact information,

61
00:04:43,500 --> 00:04:47,722
and if it's necessary to keep
each group on the same screen

62
00:04:47,722 --> 00:04:51,515
rather than splitting
the form into smaller steps,

63
00:04:51,515 --> 00:04:55,672
make an obvious visual
distinction between each group.

64
00:04:55,672 --> 00:05:01,107
Using clear form labels and
not just placeholder text

65
00:05:01,107 --> 00:05:07,521
is another important step in
guiding users through your form.

66
00:05:07,521 --> 00:05:12,470
Placeholder text is sometimes
used to clue the user as to what

67
00:05:12,470 --> 00:05:16,461
content is expected and
how it can be formatted.

68
00:05:16,461 --> 00:05:21,109
But placeholder text disappears
once the user begins typing, and

69
00:05:21,109 --> 00:05:25,846
the user can easily lose track of
which field they were filling out.

70
00:05:25,846 --> 00:05:30,179
Labels should be placed close
to the field they belong to.

71
00:05:30,179 --> 00:05:35,823
And on mobile screens, labels should
go above the input, not beside it.

72
00:05:35,823 --> 00:05:41,213
Speaking of form inputs,
one of the guidelines we covered

73
00:05:41,213 --> 00:05:48,034
under the Operable WCAG principle
was making focus indicators obvious.

74
00:05:48,034 --> 00:05:54,042
Each browser comes with its own
default focus indicator style,

75
00:05:54,042 --> 00:05:57,053
but the cues are pretty subtle.

76
00:05:57,053 --> 00:06:01,877
Making the focus indicators stand
out will be a big help to users

77
00:06:01,877 --> 00:06:05,257
who can't operate a mouse or touchscreen.

78
00:06:08,470 --> 00:06:14,697
Finally, you'll hopefully recall a WCAG
guideline called Input Assistance.

79
00:06:14,697 --> 00:06:19,067
Don't forget to make form errors
easy to spot and correct and

80
00:06:19,067 --> 00:06:22,159
your error messaging easy to understand.

81
00:06:25,503 --> 00:06:30,510
If designing an accessible form seems
daunting, it definitely can be, but

82
00:06:30,510 --> 00:06:35,454
I've included a number of resources
in the teachers' notes to guide you.

83
00:06:35,454 --> 00:06:41,196
And I recommend referring to them whenever
you're faced with designing a form.

84
00:06:41,196 --> 00:06:42,287
In our next video,

85
00:06:42,287 --> 00:06:46,390
we'll apply these principles to
design an accessible form of our own.