1
00:00:00,690 --> 00:00:05,830
You might recall a Nielsen Norman Group
article I mentioned previously

2
00:00:05,830 --> 00:00:09,150
that gave us three principles for
error reporting.

3
00:00:11,890 --> 00:00:15,983
Error messages must be easy to notice and

4
00:00:15,983 --> 00:00:20,077
understand, highlighted visually, and

5
00:00:20,077 --> 00:00:25,888
accompanied by clear instructions for
fixing the problem.

6
00:00:28,944 --> 00:00:33,376
With those principles in mind,
I'm going to duplicate

7
00:00:33,376 --> 00:00:38,007
the frame I created and
call my new frame error reporting.

8
00:00:41,554 --> 00:00:45,584
I'll mock up two types of common errors,

9
00:00:45,584 --> 00:00:52,042
a user making an invalid entry and
leaving a required field blank.

10
00:00:54,453 --> 00:00:59,459
Using the text tool,
I'll create sample information for

11
00:00:59,459 --> 00:01:02,123
a user named Maria Hernandez.

12
00:01:05,903 --> 00:01:07,512
Here's her email address.

13
00:01:09,989 --> 00:01:14,769
And I've omitted the @ symbol,
making the address invalid.

14
00:01:17,751 --> 00:01:23,575
I'll also create a street address, but

15
00:01:23,575 --> 00:01:28,460
no zip code,
which means a required field is empty.

16
00:01:30,100 --> 00:01:33,712
I'll start by making the error fields red,

17
00:01:33,712 --> 00:01:38,406
since many users associate red
with stop and green with go.

18
00:01:59,399 --> 00:02:05,298
However, I know that's not enough. I
haven't told users how to fix the errors,

19
00:02:05,298 --> 00:02:09,233
and I haven't provided
additional visual cues to help

20
00:02:09,233 --> 00:02:13,530
colorblind users who might not
notice the red highlights.

21
00:02:15,280 --> 00:02:20,620
Font Awesome offers an icon
called exclamation triangle

22
00:02:20,620 --> 00:02:22,880
that looks like an error warning.

23
00:02:22,880 --> 00:02:27,355
So I'll add that to the labels
above my problem inputs.

24
00:02:34,938 --> 00:02:39,217
I'll use the space below
the inputs to explain each error.

25
00:02:46,031 --> 00:02:51,190
With the email address,
I'm trying to be as specific as possible.

26
00:02:51,190 --> 00:02:54,262
Something like "invalid email address"

27
00:02:54,262 --> 00:02:58,776
would offer no clues as to
why the address was rejected.

28
00:02:58,776 --> 00:03:03,560
So I'll try "Email address must

29
00:03:03,560 --> 00:03:07,983
contain a single @ symbol".

30
00:03:09,919 --> 00:03:13,257
And "Please enter a Zip Code"

31
00:03:18,207 --> 00:03:21,930
should explain the error on
the empty required field.

32
00:03:24,000 --> 00:03:29,700
I've included resources in the teacher's
notes on form error messaging.

33
00:03:29,700 --> 00:03:32,030
It's not an easy thing to get right, and

34
00:03:32,030 --> 00:03:35,590
you'll definitely want to user
test your proposed solutions.

35
00:03:37,240 --> 00:03:42,510
If you have time, go ahead and complete
the designs for the Billing Information

36
00:03:42,510 --> 00:03:47,120
and Review Order screens.
I'd love to see what you come up with.

37
00:03:47,120 --> 00:03:52,450
And as you build your portfolio, and
position yourself to enter the industry,

38
00:03:52,450 --> 00:03:56,470
be sure to refer back often to
the resources we've covered here.

39
00:03:57,650 --> 00:04:02,320
Designing with accessibility
in mind isn't always easy, but

40
00:04:02,320 --> 00:04:07,300
designers who put in the extra effort
to make sure their product is available

41
00:04:07,300 --> 00:04:10,910
to users with disabilities
will always be in demand.