Top Banner
The Design of Everyday Games Lessons from UX for Game Designers
74

The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Apr 13, 2018

Download

Documents

nguyendan
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

The Design of Everyday Games

● Lessons from UX for Game Designers

Page 2: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Christina Wodtke

@cwodtke | linkedin.com/in/christinawodtke | cwodtke.com

Page 3: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Vitruviusfirmitas, utilitas, venustas : : durability, convenience, beauty

Page 4: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

“All three legs provide necessary and complementary strengths. Weaken one leg and the product falls.” The Invisible Computer, 1998.

Don Norman’s Three-legged Stool

Page 5: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Don Norman

"User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products.

Page 6: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

I love amazon. It is a clear yet rich shopping experience. It gives me what I need to make a decision. But it’s more than a website…

Page 7: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Amazon understands me. It shows me things I didn’t even realize were available that I love. Lynda Carter FTW!

Page 8: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Let’s be honest: It’s all about the smiling boxes.

Page 9: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Are you stuck? A human is waiting to unstick you!

Page 10: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Don Norman

The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother.

Page 11: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

A) Amazon understands I always run out of razors!B) Amazon understands I have no clue how often to buy them!

Page 12: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Don Norman

Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features.

Page 13: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

The doodle not only has no utility on google, it breaks the rule of branding: never touch the mark! Let it warms and makes human the search giant. That matters.

Page 14: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

You can argue that Amazon should kill joke reviews, because they mess up the algorithms. But they also warm up what could be a cold space.

Page 15: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction
Page 16: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Don Norman

In order to achieve high-quality user experience in a company's offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.

Page 17: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

WHAT IS USER EXPERIENCE?

The mini cooper convertible has my favorite car experience. The way it handles, accelerates as well as the beautiful interior, the innovative half-open position of the roof!.

Page 18: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

But the experience doesn’t stop at the car. There are stickers, swag, driving adventures, dedicated AAA support for the life of the car and music services! What does it mean to enjoy driving a car, they asked… then answered.

Page 19: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

19

EXERCISE

WHAT IS GOOD?

What is it? Why do you love it? What’s your favorite part?

Page 20: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

20

EXERCISE

WHAT IS BAD?

What is it? Why do you hate it? What’s the worst part?

Page 21: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

21

EXERCISE

MAKE ITBE GOOD.

Teams, 20 minutes, sketch answers

Page 22: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

User Experience Design:the design of anything

independent of mediumor across [device]

with human experience as an explicit outcomeand human engagement as an explicit goal

-Jesse James Garrett

Page 23: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

jesse james garrett

Page 24: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

UI

IxDIA

The User

Copywriting Graphic Design

MAR

KET

ING

CU

STOM

ER SERVIC

E

Page 25: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Things you should know

Page 26: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

UNIVERSAL PRINCIPLES

● Affordances● Feedback● Standards

UI

IxD

IA

Page 27: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

“Like putting an Armani suit on Attila the Hun, interface design only tells how to dress up an existing behavior.” –Alan Cooper

Page 28: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

AFFORDANCESThings that look pushable, get pushed. Things that look pullable, get pulled.

UI

IxD

IA

Page 29: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

AFFORDANCES

UI

IxD

IA

Buttons that look pushable, get pushed

Page 30: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Forms should say “type here”

See: Flat UI and Forms by JESSICA ENDERS

Page 31: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

MEANING

Links, buttons and inputs are not decorative. They tell a story.UI

IxD

IA

Page 32: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

UI

IxD

IA

BUTTONS HAVE MEANING

Page 33: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

LINKS HAVE MEANING UI

IxD

IA

Page 34: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

You are always communicating.

Don’t be rude.

Page 35: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Set expectations, meet expectations

UI

IxD

IA

Page 36: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

FeedbackLet people know it worked

UI

IxD

IA

Page 37: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Feedback

On Facebook, they show the link preview as soon as you add it, so you know all is working (and can preview)

UI

IxD

IA

Page 38: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Feedback

Your new status is always posted on top, to let you know it was successfully posted (even if a new status came in a second after, and is thus newer)

UI

IxD

IA

Page 39: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Inline feedback vs validation: Luke Wrobowskihttp://alistapart.com/article/inline-validation-in-web-forms

Traditional

UI

IxD

IA

