Games for Health 2014 design tutorial

232
Design Tutorial John Ferrara While you’re waiting to start Screenshot a game you’re playing and tweet it with hashtag #PlayfulDesign

description

Tutorial and workshop from the Games for Health 2014 conference. Covers common problems, failings of gamification, elements of player experience, paper prototyping, and essential concepts in game design.

Transcript of Games for Health 2014 design tutorial

Page 1: Games for Health 2014 design tutorial

Design TutorialJohn Ferrara

While you’re waiting to startScreenshot a game you’re playing and tweet it with hashtag #PlayfulDesign

Page 2: Games for Health 2014 design tutorial

John FerraraCreative director, Megazoid Games

User experience designer

“Let’s Move!” award winner

@PlayfulDesign

Page 4: Games for Health 2014 design tutorial

Today

We’ll talk about games

We’ll play some games

We’ll take a break

We’ll make some games

We’ll test those games

Page 5: Games for Health 2014 design tutorial

Games absolutely can improve

people’s health.**If they are well designed experiences.

Page 6: Games for Health 2014 design tutorial

An overview of the problem

part 1

Page 7: Games for Health 2014 design tutorial
Page 8: Games for Health 2014 design tutorial

Best possible outcome if you...

Skip college.

Never move out of your parents' house.

Never get married.

Never have any children.

Never travel or take any vacations.

Work indefinitely past 65.

Die alone in a nursing home with lots of

money and no one to leave it to.

Page 9: Games for Health 2014 design tutorial

Leap Frog Sugar Bugs

Page 10: Games for Health 2014 design tutorial
Page 11: Games for Health 2014 design tutorial
Page 12: Games for Health 2014 design tutorial

Baranowski, et. al.PediatricsFebruary 27, 2012

Page 13: Games for Health 2014 design tutorial
Page 14: Games for Health 2014 design tutorial

None produced any difference in physical activity.

Page 15: Games for Health 2014 design tutorial

The problem is design.Games are hard to design well.Serious games are even harder.

Page 16: Games for Health 2014 design tutorial

Gam

ficai tio

n?

Page 17: Games for Health 2014 design tutorial
Page 18: Games for Health 2014 design tutorial
Page 19: Games for Health 2014 design tutorial
Page 20: Games for Health 2014 design tutorial

A growing backlash

“I don’t do ‘gamification,’

and

I’m not prepared to stand

up and say I think it works.”–Jane McGonigal

“Gamification is bullshit.”

–Ian Bogost

Page 21: Games for Health 2014 design tutorial
Page 22: Games for Health 2014 design tutorial

Things that games can do in the real world

part 2

Page 23: Games for Health 2014 design tutorial

1. Teach

2. Motivate

3. Persuade

Page 24: Games for Health 2014 design tutorial

Games can teach

Page 25: Games for Health 2014 design tutorial
Page 26: Games for Health 2014 design tutorial

Learning by doing

Practice is rolled in with theory.

Ideas are not just illustrated, but experienced.

Page 27: Games for Health 2014 design tutorial
Page 28: Games for Health 2014 design tutorial
Page 29: Games for Health 2014 design tutorial

Failure based learning

Getting it wrong builds a better understanding.

Games are a totally safe “virtual lab”.

Page 30: Games for Health 2014 design tutorial
Page 31: Games for Health 2014 design tutorial
Page 32: Games for Health 2014 design tutorial

“What if”-ing

Living thought experiments

How might the world be different if...

Page 33: Games for Health 2014 design tutorial

Demo: http://youtu.be/TluRVBhmf8w?t=43s

Page 34: Games for Health 2014 design tutorial
Page 35: Games for Health 2014 design tutorial

Systems thinking

Working with the relationships between moving

parts.

Games are the best medium for this that

exists.

Page 36: Games for Health 2014 design tutorial
Page 37: Games for Health 2014 design tutorial
Page 38: Games for Health 2014 design tutorial

Games can motivate

Page 39: Games for Health 2014 design tutorial

Human computation

Useful outputs are a byproduct of play.

“Games are algorithms that run on people.”

-- Luis Von Ahn

Page 40: Games for Health 2014 design tutorial
Page 41: Games for Health 2014 design tutorial

