1.
The Design of
Everyday
Games

2.
Associate Professor, California College of the Arts
@cwodtke | eleganthack.com
Christina Wodtke

3.
Apple’s Cargo Cult

4.
OW! MY EYES!

5.
User Interface
Interaction
Design
Information
Architecture
User
Psychology
Concept
Models

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

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

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

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

10.
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.
Don Norman

11.
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.
Don Norman

12.
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!.

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

14.
User Experience Design:
the design of anything
independent of medium
or across [device]
with human experience as an explicit outcome
and human engagement as an explicit goal
-Jesse James Garrett

15.
Jesse
James
Garrett

16.
UI
IxDIA
The User
Copywriting
Graphic Design
MARKETING
CUSTOMERSERVICE
Pre-use Use Post-use
User experience design
Key word is USE

17.
Things you should know

18.
UNIVERSAL PRINCIPLES
● Affordances
● Feedback
● Direct Manipulation
● Standards UI
IxDIA

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

20.
AFFORDANCES
Things that look pushable, get pushed. Things that look pullable, get pulled.
UI
IxDIA

21.
AFFORDANCES
U
I
I
x
D
I
A
Buttons that look pushable, get pushed

22.
Forms should say “type here”
See: Flat UI and Forms by JESSICA ENDERS

23.
MEANING
Links, buttons and inputs are not decorative. They tell a story.
UI
Ix
D
IA

24.
UI
Ix
D
IA
BUTTONS HAVE MEANING

25.
LINKS HAVE MEANING UI
Ix
D
IA

26.
You are always communicating.
Don’t be rude.

27.
Set expectations, meet
expectations
UI
Ix
D
IA

28.
Feedback Let people know it worked
UI
Ix
D
IA

29.
Feedback
On Facebook, they show the
link preview as soon as you
add it, so you know all is
working (and can preview)
UI
Ix
D
IA

30.
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
Ix
D
IA

31.
Alphabear won’t embarrass me socially

32.
Recognition over recall
Seeing is easier than scavenger hurts
U
I
I
x
D
I
A

33.
Don’t do this
Don’t make people memorize where things are!

34.
UI
Ix
D
IA

35.
Variation Unique Visitors Unique Clicks
Hamburger 120543 1211
Menu 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
Ix
D
IA

36.
U
I
I
x
D
I
APJ McCormick, Challenging Data Driven Design, WarmGun 2013

37.
UI
Ix
D
IA
PJ McCormick, Challenging Data Driven Design, WarmGun 2013
What do
these
dots
mean?

38.
UI
Ix
D
IA
PJ McCormick, Challenging Data Driven Design, WarmGun 2013

39.
UI
Ix
D
IA
PJ McCormick, Challenging Data Driven Design, WarmGun 2013

40.
UI
Ix
D
IA
PJ McCormick, Challenging Data Driven Design, WarmGun 2013
The navigation
carries
information.
Unless:

41.
Clear affordances
+
Recognition over recall
UI
Ix
D
IA

42.
USE CLEAR LANGUAGE 5
8
UI
Ix
D
IA

43.
Direct
Manipulation

44.
Harry Potter Years 1-4 on Ipad
Direct Manipulation
Harry Potter Years 5-7 on Ipad
Virtual Controller

45.
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
U
I
I
x
D
I
A

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

47.
FarmVille 2 Postmortem: What Grew Wild & What Withered Away: Wright Bagwell, Mike McCarthy

48.
Things you do

49.
OBSERVE
from IDEO’s Designkit.org

50.
67CONTEXTUAL INQUIRY, FIELD
STUDIES, & ETHNOGRAPHY
http://www.flickr.com/photos/halversongroup

51.
USABILITY TESTING
http://nform.com | http://uid.com

52.
ANALYZE
from IDEO’s Designkit.org

53.
CHUNK
FINDINGS
INTO AFFINITY GROUPS

54.
Play with possible models
Relationship
to other data
Credit: Steve Portigal

55.
Play with possible models
Frequency
Credit: Steve Portigal

56.
Play with possible models
Timeline
Credit: Steve Portigal

57.
MAKE

58.
COMMUNICATE
START HERE:
CONCEPT MODELS

59.
We explain things with pictures all
the time. How to conceive, how to
build…

60.
CONCEPT MODEL: a visual
representation of a set of ideas
that clarifies their meaning for
both the thinker and the
audience

61.
Concept models for ideas
See http://boxesandarrows.com/how-to-make-a-concept-
model/

62.
Concept Models to
Communicate to team

63.
Architecture concept model

64.
User
Designer
Mental
model
Conceptual
model
1. Discover
Mental Model
2. Understand
system
3. Synthesize
into conceptual
model
System
For Software,
Concept
modeling
proces

65.
How areas of site interlock
Via Andrew Hinton
@inkblurt
Consider conceptual
models over
sitemaps

66.
Stone
Librande’s One
Page Designs
are concept
models

67.
Flows

68.
Paula Scher modelled
out the approval
process at CBS
records in hope of
saving her sanity.

69.
8
7

70.
Content Models &
Information Architecture

71.
https://www.interaction-design.org/literature/article/what-is-information-architecture

72.
Organizing content (like inventory,
collections, etc)

73.
And yes, User Interface.

74.
WHAT MUST BE DONE WELL
UI
IxDIA
The User
Observe &
Understand
Organize
Content
Design
Behavior
Communicate
Clearly

75.
USER EXPERIENCE
DESIGN IS A BIG JOB
Too big?

76.
95 dan saffer

77.
UI
IxDIA
Th
e
Us
er
Copywriting
Graphic
Design
MARKETING
CUSTOMERSERVICE
The 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

78.
DISCUSSION

79.
LEARN MORE

80.
Don’t Be This Guy

81.
@cwodtke

82.
Why I am Not a Painter
Frank O'Hara
I am not a painter, I am a poet.
Why? I think I would rather be
a painter, but I am not. Well,
for instance, Mike Goldberg
is starting a painting. I drop in
"Sit down and have a drink" he
says. I drink; we drink. I look
up. "You have SARDINES in it."
"Yes, it needed something there."
"Oh." I go and the days go by
and I drop in again. The painting
is going on, and I go, and the days
go by. I drop in. The painting is
finished. "Where's SARDINES?"
All that's left is just
letters, "It was too much," Mike says. But
me?
One day I am thinking of
a color; orange. I write a line
about orange. Pretty soon it is a
whole page of words, not lines.
Then another page. There should be
so much more, not of orange, of
words, of how terrible orange is
and life. Days go by. It is even in
prose, I am a real poet. My poem
is finished and I haven't mentioned
orange yet. It's twelve poems, I call
it ORANGES. And one day in a gallery
I see Mike's painting, called SARDINES.