1
00:00:00,900 --> 00:00:04,388
I've taught in a lot of college
classrooms over the years,

2
00:00:04,388 --> 00:00:09,250
which means I've run a lot of class
critiques of student wireframes.

3
00:00:09,250 --> 00:00:10,848
And do you know what comment 
I've heard fellow classmates 

4
00:00:10,848 --> 00:00:13,670
give each other
the most often?

5
00:00:16,722 --> 00:00:18,490
That's too much text.

6
00:00:18,490 --> 00:00:19,390
I'd never read that.

7
00:00:20,610 --> 00:00:22,640
And it's valuable feedback.

8
00:00:22,640 --> 00:00:27,308
And it's not because users don't like to
read. It's because it's a lot of work

9
00:00:27,308 --> 00:00:32,600
scanning an unformatted wall of words,
trying to decide whether to read it.

10
00:00:32,600 --> 00:00:33,890
Let's check out an example.

11
00:00:35,200 --> 00:00:39,490
For the final video of this course,
we're doing something a little different.

12
00:00:39,490 --> 00:00:42,536
Rather than checking 
out online examples,

13
00:00:42,536 --> 00:00:46,412
I've provided a wireframe of
web body copy in Adobe XD.

14
00:00:46,412 --> 00:00:50,310
And, quite frankly,
I've done a bad job of it.

15
00:00:50,310 --> 00:00:53,660
Enough that you're probably 
thinking, that's too much text.

16
00:00:53,660 --> 00:00:54,510
I'd never read that.

17
00:00:56,000 --> 00:00:59,567
Before we get into applying
the layer cake pattern to make this

18
00:00:59,567 --> 00:01:04,500
text more approachable, let's start
with a few typographic adjustments.

19
00:01:04,500 --> 00:01:09,033
My body copy is only 12 pixels, 
but 16 pixels should be

20
00:01:09,033 --> 00:01:12,960
a bare minimum for
comfortable reading on the web.

21
00:01:12,960 --> 00:01:16,620
I'm going to bump my font
size up to 18 pixels.

22
00:01:16,620 --> 00:01:21,469
While increasing my letting to
1.5 times the size of the text,

23
00:01:21,469 --> 00:01:23,860
which works out to 27 pixels.

24
00:01:25,250 --> 00:01:30,365
That's better, but until I increase the 
amount of space between paragraphs,

25
00:01:30,365 --> 00:01:34,060
the text still reads as
one giant wall of words.

26
00:01:34,060 --> 00:01:37,380
The space between paragraphs 
should be at least twice the height 

27
00:01:37,380 --> 00:01:42,670
of the text, or 36 pixels.
I'll create more space

28
00:01:42,670 --> 00:01:45,973
by adding an extra return at 
the start of each paragraph.

29
00:01:58,323 --> 00:01:59,855
So what do you think?

30
00:01:59,855 --> 00:02:02,376
Compare our layout to Slack's 
mobile website that we reviewed 

31
00:02:02,376 --> 00:02:07,690
in our previous video, and
it looks like we have work left to do.

32
00:02:07,690 --> 00:02:10,590
What can we do to make our
text similarly approachable?

33
00:02:12,170 --> 00:02:15,930
For starters, our paragraphs 
are far too long.

34
00:02:15,930 --> 00:02:20,200
A good rule to follow is
one idea per paragraph.

35
00:02:20,200 --> 00:02:24,452
Identifying places to include
paragraph breaks may take some time,

36
00:02:24,452 --> 00:02:27,470
but the resulting text will
be much easier to scan.

37
00:03:08,661 --> 00:03:10,795
That does look better, but

38
00:03:10,795 --> 00:03:13,389
our text would still
benefit from subheadings.

39
00:03:13,389 --> 00:03:16,502
Grouping blocks of 
text by subject and

40
00:03:16,502 --> 00:03:18,759
providing clear subheadings 
lets your user

41
00:03:18,759 --> 00:03:21,270
spend less effort 
deciding what to read.

42
00:04:35,635 --> 00:04:38,925
Make sure you don't
create floating headings.

43
00:04:38,925 --> 00:04:42,746
Headings should be placed closer 
to the paragraphs they describe

44
00:04:42,746 --> 00:04:45,020
and not equally spaced 
between paragraphs.

45
00:05:02,768 --> 00:05:04,230
Highlighting key takeaways can

