Game on: 16 design patterns for user engagement
98 likes10,478 views
The document discusses 16 design patterns for using game mechanics to create user engagement in social web applications. It covers patterns for attracting first-time users ("Come and Try It") like visual storytelling, tutorials, and reward schedules. Patterns for building community ("Bring Your Friends") include forming teams, social feedback, and sharing milestones. Patterns for repeat visits ("Come Back") consist of advanced user paths, content unlocks over time, quest queues, and using scarcity and time pressure. The document stresses measuring the effects of these patterns and iterating based on metrics.
Game on: 16 design patterns for user engagement
- 1. GAME ON: 16 DESIGN PATTERNSFOR USER ENGAGEMENTUsing game mechanicsto create engagement in social web applications.NadyaDirekova, @nadya_dSenior UX Designer, Game MechanicSXSW March 14th 2011
- 2. ABOUT ME: ONE FOOT IN GAMES, ONE FOOT IN UXM.I.T. RazorfishLeapfrog Backbone Ent.Google / Hotpot
- 3. GAME MECHANICS RIGHT NOW
- 4. What are game mechanics?Design patterns that promoteplay and play-like engagement.GAME MECHANICS
- 5. What are game mechanics?Design patterns that promoteplay and play-like engagement.GAME MECHANICS Repeatablesolutions to design problem.DESIGN PATTERNS
- 6. What are game mechanics?Design patterns that promoteplay and play-like engagement.GAME MECHANICS Repeatablesolutions to design problem.DESIGN PATTERNS
- 7. What are game mechanics?Design patterns that promoteplay and play-like engagementGAME MECHANICS Repeatablesolutions to design problem.DESIGN PATTERNS
- 8. What are game mechanics?Design patterns that promoteplay and play-like engagementGAME MECHANICS Repeatablesolutions to design problem.DESIGN PATTERNS
- 9. GAME MECHANICS – A BROAD ARRAY OF APPLICATIONSSpending on Social Media Marketing and GamificationBudgetingLocation SharingTest PrepRecyclingGrockit.comFour SquareRecycle bank.comMint.comChoresExerciseTask ManagementEven Brushing Teeth…Nike PlusEpic WinChore Wars
- 10. A BROAD ARRAY OF THINKERSSpending on Social Media Marketing and Gamification
- 11. GAMIFICATION IS THE NEW BLACKSpending on Social Media Marketing and Gamification
- 12. STATS AROUND GAME MECHANICSWhat are companies looking to achieve with game mechanics?Source: M2 Research
- 13. STATS AROUND GAME MECHANICSWhat is the current breakdown of companies on the gamification adoption curve?Source: M2 Research
- 14. PROJECTED MARKETING SPENDING ON GAME MECHANICSSpending on Social Media Marketing and GamificationSource: M2 Research
- 15. GAMIFICATION FATIGUESpending on Social Media Marketing and Gamification
- 16. This is powerful stuff
- 17. IT’S MORE THAN POINTS AND BADGES:>Game mechanics
- 18. GAME MECHANICS DESIGN PATTERNS
- 19. LET’S TALK ABOUT...WE’LL REVIEW 16 DESIGN PATTERNSTHAT CREATE GAME-LIKE USER ENGAGEMENT.
- 20. LET’S TALK ABOUT...WE’LL REVIEW 16 DESIGN PATTERNSTHAT CREATE GAME-LIKE USER ENGAGEMENT.WE’LL DISCUSS HOW THEY APPLY TO 3 ASPECTS OF THE USER JOURNEY
- 21. LET’S TALK ABOUT...WE’LL REVIEW 16 DESIGN PATTERNSTHAT CREATE GAME-LIKE USER ENGAGEMENT.WE’LL DISCUSS HOW THEY APPLY TO 3 ASPECTS OF THE USER JOURNEY: COME AND TRY IT
- 22. LET’S TALK ABOUT...WE’LL REVIEW 16 DESIGN PATTERNSTHAT CREATE GAME-LIKE USER ENGAGEMENT.WE’LL DISCUSS HOW THEY APPLY TO 3 ASPECTS OF THE USER JOURNEY: COME AND TRY ITBRING FRIENDS
- 23. LET’S TALK ABOUT...WE’LL REVIEW 16 DESIGN PATTERNSTHAT CREATE GAME-LIKE USER ENGAGEMENT.WE’LL DISCUSS HOW THEY APPLY TO 3 ASPECTS OF THE USER JOURNEY: COME AND TRY ITBRING FRIENDSCOME BACK
- 24. “COME AND TRY IT” - Designing for 1st time users Visual story telling
- 25. Visual cues
- 26. Tutorials
- 28. Reward schedule
- 29. DisincentivesDESIGN PATTERN1.1 VISUAL STORYTELLING
- 30. DESIGN PATTERN Visual story telling – instead of long explanationsRUB RABBITS PRE-GAME SCREENGAME EXAMPLE
- 31. DESIGN PATTERN Visual story telling – instead of long explanationsGROUP-ON: HOW IT WORKSZIP CAR: EXPLAIN THE PROPOSITION IN PICTURES
- 32. DESIGN PATTERN1.2 VISUAL CUES
- 33. DESIGN PATTERN VISUAL CLUEsCITY OF IMMORTALSGAME EXAMPLE
- 34. DESIGN PATTERN Visual CLUES: exampleFACEBOOK PLACES: PLAYING “FLASHLIGHT”
- 35. DESIGN PATTERN Visual CLUES: examplePANDORA: HIGHLIGHT FEATURES THE USER MIGHT MISS OTHERWISE
- 36. DESIGN PATTERN1.3 TUTORIAL / ONBOArDING ON RAILS
- 37. DESIGN PATTERN TUTORIAL / ONBoArDING ON RAILSFRONTIERVILLEGAME EXAMPLE
- 38. DESIGN PATTERN TUTORIAL / ONBOARDING ON RAILSRIBBON HEROGET GLUE: EXPERIENCE THE APP DURING THE ON-BOARDING
- 39. DESIGN PATTERN1.4 responsive objects
- 40. DESIGN PATTERN responsive objectsGAME EXAMPLE
- 41. DESIGN PATTERN responsive objectsKNOW THAT YOU’RE DOING OK LOGGING IN WITH MINT.COMHOVER ON A TWEET TO REVEAL NEW OPTIONS
- 42. DESIGN PATTERN1.5 reward schedule
- 43. DESIGN PATTERN Reward scheduleCITYVILLE COINS AND STARS: REWARDS FOR TAKING CARE OF YOUR CITY“You can’t over-reward the player in the first 10 minutes.” - Sid Meier, designer of the game Civilization
- 44. DESIGN PATTERN Reward the beginnerSHOPKICKIMVU: POINTS FOR TRYING NEW THINGSFOUR SQUARE NEWBIE BADGE
- 45. DESIGN PATTERN Challenge the expertPLANTS VS. ZOMBIE: SOME ACHIEVEMENTSSEEM ALMOST IMPOSSIBLE TO UNLOCKFOURSQAURE: SOME ACHIEVEMENTS ARE HARDER TO UNLOCK
- 47. DESIGN PATTERN DISincentivesPACMAN – YOU GOT EATEN BY GHOSTS!GAME EXAMPLE
- 48. DESIGN PATTERN DISincentivesSTICKK HELPS YOU STICK TO GOALS USING NEGATIVE INCENTIVES
- 49. DESIGN PATTERN DISIncentivesGROCKIT :A/B TESTING SHOWS THAT NEGATIVE INCENTIVES HURT USER ENGAGAMENT
- 50. summary“come and try it” Visual story telling
- 51. Visual cues
- 52. Tutorials
- 54. Reward schedule
- 55. DisincentivesDESIGN PATtERns for social engagement“Bring your friends”
- 56. “BRING FRIENDS” - Designing for community Gated trial – form a team
- 57. Social feedback
- 58. Reputation
- 60. MischiefDESIGN PATTERN2.1 gated trial – form a team
- 61. DESIGN PATTERN gated TRIAL – FORM A TEAM TO STARTDODGE-BALL – YOU NEED A TEAM TO STARTGAME EXAMPLE
- 62. DESIGN PATTERN Why is a team so important?
- 63. DESIGN PATTERN GATED TRIAL – FORM A TEAM TO START
- 64. DESIGN PATTERN GATED TRIAL – FORM A TEAM TO STARTOLD TWITTER SIGN UP – 3 SCREENSNEW TWITTER SIGN UP – 4 SCREENS (NOW REDESIGNED)
- 65. DESIGN PATTERN GATED TRIAL – FORM A TEAM TO STARTNEW TWITTER SIGN UP
- 66. DESIGN PATTERN2.2 social feedback
- 67. DESIGN PATTERN social FEEDBACkCITYVILLE – ASYNCHRONOUS COMMUNICATION BUTTONSGAME EXAMPLE
- 68. DESIGN PATTERN SOCIAL FEEDBACK EXAMPLE – thank you buttonsAADVARK “THANK YOU NOTES”QUORA “THANK YOU NOTES”
- 69. DESIGN PATTERN Social feedback EXAMPLE - COMPLIMENTSYELP: SELECT A COMPLIMENT AND WRITE A MESSAGE
- 70. DESIGN PATTERN Social feedback EXAMPLE – VOTING, LIKES, RETWEETSQUORA VOTINGFACEBOOK LIKESTWEET AND RETWEET
- 72. DESIGN PATTERN REPUTATIONSIMPLE REPUTATION SCORE IN CITYVILLEGAME EXAMPLE
- 73. DESIGN PATTERN REPUTATIONEBAY REPUTAION = MORE TRUSTONE UP ME FORUM REPUTAION = MORE VOTING POWER
- 74. Design pattern2.3sharing achievements
- 75. DESIGN PATTERN Sharing achievementsXBOX LIVEGAME EXAMPLE
- 76. DESIGN PATTERN Sharing ACHIEVEMENTSFOUR SQAURE BADGE UNLOCKED!
- 78. DESIGN PATTERN MISCHIEFFARMVILLE – TP SOMEONE’S FARMGAME EXAMPLE
- 79. DESIGN PATTERN MISCHIEf RE-DIRECT“CHATROULETTE”
- 80. in summarysocial Gated trial – form a team
- 81. Social feedback
- 82. Reputation
- 84. MischiefDESIGN PATTERNs for repeat engagement“player, come back”
- 85. “COME BACK” - Designing for return visits Advanced user paths
- 86. Content unlocks
- 87. Quest queue
- 88. Time pressure
- 89. ScarcityDESIGN PATTERN3.1 advanced user paths
- 90. DESIGN PATTERN Advanced user paths / rolesSKI SLOPES: DIFFERENT PATHS ON THE SAME MOUNTAIN
- 91. DESIGN PATTERN Advanced user paths / rolesYELP FOR THE REGULAR USERSYELP THE ELITE SQUAD – USEFUL , FUNNY AND COOL
- 92. DESIGN PATTERN Advanced user paths / rolesFOURSQUARE MAYORSHIP
- 93. DESIGN PATTERN3.2 content unlocks
- 94. DESIGN PATTERN Content unlocksANGRY BIRDSGAME EXAMPLE
- 95. DESIGN PATTERNContent unlocksDAILY UNLOCKS IN THE UNIFORM PROJECT
- 96. DESIGN PATTERN3.3 quest queue
- 97. DESIGN PATTERN QUEST QUEuEZOMBIE FARMGAME EXAMPLE
- 98. DESIGN PATTERN QUEST QUEuE: exampleEPIC WIN – SELF DESIGNED QUEST QUEUELINKED IN QUEST QUEUE
- 99. DESIGN PATTERN3.4 time pressure
- 100. DESIGN PATTERN Time pressureCHESS TIMERGAME EXAMPLE
- 101. DESIGN PATTERN TIME PRESSURESWOOPOEBAY BIDDING
- 103. DESIGN PATTERN SCARCITYVIP FISH IN ZYNGAGAME EXAMPLE
- 104. DESIGN PATTERN Scarcity: exampleTHE MILLION DOLLARHOMEPAGE
- 105. DESIGN PATTERN Scarcity = SPECIALNESS HOTPOT “BEST EVER”
- 106. in summaryreturn visitors Advanced user paths
- 107. Content unlocks
- 108. Quest queue
- 109. Time pressure
- 110. ScarcityMETRICS
- 111. METRICSIT’S MEASURABLE!BE PREAPED TO MEASURE AND ITERATE
- 112. METRICSIT’S MEASURABLE!BE PREPARED TO MEASURE AND ITERATE
- 113. METRICSIT’S MEASURABLE!BE PREPARED TO MEASURE AND ITERATEEACH PATTERN AND STAGE HAS UNIQUE METRICS
- 114. BUNCHBALL DASHBOARDBE VERY CLEAR: WHAT’S THE USER PROPOSITION
- 115. BUNCHBALL DASHBOARDBE VERY CLEAR: WHAT’S THE USER PROPOSITION
- 116. METRICS EXAMPLE+
- 118. IN SUMMARYA growing list of patterns…COME AND TRY ITBRING FRIENDSCOME BACK Advanced user paths
- 119. Content Unlocks
- 120. Quest queue
- 121. Scarcity
- 122. Time pressure
- 123. Gated trial – form a team Social feedback
- 124. Reputation
- 125. Sharing milestones
- 126. Mischief
- 127. Visual story telling
- 128. Visual cues
- 129. Tutorials
- 130. Ultra-responsiveness
- 131. Reward schedule
- 132. DisincentivesCASE STUDIESThanks to the following companies forinterviews, best practices and feedback:
Editor's Notes
- #16: The real challenge is how to tap into it properly. And that leads us to…
- #26: Key Observations:Games often use cartoon story-boards to explain a taskWithout words, or to amuse the audience during a slow loadTime. Web / mobile apps are also tapping in the power of visual story-telling to explain user propositions or complex processed.
- #29: Key Observations:Game Tutorials often provide full hand-holding – to make sure the player learns the key skills needed without any confusion.
- #33: Key Observations:Game Tutorials often provide full hand-holding – to make sure the player learns the key skills needed without any confusion.
- #36: Key Observations:You can interact with everything in a game world – which feels fun and rewards exploration.
- #40: http://www.IMVU.comA great experience for beginners: IMVU gives you extra points for creating your avatar, talking to someone and even logging back in the next day.
- #41: http://www.IMVU.comA great experience for beginners: IMVU gives you extra points for creating your avatar, talking to someone and even logging back in the next day.
- #43: Key Observations:Negative incentives are common in games – they motivate action by giving the player something to fear to avoid. Negative incentives can be powerful, but very tricky to implement in a web application…
- #50: Key Observations:Many games require two or more players in order to happen – web and mobile apps are starting to do the same.
- #56: Key Observations:Social games are often played asynchronously: that is, when only one of the players is logged it at a time. Having a believable social exchange can be challenging – and designers have found ways to overcome that by using buttons such as “thank you” or “compliment.”Structured social commentary allows players to exchange only the type of dialogue that is desirable for the community – preventing spam and aggressive commentary. If you get a message saying someone “liked” your post or “thanked you,” you are likely to feel good and in that way “reengage” with the application. In addition, some social commentary can be used as a reputation base.
- #59: LINK TO CREATE REPUTATION
- #61: Key Observations:Social games are often played asynchronously: that is, when only one of the players is logged it at a time. Having a believable social exchange can be challenging – and designers have found ways to overcome that by using buttons such as “thank you” or “compliment.”Structured social commentary allows players to exchange only the type of dialogue that is desirable for the community – preventing spam and aggressive commentary. If you get a message saying someone “liked” your post or “thanked you,” you are likely to feel good and in that way “reengage” with the application. In addition, some social commentary can be used as a reputation base.
- #64: Key Observations:Social games are often played asynchronously: that is, when only one of the players is logged it at a time. Having a believable social exchange can be challenging – and designers have found ways to overcome that by using buttons such as “thank you” or “compliment.”Structured social commentary allows players to exchange only the type of dialogue that is desirable for the community – preventing spam and aggressive commentary. If you get a message saying someone “liked” your post or “thanked you,” you are likely to feel good and in that way “reengage” with the application. In addition, some social commentary can be used as a reputation base.
- #65: Key Observations:Sharing milestones – when they are meaningful, can create a viral effect and re-engage dormant users.
- #67: Key Observations:Social games are often played asynchronously: that is, when only one of the players is logged it at a time. Having a believable social exchange can be challenging – and designers have found ways to overcome that by using buttons such as “thank you” or “compliment.”Structured social commentary allows players to exchange only the type of dialogue that is desirable for the community – preventing spam and aggressive commentary. If you get a message saying someone “liked” your post or “thanked you,” you are likely to feel good and in that way “reengage” with the application. In addition, some social commentary can be used as a reputation base.
- #68: Key Observations:Sharing milestones – when they are meaningful, can create a viral effect and re-engage dormant users.
- #77: Key Observations:Progress meters as a tutorial tool: Complex applications can use progress meters to teach "what's next" and motivate users to move to the next stage of the application.Visualizing milestones can be motivational
- #80: Key Observations:Progress meters as a tutorial tool: Complex applications can use progress meters to teach "what's next" and motivate users to move to the next stage of the application.Visualizing milestones can be motivational and create anticipation