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
One way to look at gamification is through the lens of persuasive patterns. We can motivate users toward the completion of a challenge or a goal by praising them and then providing them with a new challenge.
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.
Gamification has been a hot topic for
years in the software industry.
0:00
The basic idea is to make tasks more fun
by turning them into some type of game,
0:05
but what does that really mean?
0:10
One way to look at gamification is
through the lens of persuasive patterns.
0:12
Like other categories of patterns,
there are many.
0:17
So we're just going to look at a few, but
I encourage you to check out the notes for
0:21
more resources.
0:25
Let's get started.
0:27
It's difficult to define exactly
what constitutes a game or gameplay.
0:28
You might say it's a set of problems to
solve or a cycle of challenge and reward.
0:33
In any case, we can motivate users
toward the completion of a challenge or
0:40
a goal by praising them and
then providing them with a new challenge.
0:45
In this case, we'll use the example of
an online school similar to Treehouse.
0:50
Let's say you've just finished
a video like this one or a quiz.
0:56
What happens next?
1:00
Well, one way to motivate users
to keep going is to show them
1:02
the progress they've made and
give them some encouraging words.
1:06
So let's add some words, and
1:11
we'll say, you've been learning for
1:16
3 days in a row, keep it up.
1:22
And we'll make that bold and
exciting and make the font bigger.
1:26
There we go.
1:34
And maybe add a check mark next to it
to let them know this is a good thing.
1:35
And then we'll add a big graph here.
1:43
And then we'll add an arrow
to complete the graph.
1:50
We'll remove the left arrow.
1:54
And then let's start it at the bottom,
1:59
have it end up at the top, and
we'll add a little curve to this.
2:02
Here we're showing the user a graph
of their progress to remind them of
2:07
their hard work.
2:12
In addition, we're telling them a small
narrative about their progress that might
2:13
help motivate them to continue their
learning and continue to be consistent.
2:17
However, sometimes a user might feel like
their skill level has outpaced the task
2:23
at hand.
2:27
Or they might have repeated
the same step so many times,
2:28
they need to break the routine.
2:32
In these cases,
2:34
you can use the persuasive pattern
of challenge to re-engage the user.
2:35
Below the graph, let's add some text that
encourages the user to reach for more.
2:41
So we'll add, A label here.
2:48
And we'll call this Extra Credits,
and we'll put it down here.
2:54
Again, let's make this a larger font size.
3:01
And let's add maybe a star next to this.
3:07
And then let's add some paragraph text or
a block of text here.
3:13
And we'll imagine that
this says to go ahead and
3:22
recreate the same project, but
may use a different front-end framework
3:26
than the one that's used in this course or
something like that.
3:32
So these types of challenges should
be used very carefully because
3:37
if users aren't being asked to do more,
they might get bored.
3:41
But if they're faced with too many
challenges on a regular basis,
3:46
they might start to feel overwhelmed,
like they're not up to the task.
3:50
This is just a small
example of gamification.
3:54
You might use points and leaderboards on
a shopping website to encourage repeat
3:58
customers, or show a small graph that
indicates the percentage of completion for
4:03
a user's profile page.
4:09
There's lots of ways to persuade
users when the tasks are turned
4:11
into simple games.
4:15
You need to sign up for Treehouse in order to download course files.
Sign up