Affordances in Modern Web Design
•
119 likes•68,741 views
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.
Report
Share
Related slideshows
Affordances in Modern Web Design
- 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