• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Game design for web designers: IXDA'09 Talk
 

Game design for web designers: IXDA'09 Talk

on

  • 22,303 views

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

Statistics

Views

Total Views
22,303
Views on SlideShare
20,041
Embed Views
2,262

Actions

Likes
91
Downloads
711
Comments
7

36 Embeds 2,262

http://comm20.tistory.com 771
http://www.gauravonomics.com 626
http://uxfactory.com 445
http://www.uxfactory.com 82
http://www.linkedin.com 64
http://www.slideshare.net 52
http://blog.marcsibley.com 35
http://www.acagamic.com 34
http://www.hanrss.com 34
http://storify.com 24
http://www.m-e-e-t.com 14
https://www.linkedin.com 12
http://blog.naver.com 12
http://druwynings.com 9
http://translate.googleusercontent.com 7
http://handyvandal.com 5
http://dendimedia.blogspot.com 4
http://funky.posterous.com 4
http://fotografia.gnomio.com 3
file:// 3
http://localhost 2
http://www.wzd.com 2
http://uxfactory.tistory.com 2
http://www.misstheda.com 2
http://www.designbycandlelight.com 2
http://cj.cj.net 2
https://twitter.com 1
http://inna.gnomio.com 1
http://elmong.tk 1
http://search.daum.net 1
http://mail.kcu.ac 1
http://mail.naver.com 1
https://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 1
http://mail19.paran.com 1
http://fibban.fleecelabs.se 1
http://static.slidesharecdn.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

17 of 7 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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!!
    Are you sure you want to
    Your message goes here
    Processing…
  • 2--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 !!!
    Are you sure you want to
    Your message goes here
    Processing…
  • Como criar engajamento, dos jogos a web
    Are you sure you want to
    Your message goes here
    Processing…
  • Thank you for your help.
    Are you sure you want to
    Your message goes here
    Processing…
  • Some 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.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Game design for web designers: IXDA'09 Talk Game design for web designers: IXDA'09 Talk Presentation 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
    • Page 39 CONTACT NADYA DIREKOVA nadya.direkova@razorfish.com http://twitter.com/nadya_d FEED http://feed.razorfish.com NADYA DIREKOVA