Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Game on: 16 design patterns for user engagement

20 107 vues

Publié le

Publié dans : Technologie, Business

Game on: 16 design patterns for user engagement

  1. 1. GAME ON: 16 DESIGN PATTERNSFOR USER ENGAGEMENT<br />Using game mechanics<br />to create engagement in social web applications.<br />NadyaDirekova, @nadya_d<br />Senior UX Designer, Game Mechanic<br />SXSW March 14th 2011<br />
  2. 2. ABOUT ME: ONE FOOT IN GAMES, ONE FOOT IN UX<br />M.I.T. <br />Razorfish<br />Leapfrog <br />Backbone Ent.<br />Google / Hotpot<br />
  3. 3. GAME MECHANICS RIGHT NOW<br />
  4. 4. What are game mechanics?<br />Design patterns that promote<br />play and play-like engagement.<br />GAME MECHANICS <br />
  5. 5. What are game mechanics?<br />Design patterns that promote<br />play and play-like engagement.<br />GAME MECHANICS <br />Repeatable<br />solutions to design problem.<br />DESIGN PATTERNS<br />
  6. 6. What are game mechanics?<br />Design patterns that promote<br />play and play-like engagement.<br />GAME MECHANICS <br />Repeatable<br />solutions to design problem.<br />DESIGN PATTERNS<br />
  7. 7. What are game mechanics?<br />Design patterns that promote<br />play and play-like engagement<br />GAME MECHANICS <br />Repeatable<br />solutions to design problem.<br />DESIGN PATTERNS<br />
  8. 8. What are game mechanics?<br />Design patterns that promote<br />play and play-like engagement<br />GAME MECHANICS <br />Repeatable<br />solutions to design problem.<br />DESIGN PATTERNS<br />
  9. 9. GAME MECHANICS – A BROAD ARRAY OF APPLICATIONS<br />Spending on Social Media Marketing and Gamification<br />Budgeting<br />Location Sharing<br />Test Prep<br />Recycling<br />Grockit.com<br />Four Square<br />Recycle bank.com<br />Mint.com<br />Chores<br />Exercise<br />Task Management<br />Even Brushing Teeth…<br />Nike Plus<br />Epic Win<br />Chore Wars<br />
  10. 10. A BROAD ARRAY OF THINKERS<br />Spending on Social Media Marketing and Gamification<br />
  11. 11. GAMIFICATION IS THE NEW BLACK<br />Spending on Social Media Marketing and Gamification<br />
  12. 12. STATS AROUND GAME MECHANICS<br />What are companies looking to achieve with <br />game mechanics?<br />Source: M2 Research<br />
  13. 13. STATS AROUND GAME MECHANICS<br />What is the current breakdown of companies<br /> on the gamification adoption curve?<br />Source: M2 Research<br />
  14. 14. PROJECTED MARKETING SPENDING ON GAME MECHANICS<br />Spending on Social Media Marketing and Gamification<br />Source: M2 Research<br />
  15. 15. GAMIFICATION FATIGUE<br />Spending on Social Media Marketing and Gamification<br />
  16. 16. This is powerful stuff<br />
  17. 17. IT’S MORE THAN POINTS AND BADGES:<br />><br />Game <br />mechanics <br />
  18. 18. GAME MECHANICS DESIGN PATTERNS<br />
  19. 19. LET’S TALK ABOUT...<br />WE’LL REVIEW <br />16 DESIGN PATTERNS<br />THAT CREATE GAME-LIKE USER ENGAGEMENT.<br />
  20. 20. LET’S TALK ABOUT...<br />WE’LL REVIEW <br />16 DESIGN PATTERNS<br />THAT CREATE GAME-LIKE USER ENGAGEMENT.<br />WE’LL DISCUSS HOW THEY APPLY TO <br />3 ASPECTS <br />OF THE USER JOURNEY <br />
  21. 21. LET’S TALK ABOUT...<br />WE’LL REVIEW <br />16 DESIGN PATTERNS<br />THAT CREATE GAME-LIKE USER ENGAGEMENT.<br />WE’LL DISCUSS HOW THEY APPLY TO <br />3 ASPECTS <br />OF THE USER JOURNEY: <br />COME AND TRY IT<br />
  22. 22. LET’S TALK ABOUT...<br />WE’LL REVIEW <br />16 DESIGN PATTERNS<br />THAT CREATE GAME-LIKE USER ENGAGEMENT.<br />WE’LL DISCUSS HOW THEY APPLY TO <br />3 ASPECTS <br />OF THE USER JOURNEY: <br />COME AND TRY IT<br />BRING FRIENDS<br />
  23. 23. LET’S TALK ABOUT...<br />WE’LL REVIEW <br />16 DESIGN PATTERNS<br />THAT CREATE GAME-LIKE USER ENGAGEMENT.<br />WE’LL DISCUSS HOW THEY APPLY TO <br />3 ASPECTS <br />OF THE USER JOURNEY: <br />COME AND TRY IT<br />BRING FRIENDS<br />COME BACK<br />
  24. 24. “COME AND TRY IT” - Designing for 1st time users<br /><ul><li> Visual story telling
  25. 25. Visual cues
  26. 26. Tutorials
  27. 27. Responsive objects
  28. 28. Reward schedule
  29. 29. Disincentives</li></li></ul><li>DESIGN PATTERN<br />1.1 VISUAL STORYTELLING<br />
  30. 30. DESIGN PATTERN <br />Visual story telling – instead of long explanations<br />RUB RABBITS PRE-GAME SCREEN<br />GAME EXAMPLE<br />
  31. 31. DESIGN PATTERN <br />Visual story telling – instead of long explanations<br />GROUP-ON: HOW IT WORKS<br />ZIP CAR: EXPLAIN THE PROPOSITION IN PICTURES<br />
  32. 32. DESIGN PATTERN<br />1.2 VISUAL CUES<br />
  33. 33. DESIGN PATTERN <br />VISUAL CLUEs<br />CITY OF IMMORTALS<br />GAME EXAMPLE<br />
  34. 34. DESIGN PATTERN <br />Visual CLUES: example<br />FACEBOOK PLACES: PLAYING “FLASHLIGHT”<br />
  35. 35. DESIGN PATTERN <br />Visual CLUES: example<br />PANDORA: HIGHLIGHT FEATURES THE USER MIGHT MISS OTHERWISE<br />
  36. 36. DESIGN PATTERN<br />1.3 TUTORIAL / ONBOArDING<br /> ON RAILS<br />
  37. 37. DESIGN PATTERN <br />TUTORIAL / ONBoArDING ON RAILS<br />FRONTIERVILLE<br />GAME EXAMPLE<br />
  38. 38. DESIGN PATTERN <br />TUTORIAL / ONBOARDING ON RAILS<br />RIBBON HERO<br />GET GLUE: EXPERIENCE THE APP DURING THE ON-BOARDING<br />
  39. 39. DESIGN PATTERN<br />1.4 responsive objects<br />
  40. 40. DESIGN PATTERN <br />responsive objects<br />GAME EXAMPLE<br />
  41. 41. DESIGN PATTERN <br />responsive objects<br />KNOW THAT YOU’RE DOING OK LOGGING IN WITH MINT.COM<br />HOVER ON A TWEET TO REVEAL NEW OPTIONS<br />
  42. 42. DESIGN PATTERN<br />1.5 reward schedule<br />
  43. 43. DESIGN PATTERN <br />Reward schedule<br />CITYVILLE COINS AND STARS: REWARDS FOR TAKING CARE OF YOUR CITY<br />“You can’t over-reward the player in the first 10 minutes.” - Sid Meier, designer of the game Civilization<br />
  44. 44. DESIGN PATTERN <br />Reward the beginner<br />SHOPKICK<br />IMVU: POINTS FOR TRYING NEW THINGS<br />FOUR SQUARE NEWBIE BADGE<br />
  45. 45. DESIGN PATTERN <br />Challenge the expert<br />PLANTS VS. ZOMBIE: SOME ACHIEVEMENTS<br />SEEM ALMOST IMPOSSIBLE TO UNLOCK<br />FOURSQAURE: SOME ACHIEVEMENTS ARE HARDER TO UNLOCK<br />
  46. 46. DESIGN PATTERN<br />1.6 DISincentives<br />
  47. 47. DESIGN PATTERN <br />DISincentives<br />PACMAN – YOU GOT EATEN BY GHOSTS!<br />GAME EXAMPLE<br />
  48. 48. DESIGN PATTERN <br />DISincentives<br />STICKK HELPS YOU STICK TO GOALS USING NEGATIVE INCENTIVES<br />
  49. 49. DESIGN PATTERN <br />DISIncentives<br />GROCKIT :<br />A/B TESTING SHOWS THAT NEGATIVE INCENTIVES HURT USER ENGAGAMENT<br />
  50. 50. summary<br />“come and try it”<br /><ul><li> Visual story telling
  51. 51. Visual cues
  52. 52. Tutorials
  53. 53. Responsive objects
  54. 54. Reward schedule
  55. 55. Disincentives</li></li></ul><li>DESIGN PATtERns for social engagement<br />“Bring your friends”<br />
  56. 56. “BRING FRIENDS” - Designing for community<br /><ul><li> Gated trial – form a team
  57. 57. Social feedback
  58. 58. Reputation
  59. 59. Sharing milestones
  60. 60. Mischief</li></li></ul><li>DESIGN PATTERN<br />2.1 gated trial – form a team<br />
  61. 61. DESIGN PATTERN <br />gated TRIAL – FORM A TEAM TO START<br />DODGE-BALL – YOU NEED A TEAM TO START<br />GAME EXAMPLE<br />
  62. 62. DESIGN PATTERN <br />Why is a team so important?<br />
  63. 63. DESIGN PATTERN <br />GATED TRIAL – FORM A TEAM TO START<br />
  64. 64. DESIGN PATTERN <br />GATED TRIAL – FORM A TEAM TO START<br />OLD TWITTER SIGN UP – 3 SCREENS<br />NEW TWITTER SIGN UP – 4 SCREENS (NOW REDESIGNED)<br />
  65. 65. DESIGN PATTERN <br />GATED TRIAL – FORM A TEAM TO START<br />NEW TWITTER SIGN UP <br />
  66. 66. DESIGN PATTERN<br />2.2 social feedback <br />
  67. 67. DESIGN PATTERN <br />social FEEDBACk<br />CITYVILLE – ASYNCHRONOUS COMMUNICATION BUTTONS<br />GAME EXAMPLE<br />
  68. 68. DESIGN PATTERN <br />SOCIAL FEEDBACK EXAMPLE – thank you buttons<br />AADVARK “THANK YOU NOTES”<br />QUORA “THANK YOU NOTES”<br />
  69. 69. DESIGN PATTERN <br />Social feedback EXAMPLE - COMPLIMENTS<br />YELP: SELECT A COMPLIMENT AND WRITE A MESSAGE<br />
  70. 70. DESIGN PATTERN <br />Social feedback EXAMPLE – VOTING, LIKES, RETWEETS<br />QUORA VOTING<br />FACEBOOK LIKES<br />TWEET AND RETWEET<br />
  71. 71. Design pattern<br />2.3REPUTATION<br />
  72. 72. DESIGN PATTERN <br />REPUTATION<br />SIMPLE REPUTATION SCORE IN CITYVILLE<br />GAME EXAMPLE<br />
  73. 73. DESIGN PATTERN <br />REPUTATION<br />EBAY REPUTAION = MORE TRUST<br />ONE UP ME FORUM REPUTAION = MORE VOTING POWER<br />
  74. 74. Design pattern<br />2.3sharing achievements<br />
  75. 75. DESIGN PATTERN <br />Sharing achievements<br />XBOX LIVE<br />GAME EXAMPLE<br />
  76. 76. DESIGN PATTERN <br />Sharing ACHIEVEMENTS<br />FOUR SQAURE BADGE UNLOCKED!<br />
  77. 77. DESIGN PATTERN<br />2.4 MISCHIEF<br />
  78. 78. DESIGN PATTERN <br />MISCHIEF<br />FARMVILLE – TP SOMEONE’S FARM<br />GAME EXAMPLE<br />
  79. 79. DESIGN PATTERN <br />MISCHIEf RE-DIRECT<br />“CHATROULETTE”<br />
  80. 80. in summary<br />social<br /><ul><li> Gated trial – form a team
  81. 81. Social feedback
  82. 82. Reputation
  83. 83. Sharing milestones
  84. 84. Mischief</li></li></ul><li>DESIGN PATTERNs for repeat engagement<br />“player, come back”<br />
  85. 85. “COME BACK” - Designing for return visits<br /><ul><li> Advanced user paths
  86. 86. Content unlocks
  87. 87. Quest queue
  88. 88. Time pressure
  89. 89. Scarcity</li></li></ul><li>DESIGN PATTERN<br />3.1 advanced user paths<br />
  90. 90. DESIGN PATTERN <br />Advanced user paths / roles<br />SKI SLOPES: DIFFERENT PATHS ON THE SAME MOUNTAIN<br />
  91. 91. DESIGN PATTERN <br />Advanced user paths / roles<br />YELP FOR THE REGULAR USERS<br />YELP THE ELITE SQUAD – USEFUL , FUNNY AND COOL <br />
  92. 92. DESIGN PATTERN <br />Advanced user paths / roles<br />FOURSQUARE MAYORSHIP<br />
  93. 93. DESIGN PATTERN<br />3.2 content unlocks<br />
  94. 94. DESIGN PATTERN <br />Content unlocks<br />ANGRY BIRDS<br />GAME EXAMPLE<br />
  95. 95. DESIGN PATTERN<br />Content unlocks<br />DAILY UNLOCKS IN THE UNIFORM PROJECT<br />
  96. 96. DESIGN PATTERN<br />3.3 quest queue<br />
  97. 97. DESIGN PATTERN <br />QUEST QUEuE<br />ZOMBIE FARM<br />GAME EXAMPLE<br />
  98. 98. DESIGN PATTERN <br />QUEST QUEuE: example<br />EPIC WIN – SELF DESIGNED QUEST QUEUE<br />LINKED IN QUEST QUEUE<br />
  99. 99. DESIGN PATTERN<br />3.4 time pressure <br />
  100. 100. DESIGN PATTERN <br />Time pressure<br />CHESS TIMER<br />GAME EXAMPLE<br />
  101. 101. DESIGN PATTERN <br />TIME PRESSURE<br />SWOOPO<br />EBAY BIDDING<br />
  102. 102. DESIGN PATTERN<br />3.5 SCARCITY <br />
  103. 103. DESIGN PATTERN <br />SCARCITY<br />VIP FISH IN ZYNGA<br />GAME EXAMPLE<br />
  104. 104. DESIGN PATTERN <br />Scarcity: example<br />THE MILLION DOLLAR<br />HOMEPAGE<br />
  105. 105. DESIGN PATTERN <br />Scarcity = SPECIALNESS <br />HOTPOT “BEST EVER”<br />
  106. 106. in summary<br />return visitors<br /><ul><li> Advanced user paths
  107. 107. Content unlocks
  108. 108. Quest queue
  109. 109. Time pressure
  110. 110. Scarcity</li></li></ul><li>METRICS<br />
  111. 111. METRICS<br />IT’S MEASURABLE!<br />BE PREAPED TO MEASURE AND ITERATE<br />
  112. 112. METRICS<br />IT’S MEASURABLE!<br />BE PREPARED TO MEASURE AND ITERATE<br />
  113. 113. METRICS<br />IT’S MEASURABLE!<br />BE PREPARED TO MEASURE AND ITERATE<br />EACH PATTERN AND STAGE HAS UNIQUE METRICS<br />
  114. 114. BUNCHBALL DASHBOARD<br />BE VERY CLEAR: WHAT’S THE USER PROPOSITION<br />
  115. 115. BUNCHBALL DASHBOARD<br />BE VERY CLEAR: WHAT’S THE USER PROPOSITION<br />
  116. 116. METRICS EXAMPLE<br />+<br />
  117. 117. IN SUMMARY<br />><br />Game <br />mechanics <br />
  118. 118. IN SUMMARY<br />A growing list of patterns…<br />COME AND TRY IT<br />BRING FRIENDS<br />COME BACK<br /><ul><li> Advanced user paths
  119. 119. Content Unlocks
  120. 120. Quest queue
  121. 121. Scarcity
  122. 122. Time pressure
  123. 123. Gated trial – </li></ul> form a team<br /><ul><li> Social feedback
  124. 124. Reputation
  125. 125. Sharing milestones
  126. 126. Mischief
  127. 127. Visual story telling
  128. 128. Visual cues
  129. 129. Tutorials
  130. 130. Ultra-responsiveness
  131. 131. Reward schedule
  132. 132. Disincentives</li></li></ul><li>CASE STUDIES<br />Thanks to the following companies for<br />interviews, best practices and feedback:<br />
  133. 133.
  134. 134. CONTACT<br />NADYA DIREKOVA<br />nadya.direkova@gmail.com<br />@nadya_d<br />

×