What's in a game? How can web interaction designers apply game design technique to drive engagement in their products? This talk was presented at IXDA'09

1. Saturday, March 14th, 2009
WHAT’S IN A GAME?
Using game design
questions and techniques
to create
engagement
in web applications.
Nadya Direkova
Screenshot from “Cloud,” USC Game

2. Page 1
ABOUT RAZORFISH
2,300+ professionals with an average of 10+ years experience
70 active clients across a wide range of industries
Our business:
Web media ($520MM+)
Paid search ($150MM+)
Web development ($275MM+)
Deep technology experience with content management, portals, e-commerce,
enterprise solutions and business intelligence
11 Domestic offices:
Atlanta New York Los Angeles
Austin Philadelphia Seattle
Boston Portland, OR Ft. Lauderdale
Chicago San Francisco
9 International offices:
London (DNA)Paris (Duke) Frankfurt, Berlin (Neue Digitale)
Hong Kong (e-Crusade) Sydney (Amnesia) Tokyo (Dentsu)
Shanghai (e-Crusade) Madrid (WYSIWYG*)
NADYA DIREKOVA

3. Page 2
OUR CLIENTS
NADYA DIREKOVA

4. Page 3
ABOUT ME
RAZORFISH
BACKBONE
MIT LEAPFROG
NADYA DIREKOVA

5. Page 4
AGENDA
INTRODUCTIONS
ENGAGEMENT: THE COMMON GOAL OF GAME AND WEB DESIGN
QUESTIONS THAT GAME DESIGNERS ASK TO CREATE ENGAGEMENT
GAME DYNAMICS IN WEB APPLICATIONS
PRESENTING THE USER EXPERIENCE AS A GAME
NADYA DIREKOVA

6. Page 5
WHAT CONNECTS THE DESIGN WORLD OF GAMES AND WEB?
WEB
ELECTRONIC
INTERACTION
GAME DESIGN
DESIGN
NADYA DIREKOVA

7. Page 6
WHAT CONNECTS THE DESIGN WORLD OF GAMES AND WEB?
DESIGNING FOR ENGAGEMENT
(on various kinds of screens)
WEB
ELECTRONIC
GAME DESIGN INTERACTION
DESIGN
NADYA DIREKOVA

8. Page 7
WHAT CONNECTS THE DESIGN WORLD OF GAMES AND WEB?
GAME-LIKE
Your users are gamers, too!
ENGAGEMENT CAN BE
A COMPETIVE
ADVANTAGE FOR WEB
WEB
GAME DESIGN
DESIGN
INTERACTION
DESIGN
NADYA DIREKOVA Screenshot from “Rub Rabbits,” SEGA

9. Page 8
WHAT CONNECTS THE DESIGN WORLD OF GAMES AND WEB?
GAME-LIKE
Your users are gamers, too!
ENGAGEMENT CAN BE
A COMPETIVE
ADVANTAGE FOR WEB
WEB
GAME DESIGN
DESIGN
INTERACTION
And these users are accustomed to getting
DESIGN
some of their needs met in games.
NADYA DIREKOVA Screenshot from “Rub Rabbits,” SEGA

10. Page 9
WHAT CONNECTS THE DESIGN WORLD OF GAMES AND WEB?
IT’S ALL ABOUT
CREATING ENGAGING
“User, come with me, this
EXPERIENCES design will rock your world!”
WEB
GAME DESIGN
INTERACTION
DESIGN
9
NADYA DIREKOVA Screenshot from “Rub Rabbits,” SEGA

11. Page 10
WHAT CONNECTS THE DESIGN WORLD OF GAMES AND WEB?
IT’S ALL ABOUT
CREATING ENGAGING
“User, come with me, this “User, please stay. Forever!”
EXPERIENCES design will rock your world!”
WEB
GAME DESIGN
INTERACTION
DESIGN
10
NADYA DIREKOVA Screenshot from “Rub Rabbits,” SEGA

12. Page 11
ENGAGEMENT: THE COMMON GOAL OF GAME AND WEB DESIGN
QUESTIONS FROM THE WORLD OF A GAME DESIGNER
GAME DYNAMICS IN WEB APPLICATIONS
PRESENT THE USER EXPERIENCE AS A GAME
NADYA DIREKOVA

