Affordances in Modern Web Design

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

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 signiﬁers: 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

Signiﬁer A discrete unit of meaning, including words, images, gestures, scents, tastes, textures, sounds.

Visual/Behavioral The Language of visual communication • Conceptual models • Constraints • “Affordances” –– Signiﬁers 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 & Signiﬁers • Conventions, patterns and metaphors • Appeals to the senses • Again, requires little–to–no cognition Affordance

Affordance

Web Design & System Design

“Web” Design • Visual Design • Interaction; Behavioral Design • System; IA/UX Design Affordance

Manifest • Use Signiﬁers & Constraints • Recognition over Recall • Create Context with Meta Design Affordance

Signiﬁers & 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:// ui-patterns.com http:// developer.yahoo.co m/ypatterns/ Affordance

http:// emberapp.com /explore/ http:// konigi.com Affordance

Designing Interfaces Jennifer Tidwell Affordance

Designing Web Interfaces Bill Scott & Theresa Neil Affordance

Metaphor • Base design off of real–world objects • Instantly forms mental models • Requires no signiﬁcant ramp–up • Can be very simple: shadows, polaroids 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

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/ signiﬁers_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

http://www.vanseodesign.com	3667
http://css-tricks.com	992
http://notrelienquotidien.com	491
http://marcogriffiths.wordpress.com	135
http://www.slideshare.net	91
http://www.yeeyan.com	75
http://www.un-a-un.com	60
http://article.yeeyan.org	38
http://www.usercentered.de	18
http://onstuimig.nl	17
http://blog.youmila.com	9
http://www.iwanna.cn	7
http://translate.googleusercontent.com	7
http://user-experience-specialist.blogspot.com	3
http://user-experience-specialist.blogspot.de	3
http://feeds2.feedburner.com	3
http://us-w1.rockmelt.com	3
http://www.google.com	2
file://	2
http://ojngboog.blogspot.com	2
http://1823214455.nvmodules.netvibes.com	2
http://www.yeeyan.org	2
https://s6-us2.ixquick-proxy.com	2
http://reader.youdao.com	2
http://paper.li	2
http://webcache.googleusercontent.com	1
http://xss.yandex.net	1
http://127.0.0.1:8795	1
http://www.netdynam.org	1
http://www.lmodules.com	1
http://xianguo.com	1
http://www.hanrss.com	1
http://zhuaxia.com	1

Affordances in Modern Web Design

by Andrew Maier on Jul 26, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

33 Embeds 5,643

Statistics

Affordances in Modern Web Design — Presentation Transcript