game design for web designers: ixda'09 talk

WHAT’S IN A GAME?

Saturday, March 14th, 2009

Nadya Direkova

Using game design questions and techniques to createengagementin web applications.

Screenshot from “Cloud,” USC Game

NADYA DIREKOVA

2,300+ professionals with an average of 10+ years experience

Our business:Web media ($520MM+) Paid search ($150MM+)Web development ($275MM+)

70 active clients across a wide range of industries

Deep technology experience with content management, portals, e-commerce, enterprise solutions and business intelligence

11 Domestic offices:Atlanta New York Los AngelesAustin Philadelphia SeattleBoston Portland, OR Ft. LauderdaleChicago 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*)

ABOUT RAZORFISH

NADYA DIREKOVA

OUR CLIENTS

NADYA DIREKOVA

ABOUT ME

MIT LEAPFROG BACKBONE RAZORFISH

NADYA DIREKOVA

I N T R O D U C T I O N S

E N G A G E M E N T: T H E C O M M O N G O A L O F G A M E A N D W E B D E S I G N

Q U E S T I O N S T H AT G A M E D E S I G N E R S A S K T O C R E AT E E N G A G E M E N T

G A M E D Y N A M I C S I N W E B A P P L I C AT I O N S

P R E S E N T I N G T H E U S E R E X P E R I E N C E A S A G A M E

AGENDA

NADYA DIREKOVA

WHAT CONNECTS THE DESIGN WORLD OF GAMES AND WEB?

ELECTRONICGAME DESIGN

WEB INTERACTION DESIGN

NADYA DIREKOVA


ELECTRONICGAME DESIGN

WEB INTERACTION DESIGN

DESIGNING FOR ENGAGEMENT(on various kinds of screens)

NADYA DIREKOVA

GAME DESIGN WEB INTERACTION DESIGN

Screenshot from “Rub Rabbits,” SEGA


GAME-LIKE ENGAGEMENT CAN BE A COMPETIVEADVANTAGE FOR WEB DESIGN

Your users are gamers, too!

NADYA DIREKOVA




GAME-LIKE ENGAGEMENT CAN BE A COMPETIVEADVANTAGE FOR WEB DESIGN

Your users are gamers, too!

And these users are accustomed to getting some of their needs met in games.

http://en.wikipedia.org/wiki/File:Maslow's_hierarchy_of_needs.svg

NADYA DIREKOVA 10




“User, come with me, this design will rock your world!”

IT’S ALL ABOUT CREATING ENGAGING EXPERIENCES

NADYA DIREKOVA 11




“User, please stay. Forever!” “User, come with me, this design will rock your world!”

IT’S ALL ABOUT CREATING ENGAGING EXPERIENCES

NADYA DIREKOVA


Q U E S T I O N S F R O M T H E W O R L D O F A G A M E D E S I G N E R


P R E S E N T T H E U S E R E X P E R I E N C E A S A G A M E

NADYA DIREKOVA

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

THE GAME DESIGN DOCUMENT AND TEAM

GDD: Game Design Document

• 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.

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.

The GDD informs thedevelopment team

NADYA DIREKOVA

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


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 AESTHETICSWhat 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




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




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




GAME AESTHETICS


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




GAME AESTHETICS



MECHANICS: WHAT VERBS DEFINE THE GAME?

WHAT ARE THE CONTROLS?

REWARDS SYSTEMSHow is the user rewarded over time?

Image: Mario

NADYA DIREKOVA




GAME AESTHETICS





REWARDS SYSTEMS

PROGRESSING IN THE GAME: STATS, MISSIONS, LEVELSHow does the player track their progress through the game?

Image: Brain Age

NADYA DIREKOVA



REWARDS SYSTEMS?

PROGRESSING IN THE GAME: STATS, LEVELS AND MISSIONS?

RESOURCES, ECONOMY AND INVENTORY?Does the world have a currency? What are the values of virtual goods?


GAME AESTHETICS





Image: SIMS

NADYA DIREKOVA



REWARDS SYSTEMS

RESOURCES, ECONOMY AND INVENTORY

PROGRESSING IN THE GAME: STATS, LEVELS AND MISSIONS

CUSTOMIZATIONHow does the player refine and design their avatar, habitat and story?

AND MANY MORE….


GAME AESTHETICS





Image: Habbo Hotel

NADYA DIREKOVA



REWARDS SYSTEMS



CUSTOMIZATION

TUTORIAL, HELP SYSTEMS AND LEARNING CURVEHow does the player learn the rules and new techniques introduced over time?


GAME AESTHETICS





Image: SIM Tutorial

NADYA DIREKOVA



REWARDS SYSTEMS



CUSTOMIZATION

TUTORIAL, HELP SYSTEMS AND LEARNING CURVE

AND MANY MORE….


GAME AESTHETICS





NADYA DIREKOVA

NEXT STEPS: FOCUS ON A FEW QUESTIONS AS THEY RELATE TO THE WEB


REWARDS SYSTEMSHow is the user rewarded over time?


PROGRESSING IN THE GAME: STATS, LEVELS AND MISSIONSHow does the player track their progress through the game?

CUSTOMIZATION

TUTORIAL, HELP SYSTEM, LEARNING CURVE


GAME AESTHETICSWhat is the look at feel of the game? Where does the action take place? Is the world 2D or 3D?