13. Page 12
DEFINING GAME CONCEPTS VIA THE GAME DESIGN DOCUMENT
GDD: Game Design Document
The GDD, or game design
document is a key
deliverable for a game
designer. The GDD is a living
document and a platform for
asking questions relevant to
the project at hand.
NADYA DIREKOVA

14. Page 13
THE GAME DESIGN DOCUMENT AND TEAM
GDD: Game Design Document
The GDD, or game
The GDD informs the
design document is a
development team
key deliverable for a
game designer. The
GDD is a living
document and a
platform for asking
questions relevant to
the project at hand.
• The document is used by the team to understand the
game world and to start crafting assets. It’s
constantly modified. In fact, the end game often
looks nothing like the one described in the GDD.
• Most game development teams use GDDs, however,
the document is different for each studio, genre and
project.
NADYA DIREKOVA

15. Page 14
GAME DESIGN CONCEPTS AND QUESTIONS
The game designers need to answer a series of questions to
define the game concept.
WHAT IS THE GAME
GENRE, PLATFORM AND
AUDIENCE?
What’s the genre:
puzzle, strategy, sports, etc? Is the game
for casual or hardcore players or both?
Mobile, handheld platform or console?
Images: X BOX 360, Nintendo DS, iPhone Scrabble
NADYA DIREKOVA

16. Page 15
GAME DESIGN CONCEPTS AND QUESTIONS
Game designers balance a series of systems and
components to create a believable and engaging world.
WHAT IS THE GAME GENRE, PLATFORM
AND AUDIENCE?
GAME AESTHETICS
What is the look at feel of the game?
Where does the action take place? Is the
world 2D or 3D?
Images: Mario and World of Warcarft
NADYA DIREKOVA

17. Page 16
GAME DESIGN CONCEPTS AND QUESTIONS
Game designers balance a series of systems and
components to create a believable and engaging world.
WHAT IS THE GAME GENRE, PLATFORM
AND AUDIENCE?
GAME AESTHETICS
SINGLE VS. MULTIPLAYER MODE
VS. BOTH?
Does the player act alone, play with
others or both?
Images: Mii Avatars for Wii
NADYA DIREKOVA

18. Page 17
GAME DESIGN CONCEPTS AND QUESTIONS
Game designers balance a series of systems and
components to create a believable and engaging world.
WHAT IS THE GAME GENRE, PLATFORM
AND AUDIENCE?
GAME AESTHETICS
SINGLE VS. MULTIPLAYER MODE VS.
BOTH?
AVATAR VS. NON PLAYER
CHARACTERS?
Is the game 1st person? Is the player
embodied physically in the world? Who
else is in the game?
Images: Animal Crossing Characters
NADYA DIREKOVA

19. Page 18
GAME DESIGN CONCEPTS AND QUESTIONS
Game designers balance a series of systems and
components to create a believable and engaging world.
WHAT IS THE GAME GENRE, PLATFORM
AND AUDIENCE?
GAME AESTHETICS
SINGLE VS. MULTIPLAYER MODE VS.
BOTH?
AVATAR VS. NON PLAYER CHARACTERS?
MECHANICS: WHAT VERBS
DEFINE THE GAME? WHAT ARE
THE CONTROLS?
What does the player control? What can
the player do?
Images: PacMan
NADYA DIREKOVA

20. Page 19
GAME DESIGN CONCEPTS AND QUESTIONS
Game designers balance a series of systems and
components to create a believable and engaging world.
REWARDS SYSTEMS
WHAT IS THE GAME GENRE, PLATFORM
AND AUDIENCE? How is the user rewarded over time?
GAME AESTHETICS
SINGLE VS. MULTIPLAYER MODE VS.
BOTH?
AVATAR VS. NON PLAYER CHARACTERS?
MECHANICS: WHAT VERBS DEFINE THE
GAME?
WHAT ARE THE CONTROLS?
Image: Mario
NADYA DIREKOVA