Page 40: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Inline feedback vs validation: Luke Wrobowskihttp://alistapart.com/article/inline-validation-in-web-forms

Inline

UI

IxD

IA

Page 41: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Feedback Matters● Inline feedback gave: ● a 22% increase in success rates,● a 22% decrease in errors made,● a 31% increase in satisfaction rating,● a 42% decrease in completion times, and● a 47% decrease in the number of eye

fixations.

“You’d rather know about your mistakes as you go along.”

“It’s much better than getting all the way down and hitting ‘submit,’ only to find out that it doesn’t like your username. It’s much better when it tells you as you go along.”

Inline Validation in Web Formsby LUKE WROBLEWSKI September 01, 2009

UI

IxD

IA

Page 42: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Recognition over recall

Seeing is easier than scavenger hurtsUI

IxD

IA

Page 43: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

UI

IxD

IA

Page 44: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Variation Unique Visitors Unique ClicksHamburger 120543 1211Menu 121152 1455

Unique Visitors

Hamburger Clicks

% Menu Clicks %

iOS 148097 906 0.61% 1143 0.77%Android 87245 216 0.25% 237 0.27%

UI

IxD

IA

Page 45: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

UI

IxD

IAPJ McCormick, Challenging Data Driven Design, WarmGun 2013

Page 46: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

UI

IxD

IAPJ McCormick, Challenging Data Driven Design, WarmGun 2013

Page 47: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

UI

IxD

IAPJ McCormick, Challenging Data Driven Design, WarmGun 2013

Page 48: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

UI

IxD

IAPJ McCormick, Challenging Data Driven Design, WarmGun 2013

Page 49: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

UI

IxD

IAPJ McCormick, Challenging Data Driven Design, WarmGun 2013

Page 50: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Clear affordances + Recognition over recall

UI

IxD

IA

Page 51: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

USE CLEAR LANGUAGE51

UI

IxD

IA

Page 52: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Contextual Principles● What you know about the context/users/activity. E.g.

● Recipes must be scannable● User should know where they are in a recipe● Recipes allow users to find ingredients for shopping

and mise en place by listing them apart from instructions

UI

IxD

IA

Page 53: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Tivo Tennants●It’s entertainment, stupid.●It’s TV, stupid.●It’s video, dammit.●Everything is smooth and gentle.●No modality or deep hierarchy.●Respect the viewer’s privacy.●It’s a robust appliance, like a TV.

Page 54: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Invent five contextual Principles

Exercise: 5 minutes, then share out.

Page 55: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Things you do

Page 56: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction
Page 57: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

OBSERVE

from IDEO’s Designkit.org

Page 58: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

58CONTEXTUAL INQUIRY, FIELD STUDIES, & ETHNOGRAPHY

http://www.flickr.com/photos/halversongroup

Page 59: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

USABILITY TESTING

http://nform.com | http://uid.com

Page 60: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

ANALYZE

from IDEO’s Designkit.org

Page 61: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

CHUNK FINDINGS

INTO AFFINITY GROUPS

Page 62: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Play with possible modelsRelationship to other data

Credit: Steve Portigal

Page 63: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Play with possible models

Frequency

Credit: Steve Portigal

Page 64: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Play with possible models

Timeline

Credit: Steve Portigal

Page 65: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

Why?Discover unexpected insights in the data

Photo credit Eirik Newth

Page 66: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

MAKE

Page 67: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

WHAT MUST BE DONE WELL

UI

IxDIA

The User

Observe & Understand

OrganizeContent

Design Behavior

Communicate Clearly

Page 68: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

User experience is big

Too big?

Page 69: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

69 dan saffer

Page 70: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

UI

IxDIA

The User

Copywriting Graphic Design

MAR

KET

ING

CU

STOM

ER SERVIC

EThe Heart of UX is Small● Start with the user: her

goals, needs and habits● Follow known principles● Finish with the user,

test during design.● Everyone must care for

the user.

It’s all about the USER’S EXPERIENCE

Page 71: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

DISCUSSION

Page 72: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

LEARN MORE

Page 73: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction

@cwodtke

Page 74: The Design of Everyday Gamestwvideo01.ubm-us.net/.../Wodtke_Christina_DesignEverydayGames.pdf · Don Norman "User experience" encompasses . all aspects. of the end-user's interaction