46
00:05:04,230 --> 00:05:07,670
add visual interest 
to your body copy.

47
00:05:07,670 --> 00:05:10,590
I'll highlight just two
partial sentences here.

48
00:05:10,590 --> 00:05:14,570
”It's a lot of work.“

49
00:05:25,214 --> 00:05:31,870
And “one idea per paragraph”.

50
00:05:35,848 --> 00:05:39,920
The more you use this technique,
the less effective it is.

51
00:05:39,920 --> 00:05:42,008
So make sure you're only 
highlighting ideas you're 

52
00:05:42,008 --> 00:05:44,860
really hoping your readers
will remember.

53
00:05:46,460 --> 00:05:49,385
Lists are more visually scannable 
than comma-separated 

54
00:05:49,385 --> 00:05:53,490
information buried in
long sentences.

55
00:05:53,490 --> 00:05:57,015
If you're asking users to
remember what we did here,

56
00:05:57,015 --> 00:06:02,201
including shortening paragraphs,
providing headings,

57
00:06:02,201 --> 00:06:06,800
highlighting key takeaways and
creating bulleted lists.

58
00:06:06,800 --> 00:06:11,430
Present that information in 
a bulleted or numbered list.

59
00:06:12,550 --> 00:06:16,363
Bulleted lists aren't super
easy to create in Adobe XD, but

60
00:06:16,363 --> 00:06:20,340
if you're on a Mac, you can 
press Option-8 to create a bullet.

61
00:06:21,420 --> 00:06:24,605
The bullet point key command is
trickier on a PC, but you can always 

62
00:06:24,605 --> 00:06:27,940
copy and paste a bullet from 
elsewhere on the web.

63
00:06:29,330 --> 00:06:32,920
Also, it doesn't hurt to
omit unnecessary words.

64
00:06:32,920 --> 00:06:38,145
The opening sentence of this last
paragraph could be shortened to

65
00:06:38,145 --> 00:06:45,527
“lists are more scannable than long
sentences” without losing meaning.

66
00:06:46,584 --> 00:06:51,010
All right, that looks 
much more approachable.

67
00:06:51,010 --> 00:06:54,666
Imagine that your user is already
comfortable with working with 

68
00:06:54,666 --> 00:06:56,554
adjusting type size 
and spacing and

69
00:06:56,554 --> 00:07:00,840
just wants to skip to the rest
of the techniques covered here.

70
00:07:00,840 --> 00:07:05,076
In the version on the left, finding what
you're looking for takes a ton of effort.

71
00:07:05,076 --> 00:07:08,640
But in the version on the right,
skipping a section should be a snap.

72
00:07:09,780 --> 00:07:13,832
If you'd like to improve this design even
further, you could break up the text with

73
00:07:13,832 --> 00:07:17,793
images or illustrations.
Just make sure they're relevant.

74
00:07:17,793 --> 00:07:20,286
An additional change might be 
starting the article with a 

75
00:07:20,286 --> 00:07:24,030
summary of the most
important highlights.

76
00:07:24,030 --> 00:07:27,777
This technique of starting with
the conclusion is often tagged

77
00:07:27,777 --> 00:07:33,580
with the acronym TLDR; or Too 
Long Didn't Read, although an

78
00:07:33,580 --> 00:07:37,113
older reading I've included in the 
Teacher's Notes from the 

79
00:07:37,113 --> 00:07:40,310
Nielsen Norman Group refers 
to it as an inverted pyramid.

80
00:07:42,560 --> 00:07:43,820
You made it.

81
00:07:43,820 --> 00:07:48,537
Moving forward, be sure to keep those
design pattern resources handy as

82
00:07:48,537 --> 00:07:53,254
design patterns evolve over time to
adjust to emerging technologies and

83
00:07:53,254 --> 00:07:56,250
meet the changing needs of users.

84
00:07:56,250 --> 00:07:57,173
And remember,

85
00:07:57,173 --> 00:08:02,670
the idea behind design patterns isn't
to limit your creativity as a designer.

86
00:08:02,670 --> 00:08:06,865
It's to ensure your creative
decisions lead to greater rewards for

87
00:08:06,865 --> 00:08:12,570
the user by reducing cognitive load as
they encounter your freshest design.

88
00:08:12,570 --> 00:08:14,540
Keep on creating and
I'll see you next time.