21. Page 20
GAME DESIGN CONCEPTS AND QUESTIONS
Game designers balance a series of systems and
components to create a believable and engaging world.
REWARDS SYSTEMS
WHAT IS THE GAME GENRE, PLATFORM
AND AUDIENCE?
PROGRESSING IN THE GAME:
STATS, MISSIONS, LEVELS
GAME AESTHETICS
How does the player track their progress
SINGLE VS. MULTIPLAYER MODE VS. through the game?
BOTH?
AVATAR VS. NON PLAYER CHARACTERS?
MECHANICS: WHAT VERBS DEFINE THE
GAME?
WHAT ARE THE CONTROLS?
Image: Brain Age
NADYA DIREKOVA

22. Page 21
GAME DESIGN CONCEPTS AND QUESTIONS
Game designers balance a series of systems and
components to create a believable and engaging world.
REWARDS SYSTEMS?
WHAT IS THE GAME GENRE, PLATFORM
AND AUDIENCE?
PROGRESSING IN THE GAME:
STATS, LEVELS AND MISSIONS?
GAME AESTHETICS
RESOURCES, ECONOMY AND
SINGLE VS. MULTIPLAYER MODE VS.
INVENTORY?
BOTH?
Does the world have a currency? What
AVATAR VS. NON PLAYER CHARACTERS? are the values of virtual goods?
MECHANICS: WHAT VERBS DEFINE THE
GAME?
WHAT ARE THE CONTROLS?
Image: SIMS
NADYA DIREKOVA

23. Page 22
GAME DESIGN CONCEPTS AND QUESTIONS
Game designers balance a series of systems and
components to create a believable and engaging world.
REWARDS SYSTEMS
WHAT IS THE GAME GENRE, PLATFORM
AND AUDIENCE?
RESOURCES, ECONOMY AND
INVENTORY
GAME AESTHETICS
PROGRESSING IN THE GAME:
SINGLE VS. MULTIPLAYER MODE VS. AND MANY MORE….
STATS, LEVELS AND MISSIONS
BOTH?
CUSTOMIZATION
AVATAR VS. NON PLAYER CHARACTERS?
How does the player refine and design
their avatar, habitat and story?
MECHANICS: WHAT VERBS DEFINE THE
GAME?
WHAT ARE THE CONTROLS?
Image: Habbo Hotel
NADYA DIREKOVA

24. Page 23
GAME DESIGN CONCEPTS AND QUESTIONS
Game designers balance a series of systems and
components to create a believable and engaging world.
REWARDS SYSTEMS
WHAT IS THE GAME GENRE, PLATFORM
AND AUDIENCE?
RESOURCES, ECONOMY AND
INVENTORY
GAME AESTHETICS
PROGRESSING IN THE GAME:
SINGLE VS. MULTIPLAYER MODE VS.
STATS, LEVELS AND MISSIONS
BOTH?
CUSTOMIZATION
AVATAR VS. NON PLAYER CHARACTERS?
TUTORIAL, HELP SYSTEMS AND
MECHANICS: WHAT VERBS DEFINE THE
LEARNING CURVE
GAME?
How does the player learn the rules and
new techniques introduced over time?
WHAT ARE THE CONTROLS?
Image: SIM Tutorial
NADYA DIREKOVA

25. Page 24
GAME DESIGN CONCEPTS AND QUESTIONS
Game designers balance a series of systems and
components to create a believable and engaging world.
REWARDS SYSTEMS
WHAT IS THE GAME GENRE, PLATFORM
AND AUDIENCE?
RESOURCES, ECONOMY AND
INVENTORY
GAME AESTHETICS
PROGRESSING IN THE GAME:
SINGLE VS. MULTIPLAYER MODE VS. AND MANY MORE….
STATS, LEVELS AND MISSIONS
BOTH?
CUSTOMIZATION
AVATAR VS. NON PLAYER CHARACTERS?
TUTORIAL, HELP SYSTEMS AND
MECHANICS: WHAT VERBS DEFINE THE
LEARNING CURVE
GAME?
WHAT ARE THE CONTROLS?
NADYA DIREKOVA

