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 ...
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.
Affordances in Modern Web DesignPresentation Transcript
Affordances
in Modern Web Design
July 2009
Hello, My name is...
Andrew
Interaction & User Experience
Designer
andrew@uxbooth.com
@andrewmaier
uxbooth.co 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 action–relationship
with an actor.
The Birth
of Affordances
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
“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
signifiers:
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
Signifier
A discrete unit of meaning,
including words, images, gestures,
scents, tastes, textures, sounds.
Visual/Behavioral
The Language of visual
communication
• Conceptual models
• Constraints
• “Affordances” –– Signifiers
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/Constraint–bearing
(User’s Model)
Model)
Interface Model
(Designer’s 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 & Signifiers
• Conventions, patterns and metaphors
• Appeals to the senses
• Again, requires little–to–no cognition
Affordance
Designing Web Interfaces
Bill Scott & Theresa Neil
Affordance
Metaphor
• Base design off of real–world
objects
• Instantly forms mental models
• Requires no significant ramp–up
• 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 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
Affordance
Regular Safari Keyboard
Keyboard
Affordance
Context Over Consistency
Regular Header
Post–Search Header
Affordance
Overdesign
Over–Design
• 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
Don’t 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
• Don’t overdesign
Affordance
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
•http://jnd.org
•http://www.jnd.org/dn.mss/
signifiers_not_affordances.html
WHITE PAPERS
•http://www.akomarov.com
•http://smashingmagazine.com • Affordances Explained, May
•http://uiscraps.tumblr.com/ 2003
• http://hci.stanford.edu/bds/2-
liddle.html
Affordance
Jamie Stanton
1–1 of 1 previous next