• Save
Game on: 16 design patterns for user engagement
Upcoming SlideShare
Loading in...5
×
 

Game on: 16 design patterns for user engagement

on

  • 14,849 views

 

Statistics

Views

Total Views
14,849
Views on SlideShare
10,346
Embed Views
4,503

Actions

Likes
62
Downloads
2
Comments
5

52 Embeds 4,503

http://blog.kera.io 1313
http://www.socialbeta.cn 1040
http://rethinkcanada.tumblr.com 383
http://www.socialbeta.com 264
http://pe.ma 245
http://www.hksilicon.com 189
http://develop.alldayeveryday.com 126
http://michaelbatistich.com 120
http://testkera.tumblr.com 119
http://storify.com 108
http://www.linkedin.com 100
http://www.scoop.it 83
https://twitter.com 61
http://www.chuanboxue.cn 49
http://xianguo.com 42
http://www.bokee.net 41
http://feeds.feedburner.com 38
https://www.linkedin.com 25
http://www.google.com 23
http://nowork.fm 16
http://search.yahoo.com 14
http://www.soso.com 12
http://yandex.ru 10
http://michaelbatistich.tumblr.com 10
http://www.bing.com 9
http://dendimedia.blogspot.com 7
http://paper.li 7
http://posterous.com 6
http://reader.youdao.com 5
http://a0.twimg.com 5
http://www.zhuaxia.com 3
https://mail.google.com 3
http://zhuaxia.com 3
http://twitter.com 2
http://translate.googleusercontent.com 2
http://webcache.googleusercontent.com 2
http://old.xianguo.com 2
http://pgsnws.blog.bokee.net 2
http://social.weizhuli.com 1
http://p.rethinkcanada.ca 1
https://abs.twimg.com 1
http://socialbeta.cn 1
http://control.blog.sina.com.cn 1
http://feed.feedsky.com 1
http://safe.tumblr.com 1
https://social.ucb.com 1
http://203.84.192.95 1
http://mailreader.163.com 1
https://mysites2010.ucb.com 1
http://us-w1.rockmelt.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

