Transcript
Page 1: Affordances in Modern Web Design

Affordances in modern web design

andrew maier

Friday, March 26, 2010

Page 2: Affordances in Modern Web Design

Andrew Maier

[email protected]@andrewmaier

Interaction Designer &User Experience Enthusiast

Friday, March 26, 2010

Page 3: Affordances in Modern Web Design

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

Friday, March 26, 2010

Page 4: Affordances in Modern Web Design

the web has

Changed

Friday, March 26, 2010

Page 5: Affordances in Modern Web Design

Friday, March 26, 2010

Page 6: Affordances in Modern Web Design

Friday, March 26, 2010

Page 7: Affordances in Modern Web Design

from Whence?

Friday, March 26, 2010

Page 8: Affordances in Modern Web Design

fundamental Concepts

part

IFriday, March 26, 2010

Page 9: Affordances in Modern Web Design

Affordance The quality of an object allowing an action–relationship with an actor.

Friday, March 26, 2010

Page 10: Affordances in Modern Web Design

a tour of Affordability

Friday, March 26, 2010

Page 11: Affordances in Modern Web Design

What does this thing do?

Friday, March 26, 2010

Page 12: Affordances in Modern Web Design

What does this thing do?

Friday, March 26, 2010

Page 13: Affordances in Modern Web Design

What does this thing do?

Friday, March 26, 2010

Page 14: Affordances in Modern Web Design

What does this thing do?Friday, March 26, 2010

Page 15: Affordances in Modern Web Design

No, seriously: What does this thing

f***ing do?! Friday, March 26, 2010

Page 16: Affordances in Modern Web Design

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

Friday, March 26, 2010

Page 17: Affordances in Modern Web Design

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

Page 18: Affordances in Modern Web Design

Friday, March 26, 2010

Page 19: Affordances in Modern Web Design

Friday, March 26, 2010

Page 20: Affordances in Modern Web Design

Friday, March 26, 2010

Page 21: Affordances in Modern Web Design

The Design of Everyday ThingsDon Norman

Friday, March 26, 2010

Page 22: Affordances in Modern Web Design

a bit ofpart

II IndustrialDesign

Friday, March 26, 2010

Page 23: Affordances in Modern Web Design

you’re such a

Tool Friday, March 26, 2010

Page 24: Affordances in Modern Web Design

Affordances&

ConstraintsFriday, March 26, 2010

Page 25: Affordances in Modern Web Design

Friday, March 26, 2010

Page 26: Affordances in Modern Web Design

Friday, March 26, 2010

Page 27: Affordances in Modern Web Design

Friday, March 26, 2010

Page 28: Affordances in Modern Web Design

SimplifyFriday, March 26, 2010

Page 29: Affordances in Modern Web Design

Friday, March 26, 2010

Page 30: Affordances in Modern Web Design

Conceptual Models

Friday, March 26, 2010

Page 31: Affordances in Modern Web Design

System Model

Interface Model

Mental Model

Friday, March 26, 2010

Page 32: Affordances in Modern Web Design

Friday, March 26, 2010

Page 33: Affordances in Modern Web Design

Friday, March 26, 2010

Page 34: Affordances in Modern Web Design

Friday, March 26, 2010

Page 35: Affordances in Modern Web Design

Friday, March 26, 2010

Page 36: Affordances in Modern Web Design

theGood

Friday, March 26, 2010

Page 37: Affordances in Modern Web Design

Friday, March 26, 2010

Page 38: Affordances in Modern Web Design

Friday, March 26, 2010

Page 39: Affordances in Modern Web Design

the

FrustratingFriday, March 26, 2010

Page 40: Affordances in Modern Web Design

Friday, March 26, 2010

Page 41: Affordances in Modern Web Design

Friday, March 26, 2010

Page 42: Affordances in Modern Web Design

applied to part

III Websites

Friday, March 26, 2010

Page 43: Affordances in Modern Web Design

Conceptual Models

Friday, March 26, 2010

Page 44: Affordances in Modern Web Design

System Model

Interface Model

Mental Model

Friday, March 26, 2010

Page 45: Affordances in Modern Web Design

microscopic & Macroscopic

Friday, March 26, 2010

Page 46: Affordances in Modern Web Design

applicationElements

Friday, March 26, 2010

Page 47: Affordances in Modern Web Design

I’m a Button, believe you me

Friday, March 26, 2010

Page 48: Affordances in Modern Web Design

I’m a Button, believe you me

Friday, March 26, 2010

Page 49: Affordances in Modern Web Design

I’m a Button, believe you me

Friday, March 26, 2010

