E-DESIGN

Affordance 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)

E - D E S I G N

Affordance TheoryThe ecology of visual perception

Affordances (J. J. Gibson 1986)

• Gibson:Receptors are stimulatedwhereas an organ is activated.

• Affordances are relations between perception and action.

• According to Gibson concepts like planes and spaces aregeometrical terms. They are only describing numbers.

• A stone is a useful hiding spot for the mouse, who triesnot 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 betweninvariant and variant perception of affordances.

A F F O R D A N C E T H E O R Y > B A S I C S > A F F O R D A N C E S

E - D E S I G N

Affordance TheoryThe ecology of visual perception

Invariant 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 pathwayto your desired destination. There are no new perspectives as far as the eye can see, only theinvariant optical structure is observed.

• The layout tends to persist (with its objects).

A F F O R D A N C E T H E O R Y > B A S I C S > I N V A R I A N T / V A R I A N T E N V I R O N M E N T

E - D E S I G NA F F O R D A N C E T H E O R Y > B A S I C S > I N V A R I A N T / V A R I A N T E N V I R O N M E N T

Affordance TheoryThe ecology of visual perception

Invariant or variant objectsin the user interface environment(J. J. Gibson 1986)

• Suddenly a road sign appears, and you take noticeof 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 thisparticular sign, and then it’s invariant?

E - D E S I G N

Affordance TheoryThe 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.

A F F O R D A N C E T H E O R Y > M E D I U M

E - D E S I G N

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 botha medium for different lifeforms to navigate in.

• You look at the environmentand 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.

A F F O R D A N C E T H E O R Y > M E D I U M

E - D E S I G N

Affordance TheoryThe 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 certainlayout with/in which you navigate.

• Any surface and object has a characteristic shape, illuminated in light or shade. Alltogether such objectsmay form an invariant, coherent layout

• Whenever there is a smooth process of navigatingwith the given affordances in this environment,the affordances are invariant.

• Where there is an invariant environment withaiding, variant elements, you accept and use the affordances naturally. It’s a user friendly environment.

A F F O R D A N C E T H E O R Y > L A Y O U T / U S E R E X P E R I E N C E E N V I R O N M E N T

E - D E S I G N

Affordance TheoryAffordances are for someone

• The affordances of the layout in the environmentare 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.

A F F O R D A N C E T H E O R Y

E - D E S I G N

Affordance TheoryGibson’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 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 delivers on the expectations it sets via the use of manual affordances.”

(Cooper 2007: 285).

A F F O R D A N C E T H E O R Y

E - D E S I G N

UX flowThe flow (Csikszentmihalyi 1975)

• Csikszentmihalyi’s model depicts the different mental stages in the areasbetween skills and challenges.

• Match the design with yourtarget group’s skills and expectationsof particular challenges.

• Create affordances to maximize flowand the value of the experience.

* Not an original part of this model

SKILLS

High value of experience*

Hig

hLo

wC

HA

LLE

NG

ES

Low High

Anxiety Arousal FLOW

ControlWorry

Apathy Boredom Relaxation

A F F O R D A N C E T H E O R Y

E - D E S I G N

Affordance TheoryExercise

• Gibson says that information pickup needs an awarenessof 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)?

A F F O R D A N C E T H E O R Y

E - D E S I G NM E N T A L M O D E L S

Mental modelsImplementation model, represented model and mental model

From Face 3:

“The closer the represented model comes to the user’s mental model, the easier he will find 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).

Designer’s ideaProgrammer’s work User’s mental model

Goal:

Better use of affordances in a fimiliar UX environment related to the user’s mental model.

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

E - D E S I G N