What's in a game? How can web interaction designers apply game design technique to drive engagement in their products?
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
Danial Shaikh, none at No where :)If anyone here is a game designer or game animator, then please E-Mail me at danialshaikh1@yahoo.com As Soon As Possible Please, you may get a job!!2 months ago
Are you sure you want to
HYCLEN2--Boa noite amigos, Venham conhecer nossos Servidores de Mu Online season 6 O Jogando.net/mu Mu Online Season 6 Fazemos sua Diversão com qualidade,há mais de 5 anos Servers ON 24 horas por dia. Vários Server esperando por você.Venha se divertir de verdade. Venham participar do 6° Megaultrasuperhiper Evento Castle Siege Sejam benvindos ao nosso Servidor. >>Kits DIAMOND,Com asas LVL 4,os kits mais fortes e raros do servidor ,venham conferir. >>Qual o seu Time ?? Tenha o seu Time do coração no Mu Online.Sets do seu Time preferido >>Confiram a nova versão do Shild mais usado no servidor o SHILD POWER v3. >> Lançamento do NOVO Kit Fusion V2,Kit hiper top e bonito. Você só encontra no http://www.jogando.net/mu/ Facebook: http://www.facebook.com/profile.php?id=100002113910611 Site http://www.jogando.net/mu/ HYCLEN Divulgadora Oficial !!! Bom fim de Semana á todos !!!12 months ago
Ben MargolinSome good principles and information here. Would be better without the typos, copy/paste errors, horrendous clipart from page 2 (please tell me that's clipart and not an image of 2 actual 'Razorfishes'...)
But still, overlooking the sloppy state of this (maybe the first rev of this deck?) it definitely has good food for thought and suggestions.3 years ago
Rutu UpadhyayaThank you for uploading this. It was a great presentation and very good pointers. I am going to pass it on to a friend who is planning to create a game for his final project at Academy of Art SF.
Game design for web designers: IXDA’09 TalkPresentation Transcript
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
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
Page 2
OUR CLIENTS
NADYA DIREKOVA
Page 3
ABOUT ME
RAZORFISH
BACKBONE
MIT LEAPFROG
NADYA DIREKOVA
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
Page 5
WHAT CONNECTS THE DESIGN WORLD OF GAMES AND WEB?
WEB
ELECTRONIC
INTERACTION
GAME DESIGN
DESIGN
NADYA DIREKOVA
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Page 37
NADYA DIREKOVA
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
Vanissa Wanick
But still, overlooking the sloppy state of this (maybe the first rev of this deck?) it definitely has good food for thought and suggestions. 3 years ago
Regards
Rutu Upadhyaya 4 years ago