Andrew Maier discusses and defines affordances, a concept that is rooted in psychology, and first manifested within a practical application in industrial design. Andrew then shows how to bring these concepts to web and interface design. Lastly, Andrew speaks to overdesign in interface design and how to avoid it.

1. Affordances
in modern web design
andrew maier
Friday, March 26, 2010

2. Andrew Maier
Interaction Designer &
User Experience Enthusiast
andrew@uxbooth.com
@andrewmaier
Friday, March 26, 2010

3. what’s up with
“modern web design,”
Andrew?
Friday, March 26, 2010

4. the web has
Changed
Friday, March 26, 2010

5. Friday, March 26, 2010

6. Friday, March 26, 2010

7. from
Whence?
Friday, March 26, 2010

8. part
I fundamental
Concepts
Friday, March 26, 2010

9. Affordance
The quality of an object allowing
an action–relationship with an
actor.
Friday, March 26, 2010

10. a tour of
Affordability
Friday, March 26, 2010

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

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

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

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

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

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

17. “ 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
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

18. Friday, March 26, 2010

19. Friday, March 26, 2010

20. Friday, March 26, 2010

21. The Design of Everyday Things
Don Norman
Friday, March 26, 2010

22. a
part bit of
Industrial
II Design
Friday, March 26, 2010

23. you’re such a
Tool
Friday, March 26, 2010

24. Affordances
&
Constraints
Friday, March 26, 2010

25. Friday, March 26, 2010

26. Friday, March 26, 2010

27. Friday, March 26, 2010

28. Simplify
Friday, March 26, 2010

29. Friday, March 26, 2010

30. Conceptual
Models
Friday, March 26, 2010

31. System Model Mental Model
Interface Model
Friday, March 26, 2010

32. Friday, March 26, 2010

33. Friday, March 26, 2010

34. Friday, March 26, 2010

35. Friday, March 26, 2010

36. the
Good
Friday, March 26, 2010

37. Friday, March 26, 2010

38. Friday, March 26, 2010

39. the
Frustrating
Friday, March 26, 2010

40. Friday, March 26, 2010

41. Friday, March 26, 2010

42. part
applied to
III Websites
Friday, March 26, 2010

43. Conceptual
Models
Friday, March 26, 2010

44. System Model Mental Model
Interface Model
Friday, March 26, 2010

45. microscopic &
Macroscopic
Friday, March 26, 2010

46. application
Elements
Friday, March 26, 2010

47. I’m a Button, believe you me
Friday, March 26, 2010

48. I’m a Button, believe you me
Friday, March 26, 2010

49. I’m a Button, believe you me
Friday, March 26, 2010

50. I’m a Button, believe you me
Friday, March 26, 2010

51. I’m a Button, believe you me
Friday, March 26, 2010

52. Don’t Make Me Think
Steve Krug
Affordances
Friday, March 26, 2010

53. application
Layout
Friday, March 26, 2010

54. panel–selector
list
list
description
Friday, March 26, 2010

55. panel–selector
Friday, March 26, 2010

56. canvas + palette
Friday, March 26, 2010

57. canvas + palette
Friday, March 26, 2010

58. one-window drilldown
Friday, March 26, 2010

59. Designing Interfaces
Jennifer Tidwell
Affordances
Friday, March 26, 2010

60. application
Context
Friday, March 26, 2010

61. Affordances
Friday, March 26, 2010

62. Friday, March 26, 2010

63. “ 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
Friday, March 26, 2010

64. 3
things
Friday, March 26, 2010

65. Patterns
Standards
Metaphor
Friday, March 26, 2010

66. Affordances
Friday, March 26, 2010

67. http://
ui-patterns.com
http://
developer.yahoo.com
/ypatterns/
Affordances
Friday, March 26, 2010

68. Designing Web Interfaces
Bill Scott & Theresa Neil
Affordances
Friday, March 26, 2010

69. Patterns
Standards
Metaphor
Friday, March 26, 2010

70. 1024
768
Friday, March 26, 2010

71. header
content
footer
Friday, March 26, 2010

72. Friday, March 26, 2010

73. Friday, March 26, 2010

74. Patterns
Standards
Metaphor
Friday, March 26, 2010

75. Affordances
Friday, March 26, 2010

76. Affordances
Friday, March 26, 2010

77. part don’t try
too
IV
Hard
Friday, March 26, 2010

78. Overdesign
Friday, March 26, 2010

79. independent of
visceral response,
this
Requires
cognition
Friday, March 26, 2010

80. Friday, March 26, 2010

81. Friday, March 26, 2010

82. Friday, March 26, 2010

83. Friday, March 26, 2010

84. Friday, March 26, 2010

85. the uncanny
Valley
Friday, March 26, 2010

86. Friday, March 26, 2010

87. Affordances
Friday, March 26, 2010

88. “ 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
Friday, March 26, 2010

89. lifelike = lifeless
Friday, March 26, 2010

90. Friday, March 26, 2010

91. Friday, March 26, 2010

92. Friday, March 26, 2010

93. Friday, March 26, 2010

94. Conclusion
Friday, March 26, 2010

95. identify possibilities
Friday, March 26, 2010

96. learn from
the
World
Friday, March 26, 2010

97. speak clearly &
in context
Friday, March 26, 2010

98. don’t overdo it
Friday, March 26, 2010

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

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

101. 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/
Friday, March 26, 2010