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