This course will be retired on March 8, 2022. We recommend "UX Design Patterns" for up-to-date content.
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
Part of living is moment to moment survival. We want the best for ourselves, and we don't want to miss opportunities. Lots of people call this FOMO, or fear of missing out.
Resources
- UI Patterns - UI Patterns is one of the most comprehensive resources for both UI patterns and behavioral patterns.
Downloads
- Balsamiq Mockups - Balsamiq Mockups is the drawing tool used in these lessons. If you'd like to follow along using the same tool, download and install it. However, any other drawing tool (including pencil and paper) will work fine.
- Project Files - This is the Balsamiq Mockup file that was created during these lessons (as it appears at the end of the course). It's not necessary to download it, it's just here for your review.
Part of living is moment
to moment survival.
0:00
We want the best for ourselves, and
we don't wanna miss opportunities.
0:03
Lots of people call this FOMO or
Fear Of Missing Out.
0:07
This is a real psychological
function that for better or
0:12
worst, you can leverage to drive
behavior you want from users.
0:15
For these persuasive patterns, we'll
use the example of a shopping website.
0:20
Let's say that we want
people to buy something, and
0:26
because time is money, we want them
to do it sooner, rather than later.
0:29
Let's create a quick mock-up that
depicts three different items for sale.
0:34
We'll have Dress #1,
0:40
we'll make this a little bigger,
just like that.
0:43
And then we'll have Dress #2,
0:49
and then finally Dress #3.
0:54
So already, this is a persuasive
pattern called limited choice.
1:02
When there are only a few options,
rather than a big long list, we're more
1:08
likely to make a decision because we
can more easily compare the choices.
1:13
We don't want people to leave our
website and potentially forget about it.
1:20
We want them to buy something right now!
1:24
Physical stores and online stores
use a persuasive pattern called
1:27
scarcity to create a pressure to buy.
1:31
They imply there is a limited
amount of time to get a sale price.
1:35
They're running low on inventory.
1:39
And if you leave and
1:41
come back later, they might be sold
out of a limited piece of merchandise.
1:42
We'll represent this idea with some text.
1:47
So let's add some text that says Closeout
1:51
sale ALL DRESSES MUST GO.
1:56
And obviously we need to make this bold,
italic, and underlined and
2:02
make it in a really big font.
2:07
There we go, and
then let's add shape here.
2:11
I think that's good.
2:23
Let's see if there's a star shape.
2:24
That might be better here.
2:26
Yeah, there we go.
2:28
So we'll add this big
star shape over here.
2:31
We'll add some more text and
let's say, 50% off.
2:36
And again, we need to make this
stand out a little more there.
2:45
And then finally,
let's add some text that's still yet
2:52
again incongruent with this design.
2:56
We'll say, Sale ends tomorrow!
2:59
There's limited time.
3:03
And we'll make this sideways.
3:06
So if it feels like these things
are all screaming at you for attention,
3:15
it's because they are.
3:20
Retailers are trying to
increase the pressure
3:21
to push you into making a decision
that you might not otherwise make.
3:24
Now let's say that in reality we're
having this sale because we have
3:28
too much inventory and
we need to turnover our warehouses.
3:33
And we have three times as many of
Dress #2, than we have of the others.
3:37
So we really need to
promote that one the most.
3:44
We can do that by using a persuasive
pattern called status quo bias, where
3:47
we imply that it's the default option, and
make it more attractive than the others.
3:53
Any number of visual design cues
can be used to make this apparent,
3:59
such as increasing the scale,
changing its shape, or
4:03
putting it in a prominent place,
like right in the middle.
4:07
So let's do all those things.
4:11
It's all ready in the middle, but
we'll make it a little larger here.
4:13
And I really like that star
as kind of a different
4:18
type of shape, so
let's make that really big.
4:23
And we'll put it right behind it, and
4:28
then maybe we can add
some text just to point
4:32
out that this is the most popular dress.
4:37
All right.
4:45
And then,
we will move these off to the side, and
4:50
maybe even make them a little smaller.
4:54
There we go.
5:02
So now this one in the middle
will stand out the most.
5:09
There are more elegant ways of
approaching these persuasive patterns,
5:15
but this example is intentionally
exaggerated to demonstrate these concepts.
5:20
That's just a small sample of
persuasive patterns that can be used to
5:26
drive behavior in your websites and apps.
5:30
But I hope this overview sparked
your creative thinking and
5:33
problem solving abilities.
5:37
As I mentioned previously, I strongly
encourage you to explore the resources and
5:39
the notes associated with these
videos to see more patterns and
5:43
examples of how they can be used.
5:47
That way, the next time you recognize
a problem with a user experience,
5:49
you'll know to look for
a design pattern first.
5:54
You need to sign up for Treehouse in order to download course files.
Sign up