Aordances

in modern web design

andrew maier

Friday, March 26, 2010

Andrew Maier
Interaction Designer &
User Experience Enthusiast
andrew@uxbooth.com
@andrewmaier

Friday, March 26, 2010

whats up with
modern web design,
Andrew?

Friday, March 26, 2010

the web has

Changed
Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

from

Whence?
Friday, March 26, 2010

part

I
Friday, March 26, 2010

fundamental

Concepts

Aordance
The quality of an object allowing
an actionrelationship with an
actor.

Friday, March 26, 2010

a tour of

Aordability
Friday, March 26, 2010

What does this thing do?

Friday, March 26, 2010

What does this thing do?

Friday, March 26, 2010

What does this thing do?

Friday, March 26, 2010

What does this thing do?

Friday, March 26, 2010

No, seriously:
What does this thing
f***ing do?!
Friday, March 26, 2010

Signifier
A discrete unit of meaning,
including words, images,
gestures, scents, tastes, textures,
sounds.
Friday, March 26, 2010

We are all detectives, searching for clues to

enable us to function in this complex world.
Whether it is flags waving in the wind, the
dierence between empty or crowded train
platforms, or the desire lines illustrated by
footprints in the fields that suggest paths to
follow, we search for significant signs in
the world that oer guidance.

Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

The Design of Everyday Things

Don Norman
Friday, March 26, 2010

part

a
bit of

II

Industrial
Design

Friday, March 26, 2010

youre such a

Tool
Friday, March 26, 2010

Aordances
&
Constraints
Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

Simplify
Friday, March 26, 2010

Friday, March 26, 2010

Conceptual
Models
Friday, March 26, 2010

System Model

Mental Model

Interface Model

Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

the

Good
Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

the

Frustrating
Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

part

III
Friday, March 26, 2010

applied to

Websites

Conceptual
Models
Friday, March 26, 2010

System Model

Mental Model

Interface Model

Friday, March 26, 2010

microscopic &

Macroscopic
Friday, March 26, 2010

application

Elements
Friday, March 26, 2010

Im a Button, believe you me

Friday, March 26, 2010

Im a Button, believe you me

Friday, March 26, 2010

Im a Button, believe you me

Friday, March 26, 2010

Im a Button, believe you me

Friday, March 26, 2010

Im a Button, believe you me

Friday, March 26, 2010

Dont Make Me Think

Steve Krug
Aordances
Friday, March 26, 2010

application

Layout
Friday, March 26, 2010

panelselector
list
list

Friday, March 26, 2010

description

panelselector

Friday, March 26, 2010

canvas + palette

Friday, March 26, 2010

canvas + palette

Friday, March 26, 2010

one-window drilldown

Friday, March 26, 2010

Designing Interfaces
Jennifer Tidwell
Aordances
Friday, March 26, 2010

application

Context
Friday, March 26, 2010

Aordances
Friday, March 26, 2010

Friday, March 26, 2010

Should actions be buttons or links? It depends on the

action. Should a calendar view be in list-form or
grid-form? It depends where its being shown and
how long the time period is. Does every global
navigation link need to be on every page? Do you
need a global search bar everywhere? Do you need
the same exact footer on each page? The answer: It
depends.
Getting Real, 37signals

Friday, March 26, 2010

things
Friday, March 26, 2010

Patterns
Standards
Metaphor
Friday, March 26, 2010

Aordances
Friday, March 26, 2010

http://
ui-patterns.com

http://
developer.yahoo.com
/ypatterns/
Aordances
Friday, March 26, 2010

Designing Web Interfaces

Bill Scott & Theresa Neil
Aordances
Friday, March 26, 2010

Patterns
Standards
Metaphor
Friday, March 26, 2010

1024
768

Friday, March 26, 2010

header
content

footer
Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

Patterns
Standards
Metaphor
Friday, March 26, 2010

Aordances
Friday, March 26, 2010

Aordances
Friday, March 26, 2010

part

IV
Friday, March 26, 2010

dont try
too

Hard

Overdesign
Friday, March 26, 2010

independent of
visceral response,
this

Requires
cognition
Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

the uncanny

Valley
Friday, March 26, 2010

Friday, March 26, 2010

Aordances
Friday, March 26, 2010

In 1978, the Japanese roboticist Masahiro

Mori noticed something interesting: The more
humanlike his robots became, the more people
were attracted to them, but only up to a point.
If an android become too realistic and lifelike,
suddenly people were repelled and disgusted.

Clive Thompson

Friday, March 26, 2010

lifelike = lifeless

Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

Friday, March 26, 2010

Conclusion
Friday, March 26, 2010

identify possibilities

Friday, March 26, 2010

learn from
the

World
Friday, March 26, 2010

speak clearly &

in context

Friday, March 26, 2010

dont overdo it

Friday, March 26, 2010

http://uxbooth.com
Friday, March 26, 2010

Fin
@andrewmaier
andrew@uxbooth.com
Friday, March 26, 2010

References
WEBSITES
http://www.usabilitypost.com/
http://www.37signals.com/
http://www.codinghorror.com/
http://www.slate.com
http://wikipedia.org
http://jnd.org
http://www.jnd.org/dn.mss/
signifiers_not_affordances.html
http://www.akomarov.com
http://smashingmagazine.com
http://uiscraps.tumblr.com/

Friday, March 26, 2010

BOOKS
The Design of Everyday Things
Designing Interfaces
Designing Web Interfaces
Bringing Design to Software
Dont Make Me Think
WHITE PAPERS
Affordances Explained, May 2003
http://hci.stanford.edu/bds/2-liddle.html