Presented at Interaction 13 in Toronto, this talk serves as a practical guide for how game design systems and principles can be applied to solve common UX challenges. While gamification has generated excitement around learning from games, elements such as badges and leaderboards are akin to backup quarterbacks in football - they look great for short periods of time and benefit from having strong teams around them. Removed from their successful environment, many struggle to meet expectations and achieve similar performance.
Instead of showing how isolated elements could be used, I break down examples from popular games such as Super Mario Bros., Pac-Man, Angry Birds, and Canabalt to show the broader systems at work that make tasks such as onboarding new users successful. These principles are then applied or connected to existing digital product examples, such as a redesign of Gmail's onboarding flow.
Video here: http://vimeo.com/63266903
13. The most epic user journey.
Board a giant monster that is a
massive, moving level. Travel inside &
out of its body until reaching the head to
destroy it.
32. • Allows players to figure out how things work by providing
limited inputs with clear feedback.
• Physical games – like tag - are great examples of this.
They’re an extension of your body, and the game space
can be adjusted to match your situation.
• Board games – like Monopoly or Settlers of Catan – don’t
allow for poking because they usually have fixed rule
structures and game spaces.
Give users a chance.
33.
34.
35. 1. Pac-Man is a maze game that consists of 256 levels.
2. Each level in Pac-Man is a different maze.
3. You control a yellow character (“Pac Man”) using the stick in front of you.
4. The stick allows Pac-Man to move in 4 cardinal directions.
5. To advance to the next level, Pac-Man must collect (“eat”) all the circles in the maze.
6. Sometimes, fruit will appear. Eating fruit is worth extra points.
7. Walls will stop his movement.
8. Absence of walls mean Pac-Man will re-appear on the opposite side of the screen.
9. There are 4 enemies – “ghosts” - that will try to stop you.
10. If the enemies touch you in their normal state, you lose a life.
11. You start the game with 4 lives.
12. You can earn more lives by collecting circles.
13. Eating a larger circle will make the enemies stop chasing you. In this mode, you can eat them.
However, it only lasts for a limited time.
14. They will temporarily return to their holding cell for a pre-determined time.
How an Interaction Designer might
explain Pac-Man to users
48. • Games that do this well reward your curiosity, like Angry Birds. There
is immediate feedback and satisfaction granted.
• These games also often have a high tolerance for failure built-in. The
investment in an individual action is brief, so you don’t feel as bad
about starting over.
• Makes it a natural fit for services that require upfront engagement to
reveal content (ex. search engines), and less so for discovery portals
that just put it all in front of you (ex. news sites).
• A nudge in the right direction can be helpful, as long as the user can
self-correct it quickly.
Poking is fun! Keep it that way.
50. • Design part of the game experience – start of the game,
start of a level – to serve as a “learning area” without an
explicit tutorial.
• Useful when there are multiple inputs that can be
explained sequentially.
• Conceptually similar to what we see in industrial design or
architecture, where the product must stand on its own
without an ever-present guide.
Teach through your design.
71. Why don’t you take a break, you’re not needed here yet.
72.
73.
74.
75. • Like poking at a system, this works well as a model to fundamentally
explain how something works. You don’t need to get the full feature set
across yet. Your user probably lacks context for those other actions
without a foundation.
• Many games that employ levels as a design and narrative structure
assume a single play-through experience. That’s not true in our case, so
the context in which “Level 1” appears for repeat visits should be well
defined.
• Users might stray from that journey, but don’t they always? There should
be enough cues to lead them back, or adjust the context based on
decisions they make (ex. deleting my Welcome email in Gmail)
Set the foundation before trying to
decorate the interior.
77. • Guides the player through the early part of the experience
with explicit help and instruction.
• Instruction occurs within the game space, after which
users are allowed to continue on their way.
• It’s like someone pushing you on a swing set, or holding
the bike as you learn to ride. Eventually, they let go but
your momentum keeps you moving forward.
Help that knows when to leave.
78.
79.
80.
81.
82.
83.
84.
85. • Absolutely requires a 1:1 relationship between tutorial action
and in-game action. There is no difference in their execution or
their effect on the game space.
• Use real data to make the actions meaningful. You wouldn’t
want to attend a cooking class where you don’t get to eat what
you make (unless I’m your partner).
• Look for smart ways to opt a user out of this. Have they been
here before? Do they already have an account?
What’s good for the game is good for the
tutorial.
94. Wait a minute...don’t we all know a
lovable character that tried to
be a *little* too helpful?
95.
96.
97.
98.
99.
100. • Keeping pace high to maximize enjoyment, like in some of our earlier
examples (Canabalt and Temple Run), means sacrificing opportunities
to educate users during play.
• Especially for educational games and applications, people need to
time to pause, catch their breath, and reflect on what they’ve done.
• The slower the pace, the more education you can build into the
experience, like Turbo Tax.
• Otherwise, pick your moments wisely. What are the natural breaks in
digital products? Loading screens, Landing pages, etc.
Balancing pace and content is essential
to gameplay.
106. • Microsoft took a relative gamble by decreeing that every game
released for the Xbox must offer a standard amount of
Gamerscore points.
• It became high score lists for a networked generation; an
informal social way to compete with friends and anonymous
foes alike.
• Succeeded because it found a meta user group (Xbox Live
users) outside of a single game that could still appreciate the
value of the engagement.
The Gamerscore filled the void left
behind by arcade machines.
111. 15 Vote up
15 Flag for moderator attention
50 Leave comments†
100 Edit community wiki posts
125 Vote down (costs 1 rep on answers)
200 Reduced advertising
250 Vote to close, reopen, or migrate your questions
500 Retag questions
1000 Show total up and down vote counts
1500 Create new tags
2000 Edit other people’s posts, vote to approve or reject suggested edits
3000 Vote to close, reopen, or migrate any questions
5000 Vote to approve or reject suggested tag wiki edits
10000 Vote to delete closed questions, access to moderation tools
15000 Protect questions so only registered users with 10 rep on this site can answer
20000 Vote to delete negatively voted answers and stronger question deletion votes
By posting better answers, you unlock
site features, not gimmicks.
118. Colin Kaepernick. MattFlynn.
• Controversial move to start
him over a successful QB
• Sought by multiple teams,
signing seen as good move
• 8 Pro Bowlers from his team,
5+ elite teammates on offense
• Played with arguably best WR
core with his old team
• Low expectations, just needed
to fit into a successful team
• Needed to be the offensive
leader and star for new team
• Drafted by head coach, plays
offense suited to his style
• Had to learn a new offense in
open competition
Let’s break it down:
132. This would not have been possible without friends in the
game design community who provided the
expertise, inspiration, and advice needed to pull this off. I
would like to thank the following people, in no particular
order:
Nicholas Fortugno (@nickfortugno)
Zach Gage (@helvetica)
Joe Kowalski (@codeloss)
Kan-Yang Li (@ghettokon)
Peter Knocke (@gustavthree)
Thanks.
Notas del editor
If I started talking about sports from the outset, we would be here all day.
Here’s my reaction every time someone asks that question – a client, colleague, whoever. You know why?
The implicit assumption is usually that game techniques can be applied on top of your existing product. You’ve got something that’s 90% there and are looking for the rug that holds the room together. The Museum of Modern Art, for one, recognizes that games have a lot to teach us about Interaction Design. They’ve added 14 video games as part of a new collection. In my own experience, there is a lot more for us to learn, and once gamification as a trend ends, I want to make sure we don’t miss out on all the cool things there are to learn from games.
So this is what we set out to do. It sounds ridiculous just writing it, but we were able to pull it off.
Alright, so enough about me and my love of games. Let’s get back to the matter at hand. Clearly, I don’t believe this is the question we should be asking about games.
Just looking at engagement narrows our possibilities.
Instead of using psychological hacks to encourage people to use our products, how can we do a better job just making things people love?
Makes sense to start at the beginning, right? How do you onboard people onto your product?I’m going to spend a lot of time talking about this initial experience, because games have a lower threshold for capturing users than even we do.If you need to do online banking, you’ll use your system no matter how shitty it is. However, if you download Angry Birds and decide in 10 seconds you don’t like it, you’re never going to open it again.
So the first approach to onboarding new players I’m going to talk about is poking the system.
Bernie DeKoven, a games theorist, discusses this idea in relation to the accessibility of physical games. Because they use your body, you can “poke” at the game and see what happens. Because your body is the apparatus by which you play, it’s easy to catch on the game mechanics.
Once you start thinking about it, there’s a lot more to Pac-Man that originally meets the eye. How are we going to get all this across to people....
This is an underrated-but-brilliant move on Iwatani’s part. It teaches you immediately that Pac-Man is sent into motion and that walls will stop you. You only have one interface you control – the joystick. Clearly it has to do something here. Making Pac-Man move is a great subtle nudge in the right direction.
Even Mario came with a whole instruction booklet, as most old-school games did. They were mostly ignored.
Ok, last thing about training. Some interfaces are too complex to try and explain them subtly. Right? Sometimes it’s OK to hold someone’s hand through it.
So you’ve got your user started on their journey. Since we’ve limited their choices up-front, there will be times they need assistance. How do we provide extra help when needed?
On the UX side, Microsoft made 2 really nice decisions to give Achievements legs. The first was to tie your Gamerscore to your account name. It is an ever-present indicator to both you and your peers of your (involuntary) involvement.
The second, and most important one, in my book, was aggregating your individual scores for games into a single Gamerscore.You can even compare scores for the same games with your friends.
What does 59 in Klout mean? What does 100 mean? In Xbox Live, if someone has achieved 1000 points for a game, I know they have cleared all the achievements. There’s a clear relationship between points and the system that Klout will likely always struggle against.
Their system scales pretty well for the task at hand.As an anonymous user, you can answer questions and suggest edits.If you create an account, you can ask questions. The rest is up for engagement. If the community votes up your answers, you earn reputation that unlock better site features for you.Points create a really nice positive (and secondary) feedback loop here. In my case, I just care about answers and that’s good enough for me.
The other great thing about Stack Exchange is their focus on small networks. Points retain their meaning because the intended audience and area of expertise never get too broad for a single network. The other helpful wrinkle on top of this, is that if you are an experienced member (200+ rep) who wants to join another Stack Exchange site, you receive a starting +100 reputation bonus to get you past basic new user restrictions.
I had to cut a lot out, unfortunately but hopefully that was a good intro for you.Alright let’s bring this thing home by looking at two quarterbacks who started this football season as backups.
Why did things turn out for each quarterback the way they did? Here are some factors that may have contributed to their success and failures.
These situations could have easily played out differently.Do Matt Flynn’s struggles with the Seahawks mean he is a bad QB?No, it just means that 3 games as a starter in the prior season is probably not enough to evaluate the guy.Colin Kaepernick could also fail to match this success next year when teams have time to adjust to him.
Bad teams will often try to emulate the tactics of successful teams. However, It’s much easier to pry a backup QB away than it is a successful head coach, their schemes, or meaningful starters. They grab the low-hanging fruit and hope for the best.In games, hopefully you’ve seen from the examples how connected and subtle actual design decisions can be.
We’ve seen from the game examples and the UX corollaries I’ve tried to draw that not everything about games is suited to digital products.What are the responsibilities?
So here are some questions I was asking myself, as I met with game designers and had my ideas challenged.
Is it because someone told me they could? Or because I played a game that I really enjoyed, and it had this in it.
There’s a marketing bias towards “points” or “badges” as being universally successful things in games. All games are different in the way they handle it. Some implementations get in the player’s way, or offer broken systems that ruin gameplay. If you can’t identify a good example from a bad, how valuable do “points” as an idea remain?