26. Page 25
NEXT STEPS: FOCUS ON A FEW QUESTIONS AS THEY RELATE TO THE WEB
Game designers balance a series of systems and
components to create a believable and engaging world.
REWARDS SYSTEMS
WHAT IS THE GAME GENRE, PLATFORM
How is the user rewarded over time?
AND AUDIENCE?
RESOURCES, ECONOMY AND
GAME AESTHETICS
INVENTORY
What is the look at feel of the game?
Where does the action take place? Is the
PROGRESSING IN THE GAME:
world 2D or 3D?
STATS, LEVELS AND MISSIONS
How does the player track their progress
SINGLE VS. MULTIPLAYER MODE VS.
through the game?
BOTH?
CUSTOMIZATION
AVATAR VS. NON PLAYER CHARACTERS?
TUTORIAL, HELP SYSTEM, LEARNING
MECHANICS: WHAT VERBS DEFINE THE
CURVE
GAME?
WHAT ARE THE CONTROLS?
NADYA DIREKOVA

27. Page 26
ENGAGEMENT: THE COMMON GOAL OF GAME AND WEB
DESIGN
QUESTIONS FROM THE WORLD OF A GAME DESIGNER
GAME DYNAMICS IN WEB APPLICATIONS
THINKING OF YOUR PRODUCT AS A GAME
NADYA DIREKOVA

28. Page 27
OVERVIEW
WEB APPLICATIONS USING GAME DYNAMICS
Web apps. employing
game strategies
Some game elements, such as quot;enemy
characters,quot; might hardly ever apply to web
design as we know it. Others, such as
immersive 3D worlds and 3D avatars have
been slow to become mainstream
conventions. “User, don’t you go away now!”
“User, come with me, my design will
change your world!”
However, game elements already drive some
of the most successful web applications today. PROGRESSION
REWARD SYSTEMS
STAT SYSTEMS
GAME AESTHETICS
NADYA DIREKOVA

29. Page 28
GAME TREND
REWARD SYSTEMS
Key Observations:
• Assign points to desired user behavior: Points can
incentivize people to write more reviews or do chores.
• Visible rewards levels: when users understand the reward
structure, such as the black-belt system in Mahalo, they
have something to strive for.
HANDIPOINTS TRACKS POINTS FOR SHORES YELP’S REVIEWER AWARD SYSTEM MAHALO’S BLACK BELT SYSTEM
www.handipoints.com www.yelp.com http://www.mahalo.com
A mechanical level picks up the shoe to bring it closer to Yelpers track the reviews and compliments they receive. The human search service Mahalo tracks points and awards black
you, creating a dynamic intro. belts to users who answer questions well. In return, black belt
users can charge higher fees for their services on the site.
NADYA DIREKOVA

30. Page 29
GAME TREND
STATS VISIBLE TO THE PLAYER
Key Observations:
• Assigning a dynamic numerical value to a behavior has the
potential to change that behavior.
FACEBOOK FRIEND STATS HR BLOCK STATS
MINT.COM INSTANT FINANCIAL FEEDBACK
www.mint.com
Mint helps measure your financial stats. It loads all of the user’s
financial statements to create a instant dashboard for tracking
spending, saving and investing over time.
www.facebook.com
www.hrblockcom
Facebook introduces a new popularity measure:
The end goal , your “score” on Federal and State Taxes , are visualized for
how many (hundreds of) friends do you have?
you at the top right corner.
NADYA DIREKOVA

31. Page 30
GAME TREND
IN-GAME CURRENCY
Key Observations:
• Currency does not have to be monetary.
• Socail objects such as friends can be currency as well.
SERIOSITY ETSY’S FAVORITES
FRIENDS FOR SALE
http://www..etsy.com
www.seriosity.com http://www..facebook.com
Buy, sell and trade your friends. Evil or clever?
Helping work places manage email overload by assigning a Buy, sell and trade your friends. Evil or clever?
currency value , Serios , to all emails you send. Everyone gets 300
Serios to spend each day, and messages are prioritized based on
their Serio valuea.
NADYA DIREKOVA

32. Page 31
GAME TREND
PROGRESSION
Key Observations:
• Progress meters as a tutorial tool: Complex applications can use progress meters to teach quot;what's nextquot; and
motivate users to move to the next stage of the application.
• Visualizing milestones can be motivational
LINKED IN INTEGRATED TUTORIAL FEEDBACK WEIGHT WATCHER’S POINT AND WEIGHT TRACKERS NIKE PLUS
http://nikeplus.nike.com
Visualize your individual runs and progress over time.
www.linkedin.com
LinkeIn meter tracks profile completion and introduces a gated
tutorial that makes profile creation simple and less tedious. http://www.weightwatchers.com
The Weight Tracker breaks down the weight loss journey into
milestones: first 5 pounds lost, etc. Users records their weight weekly
and get encouraging or celebratory comments.
NADYA DIREKOVA

