Badges Are The Backup Quarterbacks of Game Design


Published on

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:

Published in: Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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?
  • Badges Are The Backup Quarterbacks of Game Design

    1. 1. 45 Main St. #220 Brooklyn, NY 11201 +1 718 625 4843 February 07, 2013 Badges are the Backup Quarterbacks of Game Design
    2. 2. Badges are the backup quarterbacks of game design.
    3. 3. Badges are the backup quarterbacks of game design. More on that later.
    4. 4. The gamification question. “How can games make my product more engaging?”
    5. 5. Game design is more than a rug. © 1998 Universal Studios. All rights reserved. Please don’t sue me.
    6. 6. My first wireframe. Photo courtesy of Meejin Hong
    7. 7. Cross-discipline collaboration ✓ Photo courtesy of Meejin Hong
    8. 8. Paper prototyping ✓ Photo courtesy of Meejin Hong
    9. 9. Agile development ✓ Photo courtesy of Meejin Hong
    10. 10. Minimum viable product ✓
    11. 11. 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.
    12. 12. Game Design Techniques UX Problems
    13. 13. Game Design Techniques UX Problems Game whisperer.
    14. 14. How can games make my product more engaging?
    15. 15. How can games make my product more engaging? How can games help me design a better product?
    16. 16. Level 1.
    17. 17. v
    18. 18. Poking the system. Level 1-1:
    19. 19. • 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.
    20. 20. 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
    21. 21. x
    22. 22. Pac-Man doesn’t explain shit. He just starts moving.
    23. 23. • 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.
    24. 24. The Invisible Tutorial. Level 1-2
    25. 25. • 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.
    26. 26. v
    27. 27. Moving in opposite direction of Mario Bounces off pipe so you run into it
    28. 28. Remember when I made fun of ID’s explaining Pac-Man?
    29. 29. No one’s perfect, not even Mario.
    30. 30. The mistake. Sweet redemption.
    31. 31. No idea. You’re on your own, buddy.
    32. 32. Whoops.
    33. 33. Best. CTA. Ever.
    34. 34. Why don’t you take a break, you’re not needed here yet.
    35. 35. • 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.
    36. 36. Immersive tutorials. Level 1-3
    37. 37. • 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.
    38. 38. • 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.
    39. 39. Knowing when to help.
    40. 40. No.
    41. 41. Barrel rolls are not the answer.
    42. 42. Wait a minute...don’t we all know a lovable character that tried to be a *little* too helpful?
    43. 43. • 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.
    44. 44. Rewarding engagement.
    45. 45. • 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.
    46. 46. ...of what, exactly? © 1994 Miramax Films. All rights reserved. Please don’t sue me.
    47. 47. 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.
    48. 48. 94different Q&A networks.
    49. 49. Atale of two backups.
    50. 50. 2nd-year rookie back-up.
    51. 51. 4-yr backup. Brought in to start.
    52. 52. Led his team to the Super Bowl.
    53. 53. Didn’t start a single game.
    54. 54. 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:
    55. 55. Context matters a lot in sports.
    56. 56. Context matters a lot in sports. It does in games, too.
    57. 57. They’re both delicate, complex systems of connected pieces. Individual parts are incredibly hard to judge on their own.
    58. 58. Badges, like backup quarterbacks, are the easy thing to identify and take from their former successful environments.
    59. 59. However, success in one system doesn’t guarantee it in another.
    60. 60. Keep in mind...
    61. 61. Hypothesis. Why do I think _______ can solve my problem?
    62. 62. Context. What types of games are _______ typically found in?
    63. 63. Choreography. How do players encounter ______ in the game, and what happens before & after?
    64. 64. Accountability. What is _______ asked to accomplish in the game?
    65. 65. Evaluation. What are good and bad examples of _______ at work?
    66. 66. If you believe _______ are the answer for your product, bring its teammates along.
    67. 67. 45 Main St. #220 Brooklyn, NY 11201 +1 718 625 4843
    68. 68. 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.