Affordances
in Modern Web Design

     July 2009
Hello, My name is...


      Andrew
 Interaction & User Experience
 Designer
 andrew@uxbooth.com
 @andrewmaier




uxbooth...
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
• As...
“an affordance is not bestowed upon an object by a need
of an observer and his act of perceiving it... [for example]
to be...
Don Norman (1935 )
• Neilsen, Norman Group
• Doctor of Philosophy in
   psychology
• The Design of Everyday
Things
• Perce...
“We are all detectives, searching for clues to enable us to function in this
complex world. Whether it is flags waving in ...
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” –– Sign...
Conceptual
• What the system is and what it
can do

• Three parts: system, interface,
mental ...

• Communicated indirectl...
Conceptual
     System Model                    Conceptual Model
  (Physical/Constraint–bearing
                          ...
Conceptual
• Recognition over Recall
• Good: Digital
Spreadsheets, Video Games
Physics Engines
•Questionable:
Thermostats,...
Constraints (and Tools)
• “An entity used to interface
  between two or more domains...”
• Requires the designer to
  conc...
Tools




        Affordance
Tools

        vs.




              Affordance
Affordances & Signifiers
• Conventions, patterns and metaphors
• Appeals to the senses
• Again, requires little–to–no cogni...
Affordance
Affordance
Web Design
 & System Design
“Web” Design
• Visual Design
• Interaction; Behavioral
Design
• System; IA/UX Design

                            Affordan...
Manifest
• Use Signifiers & Constraints
• Recognition over Recall
• Create Context with Meta
Design


                     ...
Signifiers & Constraints
• Invitations, labels, Icons
• Good visual design
principles
• Constraints, reduce load

         ...
Affordance
Default Layout   “Wiggling”
                 Layout
                              Affordance
Recognition over Recall
• Standardization (tabs,
resolution, IA...openid,
fb)
• Shared libraries

                       A...
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...
Affordance
Affordance
Affordance
Create Context
• Meta Design: Group
related
    functionality
• Information Architecture


                             Af...
Context Over Consistency
Should actions be buttons or links? It depends on the action. Should
a calendar view be in list-f...
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 jealou...
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...
vs.



      Affordance
The Uncanny Valley
In 1978, the Japanese roboticist Masahiro Mori noticed
something interesting: The more humanlike his ro...
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 ...
References
WEBSITES                         BOOKS
•http://www.usabilitypost.com/   • The Design of Everyday Things
•http:/...
Fin
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Affordances in Modern Web Design
Upcoming SlideShare
Loading in...5
×

Affordances in Modern Web Design

43,703

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
1 Comment
104 Likes
Statistics
Notes
  • great read for affordances in basic web usability
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
43,703
On Slideshare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
960
Comments
1
Likes
104
Embeds 0
No embeds

No notes for slide

Affordances in Modern Web Design

  1. 1. Affordances in Modern Web Design July 2009
  2. 2. Hello, My name is... Andrew Interaction & User Experience Designer andrew@uxbooth.com @andrewmaier uxbooth.co hashrocket.c m om Affordance
  3. 3. What does this thing do? Affordance
  4. 4. What does this thing do? Affordance
  5. 5. What does this thing do? Affordance
  6. 6. What does this thing do? Affordance
  7. 7. Affordance The a quality of an object allowing an action–relationship with an actor.
  8. 8. The Birth of Affordances
  9. 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. 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. 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. 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. 13. Signifier A discrete unit of meaning, including words, images, gestures, scents, tastes, textures, sounds.
  14. 14. Visual/Behavioral The Language of visual communication • Conceptual models • Constraints • “Affordances” –– Signifiers Affordance
  15. 15. Conceptual • What the system is and what it can do • Three parts: system, interface, mental ... • Communicated indirectly, Affordance
  16. 16. Conceptual System Model Conceptual Model (Physical/Constraint–bearing (User’s Model) Model) Interface Model (Designer’s Model) Affordance
  17. 17. Conceptual • Recognition over Recall • Good: Digital Spreadsheets, Video Games Physics Engines •Questionable: Thermostats, Google Wave Affordance
  18. 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. 19. Tools Affordance
  20. 20. Tools vs. Affordance
  21. 21. Affordances & Signifiers • Conventions, patterns and metaphors • Appeals to the senses • Again, requires little–to–no cognition Affordance
  22. 22. Affordance
  23. 23. Affordance
  24. 24. Web Design & System Design
  25. 25. “Web” Design • Visual Design • Interaction; Behavioral Design • System; IA/UX Design Affordance
  26. 26. Manifest • Use Signifiers & Constraints • Recognition over Recall • Create Context with Meta Design Affordance
  27. 27. Signifiers & Constraints • Invitations, labels, Icons • Good visual design principles • Constraints, reduce load Affordance
  28. 28. Affordance
  29. 29. Default Layout “Wiggling” Layout Affordance
  30. 30. Recognition over Recall • Standardization (tabs, resolution, IA...openid, fb) • Shared libraries Affordance
  31. 31. http:// ui-patterns.com http:// developer.yahoo.co m/ypatterns/ Affordance
  32. 32. http:// emberapp.com /explore/ http:// konigi.com Affordance
  33. 33. Designing Interfaces Jennifer Tidwell Affordance
  34. 34. Designing Web Interfaces Bill Scott & Theresa Neil Affordance
  35. 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. 36. Affordance
  37. 37. Affordance
  38. 38. Affordance
  39. 39. Create Context • Meta Design: Group related functionality • Information Architecture Affordance
  40. 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. 41. Affordance
  42. 42. Regular Safari Keyboard Keyboard Affordance
  43. 43. Context Over Consistency Regular Header Post–Search Header Affordance
  44. 44. Overdesign
  45. 45. Over–Design • Sensory Overload • Obscures content •Independent of visceral response –Requires cognition •Not just jealously on my part Affordance
  46. 46. Used with permission from Alex Komarov
  47. 47. Used with permission from Alex Komarov
  48. 48. Realism in Design • Lifelike = Lifeless •Robotics, Videogames, Comics, Movies, etc. • Uncanny valley •Empathy & Possiblity Affordance
  49. 49. vs. Affordance
  50. 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. 51. Zimbra Microsoft Outlook Affordance
  52. 52. Affordance
  53. 53. Don’t Make Me Think Steve Krug Affordance
  54. 54. Understanding Comics Scott McCloud Affordance
  55. 55. Conclusion
  56. 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. 57. 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
  58. 58. Fin
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×