affordances in modern web design
TRANSCRIPT
Affordances in modern web design
andrew maier
Friday, March 26, 2010
Andrew Maier
[email protected]@andrewmaier
Interaction Designer &User Experience Enthusiast
Friday, March 26, 2010
what’s 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
fundamental Concepts
part
IFriday, March 26, 2010
Affordance The quality of an object allowing an action–relationship with an actor.
Friday, March 26, 2010
a tour of Affordability
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 "ags waving in the wind, the difference 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 offer guidance. ”
“
Friday, March 26, 2010
Friday, March 26, 2010
Friday, March 26, 2010
Friday, March 26, 2010
The Design of Everyday ThingsDon Norman
Friday, March 26, 2010
a bit ofpart
II IndustrialDesign
Friday, March 26, 2010
you’re such a
Tool Friday, March 26, 2010
Affordances&
ConstraintsFriday, March 26, 2010
Friday, March 26, 2010
Friday, March 26, 2010
Friday, March 26, 2010
SimplifyFriday, March 26, 2010
Friday, March 26, 2010
Conceptual Models
Friday, March 26, 2010
System Model
Interface Model
Mental Model
Friday, March 26, 2010
Friday, March 26, 2010
Friday, March 26, 2010
Friday, March 26, 2010
Friday, March 26, 2010
theGood
Friday, March 26, 2010
Friday, March 26, 2010
Friday, March 26, 2010
the
FrustratingFriday, March 26, 2010
Friday, March 26, 2010
Friday, March 26, 2010
applied to part
III Websites
Friday, March 26, 2010
Conceptual Models
Friday, March 26, 2010
System Model
Interface Model
Mental Model
Friday, March 26, 2010
microscopic & Macroscopic
Friday, March 26, 2010
applicationElements
Friday, March 26, 2010
I’m a Button, believe you me
Friday, March 26, 2010
I’m a Button, believe you me
Friday, March 26, 2010
I’m a Button, believe you me
Friday, March 26, 2010
I’m a Button, believe you me
Friday, March 26, 2010
I’m a Button, believe you me
Friday, March 26, 2010
Affordances
Don’t Make Me ThinkSteve Krug
Friday, March 26, 2010
application Layout
Friday, March 26, 2010
list
list
description
panel–selector
Friday, March 26, 2010
panel–selector
Friday, March 26, 2010
canvas + palette
Friday, March 26, 2010
canvas + palette
Friday, March 26, 2010
one-window drilldown
Friday, March 26, 2010
Affordances
Designing InterfacesJennifer Tidwell
Friday, March 26, 2010
application Context
Friday, March 26, 2010
AffordancesFriday, 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 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
“
Friday, March 26, 2010
3 things
Friday, March 26, 2010
Patterns StandardsMetaphor
Friday, March 26, 2010
AffordancesFriday, March 26, 2010
Affordances
http://ui-patterns.com
http://developer.yahoo.com/ypatterns/
Friday, March 26, 2010
Affordances
Designing Web InterfacesBill Scott & Theresa Neil
Friday, March 26, 2010
Patterns StandardsMetaphor
Friday, March 26, 2010
1024
768
Friday, March 26, 2010
header
content
footerFriday, March 26, 2010
Friday, March 26, 2010
Friday, March 26, 2010
Patterns StandardsMetaphor
Friday, March 26, 2010
AffordancesFriday, March 26, 2010
AffordancesFriday, March 26, 2010
don’t trytoo
part
IV HardFriday, March 26, 2010
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
ValleyFriday, March 26, 2010
Friday, March 26, 2010
AffordancesFriday, March 26, 2010
In 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
“
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
WorldFriday, March 26, 2010
speak clearly &in context
Friday, March 26, 2010
don’t overdo it
Friday, March 26, 2010
ReferencesW E B S I T E S
•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/
B O O K S
• The Design of Everyday Things• Designing Interfaces• Designing Web Interfaces• Bringing Design to Software• Don’t Make Me Think
W H I T E P A P E R S
• Affordances Explained, May 2003• http://hci.stanford.edu/bds/2-liddle.html
Friday, March 26, 2010