Click here to load reader

Affordances in Modern Web Design

  • View

  • Download

Embed Size (px)


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.

Text of Affordances in Modern Web Design

  • Affordances in Modern Web Design July 2009
  • Hello, My name is... Andrew Interaction & User Experience Designer [email protected] @andrewmaier hashrocket.c m om Affordance
  • What does this thing do? Affordance
  • What does this thing do? Affordance
  • What does this thing do? Affordance
  • What does this thing do? Affordance
  • Affordance The a quality of an object allowing an actionrelationship with an actor.
  • The Birth of Affordances
  • J. J. Gibson (190479) Visual Psychologist Gestalt Psychology, Perception and Action Gibson Affordance Theory Assess the State of the World: Threats and promises Affordance
  • 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
  • Don Norman (1935 ) Neilsen, Norman Group Doctor of Philosophy in psychology The Design of Everyday Things Perceived Affordances Added the notion of signiers: Affordance
  • 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
  • Signier A discrete unit of meaning, including words, images, gestures, scents, tastes, textures, sounds.
  • Visual/Behavioral The Language of visual communication Conceptual models Constraints Affordances Signiers Affordance
  • Conceptual What the system is and what it can do Three parts: system, interface, mental ... Communicated indirectly, Affordance
  • Conceptual System Model Conceptual Model (Physical/Constraintbearing (Users Model) Model) Interface Model (Designers Model) Affordance
  • Conceptual Recognition over Recall Good: Digital Spreadsheets, Video Games Physics Engines Questionable: Thermostats, Google Wave Affordance
  • Constraints (and Tools) An entity used to interface between two or more domains... Requires the designer to conceptualize various domains Reduce Implied complexity Affordance
  • Tools Affordance
  • Tools vs. Affordance
  • Affordances & Signiers Conventions, patterns and metaphors Appeals to the senses Again, requires littletono cognition Affordance
  • Affordance
  • Affordance
  • Web Design & System Design
  • Web Design Visual Design Interaction; Behavioral Design System; IA/UX Design Affordance
  • Manifest Use Signiers & Constraints Recognition over Recall Create Context with Meta Design Affordance
  • Signiers & Constraints Invitations, labels, Icons Good visual design principles Constraints, reduce load Affordance
  • Affordance
  • Default Layout Wiggling Layout Affordance
  • Recognition over Recall Standardization (tabs, resolution, IA...openid, fb) Shared libraries Affordance
  • http:// http:// m/ypatterns/ Affordance
  • http:// /explore/ http:// Affordance
  • Designing Interfaces Jennifer Tidwell Affordance
  • Designing Web Interfaces Bill Scott & Theresa Neil Affordance
  • Metaphor Base design off of realworld objects Instantly forms mental models Requires no signicant rampup Can be very simple: shadows, polaroids Affordance
  • Affordance
  • Affordance
  • Affordance
  • Create Context Meta Design: Group related functionality Information Architecture Affordance
  • 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 its 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
  • Affordance
  • Regular Safari Keyboard Keyboard Affordance
  • Context Over Consistency Regular Header PostSearch Header Affordance
  • Overdesign
  • OverDesign Sensory Overload Obscures content Independent of visceral response Requires cognition Not just jealously on my part Affordance
  • Used with permission from Alex Komarov
  • Used with permission from Alex Komarov
  • Realism in Design Lifelike = Lifeless Robotics, Videogames, Comics, Movies, etc. Uncanny valley Empathy & Possiblity Affordance
  • vs. Affordance
  • 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
  • Zimbra Microsoft Outlook Affordance
  • Affordance
  • Dont Make Me Think Steve Krug Affordance
  • Understanding Comics Scott McCloud Affordance
  • Conclusion
  • Affordances in Design Identify action possibilities, goals Consciously learn from the world, your users do Manifest your design, use metaphor Dont overdesign Affordance
  • References WEBSITES BOOKS The Design of Everyday Things Designing Interfaces Designing Web Interfaces Bringing Design to Software signiers_not_affordances.html WHITE PAPERS Affordances Explained, May 2003 liddle.html Affordance
  • Fin