Game on: 16 design patterns for user engagement Game on: 16 design patterns for user engagement Presentation Transcript

  • 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
  • ABOUT ME: ONE FOOT IN GAMES, ONE FOOT IN UX
    M.I.T.
    Razorfish
    Leapfrog
    Backbone Ent.
    Google / Hotpot
  • GAME MECHANICS RIGHT NOW
  • What are game mechanics?
    Design patterns that promote
    play and play-like engagement.
    GAME MECHANICS
  • What are game mechanics?
    Design patterns that promote
    play and play-like engagement.
    GAME MECHANICS
    Repeatable
    solutions to design problem.
    DESIGN PATTERNS
  • What are game mechanics?
    Design patterns that promote
    play and play-like engagement.
    GAME MECHANICS
    Repeatable
    solutions to design problem.
    DESIGN PATTERNS
  • What are game mechanics?
    Design patterns that promote
    play and play-like engagement
    GAME MECHANICS
    Repeatable
    solutions to design problem.
    DESIGN PATTERNS
  • What are game mechanics?
    Design patterns that promote
    play and play-like engagement
    GAME MECHANICS
    Repeatable
    solutions to design problem.
    DESIGN PATTERNS
  • 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
  • A BROAD ARRAY OF THINKERS
    Spending on Social Media Marketing and Gamification
  • GAMIFICATION IS THE NEW BLACK
    Spending on Social Media Marketing and Gamification
  • STATS AROUND GAME MECHANICS
    What are companies looking to achieve with
    game mechanics?
    Source: M2 Research
  • STATS AROUND GAME MECHANICS
    What is the current breakdown of companies
    on the gamification adoption curve?
    Source: M2 Research
  • PROJECTED MARKETING SPENDING ON GAME MECHANICS
    Spending on Social Media Marketing and Gamification
    Source: M2 Research
  • GAMIFICATION FATIGUE
    Spending on Social Media Marketing and Gamification
  • This is powerful stuff
  • IT’S MORE THAN POINTS AND BADGES:
    >
    Game
    mechanics
  • GAME MECHANICS DESIGN PATTERNS
  • LET’S TALK ABOUT...
    WE’LL REVIEW
    16 DESIGN PATTERNS
    THAT CREATE GAME-LIKE USER ENGAGEMENT.
  • 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
  • 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
  • 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
  • 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
  • “COME AND TRY IT” - Designing for 1st time users
    • Visual story telling
    • Visual cues
    • Tutorials
    • Responsive objects
    • Reward schedule
    • Disincentives
  • DESIGN PATTERN
    1.1 VISUAL STORYTELLING
  • DESIGN PATTERN
    Visual story telling – instead of long explanations
    RUB RABBITS PRE-GAME SCREEN
    GAME EXAMPLE
  • DESIGN PATTERN
    Visual story telling – instead of long explanations
    GROUP-ON: HOW IT WORKS
    ZIP CAR: EXPLAIN THE PROPOSITION IN PICTURES
  • DESIGN PATTERN
    1.2 VISUAL CUES
  • DESIGN PATTERN
    VISUAL CLUEs
    CITY OF IMMORTALS
    GAME EXAMPLE
  • DESIGN PATTERN
    Visual CLUES: example
    FACEBOOK PLACES: PLAYING “FLASHLIGHT”
  • DESIGN PATTERN
    Visual CLUES: example
    PANDORA: HIGHLIGHT FEATURES THE USER MIGHT MISS OTHERWISE
  • DESIGN PATTERN
    1.3 TUTORIAL / ONBOArDING
    ON RAILS
  • DESIGN PATTERN
    TUTORIAL / ONBoArDING ON RAILS
    FRONTIERVILLE
    GAME EXAMPLE
  • DESIGN PATTERN
    TUTORIAL / ONBOARDING ON RAILS
    RIBBON HERO
    GET GLUE: EXPERIENCE THE APP DURING THE ON-BOARDING
  • DESIGN PATTERN
    1.4 responsive objects
  • DESIGN PATTERN
    responsive objects
    GAME EXAMPLE
  • DESIGN PATTERN
    responsive objects
    KNOW THAT YOU’RE DOING OK LOGGING IN WITH MINT.COM
    HOVER ON A TWEET TO REVEAL NEW OPTIONS
  • DESIGN PATTERN
    1.5 reward schedule
  • 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
  • DESIGN PATTERN
    Reward the beginner
    SHOPKICK
    IMVU: POINTS FOR TRYING NEW THINGS
    FOUR SQUARE NEWBIE BADGE
  • DESIGN PATTERN
    Challenge the expert
    PLANTS VS. ZOMBIE: SOME ACHIEVEMENTS
    SEEM ALMOST IMPOSSIBLE TO UNLOCK
    FOURSQAURE: SOME ACHIEVEMENTS ARE HARDER TO UNLOCK
  • DESIGN PATTERN
    1.6 DISincentives
  • DESIGN PATTERN
    DISincentives
    PACMAN – YOU GOT EATEN BY GHOSTS!
    GAME EXAMPLE
  • DESIGN PATTERN
    DISincentives
    STICKK HELPS YOU STICK TO GOALS USING NEGATIVE INCENTIVES
  • DESIGN PATTERN
    DISIncentives
    GROCKIT :
    A/B TESTING SHOWS THAT NEGATIVE INCENTIVES HURT USER ENGAGAMENT
  • summary
    “come and try it”
    • Visual story telling
    • Visual cues
    • Tutorials
    • Responsive objects
    • Reward schedule
    • Disincentives
  • DESIGN PATtERns for social engagement
    “Bring your friends”
  • “BRING FRIENDS” - Designing for community
    • Gated trial – form a team
    • Social feedback
    • Reputation
    • Sharing milestones
    • Mischief
  • DESIGN PATTERN
    2.1 gated trial – form a team
  • DESIGN PATTERN
    gated TRIAL – FORM A TEAM TO START
    DODGE-BALL – YOU NEED A TEAM TO START
    GAME EXAMPLE
  • DESIGN PATTERN
    Why is a team so important?
  • DESIGN PATTERN
    GATED TRIAL – FORM A TEAM TO START
  • DESIGN PATTERN
    GATED TRIAL – FORM A TEAM TO START
    OLD TWITTER SIGN UP – 3 SCREENS
    NEW TWITTER SIGN UP – 4 SCREENS (NOW REDESIGNED)
  • DESIGN PATTERN
    GATED TRIAL – FORM A TEAM TO START
    NEW TWITTER SIGN UP
  • DESIGN PATTERN
    2.2 social feedback
  • DESIGN PATTERN
    social FEEDBACk
    CITYVILLE – ASYNCHRONOUS COMMUNICATION BUTTONS
    GAME EXAMPLE
  • DESIGN PATTERN
    SOCIAL FEEDBACK EXAMPLE – thank you buttons
    AADVARK “THANK YOU NOTES”
    QUORA “THANK YOU NOTES”
  • DESIGN PATTERN
    Social feedback EXAMPLE - COMPLIMENTS
    YELP: SELECT A COMPLIMENT AND WRITE A MESSAGE
  • DESIGN PATTERN
    Social feedback EXAMPLE – VOTING, LIKES, RETWEETS
    QUORA VOTING
    FACEBOOK LIKES
    TWEET AND RETWEET
  • Design pattern
    2.3REPUTATION
  • DESIGN PATTERN
    REPUTATION
    SIMPLE REPUTATION SCORE IN CITYVILLE
    GAME EXAMPLE
  • DESIGN PATTERN
    REPUTATION
    EBAY REPUTAION = MORE TRUST
    ONE UP ME FORUM REPUTAION = MORE VOTING POWER
  • Design pattern
    2.3sharing achievements
  • DESIGN PATTERN
    Sharing achievements
    XBOX LIVE
    GAME EXAMPLE
  • DESIGN PATTERN
    Sharing ACHIEVEMENTS
    FOUR SQAURE BADGE UNLOCKED!
  • DESIGN PATTERN
    2.4 MISCHIEF
  • DESIGN PATTERN
    MISCHIEF
    FARMVILLE – TP SOMEONE’S FARM
    GAME EXAMPLE
  • DESIGN PATTERN
    MISCHIEf RE-DIRECT
    “CHATROULETTE”
  • in summary
    social
    • Gated trial – form a team
    • Social feedback
    • Reputation
    • Sharing milestones
    • Mischief
  • DESIGN PATTERNs for repeat engagement
    “player, come back”
  • “COME BACK” - Designing for return visits
    • Advanced user paths
    • Content unlocks
    • Quest queue
    • Time pressure
    • Scarcity
  • DESIGN PATTERN
    3.1 advanced user paths
  • DESIGN PATTERN
    Advanced user paths / roles
    SKI SLOPES: DIFFERENT PATHS ON THE SAME MOUNTAIN
  • DESIGN PATTERN
    Advanced user paths / roles
    YELP FOR THE REGULAR USERS
    YELP THE ELITE SQUAD – USEFUL , FUNNY AND COOL
  • DESIGN PATTERN
    Advanced user paths / roles
    FOURSQUARE MAYORSHIP
  • DESIGN PATTERN
    3.2 content unlocks
  • DESIGN PATTERN
    Content unlocks
    ANGRY BIRDS
    GAME EXAMPLE
  • DESIGN PATTERN
    Content unlocks
    DAILY UNLOCKS IN THE UNIFORM PROJECT
  • DESIGN PATTERN
    3.3 quest queue
  • DESIGN PATTERN
    QUEST QUEuE
    ZOMBIE FARM
    GAME EXAMPLE
  • DESIGN PATTERN
    QUEST QUEuE: example
    EPIC WIN – SELF DESIGNED QUEST QUEUE
    LINKED IN QUEST QUEUE
  • DESIGN PATTERN
    3.4 time pressure
  • DESIGN PATTERN
    Time pressure
    CHESS TIMER
    GAME EXAMPLE
  • DESIGN PATTERN
    TIME PRESSURE
    SWOOPO
    EBAY BIDDING
  • DESIGN PATTERN
    3.5 SCARCITY
  • DESIGN PATTERN
    SCARCITY
    VIP FISH IN ZYNGA
    GAME EXAMPLE
  • DESIGN PATTERN
    Scarcity: example
    THE MILLION DOLLAR
    HOMEPAGE
  • DESIGN PATTERN
    Scarcity = SPECIALNESS
    HOTPOT “BEST EVER”
  • in summary
    return visitors
    • Advanced user paths
    • Content unlocks
    • Quest queue
    • Time pressure
    • Scarcity
  • METRICS
  • METRICS
    IT’S MEASURABLE!
    BE PREAPED TO MEASURE AND ITERATE
  • METRICS
    IT’S MEASURABLE!
    BE PREPARED TO MEASURE AND ITERATE
  • METRICS
    IT’S MEASURABLE!
    BE PREPARED TO MEASURE AND ITERATE
    EACH PATTERN AND STAGE HAS UNIQUE METRICS
  • BUNCHBALL DASHBOARD
    BE VERY CLEAR: WHAT’S THE USER PROPOSITION
  • BUNCHBALL DASHBOARD
    BE VERY CLEAR: WHAT’S THE USER PROPOSITION
  • METRICS EXAMPLE
    +
  • IN SUMMARY
    >
    Game
    mechanics
  • IN SUMMARY
    A growing list of patterns…
    COME AND TRY IT
    BRING FRIENDS
    COME BACK
    • Advanced user paths
    • Content Unlocks
    • Quest queue
    • Scarcity
    • Time pressure
    • Gated trial –
    form a team
    • Social feedback
    • Reputation
    • Sharing milestones
    • Mischief
    • Visual story telling
    • Visual cues
    • Tutorials
    • Ultra-responsiveness
    • Reward schedule
    • Disincentives
  • CASE STUDIES
    Thanks to the following companies for
    interviews, best practices and feedback:
  • CONTACT
    NADYA DIREKOVA
    nadya.direkova@gmail.com
    @nadya_d