badges are the backup quarterbacks of game design
DESCRIPTION
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/63266903TRANSCRIPT
hugeinc.com
45 Main St. #220 Brooklyn, NY 11201
+1 718 625 4843
February 07, 2013
Badges are the Backup Quarterbacks of Game Design
Badges are the backup
quarterbacks of game design.
Badges are the backup
quarterbacks of game design.
More on that later.
The gamification question.
“How can games make my product
more engaging?”
Game design is more than a rug.
© 1998 Universal Studios. All rights reserved. Please don’t sue me.
My first wireframe.
Photo courtesy of Meejin Hong
Cross-discipline collaboration ✓
Photo courtesy of Meejin Hong
Paper prototyping ✓
Photo courtesy of Meejin Hong
Agile development ✓
Photo courtesy of Meejin Hong
Minimum viable product ✓
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.
Game Design
TechniquesUX Problems
Game Design
TechniquesUX Problems
Game whisperer.
How can games make my product
more engaging?
How can games make my product
more engaging?
How can games help me
design a better product?
Level 1.
v
Poking the system.
Level 1-1:
• 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.
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
x
Pac-Man doesn’t explain shit.
He just starts moving.
• 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.
The Invisible
Tutorial.
Level 1-2
• 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.
v
Moving in opposite
direction of Mario
Bounces off pipe
so you run into it
Remember when I made fun
of ID’s explaining Pac-Man?
No one’s perfect, not even Mario.
The mistake. Sweet redemption.
No idea. You’re on
your own, buddy.
Whoops.
Best. CTA. Ever.
Why don’t you take a break, you’re not needed here yet.
• 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.
Immersive
tutorials.
Level 1-3
• 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.
• 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.
Knowing when to
help.
No.
Barrel rolls are not the answer.
Wait a minute...don’t we all know a
lovable character that tried to
be a *little* too helpful?
• 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.
Rewarding
engagement.
• 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.
...of what, exactly?
© 1994 Miramax Films. All rights reserved. Please don’t sue me.
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.
94different Q&A networks.
A tale of two
backups.
2nd-year rookie back-up.
4-yr backup. Brought in to start.
Led his team to the Super Bowl.
Didn’t start a single game.
Colin Kaepernick. Matt Flynn.
• 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:
Context matters a lot in sports.
Context matters a lot in sports.
It does in games, too.
They’re both delicate, complex systems
of connected pieces. Individual parts
are incredibly hard to judge on their
own.
Badges, like backup quarterbacks, are
the easy thing to identify and take from
their former successful environments.
However, success in one system
doesn’t guarantee it in another.
Keep in mind...
Hypothesis.
Why do I think _______ can
solve my problem?
Context.
What types of games are
_______ typically found in?
Choreography.
How do players encounter ______ in
the game, and what happens before &
after?
Accountability.
What is _______ asked to
accomplish in the game?
Evaluation.
What are good and bad examples of
_______ at work?
If you believe _______ are
the answer for your product,
bring its teammates along.
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.