Reframing

Casting real-life challenges in a different light.

Page 42: Games for Health 2014 design tutorial
Page 43: Games for Health 2014 design tutorial

Overlay

Reframing in-the-moment.

A fantasy world is superposed on reality.

Page 44: Games for Health 2014 design tutorial
Page 45: Games for Health 2014 design tutorial

Buy the advantage

Intrinsic rewards for external actions.

Players must greatly value the game

experience.

Page 46: Games for Health 2014 design tutorial
Page 47: Games for Health 2014 design tutorial

Games can persuade

Page 48: Games for Health 2014 design tutorial

Games are a form of procedural rhetoricProcedurality makes games unique as a communications medium.

Page 49: Games for Health 2014 design tutorial

Example

BANNED

Page 50: Games for Health 2014 design tutorial
Page 51: Games for Health 2014 design tutorial
Page 52: Games for Health 2014 design tutorial
Page 53: Games for Health 2014 design tutorial

Games for… evil?

Page 54: Games for Health 2014 design tutorial

Games for…

Gatorade “Bolt” game’s goal:“...to position Gatorade as the hero helping drive better performance and higher scores with water as the enemy that hinders performance.”

Media agency OMD’s case study video

evil?

Page 55: Games for Health 2014 design tutorial

Games for… evil?

Page 56: Games for Health 2014 design tutorial
Page 57: Games for Health 2014 design tutorial
Page 58: Games for Health 2014 design tutorial
Page 59: Games for Health 2014 design tutorial

Serious games need ethical guidelines

Page 60: Games for Health 2014 design tutorial

A model for understanding game experiences

part 3

Page 61: Games for Health 2014 design tutorial
Page 62: Games for Health 2014 design tutorial
Page 63: Games for Health 2014 design tutorial
Page 64: Games for Health 2014 design tutorial
Page 65: Games for Health 2014 design tutorial
Page 66: Games for Health 2014 design tutorial

Immersion

Page 67: Games for Health 2014 design tutorial
Page 68: Games for Health 2014 design tutorial
Page 69: Games for Health 2014 design tutorial
Page 70: Games for Health 2014 design tutorial
Page 71: Games for Health 2014 design tutorial

Flow

Page 72: Games for Health 2014 design tutorial
Page 73: Games for Health 2014 design tutorial

Creativity

Page 74: Games for Health 2014 design tutorial
Page 75: Games for Health 2014 design tutorial
Page 76: Games for Health 2014 design tutorial
Page 77: Games for Health 2014 design tutorial

Social interaction

Page 78: Games for Health 2014 design tutorial
Page 79: Games for Health 2014 design tutorial

Competence

Page 80: Games for Health 2014 design tutorial
Page 81: Games for Health 2014 design tutorial

Catharsis

Page 82: Games for Health 2014 design tutorial
Page 83: Games for Health 2014 design tutorial
Page 84: Games for Health 2014 design tutorial
Page 85: Games for Health 2014 design tutorial
Page 86: Games for Health 2014 design tutorial
Page 87: Games for Health 2014 design tutorial
Page 88: Games for Health 2014 design tutorial
Page 89: Games for Health 2014 design tutorial

Interaction balance issues

Page 90: Games for Health 2014 design tutorial

Campaign balance issues

Page 91: Games for Health 2014 design tutorial
Page 92: Games for Health 2014 design tutorial
Page 93: Games for Health 2014 design tutorial
Page 94: Games for Health 2014 design tutorial
Page 95: Games for Health 2014 design tutorial
Page 96: Games for Health 2014 design tutorial
Page 97: Games for Health 2014 design tutorial

0

HINT

MENU

Page 98: Games for Health 2014 design tutorial
Page 99: Games for Health 2014 design tutorial
Page 100: Games for Health 2014 design tutorial

Games should be designed to be games first.

Page 101: Games for Health 2014 design tutorial

part 4

A method for developing a game concept

Page 102: Games for Health 2014 design tutorial

They’re fast and cheap

They focus on the fundamentals

You can playtest with them

They help people speak in a common language

Why paper prototypes?

Page 103: Games for Health 2014 design tutorial

Can you really do a video game on paper?

Page 104: Games for Health 2014 design tutorial

