Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The visual design of an interface can only communicate so much. At some point, designers and users must rely on text, and how that text is written can greatly influence the quality of a user experience.
Fixing spelling and grammar is helpful but
we can improve this design further by
0:00
rewriting some of the copy and
by writing some new material.
0:04
In the top left,
there is a link that says Review and
0:10
I'll zoom in on it so
you can see it a little bit better here.
0:15
Now, because this is singular, Review,
it sounds like it's supposed to be
0:19
a verb as in the user should click
this if they wish to write a review.
0:25
So why don't we just say that instead?
0:30
Type write a review,
which is much more clear.
0:36
And notice how the first
letter is capitalized and
0:43
the word Review, which is now a noun,
is also capitalized so
0:47
that we're staying consistent
with title casing.
0:52
So I'll zoom back out here and
down at the bottom these two titles,
0:58
New and
The Blog are a bit bothersome to me.
1:03
First is this one that just says New.
1:08
It's already a little difficult to
tell that it's actually labeling
1:11
these two restaurants cards,
we'll fix that later, but
1:16
it's also hard to decipher the meaning
of the word New by itself.
1:20
There should be a little more descriptive
1:24
context here, so let's make it say
1:30
something like, New in Your City.
1:35
There we go.
1:40
So let's zoom back out here.
1:43
Then there is other header that
says The Blog which isn't terrible,
1:46
but it doesn't really describe
what we're looking at.
1:51
This box isn't the blog itself,
that's probably on another page.
1:54
Rather this text is just
a snippet from the blog, so
2:00
let's be more descriptive and
say exactly what we mean.
2:05
So we can double-click that and
we'll say From the Blog.
2:09
So what's go up here and
2:16
next, this search bar is asking us to find
2:21
something and they want us to
find it near something else.
2:26
It's not clear what the user
should type in here so
2:31
we should help them
with some example text.
2:34
So let's select this word Find here, and
2:37
I'm going to copy it and
then paste it in place.
2:43
And then I'll just move it over
a bit using the arrow keys and
2:49
let's change this to some example desserts
that the user should be typing in.
2:56
So I'll say kick, comma, doughnuts,
3:02
comma, popsicles, and
then three dots there.
3:08
We'll work on fonts and colors later so
3:15
that it's clear that this is
different from the word Find.
3:18
But for now we'll leave it like that.
3:22
Now, what does Near mean, near what?
3:25
Well, in this case, we probably want the
user to type in something like a city or
3:28
a zip code so let's tell them that.
3:34
Select this word Near, copy it,
paste it in place and move it over.
3:37
Let's make sure the spacing
is the same there.
3:44
So this is, let's see,
looked like it was ten.
3:47
There we go, ten units, And ten units.
3:51
So we wanna keep the spacing consistent
between the label and this example text.
3:59
And now let's change this to say City or
ZIP.
4:03
When you're done, save your work.
4:11
This is an improvement but
there's still more to do.
4:15
In the next few videos,
we'll work on arranging page elements so
4:18
that the layout has
a clear visual hierarchy.
4:21
You need to sign up for Treehouse in order to download course files.
Sign up