Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

E design affordance theory-mental models


Published on

  • Login to see the comments

E design affordance theory-mental models

  1. 1. E-DESIGNAffordance theoryBasic Affordance theory (ecological perception theory)(J. J. Gibson 1986. Cooper 2007)Creating a flow in UX (Csikszentmihalyi 1975)Mental models and affordancesUser mental models (Cooper 2007)
  2. 2. E-DESIGNAFFORDANCE THEORY > BASICS > AFFORDANCESAffordance TheoryThe ecology of visual perceptionAffordances (J. J. Gibson 1986)• Gibson: Receptors are stimulated whereas an organ is activated.• Affordances are relations between perception and action.• According to Gibson concepts like planes and spaces are geometrical terms. They are only describing numbers.• A stone is a useful hiding spot for the mouse, who tries not to be spotted by the cat. To me, the stone is either of no importance (as I pass by) or I may be careful not to stumble over the stone. This is the difference betwen invariant and variant perception of affordances.
  3. 3. E-DESIGNAFFORDANCE THEORY > BASICS > INVARIANT/VARIANT ENVIRONMENTAffordance TheoryThe ecology of visual perceptionInvariant or variant objectsin the user interface environment(J. J. Gibson 1986)• Take a look at the illustration.• You are driving on a road. The road affords a pathway to your desired destination. There are no new perspectives as far as the eye can see, only the invariant optical structure is observed.• The layout tends to persist (with its objects).
  4. 4. E-DESIGNAFFORDANCE THEORY > BASICS > INVARIANT/VARIANT ENVIRONMENTAffordance TheoryThe ecology of visual perceptionInvariant or variant objectsin the user interface environment(J. J. Gibson 1986)• Suddenly a road sign appears, and you take notice of its presence and its information.• The road sign is an variant object. It is a display made to make you aware of a change in the layout.• But … then again … you might be used to this particular sign, and then it’s invariant?
  5. 5. E-DESIGNAFFORDANCE THEORY > MEDIUMAffordance TheoryThe ecology of visual perceptionMedium (J. J. Gibson 1986)• Gibson on the concept of a medium: Air is a medium for animal locomotion, so is water.• There are no sharp transitions in a medium, no surfaces in itself. You are located in- and living in the medium.• EXAMPLE: Water is not the medium of human beings: we think of water as a substance and not as a medium. We do not navigate naturally in water, but in the medium of air.• CONTRAST: Although many user interfaces are intuitive, you do not live in them as if they were a natural habitat.
  6. 6. E-DESIGNAFFORDANCE THEORY > MEDIUMAffordance TheoryThe ecology of visual perceptionMedium (J. J. Gibson 1986)• You are in a park. There are trees and a lake.• There are two environments: air and water are both a medium for different lifeforms to navigate in.• You look at the environment and see the water as a substance.• You will be careful not to fall into the water, as you can drown in the substance of water.• The fish fears the substance of only air.
  7. 7. E-DESIGNAFFORDANCE THEORY > LAYOUT/USER EXPERIENCE ENVIRONMENTAffordance TheoryThe ecology of visual perceptionLayout / user experience environment(J. J. Gibson 1986)• However, we can extend the notion of the medium and refer to an environment of user experience (UX)• In any environment there are surfaces with a certain layout with/in which you navigate.• Any surface and object has a characteristic shape, illuminated in light or shade. Alltogether such objects may form an invariant, coherent layout• Whenever there is a smooth process of navigating with the given affordances in this environment, the affordances are invariant.• Where there is an invariant environment with aiding, variant elements, you accept and use the affordances naturally. It’s a user friendly environment.
  8. 8. E-DESIGNAFFORDANCE THEORYAffordance TheoryAffordances are for someone• The affordances of the layout in the environment are that, which offers something to you.• Some objects and surfaces affords support to you: the chair is sit-able (surface and object), the tablet is port-able (object), the typography is read-able (object and design) etc.• Affordances also involves a possibility and the near future: The affordance of a toy is to play (for the child). The affordance of your education programme is to become a skilled graduate.• You interact with affordances and you create affordances.
  9. 9. E-DESIGNAFFORDANCE THEORYAffordance TheoryGibson’s legacyFrom Face 3: The concept of Manual affordances (coined by Cooper via Norman)“In his seminal book The Design of Everyday Things, Donald Norman gave us theterm affordance, which he defines as ‘the perceived and actual properties of thething, primarily those fundamental properties that determine just how the thingcould possibly be used.’ ”(Cooper 2007: 282).“When we render a button on the screen,we are making a contract with the user thatthat button will visually change when she pushes it: It will appear to be depressedwhen the mouse button is clicked over it. (…) Make sure that your program deliverson the expectations it sets via the use of manual affordances.”(Cooper 2007: 285).
  10. 10. E-DESIGNAFFORDANCE THEORYUX flow High value of experience*The flow (Csikszentmihalyi 1975) High Anxiety Arousal FLOW• Csikszentmihalyi’s model depicts the different mental stages in the areas between skills and challenges.• Match the design with your target group’s skills and expectations CHALLENGES of particular challenges. Worry Control• Create affordances to maximize flow and the value of the experience.* Not an original part of this model Low Apathy Boredom Relaxation Low SKILLS High
  11. 11. E-DESIGNAFFORDANCE THEORYAffordance TheoryExercise• Gibson says that information pickup needs an awareness of variant information in an environment. In other words: When you’re designing a concept, you must design relevant affordances for the target group.• A graphic user interface (GUI) for web or for the mobile media requires that you can make the surface/layout meaningful to the user: • Find a website or an app, and investigate these areas … • Can you understand the landing layouts as meningful environments (pages)? Why is it easy to underastand? • What is securing the flow? • How is the information structure of the manual affordances (links etc.)? • What is it that the objects affords the user (interactivity)? • What is invariant and what is variant information (in your experience)?
  12. 12. E-DESIGNMENTAL MODELSMental modelsImplementation model, Programmer’s work Designer’s idea User’s mental modelrepresented modeland mental modelFrom Face 3: Goal:“The closer the represented model comes tothe user’s mental model, the easier he will find Better use of affordances in a fimiliar UX environment related to the user’s mental model.the program to use and to understand.Generally, offering a represented model thatfollows the implementation model too closelysignificantly reduces the user’s ability to learnand use the program”(Cooper 2007: 29).
  13. 13. E-DESIGNBibliographyCurriculum:Cooper, Allan (ed.) (2007):About Face 3. The Essential of Interaction Design.Wiley PublishingChapters: 2, 10 and 13.References to:Mihaly Csikszentmihalyi, Mihaly (1975):Beyond Boredom and Anxiety: ExperiencingFlow in Work and Play.Published by Jossey-Bass .Gibson, J. J. (1986):The Ecological Approach to Visual Perception.Published by Lawrance Erlbaum Associates.(Originally published in 1979)See short description of the ecological approach: