1. E-DESIGN
Affordance theory
Basic Affordance theory (ecological perception theory)
(J. J. Gibson 1986. Cooper 2007)
Creating a flow in UX (Csikszentmihalyi 1975)
Mental models and affordances
User mental models (Cooper 2007)

2. E-DESIGN
AFFORDANCE THEORY > BASICS > AFFORDANCES
Affordance Theory
The ecology of visual perception
Affordances (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. E-DESIGN
AFFORDANCE THEORY > BASICS > INVARIANT/VARIANT ENVIRONMENT
Affordance Theory
The ecology of visual perception
Invariant or variant objects
in 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. E-DESIGN
AFFORDANCE THEORY > BASICS > INVARIANT/VARIANT ENVIRONMENT
Affordance Theory
The ecology of visual perception
Invariant or variant objects
in 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. E-DESIGN
AFFORDANCE THEORY > MEDIUM
Affordance Theory
The ecology of visual perception
Medium (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. E-DESIGN
AFFORDANCE THEORY > MEDIUM
Affordance Theory
The ecology of visual perception
Medium (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. E-DESIGN
AFFORDANCE THEORY > LAYOUT/USER EXPERIENCE ENVIRONMENT
Affordance Theory
The ecology of visual perception
Layout / 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. E-DESIGN
AFFORDANCE THEORY
Affordance Theory
Affordances 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. E-DESIGN
AFFORDANCE THEORY
Affordance Theory
Gibson’s legacy
From 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 the
term affordance, which he defines as ‘the perceived and actual properties of the
thing, primarily those fundamental properties that determine just how the thing
could possibly be used.’ ”
(Cooper 2007: 282).
“When we render a button on the screen,we are making a contract with the user that
that button will visually change when she pushes it: It will appear to be depressed
when the mouse button is clicked over it. (…) Make sure that your program delivers
on the expectations it sets via the use of manual affordances.”
(Cooper 2007: 285).

10. E-DESIGN
AFFORDANCE THEORY
UX 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. E-DESIGN
AFFORDANCE THEORY
Affordance Theory
Exercise
• 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. E-DESIGN
MENTAL MODELS
Mental models
Implementation model, Programmer’s work Designer’s idea User’s mental model
represented model
and mental model
From Face 3:
Goal:
“The closer the represented model comes to
the 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 that
follows the implementation model too closely
significantly reduces the user’s ability to learn
and use the program”
(Cooper 2007: 29).

13. E-DESIGN
Bibliography
Curriculum:
Cooper, Allan (ed.) (2007):
About Face 3. The Essential of Interaction Design.
Wiley Publishing
Chapters: 2, 10 and 13.
References to:
Mihaly Csikszentmihalyi, Mihaly (1975):
Beyond Boredom and Anxiety: Experiencing
Flow 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:
http://books.google.dk/books?id=WfajMpCZOuYC&pg=PA302&dq=j.j+gibson&hl=da&sa=X&ei=bfUoT-
inBYOVswau1fnVAQ&ved=0CDUQ6AEwAA#v=onepage&q=j.j%20gibson&f=false