Game on: 16 design patterns for user engagement
•
98 likes•10,436 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.
Recommended
Recommended
More Related Content
What's hot
What's hot (15)
Viewers also liked
Viewers also liked (18)
Similar to Game on: 16 design patterns for user engagement
Similar to Game on: 16 design patterns for user engagement (20)
Recently uploaded
Recently uploaded (20)
Game on: 16 design patterns for user engagement
- 1. GAME ON: 16 DESIGN PATTERNSFOR USER ENGAGEMENT Using game mechanics to create engagement in social web applications. NadyaDirekova, @nadya_d Senior UX Designer, Game Mechanic SXSW March 14th 2011
- 2. ABOUT ME: ONE FOOT IN GAMES, ONE FOOT IN UX M.I.T. Razorfish Leapfrog Backbone Ent. Google / Hotpot
- 3. GAME MECHANICS RIGHT NOW
- 4. What are game mechanics? Design patterns that promote play and play-like engagement. GAME MECHANICS
- 5. What are game mechanics? Design patterns that promote play and play-like engagement. GAME MECHANICS Repeatable solutions to design problem. DESIGN PATTERNS
- 6. What are game mechanics? Design patterns that promote play and play-like engagement. GAME MECHANICS Repeatable solutions to design problem. DESIGN PATTERNS
- 7. What are game mechanics? Design patterns that promote play and play-like engagement GAME MECHANICS Repeatable solutions to design problem. DESIGN PATTERNS
- 8. What are game mechanics? Design patterns that promote play and play-like engagement GAME MECHANICS Repeatable solutions to design problem. DESIGN PATTERNS
- 9. GAME MECHANICS – A BROAD ARRAY OF APPLICATIONS Spending on Social Media Marketing and Gamification Budgeting Location Sharing Test Prep Recycling Grockit.com Four Square Recycle bank.com Mint.com Chores Exercise Task Management Even Brushing Teeth… Nike Plus Epic Win Chore Wars
- 10. A BROAD ARRAY OF THINKERS Spending on Social Media Marketing and Gamification
- 11. GAMIFICATION IS THE NEW BLACK Spending on Social Media Marketing and Gamification
- 12. STATS AROUND GAME MECHANICS What are companies looking to achieve with game mechanics? Source: M2 Research
- 13. STATS AROUND GAME MECHANICS What is the current breakdown of companies on the gamification adoption curve? Source: M2 Research
- 14. PROJECTED MARKETING SPENDING ON GAME MECHANICS Spending on Social Media Marketing and Gamification Source: M2 Research
- 15. GAMIFICATION FATIGUE Spending 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 PATTERNS THAT CREATE GAME-LIKE USER ENGAGEMENT.
- 20. LET’S TALK ABOUT... WE’LL REVIEW 16 DESIGN PATTERNS THAT 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 PATTERNS THAT 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 PATTERNS THAT CREATE GAME-LIKE USER ENGAGEMENT. WE’LL DISCUSS HOW THEY APPLY TO 3 ASPECTS OF THE USER JOURNEY: COME AND TRY IT BRING FRIENDS
- 23. LET’S TALK ABOUT... WE’LL REVIEW 16 DESIGN PATTERNS THAT CREATE GAME-LIKE USER ENGAGEMENT. WE’LL DISCUSS HOW THEY APPLY TO 3 ASPECTS OF THE USER JOURNEY: COME AND TRY IT BRING FRIENDS COME BACK
- 25. Visual cues
- 26. Tutorials
- 28. Reward schedule
- 30. DESIGN PATTERN Visual story telling – instead of long explanations RUB RABBITS PRE-GAME SCREEN GAME EXAMPLE
- 31. DESIGN PATTERN Visual story telling – instead of long explanations GROUP-ON: HOW IT WORKS ZIP CAR: EXPLAIN THE PROPOSITION IN PICTURES
- 32. DESIGN PATTERN 1.2 VISUAL CUES
- 33. DESIGN PATTERN VISUAL CLUEs CITY OF IMMORTALS GAME EXAMPLE
- 34. DESIGN PATTERN Visual CLUES: example FACEBOOK PLACES: PLAYING “FLASHLIGHT”
- 35. DESIGN PATTERN Visual CLUES: example PANDORA: HIGHLIGHT FEATURES THE USER MIGHT MISS OTHERWISE
- 36. DESIGN PATTERN 1.3 TUTORIAL / ONBOArDING ON RAILS
- 37. DESIGN PATTERN TUTORIAL / ONBoArDING ON RAILS FRONTIERVILLE GAME EXAMPLE
- 38. DESIGN PATTERN TUTORIAL / ONBOARDING ON RAILS RIBBON HERO GET GLUE: EXPERIENCE THE APP DURING THE ON-BOARDING
- 39. DESIGN PATTERN 1.4 responsive objects
- 40. DESIGN PATTERN responsive objects GAME EXAMPLE
- 41. DESIGN PATTERN responsive objects KNOW THAT YOU’RE DOING OK LOGGING IN WITH MINT.COM HOVER ON A TWEET TO REVEAL NEW OPTIONS
- 42. DESIGN PATTERN 1.5 reward schedule
- 43. DESIGN PATTERN Reward schedule CITYVILLE 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 beginner SHOPKICK IMVU: POINTS FOR TRYING NEW THINGS FOUR SQUARE NEWBIE BADGE
- 45. DESIGN PATTERN Challenge the expert PLANTS VS. ZOMBIE: SOME ACHIEVEMENTS SEEM ALMOST IMPOSSIBLE TO UNLOCK FOURSQAURE: SOME ACHIEVEMENTS ARE HARDER TO UNLOCK
- 46. DESIGN PATTERN 1.6 DISincentives
- 47. DESIGN PATTERN DISincentives PACMAN – YOU GOT EATEN BY GHOSTS! GAME EXAMPLE
- 48. DESIGN PATTERN DISincentives STICKK HELPS YOU STICK TO GOALS USING NEGATIVE INCENTIVES
- 49. DESIGN PATTERN DISIncentives GROCKIT : A/B TESTING SHOWS THAT NEGATIVE INCENTIVES HURT USER ENGAGAMENT
- 51. Visual cues
- 52. Tutorials
- 54. Reward schedule
- 57. Social feedback
- 58. Reputation
- 61. DESIGN PATTERN gated TRIAL – FORM A TEAM TO START DODGE-BALL – YOU NEED A TEAM TO START GAME 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 START OLD TWITTER SIGN UP – 3 SCREENS NEW TWITTER SIGN UP – 4 SCREENS (NOW REDESIGNED)
- 65. DESIGN PATTERN GATED TRIAL – FORM A TEAM TO START NEW TWITTER SIGN UP
- 66. DESIGN PATTERN 2.2 social feedback
- 67. DESIGN PATTERN social FEEDBACk CITYVILLE – ASYNCHRONOUS COMMUNICATION BUTTONS GAME EXAMPLE
- 68. DESIGN PATTERN SOCIAL FEEDBACK EXAMPLE – thank you buttons AADVARK “THANK YOU NOTES” QUORA “THANK YOU NOTES”
- 69. DESIGN PATTERN Social feedback EXAMPLE - COMPLIMENTS YELP: SELECT A COMPLIMENT AND WRITE A MESSAGE
- 70. DESIGN PATTERN Social feedback EXAMPLE – VOTING, LIKES, RETWEETS QUORA VOTING FACEBOOK LIKES TWEET AND RETWEET
- 71. Design pattern 2.3REPUTATION
- 72. DESIGN PATTERN REPUTATION SIMPLE REPUTATION SCORE IN CITYVILLE GAME EXAMPLE
- 73. DESIGN PATTERN REPUTATION EBAY REPUTAION = MORE TRUST ONE UP ME FORUM REPUTAION = MORE VOTING POWER
- 74. Design pattern 2.3sharing achievements
- 75. DESIGN PATTERN Sharing achievements XBOX LIVE GAME EXAMPLE
- 76. DESIGN PATTERN Sharing ACHIEVEMENTS FOUR SQAURE BADGE UNLOCKED!
- 77. DESIGN PATTERN 2.4 MISCHIEF
- 78. DESIGN PATTERN MISCHIEF FARMVILLE – TP SOMEONE’S FARM GAME EXAMPLE
- 79. DESIGN PATTERN MISCHIEf RE-DIRECT “CHATROULETTE”
- 81. Social feedback
- 82. Reputation
- 86. Content unlocks
- 87. Quest queue
- 88. Time pressure
- 90. DESIGN PATTERN Advanced user paths / roles SKI SLOPES: DIFFERENT PATHS ON THE SAME MOUNTAIN
- 91. DESIGN PATTERN Advanced user paths / roles YELP FOR THE REGULAR USERS YELP THE ELITE SQUAD – USEFUL , FUNNY AND COOL
- 92. DESIGN PATTERN Advanced user paths / roles FOURSQUARE MAYORSHIP
- 93. DESIGN PATTERN 3.2 content unlocks
- 94. DESIGN PATTERN Content unlocks ANGRY BIRDS GAME EXAMPLE
- 95. DESIGN PATTERN Content unlocks DAILY UNLOCKS IN THE UNIFORM PROJECT
- 96. DESIGN PATTERN 3.3 quest queue
- 97. DESIGN PATTERN QUEST QUEuE ZOMBIE FARM GAME EXAMPLE
- 98. DESIGN PATTERN QUEST QUEuE: example EPIC WIN – SELF DESIGNED QUEST QUEUE LINKED IN QUEST QUEUE
- 99. DESIGN PATTERN 3.4 time pressure
- 100. DESIGN PATTERN Time pressure CHESS TIMER GAME EXAMPLE
- 101. DESIGN PATTERN TIME PRESSURE SWOOPO EBAY BIDDING
- 102. DESIGN PATTERN 3.5 SCARCITY
- 103. DESIGN PATTERN SCARCITY VIP FISH IN ZYNGA GAME EXAMPLE
- 104. DESIGN PATTERN Scarcity: example THE MILLION DOLLAR HOMEPAGE
- 105. DESIGN PATTERN Scarcity = SPECIALNESS HOTPOT “BEST EVER”
- 107. Content unlocks
- 108. Quest queue
- 109. Time pressure
- 111. METRICS IT’S MEASURABLE! BE PREAPED TO MEASURE AND ITERATE
- 112. METRICS IT’S MEASURABLE! BE PREPARED TO MEASURE AND ITERATE
- 113. METRICS IT’S MEASURABLE! BE PREPARED TO MEASURE AND ITERATE EACH PATTERN AND STAGE HAS UNIQUE METRICS
- 114. BUNCHBALL DASHBOARD BE VERY CLEAR: WHAT’S THE USER PROPOSITION
- 115. BUNCHBALL DASHBOARD BE VERY CLEAR: WHAT’S THE USER PROPOSITION
- 116. METRICS EXAMPLE +
- 117. IN SUMMARY > Game mechanics
- 119. Content Unlocks
- 120. Quest queue
- 121. Scarcity
- 122. Time pressure
- 124. Reputation
- 125. Sharing milestones
- 126. Mischief
- 127. Visual story telling
- 128. Visual cues
- 129. Tutorials
- 130. Ultra-responsiveness
- 131. Reward schedule
- 134. CONTACT NADYA DIREKOVA nadya.direkova@gmail.com @nadya_d
Editor's Notes
- The real challenge is how to tap into it properly. And that leads us to…
- 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.
- Key Observations:Game Tutorials often provide full hand-holding – to make sure the player learns the key skills needed without any confusion.
- Key Observations:Game Tutorials often provide full hand-holding – to make sure the player learns the key skills needed without any confusion.
- Key Observations:You can interact with everything in a game world – which feels fun and rewards exploration.
- 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.
- 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.
- 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…
- Key Observations:Many games require two or more players in order to happen – web and mobile apps are starting to do the same.
- 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.
- LINK TO CREATE REPUTATION
- 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.
- 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.
- Key Observations:Sharing milestones – when they are meaningful, can create a viral effect and re-engage dormant users.
- 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.
- Key Observations:Sharing milestones – when they are meaningful, can create a viral effect and re-engage dormant users.
- 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
- 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