33. Page 32
GAME TREND
GAME AESTHETICS
Key Observations:
• Games make great product demos: Shopping, like games, is very experiential.
• Surprise and curiosity: Users are left to their own devices to see what might be revealed
CARNIVAL FUNSHIP ISLAND NINE WEST / NEW BALANCE SHOE DEMO WESTIN EXPERIENCES
www.ninewest.com http://www.starwoodhotels.com
http://www.funshipisland.com/#deck
A mechanical level picks up the shoe to bring it closer to you, This interactive demo lets you play with fractals and click to make
creating a dynamic intro. flowers bloom as you learn how Westin experiences regale all of your
senses.
NADYA DIREKOVA

34. Page 33
ENGAGEMENT: THE COMMON GOAL OF GAME AND WEB DESIGN
QUESTIONS FROM THE WORLD OF A GAME DESIGNER
GAME DYNAMICS IN WEB APPLICATIONS
PRESENT THE USER EXPERIENCE AS A GAME
NADYA DIREKOVA

35. Page 34
TRENDS
USING ADVERGAMES TO DELIVER A MESSAGE
Key Observations:
• The gameplay delivers a new experience of the brand.
• Simple controls create instant engagement: Advergames strive appeal to a broad audience, including
non-gamers. To engage these users, advergames often simplify the controls of mainstream games.
GOT MILK? GET THE GLASS GAME PAPER PLANE ADVERGAME LIPTON TEA BRAIN TRAIN
www.gettheglass.com http://flightsimx.archive.amnesia.com.au/ www.facebook.com
Incorporates casual gaming into a “central stage” interface. The Brain Train puzzle game presents tea in a new light: a
An example of a fun and easy advergame promoting
Microsoft’s flight simulator.
Everything flows seamlessly within main performance area. substance that makes you focused and alert, just what you need
for solving a brain teaser.
NADYA DIREKOVA

36. Page 35
GAME TREND
ADOPTING A GAME AS THE USER EXPERIENCE
Key Observations:
• Progress meters: Complex applications can use progress meters to teach quot;what's nextquot; and motivate users to
move to the next stage of the application.
• Goals and milestones: Introducing milestones
GOOGLE IMAGE LABELER: COMPETITIVE TAGGING FOLD.IT
www.google.com
Google Image Labeler allows people to compete in tagging
relevant keywords to an image.
http://www.fold.it
Users are invited to play a puzzle game; as they solve the puzzles,
they help identify protein chains.
NADYA DIREKOVA

37. Page 36
IN SUMMARY
CHEAT SHEET
• C h e c k o u t a G D D . A s k q u e s t i o n s l i k e a g a m e d e s i g n e r.
• See if you can design for:
Re wa rd s .
o
U s e r stat s .
o
P ro g re s s i o n .
o
U n i q u e c u r re n c y.
o
P u t t h e ex p e r i e n c e i n a ga m e s h e l l .
o
NADYA DIREKOVA

38. Page 37
NADYA DIREKOVA

39. Page 38
Other Authors on Games and Interaction Design:
• Daniel Cook
“How to design a princess saving application”
• Dan Saffer
“Gaming the web”
• Mia Northrop
“Your new excuse to get an Xbox: how UX professionals can learn from video game design”
• Amy Jo Kim
“Game mechanics for interaction design”
• Kars Alfrink
“Play in social and tangible interactions”
• Nick Fortungo
“The Play of Persuasion”
• Jane McGonigal
“Alternate Realities - A Game Designer's Perspective on the Future of Happinessquot;
Game Art Credits
NADYA DIREKOVA

40. Page 39
CONTACT
NADYA DIREKOVA
nadya.direkova@razorfish.com
http://twitter.com/nadya_d
FEED
http://feed.razorfish.com
NADYA DIREKOVA