Page 50: Affordances in Modern Web Design

I’m a Button, believe you me

Friday, March 26, 2010

Page 51: Affordances in Modern Web Design

I’m a Button, believe you me

Friday, March 26, 2010

Page 52: Affordances in Modern Web Design

Affordances

Don’t Make Me ThinkSteve Krug

Friday, March 26, 2010

Page 53: Affordances in Modern Web Design

application Layout

Friday, March 26, 2010

Page 54: Affordances in Modern Web Design

list

list

description

panel–selector

Friday, March 26, 2010

Page 55: Affordances in Modern Web Design

panel–selector

Friday, March 26, 2010

Page 56: Affordances in Modern Web Design

canvas + palette

Friday, March 26, 2010

Page 57: Affordances in Modern Web Design

canvas + palette

Friday, March 26, 2010

Page 58: Affordances in Modern Web Design

one-window drilldown

Friday, March 26, 2010

Page 59: Affordances in Modern Web Design

Affordances

Designing InterfacesJennifer Tidwell

Friday, March 26, 2010

Page 60: Affordances in Modern Web Design

application Context

Friday, March 26, 2010

Page 61: Affordances in Modern Web Design

AffordancesFriday, March 26, 2010

Page 62: Affordances in Modern Web Design

Friday, March 26, 2010

Page 63: Affordances in Modern Web Design

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

Page 64: Affordances in Modern Web Design

3 things

Friday, March 26, 2010

Page 65: Affordances in Modern Web Design

Patterns StandardsMetaphor

Friday, March 26, 2010

Page 66: Affordances in Modern Web Design

AffordancesFriday, March 26, 2010

Page 68: Affordances in Modern Web Design

Affordances

Designing Web InterfacesBill Scott & Theresa Neil

Friday, March 26, 2010

Page 69: Affordances in Modern Web Design

Patterns StandardsMetaphor

Friday, March 26, 2010

Page 70: Affordances in Modern Web Design

1024

768

Friday, March 26, 2010

Page 71: Affordances in Modern Web Design

header

content

footerFriday, March 26, 2010

Page 72: Affordances in Modern Web Design

Friday, March 26, 2010

Page 73: Affordances in Modern Web Design

Friday, March 26, 2010

Page 74: Affordances in Modern Web Design

Patterns StandardsMetaphor

Friday, March 26, 2010

Page 75: Affordances in Modern Web Design

AffordancesFriday, March 26, 2010

Page 76: Affordances in Modern Web Design

AffordancesFriday, March 26, 2010

Page 77: Affordances in Modern Web Design

don’t trytoo

part

IV HardFriday, March 26, 2010

Page 78: Affordances in Modern Web Design

Overdesign

Friday, March 26, 2010

Page 79: Affordances in Modern Web Design

independent of visceral response, this Requires cognition

Friday, March 26, 2010

Page 80: Affordances in Modern Web Design

Friday, March 26, 2010

Page 81: Affordances in Modern Web Design

Friday, March 26, 2010

Page 82: Affordances in Modern Web Design

Friday, March 26, 2010

Page 83: Affordances in Modern Web Design

Friday, March 26, 2010

Page 84: Affordances in Modern Web Design

Friday, March 26, 2010

Page 85: Affordances in Modern Web Design

the uncanny

ValleyFriday, March 26, 2010

Page 86: Affordances in Modern Web Design

Friday, March 26, 2010

Page 87: Affordances in Modern Web Design

AffordancesFriday, March 26, 2010

Page 88: Affordances in Modern Web Design

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

Page 89: Affordances in Modern Web Design

lifelike = lifeless

Friday, March 26, 2010

Page 90: Affordances in Modern Web Design

Friday, March 26, 2010

Page 91: Affordances in Modern Web Design

Friday, March 26, 2010

Page 92: Affordances in Modern Web Design

Friday, March 26, 2010

Page 93: Affordances in Modern Web Design

Friday, March 26, 2010

Page 94: Affordances in Modern Web Design

Conclusion

Friday, March 26, 2010

Page 95: Affordances in Modern Web Design

identify possibilities

Friday, March 26, 2010

Page 96: Affordances in Modern Web Design

learn from the

WorldFriday, March 26, 2010

Page 97: Affordances in Modern Web Design

speak clearly &in context

Friday, March 26, 2010

Page 98: Affordances in Modern Web Design

don’t overdo it

Friday, March 26, 2010

Page 99: Affordances in Modern Web Design

http://uxbooth.com

Friday, March 26, 2010

Page 101: Affordances in Modern Web Design

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


Recommended