Can you really do a video game on paper?

Stone Librande

Page 105: Games for Health 2014 design tutorial

Guidelines for paper prototyping

Strip off the aesthetic and usability layers

Work on the underlying gameplay

Page 106: Games for Health 2014 design tutorial

XX

Page 107: Games for Health 2014 design tutorial

Guidelines

Don’t be too literal

Work on small things

Make it a real game

Iterate

Strip off the aesthetic and usability layers

Focus on the underlying gameplay

Page 108: Games for Health 2014 design tutorial

So how might this be done on paper?

Page 109: Games for Health 2014 design tutorial

Let’s take a closer look at what’s really happening.

Page 110: Games for Health 2014 design tutorial

The objective is to climb 6 levels without getting hit by a barrel.

Page 111: Games for Health 2014 design tutorial

Sometimes you jump one barrel (hard).

Sometimes you jump two barrels (harder).

Page 112: Games for Health 2014 design tutorial

Sometimes there are barrels above you.

Sometimes they fall down a ladder.

Page 113: Games for Health 2014 design tutorial

Sometimes you get a hammer.Then you get to smash all barrels. :-)But if you ever get hit by a

barrell…

You start over at the

bottom. :-(

Page 114: Games for Health 2014 design tutorial

Super

JumpmanBros.

Page 115: Games for Health 2014 design tutorial

Tower cards

Objective:Reach level 6 before your opponent.

Each turn you’ll have a chance to move up one level.

Page 116: Games for Health 2014 design tutorial

Draw a card. Each gives you 3 options.

(1) Climb up

Move your coin one space up the tower card.

Page 117: Games for Health 2014 design tutorial

Draw a card. Each gives you 3 options.

(2) Exit right

Keep your coin where it is on the tower card.

Page 118: Games for Health 2014 design tutorial

Draw a card. Each gives you 3 options.

(3) Retreat down

Move your coin one space down the tower card.

Page 119: Games for Health 2014 design tutorial

Draw a card. Each gives you 3 options.

Page 120: Games for Health 2014 design tutorial

Look out for barrels!

To avoid the barrel, you must roll anything other than the numbers that appear above it.

Anything except 4

Page 121: Games for Health 2014 design tutorial

Two barrels

If there are two barrels, but must roll separately for each one. So above, you’d roll twice.

Roll twice!

Page 122: Games for Health 2014 design tutorial

This barrel is in front of the ladder. You must roll if you want to climb OR exit right.

Barrels in front of the ladder

OK

Roll

Roll

Page 123: Games for Health 2014 design tutorial

This barrel is behind the ladder. You only need to roll if you’re exiting right.

Barrels behind the ladder

Roll

OK

OK

Page 124: Games for Health 2014 design tutorial

Barrels above the ladder

Barrels above can fall down a ladder onto you.You must roll if you’re climbing the ladder.

Roll

OK

OK

Page 125: Games for Health 2014 design tutorial

Pop quiz: What could you do here?

Page 126: Games for Health 2014 design tutorial

If you get hit by a barrel...

Go back to

level 1

Page 127: Games for Health 2014 design tutorial

The hammer card is awesome

1. Draw again right away.2. Any barrels on the bottom level are

smashed.3. You still have to roll if a barrel is above.

Page 128: Games for Health 2014 design tutorial

Let’s play!Press start

Page 129: Games for Health 2014 design tutorial

Discussion

In what ways was this similar to the original

game?

In what ways was this different?

What might you change to improve the

experience?

Page 130: Games for Health 2014 design tutorial

Lessons for design

The central conflict of the game

Basic strategy & tactics

What the obstacles are & how often they

appear

How hard it should be to jump a barrel

What consequences for mistakes are fair

How the stakes change over time

How the game ends

Page 131: Games for Health 2014 design tutorial

Abstraction vs. representationalism

Gameplay vs. aesthetics

Luck vs. skill

Going deeper

Page 132: Games for Health 2014 design tutorial

part 5A quick primer on essential game design concepts

Page 133: Games for Health 2014 design tutorial

Core mechanic

The activities players are engaged in

moment to moment throughout a game.

Roll

Move around the

board

Buy properties

Pay rent

Page 134: Games for Health 2014 design tutorial

Objectives

Specific conditions that players are either

trying to...

achieve avoidor

Page 135: Games for Health 2014 design tutorial

Objectives

Longer games have nested objectives.

Page 136: Games for Health 2014 design tutorial

Constraints

Limits on what the player can and cannot do.

2 types of constraints:

Environmental

Formal

Page 137: Games for Health 2014 design tutorial

Environmental constraints

Hard limits set by inherent physical

characteristics.

Page 138: Games for Health 2014 design tutorial
Page 139: Games for Health 2014 design tutorial
Page 140: Games for Health 2014 design tutorial
Page 141: Games for Health 2014 design tutorial
Page 142: Games for Health 2014 design tutorial
Page 143: Games for Health 2014 design tutorial
Page 144: Games for Health 2014 design tutorial
Page 145: Games for Health 2014 design tutorial

Soft rules that all of the players agree to follow

in order to enable the game experience.

Formal constraints

Page 146: Games for Health 2014 design tutorial
Page 147: Games for Health 2014 design tutorial
Page 148: Games for Health 2014 design tutorial
Page 149: Games for Health 2014 design tutorial

Conflict

The relationship between objectives and

constraints.

Page 150: Games for Health 2014 design tutorial
Page 151: Games for Health 2014 design tutorial

Conflict

The relationship between objectives and

constraints.Games necessarily involve challenge.

Page 152: Games for Health 2014 design tutorial

Ideal experience in software design

Page 153: Games for Health 2014 design tutorial

Ideal experience in game design

Page 154: Games for Health 2014 design tutorial

Arbitration

Some games have built-in systems that enforce

the rules so people don’t have to.

2 types of arbitration:

Mechanical

Computerized

Page 155: Games for Health 2014 design tutorial

Mechanical arbitration

Page 156: Games for Health 2014 design tutorial

Computerized arbitration

Page 157: Games for Health 2014 design tutorial

It’s okay for you to do anything that the game

doesn’t specifically prohibit.

As a result, the design is vulnerable to

degenerate strategies.

Arbitration limits cheating

Page 158: Games for Health 2014 design tutorial

Degenerate strategy: Is this cheating?

Page 159: Games for Health 2014 design tutorial

To reach objectives, players may need to make

choices that can have positive or negative

outcomes.

Uncertainty is fundamental to risk.

Risk

Page 160: Games for Health 2014 design tutorial

Greater risks require greater rewards

Page 161: Games for Health 2014 design tutorial

You usually don’t directly design the play

experience.

You design the parameters in which play

executes.

The players, objectives, and constraints

interact in complex ways to construct the

experience as you go.

Games as systems

Page 162: Games for Health 2014 design tutorial
Page 163: Games for Health 2014 design tutorial

15 minutes

Up next: A health game design case study. You prototype your own games.

Break time!

Page 164: Games for Health 2014 design tutorial

part 6

A case study

Page 165: Games for Health 2014 design tutorial

What causes childhood obesity?

Page 166: Games for Health 2014 design tutorial
Page 167: Games for Health 2014 design tutorial
Page 168: Games for Health 2014 design tutorial

Understand the nutritional attributes of food

Build a knowledge base of food choices

Develop skills to interpret nutrition information

Learn to value healthier food choices

Kids need to:

Page 169: Games for Health 2014 design tutorial

More than anything, the problem is

cultural.

Page 170: Games for Health 2014 design tutorial

Challenge to create games that teach

8- to 12- year olds healthier eating habits

Page 171: Games for Health 2014 design tutorial

Virtual pets. Real nutrition.

Page 172: Games for Health 2014 design tutorial
Page 173: Games for Health 2014 design tutorial

Player is responsible for maintaining the health of a virtual petMust shop for the critter's food, cook for it, and feed it

Each day the player must fill the critter's green bars without filling the red bars

Page 174: Games for Health 2014 design tutorial

A quick demo

Page 175: Games for Health 2014 design tutorial

Lessons

Page 176: Games for Health 2014 design tutorial

1. Define a core message

Design around a clear and concise statement

of what you want players

to do or to believe.

Page 177: Games for Health 2014 design tutorial
Page 178: Games for Health 2014 design tutorial
Page 179: Games for Health 2014 design tutorial

2. Tie the message to strategy

Games drive playersto find the most efficient ways

to win. 

If the message representsthe ideal strategy,

then the process of playingserves as a proof of its truthfulness.

 

Page 180: Games for Health 2014 design tutorial

Tiered system of rewards

Better food choices

Health goes up

Greater productivity, more sports wins, sick less often

Earn more money

Trick out your pad

Social rewards

Page 181: Games for Health 2014 design tutorial

3. Enable self-directed discovery

Self-directed discovery persuades

by giving peoplea feeling of ownershipof the insight they've

uncovered.

Page 182: Games for Health 2014 design tutorial

Discovering better food choices

Page 183: Games for Health 2014 design tutorial

Discovering better food sourcing

Page 184: Games for Health 2014 design tutorial

Discovering healthy recipes

Players can cook, combining ingredients into prepared meals.

Meals of greater nutritional merit are worth more than their constituent ingredients

Page 185: Games for Health 2014 design tutorial

Meals can be sold to the restaurant for a profit.

Other players can then purchase them, enabling social learning.

Page 186: Games for Health 2014 design tutorial

4. Offer meaningful choices

If there is no benefitto making the wrong

choice,then there is

no choice at all.

Page 187: Games for Health 2014 design tutorial

Effects of high-calorie foods

Advantages:More energy for sports gamesMore energy for workConsequences:Exceed daily limits fasterCritter starts rejecting healthier options

Page 188: Games for Health 2014 design tutorial

5. Keep it real

Video games' capacityto simulate the conditions

of the real worldcan impart credibility

to embedded arguments.

Page 189: Games for Health 2014 design tutorial

Fitter Critters has real nutrition data for 675 actual food items

Page 190: Games for Health 2014 design tutorial

and the daily objectives are based on real consumption guidelines

Page 191: Games for Health 2014 design tutorial

Pilot StudyNorthbridge Elementary, MARun by University of Massachusetts Medical School100 5th graders, 4 class periods

1. Significant increases in positive attitudes toward nutrition and fitness

2. Significant increases in students' self-efficacy

3. Moderate increases in nutrition knowledge

Page 192: Games for Health 2014 design tutorial

A game design game for 5 players

Page 193: Games for Health 2014 design tutorial

(each played by another person)

10 dragon heads

4 warriors

The game ends when either all dragon heads or warriors have been removed from the board.

(played by 1 person)

Page 194: Games for Health 2014 design tutorial

If you get anything other than a 1, nothing

happens.

The dragon rolls all 4 dice at once

Page 195: Games for Health 2014 design tutorial

Fang attack

Kill any 1 warrior next to any dragon head.(Including diagonals.)

Page 196: Games for Health 2014 design tutorial

Fang attack

Kill any 1 warrior next to any dragon head.(Including diagonals.)

Page 197: Games for Health 2014 design tutorial

Fang attack

Kill any 1 warrior next to any dragon head.(Including diagonals.)

Page 198: Games for Health 2014 design tutorial

Fire attack

Kill any 1 warrior at least 3 spaces from any dragon head.(Including diagonals.)

Page 199: Games for Health 2014 design tutorial

Fire attack

Kill any 1 warrior at least 3 spaces from any dragon head.(Including diagonals.)

Page 200: Games for Health 2014 design tutorial

Fire attack

Kill any 1 warrior at least 3 spaces from any dragon head.(Including diagonals.)

Page 201: Games for Health 2014 design tutorial

Move

All dragon heads move 1 space in any direction.All must move in the same direction.

Page 202: Games for Health 2014 design tutorial

Move

All dragon heads move 1 space in any direction.All must move in the same direction.

Page 203: Games for Health 2014 design tutorial

Move

All dragon heads move 1 space in any direction.All must move in the same direction.

Page 204: Games for Health 2014 design tutorial

Move

All dragon heads move 1 space in any direction.All must move in the same direction.

Page 205: Games for Health 2014 design tutorial

Move

All dragon heads move 1 space in any direction.All must move in the same direction.

Page 206: Games for Health 2014 design tutorial

Move

All dragon heads move 1 space in any direction.All must move in the same direction.

Page 207: Games for Health 2014 design tutorial

Move

All dragon heads move 1 space in any direction.All must move in the same direction.

Page 208: Games for Health 2014 design tutorial

Heal

The dragon regrows 1 lost head, which may be placed in any space directly up, down, left, or right from any other head.

Heads may regrow up to a maximum of 10.

Page 209: Games for Health 2014 design tutorial

Heal

The dragon regrows 1 lost head, which may be placed in any space directly up, down, left, or right from any other head.

Heads may regrow up to a maximum of 10.

Page 210: Games for Health 2014 design tutorial

Heal

The dragon regrows 1 lost head, which may be placed in any space directly up, down, left, or right from any other head.

Heads may regrow up to a maximum of 10.

Page 211: Games for Health 2014 design tutorial

Heal

The dragon regrows 1 lost head, which may be placed in any space directly up, down, left, or right from any other head.

Heads may regrow up to a maximum of 10.

Page 212: Games for Health 2014 design tutorial

Heal

The dragon regrows 1 lost head, which may be placed in any space directly up, down, left, or right from any other head.

Heads may regrow up to a maximum of 10.

Page 213: Games for Health 2014 design tutorial

Heal

The dragon regrows 1 lost head, which may be placed in any space directly up, down, left, or right from any other head.

Heads may regrow up to a maximum of 10.

Page 214: Games for Health 2014 design tutorial

So how do the warriors work?

That’s up to you!Make up roles and rules for each warrior

(e.g. elf, fighter, sorceress, etc.)

Write everything down on the character sheets.

Page 215: Games for Health 2014 design tutorial

Design a system of rules that interact to make

a game experience that’s:

The designer’s objective

Sustained.Challengin

g.

Fair. Enjoyable.

Page 216: Games for Health 2014 design tutorial

Let’s design!10 minutes.

Then play begins.

SUSTAINED - CHALLENGING - FAIR - ENJOYABLE

Page 217: Games for Health 2014 design tutorial

Time to play!15 minutes.

Make changes as you go.

SUSTAINED - CHALLENGING - FAIR - ENJOYABLE

Page 218: Games for Health 2014 design tutorial

Discussion

Did anyone develop a character that worked

well?

What was the biggest problem in your game?

What might you change to get rid of that

problem?

Page 219: Games for Health 2014 design tutorial

Iteration 2

Start over. Try to improve the experience.

Make new characters with new rules.

You can change the rules for the dragon.

Incorporate at least 1 environmental piece.

?

Page 220: Games for Health 2014 design tutorial

Let’s designagain!

15 minutes.Then play begins.

USE AT LEAST 1 ENVIRONMENTAL PIECE

Page 221: Games for Health 2014 design tutorial

Time to play!10 minutes.

AT LEAST 1 ENVIRONMENTAL PIECES

Page 222: Games for Health 2014 design tutorial

Was the game better or worse this time?

Were you able to solve the problems?

Did new problems come up?

What’s the most significant problem now?

Discussion

Page 223: Games for Health 2014 design tutorial

Iteration 3

Turn this into a game about cancer.

Page 224: Games for Health 2014 design tutorial

Let’s designagain again!

20 minutes.Then play begins.

TURN IT INTO A GAME ABOUT CANCER

Page 225: Games for Health 2014 design tutorial

Thank you!

Please complete the assessment form.

Connect with me: @PlayfulDesign

Page 226: Games for Health 2014 design tutorial

Balanced gameplay

Page 227: Games for Health 2014 design tutorial

Often, you don’t directly design the play

experience.

You design the parameters in which play

executes.

The players, objectives, and constraints

interact in complex ways to construct the

experience as you go.

Games as systems

Although some games aren’t systems, e.g...

Page 228: Games for Health 2014 design tutorial
Page 229: Games for Health 2014 design tutorial

There are some big design issues here!!

Games execute outside of the designer’s

control.

The real-time interactions between game

elements are complex and hard to predict.

Unintended degenerate strategies can emerge.

Players may not understand a game or they

may struggle with its UI.

Players might not be having any fun.

Page 230: Games for Health 2014 design tutorial

UI usability

Page 231: Games for Health 2014 design tutorial

UI usability

Page 232: Games for Health 2014 design tutorial

Balance