Affordances in Modern Web Design

Aﬀordances
in modern web design

andrew maier

Friday, March 26, 2010

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


what’s up with
“modern web design,”
Andrew?


the web has
Changed

from
Whence?

part

I fundamental
Concepts


Aﬀordance
The quality of an object allowing
an action–relationship with an
actor.


a tour of
Aﬀordability

What does this thing do?


No, seriously:
What does this thing
f***ing do?!

Signiﬁer
A discrete unit of meaning,
including words, images,
gestures, scents, tastes, textures,
sounds.


“ e are all detectives, searching for clues to
enable us to function in this complex world.
Whether it is ags waving in the wind, the
diﬀerence between empty or crowded train
platforms, or the desire lines illustrated by
footprints in the elds that suggest paths to
follow, we search for signi cant signs in
the world that oﬀer guidance. ”


The Design of Everyday Things
Don Norman


a
part bit of
Industrial
II Design


you’re such a
Tool

Aﬀordances
&
Constraints

Simplify

Conceptual
Models

System Model Mental Model

Interface Model


the
Good

the
Frustrating

part
applied to
III Websites


microscopic &
Macroscopic

application
Elements

I’m a Button, believe you me


Don’t Make Me Think
Steve Krug
Aﬀordances

application
Layout

panel–selector

list

list
description


panel–selector


canvas + palette


one-window drilldown


Designing Interfaces
Jennifer Tidwell
Aﬀordances

application
Context

Aﬀordances

“ hould actions be buttons or links? It depends on the
action. Should a calendar view be in list-form or
grid-form? It depends where it’s 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? e answer: “It
depends.”

–Getting Real, 37signals


3
things

Patterns
Standards
Metaphor

http://
ui-patterns.com

http://
developer.yahoo.com
/ypatterns/

Aﬀordances

Designing Web Interfaces
Bill Scott & Theresa Neil
Aﬀordances

1024

768


header

content

footer

part don’t try
too
IV
Hard

Overdesign


independent of
visceral response,
this
Requires
cognition

the uncanny
Valley

“ n 1978, the Japanese roboticist Masahiro
Mori noticed something interesting: e 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 ompson


lifelike = lifeless


Conclusion


identify possibilities


learn from
the
World

speak clearly &
in context


don’t overdo it


http://uxbooth.com

Fin

@andrewmaier
andrew@uxbooth.com

References
WEBSITES BOOKS
•http://www.usabilitypost.com/ • The Design of Everyday Things
•http://www.37signals.com/ • Designing Interfaces
•http://www.codinghorror.com/ • Designing Web Interfaces
•http://www.slate.com • Bringing Design to Software
•http://wikipedia.org • Don’t Make Me Think
•http://jnd.org
•http://www.jnd.org/dn.mss/
signifiers_not_affordances.html WHITE PAPERS
•http://www.akomarov.com • Affordances Explained, May 2003
•http://smashingmagazine.com • http://hci.stanford.edu/bds/2-liddle.html
•http://uiscraps.tumblr.com/


Affordances in Modern Web Design

More Related Content

What's hot

Viewers also liked

Similar to Affordances in Modern Web Design

Recently uploaded

Affordances in Modern Web Design