Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed UX Design Patterns!
You have completed UX Design Patterns!
Preview
For the final video of this course, we’re doing something a little different. Rather than checking out online examples, I’ve provided a wireframe of web body copy in Adobe XD. And, quite frankly, I’ve done a bad job of it. Enough that you’re probably thinking, That’s too much text. I’d never read that.
To apply the Cake Layer Pattern
- shorten paragraphs
- provide headings and subheadings
- highlight key takeaways
- create bulleted lists
Further Reading
- Inverted Pyramid: Writing for Comprehension](https://www.nngroup.com/articles/inverted-pyramid/)
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
I've taught in a lot of college
classrooms over the years,
0:00
which means I've run a lot of class
critiques of student wireframes.
0:04
And do you know what comment
I've heard fellow classmates
0:09
give each other
the most often?
0:10
That's too much text.
0:16
I'd never read that.
0:18
And it's valuable feedback.
0:20
And it's not because users don't like to
read. It's because it's a lot of work
0:22
scanning an unformatted wall of words,
trying to decide whether to read it.
0:27
Let's check out an example.
0:32
For the final video of this course,
we're doing something a little different.
0:35
Rather than checking
out online examples,
0:39
I've provided a wireframe of
web body copy in Adobe XD.
0:42
And, quite frankly,
I've done a bad job of it.
0:46
Enough that you're probably
thinking, that's too much text.
0:50
I'd never read that.
0:53
Before we get into applying
the layer cake pattern to make this
0:56
text more approachable, let's start
with a few typographic adjustments.
0:59
My body copy is only 12 pixels,
but 16 pixels should be
1:04
a bare minimum for
comfortable reading on the web.
1:09
I'm going to bump my font
size up to 18 pixels.
1:12
While increasing my letting to
1.5 times the size of the text,
1:16
which works out to 27 pixels.
1:21
That's better, but until I increase the
amount of space between paragraphs,
1:25
the text still reads as
one giant wall of words.
1:30
The space between paragraphs
should be at least twice the height
1:34
of the text, or 36 pixels.
I'll create more space
1:37
by adding an extra return at
the start of each paragraph.
1:42
So what do you think?
1:58
Compare our layout to Slack's
mobile website that we reviewed
1:59
in our previous video, and
it looks like we have work left to do.
2:02
What can we do to make our
text similarly approachable?
2:07
For starters, our paragraphs
are far too long.
2:12
A good rule to follow is
one idea per paragraph.
2:15
Identifying places to include
paragraph breaks may take some time,
2:20
but the resulting text will
be much easier to scan.
2:24
That does look better, but
3:08
our text would still
benefit from subheadings.
3:10
Grouping blocks of
text by subject and
3:13
providing clear subheadings
lets your user
3:16
spend less effort
deciding what to read.
3:18
Make sure you don't
create floating headings.
4:35
Headings should be placed closer
to the paragraphs they describe
4:38
and not equally spaced
between paragraphs.
4:42
Highlighting key takeaways can
5:02
add visual interest
to your body copy.
5:04
I'll highlight just two
partial sentences here.
5:07
”It's a lot of work.“
5:10
And “one idea per paragraph”.
5:25
The more you use this technique,
the less effective it is.
5:35
So make sure you're only
highlighting ideas you're
5:39
really hoping your readers
will remember.
5:42
Lists are more visually scannable
than comma-separated
5:46
information buried in
long sentences.
5:49
If you're asking users to
remember what we did here,
5:53
including shortening paragraphs,
providing headings,
5:57
highlighting key takeaways and
creating bulleted lists.
6:02
Present that information in
a bulleted or numbered list.
6:06
Bulleted lists aren't super
easy to create in Adobe XD, but
6:12
if you're on a Mac, you can
press Option-8 to create a bullet.
6:16
The bullet point key command is
trickier on a PC, but you can always
6:21
copy and paste a bullet from
elsewhere on the web.
6:24
Also, it doesn't hurt to
omit unnecessary words.
6:29
The opening sentence of this last
paragraph could be shortened to
6:32
“lists are more scannable than long
sentences” without losing meaning.
6:38
All right, that looks
much more approachable.
6:46
Imagine that your user is already
comfortable with working with
6:51
adjusting type size
and spacing and
6:54
just wants to skip to the rest
of the techniques covered here.
6:56
In the version on the left, finding what
you're looking for takes a ton of effort.
7:00
But in the version on the right,
skipping a section should be a snap.
7:05
If you'd like to improve this design even
further, you could break up the text with
7:09
images or illustrations.
Just make sure they're relevant.
7:13
An additional change might be
starting the article with a
7:17
summary of the most
important highlights.
7:20
This technique of starting with
the conclusion is often tagged
7:24
with the acronym TLDR; or Too
Long Didn't Read, although an
7:27
older reading I've included in the
Teacher's Notes from the
7:33
Nielsen Norman Group refers
to it as an inverted pyramid.
7:37
You made it.
7:42
Moving forward, be sure to keep those
design pattern resources handy as
7:43
design patterns evolve over time to
adjust to emerging technologies and
7:48
meet the changing needs of users.
7:53
And remember,
7:56
the idea behind design patterns isn't
to limit your creativity as a designer.
7:57
It's to ensure your creative
decisions lead to greater rewards for
8:02
the user by reducing cognitive load as
they encounter your freshest design.
8:06
Keep on creating and
I'll see you next time.
8:12
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up