Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Affordances in Modern Web Design


Published on

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.

Published in: Design, Technology, Business

Affordances in Modern Web Design

  1. Affordances in Modern Web Design July 2009
  2. Hello, My name is... Andrew Interaction & User Experience Designer @andrewmaier hashrocket.c m om Affordance
  3. What does this thing do? Affordance
  4. What does this thing do? Affordance
  5. What does this thing do? Affordance
  6. What does this thing do? Affordance
  7. Affordance The a quality of an object allowing an action–relationship with an actor.
  8. The Birth of Affordances
  9. J. J. Gibson (1904–79) • Visual Psychologist • Gestalt Psychology, Perception and Action • Gibson Affordance Theory • Assess the State of the World: Threats and promises Affordance
  10. “an affordance is not bestowed upon an object by a need of an observer and his act of perceiving it... [for example] to be graspable, an object must have opposite surfaces separated by a distance less than the span of the hand.” – J. J. Gibson Affordance
  11. Don Norman (1935 ) • Neilsen, Norman Group • Doctor of Philosophy in psychology • The Design of Everyday Things • Perceived Affordances • Added the notion of signifiers: Affordance
  12. “We are all detectives, searching for clues to enable us to function in this complex world. Whether it is flags waving in the wind, the difference between empty or crowded train platforms, or the desire lines illustrated by footprints in the fields that suggest paths to follow, we search for significant signs in the world that offer guidance. In the social world comprised of people and technology, these cues are social signifiers.” – Don Norman Affordance
  13. Signifier A discrete unit of meaning, including words, images, gestures, scents, tastes, textures, sounds.
  14. Visual/Behavioral The Language of visual communication • Conceptual models • Constraints • “Affordances” –– Signifiers Affordance
  15. Conceptual • What the system is and what it can do • Three parts: system, interface, mental ... • Communicated indirectly, Affordance
  16. Conceptual System Model Conceptual Model (Physical/Constraint–bearing (User’s Model) Model) Interface Model (Designer’s Model) Affordance
  17. Conceptual • Recognition over Recall • Good: Digital Spreadsheets, Video Games Physics Engines •Questionable: Thermostats, Google Wave Affordance
  18. Constraints (and Tools) • “An entity used to interface between two or more domains...” • Requires the designer to conceptualize various domains • Reduce Implied complexity Affordance
  19. Tools Affordance
  20. Tools vs. Affordance
  21. Affordances & Signifiers • Conventions, patterns and metaphors • Appeals to the senses • Again, requires little–to–no cognition Affordance
  22. Affordance
  23. Affordance
  24. Web Design & System Design
  25. “Web” Design • Visual Design • Interaction; Behavioral Design • System; IA/UX Design Affordance
  26. Manifest • Use Signifiers & Constraints • Recognition over Recall • Create Context with Meta Design Affordance
  27. Signifiers & Constraints • Invitations, labels, Icons • Good visual design principles • Constraints, reduce load Affordance
  28. Affordance
  29. Default Layout “Wiggling” Layout Affordance
  30. Recognition over Recall • Standardization (tabs, resolution, IA...openid, fb) • Shared libraries Affordance
  31. http:// http:// m/ypatterns/ Affordance
  32. http:// /explore/ http:// Affordance
  33. Designing Interfaces Jennifer Tidwell Affordance
  34. Designing Web Interfaces Bill Scott & Theresa Neil Affordance
  35. Metaphor • Base design off of real–world objects • Instantly forms mental models • Requires no significant ramp–up • Can be very simple: shadows, polaroids Affordance
  36. Affordance
  37. Affordance
  38. Affordance
  39. Create Context • Meta Design: Group related functionality • Information Architecture Affordance
  40. Context Over Consistency 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? The answer: “It depends.” Getting Real, 37signals Affordance
  41. Affordance
  42. Regular Safari Keyboard Keyboard Affordance
  43. Context Over Consistency Regular Header Post–Search Header Affordance
  44. Overdesign
  45. Over–Design • Sensory Overload • Obscures content •Independent of visceral response –Requires cognition •Not just jealously on my part Affordance
  46. Used with permission from Alex Komarov
  47. Used with permission from Alex Komarov
  48. Realism in Design • Lifelike = Lifeless •Robotics, Videogames, Comics, Movies, etc. • Uncanny valley •Empathy & Possiblity Affordance
  49. vs. Affordance
  50. The Uncanny Valley In 1978, the Japanese roboticist Masahiro Mori noticed something interesting: The 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 Thompson Affordance
  51. Zimbra Microsoft Outlook Affordance
  52. Affordance
  53. Don’t Make Me Think Steve Krug Affordance
  54. Understanding Comics Scott McCloud Affordance
  55. Conclusion
  56. Affordances in Design • Identify action possibilities, goals • Consciously learn from the world, your users do • Manifest your design, use metaphor • Don’t overdesign Affordance
  57. References WEBSITES BOOKS • • The Design of Everyday Things • • Designing Interfaces • • Designing Web Interfaces • • Bringing Design to Software • • • signifiers_not_affordances.html WHITE PAPERS • • • Affordances Explained, May • 2003 • liddle.html Affordance
  58. Fin