Your SlideShare is downloading. ×
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Game on: 16 design patterns for user engagement
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Game on: 16 design patterns for user engagement

15,202

Published on

Published in: Technology, Business
5 Comments
71 Likes
Statistics
Notes
No Downloads
Views
Total Views
15,202
On Slideshare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
2
Comments
5
Likes
71
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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
  • Transcript

    • 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
    • 24. “COME AND TRY IT” - Designing for 1st time users
    • DESIGN PATTERN
      1.1 VISUAL STORYTELLING
    • 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
    • 50. summary
      “come and try it”
    • DESIGN PATtERns for social engagement
      “Bring your friends”
    • 56. “BRING FRIENDS” - Designing for community
    • DESIGN PATTERN
      2.1 gated trial – form a team
    • 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”
    • 80. in summary
      social
    • DESIGN PATTERNs for repeat engagement
      “player, come back”
    • 85. “COME BACK” - Designing for return visits
    • DESIGN PATTERN
      3.1 advanced user paths
    • 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”
    • 106. in summary
      return visitors
    • METRICS
    • 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
    • 118. IN SUMMARY
      A growing list of patterns…
      COME AND TRY IT
      BRING FRIENDS
      COME BACK
      form a team
    • CASE STUDIES
      Thanks to the following companies for
      interviews, best practices and feedback:
    • 133.
    • 134. CONTACT
      NADYA DIREKOVA
      nadya.direkova@gmail.com
      @nadya_d

    ×