Affordances in Modern Web Design
Upcoming SlideShare
Loading in...5
×
 

Affordances in Modern Web Design

on

  • 43,711 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 ...

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.

Statistics

Views

Total Views
43,711
Views on SlideShare
30,177
Embed Views
13,534

Actions

Likes
93
Downloads
850
Comments
1

52 Embeds 13,534

http://www.vanseodesign.com 10128
http://css-tricks.com 1476
http://notrelienquotidien.com 1205
http://marcogriffiths.wordpress.com 159
http://www.slideshare.net 91
http://danielhocutt.com 78
http://www.yeeyan.com 75
http://www.un-a-un.com 71
http://article.yeeyan.org 40
http://engl894s14.courses.digitalodu.com 33
http://onstuimig.nl 27
http://www.usercentered.de 23
https://twitter.com 22
http://translate.googleusercontent.com 14
http://blog.youmila.com 9
http://www.iwanna.cn 7
http://www.yeeyan.org 7
http://un-a-un.com 6
http://user-experience-specialist.blogspot.de 6
http://1823214455.nvmodules.netvibes.com 5
http://www.google.com 4
http://ugvle.ucsc.cmb.ac.lk 3
http://webcache.googleusercontent.com 3
http://feeds2.feedburner.com 3
http://us-w1.rockmelt.com 3
http://user-experience-specialist.blogspot.com 3
http://ojngboog.blogspot.com 2
file:// 2
http://vinylc.wordpress.com 2
http://www.linkedin.com 2
https://s6-us2.ixquick-proxy.com 2
http://reader.youdao.com 2
http://paper.li 2
https://www.google.co.uk 1
http://user-experience-specialist.blogspot.in 1
http://127.0.0.1:8795 1
http://xss.yandex.net 1
http://www.lmodules.com 1
http://awesomepitch.co 1
http://www.google.fr 1
https://www.google.com 1
http://131.253.14.98 1
http://www.mefeedia.com 1
http://www.netdynam.org 1
http://pigeindexermau 1
http://zhuaxia.com 1
https://si0.twimg.com 1
http://xianguo.com 1
http://72.30.186.176 1
http://www.onstuimig.nl 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • great read for affordances in basic web usability
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Affordances in Modern Web Design Affordances in Modern Web Design Presentation 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
  • Affordance
  • Affordance
  • Web Design & System Design
  • “Web” Design • Visual Design • Interaction; Behavioral Design • System; IA/UX Design Affordance
  • Manifest • Use Signifiers & Constraints • Recognition over Recall • Create Context with Meta Design Affordance
  • Signifiers & 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 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
  • Fin