NADYA DIREKOVA




T H I N K I N G O F Y O U R P R O D U C T A S A G A M E

NADYA DIREKOVA

Web apps. employing game strategies

O V E R V I E WW E B A P P L I C A T I O N S U S I N G G A M E D Y N A M I C S

Some game elements, such as "enemy characters," 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.

However, game elements already drive some of the most successful web applications today.

REWARD SYSTEMS

GAME AESTHETICS

PROGRESSION

STAT SYSTEMS

“User, come with me, my design will change your world!”

“User, don’t you go away now!”

NADYA DIREKOVA

G A M E T R E N D

REWARD SYSTEMS

www.handipoints.comA mechanical level picks up the shoe to bring it closer to you, creating a dynamic intro.

HANDIPOINTS TRACKS POINTS FOR SHORES

www.yelp.comYelpers track the reviews and compliments they receive.

YELP’S REVIEWER AWARD SYSTEM

http://www.mahalo.comThe human search service Mahalo tracks points and awards black belts to users who answer questions well. In return, black belt users can charge higher fees for their services on the site.

MAHALO’S BLACK BELT SYSTEM

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.

http://www.crunchbase.com/company/handipoints

NADYA DIREKOVA

G A M E T R E N D

STATS VISIBLE TO THE PLAYER

www.mint.comMint 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.

MINT.COM INSTANT FINANCIAL FEEDBACK

Key Observations:• Assigning a dynamic numerical value to a behavior has the

potential to change that behavior.

FACEBOOK FRIEND STATS HR BLOCK STATS

www.facebook.comFacebook introduces a new popularity measure:how many (hundreds of) friends do you have?

www.hrblockcomThe end goal , your “score” on Federal and State Taxes , are visualized for you at the top right corner.

NADYA DIREKOVA

G A M E T R E N D

IN-GAME CURRENCY

www.seriosity.comHelping work places manage email overload by assigning a 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.

SERIOSITY

Key Observations:• Currency does not have to be monetary.• Socail objects such as friends can be currency as well.

FRIENDS FOR SALE

http://www..facebook.comBuy, sell and trade your friends. Evil or clever?

ETSY’S FAVORITES

http://www..etsy.comBuy, sell and trade your friends. Evil or clever?

NADYA DIREKOVA

G A M E T R E N D

PROGRESSION

www.linkedin.comLinkeIn meter tracks profile completion and introduces a gated tutorial that makes profile creation simple and less tedious.

LINKED IN INTEGRATED TUTORIAL FEEDBACK

http://www.weightwatchers.comThe 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.

WEIGHT WATCHER’S POINT AND WEIGHT TRACKERS

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

NIKE PLUS

http://nikeplus.nike.com Visualize your individual runs and progress over time.

NADYA DIREKOVA

G A M E T R E N D

GAME AESTHETICS

www.ninewest.comA mechanical level picks up the shoe to bring it closer to you, creating a dynamic intro.

NINE WEST / NEW BALANCE SHOE DEMO

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

http://www.funshipisland.com/#deck

WESTIN EXPERIENCES

http://www.starwoodhotels.comThis interactive demo lets you play with fractals and click to make flowers bloom as you learn how Westin experiences regale all of your senses.

NADYA DIREKOVA



G A M E D Y N A M I C S I N W E B A P P L I C AT I O N S P R E S E N T T H E U S E R E X P E R I E N C E A S A G A M E

NADYA DIREKOVA

T R E N D S

USING ADVERGAMES TO DELIVER A MESSAGE

www.gettheglass.comIncorporates casual gaming into a “central stage” interface. Everything flows seamlessly within main performance area.

GOT MILK? GET THE GLASS GAME

http://flightsimx.archive.amnesia.com.au/An example of a fun and easy advergame promoting Microsoft’s flight simulator.

PAPER PLANE ADVERGAME

www.facebook.comThe Brain Train puzzle game presents tea in a new light: a substance that makes you focused and alert, just what you need for solving a brain teaser.

LIPTON TEA BRAIN TRAIN

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.

NADYA DIREKOVA

G A M E T R E N D

ADOPTING A GAME AS THE USER EXPERIENCE

www.google.comGoogle Image Labeler allows people to compete in tagging relevant keywords to an image.

GOOGLE IMAGE LABELER: COMPETITIVE TAGGING

http://www.fold.itUsers are invited to play a puzzle game; as they solve the puzzles, they help identify protein chains.

FOLD.IT

Key Observations:• Progress meters: Complex applications can use progress meters to teach "what's next" and motivate users to

move to the next stage of the application.• Goals and milestones: Introducing milestones

NADYA DIREKOVA

IN SUMMARY

• C h e c k o u t a G D D . A s k q u e s ti o n s l i k e a g a m e d e s i g n e r. • S e e i f y o u c a n d e s i g n f o r :

o Rewards .o User stats .o Progress ion.o Unique currency.o Put the exper ience in a game she l l .

CHEAT SHEET

NADYA DIREKOVA

NADYA DIREKOVA

O t h e r A u t h o r s o n G a m e s a n d I n t e r a c ti o n D e s i g n :

• 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 Happiness"

G a m e A r t C r e d i t s

NADYA DIREKOVA

CONTACT

NADYA [email protected]://twitter.com/nadya_d

http://feed.razorfish.comFEED