Game design for web designers: IXDA'09 Talk

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

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

OUR CLIENTS NADYA DIREKOVA

ABOUT ME RAZORFISH BACKBONE MIT LEAPFROG NADYA DIREKOVA

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

WHAT CONNECTS THE DESIGN WORLD OF GAMES AND WEB? WEB ELECTRONIC INTERACTION GAME DESIGN DESIGN NADYA DIREKOVA

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

NADYA DIREKOVA

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

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

http://www.gauravonomics.com	626
http://uxfactory.com	406
http://comm20.tistory.com	326
http://www.uxfactory.com	82
http://www.slideshare.net	52
http://www.hanrss.com	34
http://www.acagamic.com	27
http://blog.marcsibley.com	25
http://blog.naver.com	12
http://storify.com	11
http://druwynings.com	9
http://translate.googleusercontent.com	7
http://www.m-e-e-t.com	6
http://handyvandal.com	4
http://funky.posterous.com	3
file://	3
http://www.designbycandlelight.com	2
http://cj.cj.net	2
http://fotografia.gnomio.com	2
http://www.misstheda.com	2
http://www.wzd.com	2
http://mail.naver.com	1
http://search.daum.net	1
http://mail19.paran.com	1
http://fibban.fleecelabs.se	1
https://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com	1
http://uxfactory.tistory.com	1
http://static.slidesharecdn.com	1
http://mail.kcu.ac	1

Game design for web designers: IXDA'09 Talk

by Nadya Direkova on Feb 18, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

29 Embeds 1,651

Statistics

Game design for web designers: IXDA’09 Talk — Presentation Transcript