SlideShare a Scribd company logo
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)
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.
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).
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?
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.
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.
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.
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.
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).
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
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)?
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).
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

More Related Content

What's hot

Image of city
Image of cityImage of city
Image of city
Ravi Varma reddy
 
ArchTheoryI.ppt
ArchTheoryI.pptArchTheoryI.ppt
ArchTheoryI.ppt
ArlyMaeArellano
 
urban design
urban design urban design
urban design
Indrajit Koner
 
Portal Frame Construction & Pre Engineered Building System
Portal Frame Construction & Pre Engineered Building SystemPortal Frame Construction & Pre Engineered Building System
Portal Frame Construction & Pre Engineered Building System
Ian Toisa
 
Site Analysis Edward t. white
Site Analysis Edward t. whiteSite Analysis Edward t. white
Site Analysis Edward t. white
Dania Abdel-aziz
 
Kinetic architecture building elements
Kinetic architecture  building elementsKinetic architecture  building elements
Kinetic architecture building elements
Sakshi Jain
 
Conceptual drawings in architecture and landscape
Conceptual drawings in architecture and landscapeConceptual drawings in architecture and landscape
Conceptual drawings in architecture and landscape
Zanib Saeed
 
THEORY OF DESIGN
THEORY OF DESIGN THEORY OF DESIGN
THEORY OF DESIGN
Kethees Waran
 
Building enclosure presentation and study
Building enclosure presentation and studyBuilding enclosure presentation and study
Building enclosure presentation and study
Mark Smith
 
Design for Social Impact - An Introduction
Design for Social Impact - An IntroductionDesign for Social Impact - An Introduction
Design for Social Impact - An Introduction
Kshitiz Anand
 
high rise seismic resistant buildings
 high rise seismic resistant buildings high rise seismic resistant buildings
high rise seismic resistant buildings
Ar.Farooqh A
 
A presentation on AMOS RAPOPORT
A presentation on AMOS RAPOPORTA presentation on AMOS RAPOPORT
A presentation on AMOS RAPOPORT
Kirtikamal Dutta
 
AT1 - Characteristics of Biomorphic Design Condensed.pptx
AT1 - Characteristics of Biomorphic Design Condensed.pptxAT1 - Characteristics of Biomorphic Design Condensed.pptx
AT1 - Characteristics of Biomorphic Design Condensed.pptx
rosscairnsUHI
 
AZaitchik_EDRA_Applying Gibson's Affordance Theory
AZaitchik_EDRA_Applying Gibson's Affordance TheoryAZaitchik_EDRA_Applying Gibson's Affordance Theory
AZaitchik_EDRA_Applying Gibson's Affordance Theory
Environmental Design Research Association
 
URBAN DESIGN book review
URBAN DESIGN book reviewURBAN DESIGN book review
URBAN DESIGN book review
SheraniDaniel
 
Sustainable Group Housing Projects: Setting Up a Methodological and Substant...
Sustainable Group Housing Projects:  Setting Up a Methodological and Substant...Sustainable Group Housing Projects:  Setting Up a Methodological and Substant...
Sustainable Group Housing Projects: Setting Up a Methodological and Substant...
DS2BE
 
Normative theory
Normative theoryNormative theory
Normative theory
Prabal Dahal
 
Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme
Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparmeUsabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme
Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme
jordisan RamSys
 
Final ppt space norms and nbc
Final ppt space norms and nbcFinal ppt space norms and nbc
Final ppt space norms and nbc
rohan garg
 
Kinetic structures | B.arch
Kinetic structures | B.archKinetic structures | B.arch
Kinetic structures | B.arch
As Per Design
 

What's hot (20)

Image of city
Image of cityImage of city
Image of city
 
ArchTheoryI.ppt
ArchTheoryI.pptArchTheoryI.ppt
ArchTheoryI.ppt
 
urban design
urban design urban design
urban design
 
Portal Frame Construction & Pre Engineered Building System
Portal Frame Construction & Pre Engineered Building SystemPortal Frame Construction & Pre Engineered Building System
Portal Frame Construction & Pre Engineered Building System
 
Site Analysis Edward t. white
Site Analysis Edward t. whiteSite Analysis Edward t. white
Site Analysis Edward t. white
 
Kinetic architecture building elements
Kinetic architecture  building elementsKinetic architecture  building elements
Kinetic architecture building elements
 
Conceptual drawings in architecture and landscape
Conceptual drawings in architecture and landscapeConceptual drawings in architecture and landscape
Conceptual drawings in architecture and landscape
 
THEORY OF DESIGN
THEORY OF DESIGN THEORY OF DESIGN
THEORY OF DESIGN
 
Building enclosure presentation and study
Building enclosure presentation and studyBuilding enclosure presentation and study
Building enclosure presentation and study
 
Design for Social Impact - An Introduction
Design for Social Impact - An IntroductionDesign for Social Impact - An Introduction
Design for Social Impact - An Introduction
 
high rise seismic resistant buildings
 high rise seismic resistant buildings high rise seismic resistant buildings
high rise seismic resistant buildings
 
A presentation on AMOS RAPOPORT
A presentation on AMOS RAPOPORTA presentation on AMOS RAPOPORT
A presentation on AMOS RAPOPORT
 
AT1 - Characteristics of Biomorphic Design Condensed.pptx
AT1 - Characteristics of Biomorphic Design Condensed.pptxAT1 - Characteristics of Biomorphic Design Condensed.pptx
AT1 - Characteristics of Biomorphic Design Condensed.pptx
 
AZaitchik_EDRA_Applying Gibson's Affordance Theory
AZaitchik_EDRA_Applying Gibson's Affordance TheoryAZaitchik_EDRA_Applying Gibson's Affordance Theory
AZaitchik_EDRA_Applying Gibson's Affordance Theory
 
URBAN DESIGN book review
URBAN DESIGN book reviewURBAN DESIGN book review
URBAN DESIGN book review
 
Sustainable Group Housing Projects: Setting Up a Methodological and Substant...
Sustainable Group Housing Projects:  Setting Up a Methodological and Substant...Sustainable Group Housing Projects:  Setting Up a Methodological and Substant...
Sustainable Group Housing Projects: Setting Up a Methodological and Substant...
 
Normative theory
Normative theoryNormative theory
Normative theory
 
Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme
Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparmeUsabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme
Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme
 
Final ppt space norms and nbc
Final ppt space norms and nbcFinal ppt space norms and nbc
Final ppt space norms and nbc
 
Kinetic structures | B.arch
Kinetic structures | B.archKinetic structures | B.arch
Kinetic structures | B.arch
 

Viewers also liked

Forretningsstrategi sem 1 dk
Forretningsstrategi sem 1 dkForretningsstrategi sem 1 dk
Forretningsstrategi sem 1 dk
David Engelby
 
E design storytelling_ux stories
E design storytelling_ux storiesE design storytelling_ux stories
E design storytelling_ux stories
David Engelby
 
E concept metaphors-representations_signs_semiotics
E concept metaphors-representations_signs_semioticsE concept metaphors-representations_signs_semiotics
E concept metaphors-representations_signs_semiotics
David Engelby
 
Intercultural communication (Service Management_2nd semester)
Intercultural communication (Service Management_2nd semester)Intercultural communication (Service Management_2nd semester)
Intercultural communication (Service Management_2nd semester)
David Engelby
 
Persona Driven Keyword Research
Persona Driven Keyword ResearchPersona Driven Keyword Research
Persona Driven Keyword Research
Michael King
 
The executive summary (Service Management_4th semester)
The executive summary (Service Management_4th semester)The executive summary (Service Management_4th semester)
The executive summary (Service Management_4th semester)
David Engelby
 

Viewers also liked (6)

Forretningsstrategi sem 1 dk
Forretningsstrategi sem 1 dkForretningsstrategi sem 1 dk
Forretningsstrategi sem 1 dk
 
E design storytelling_ux stories
E design storytelling_ux storiesE design storytelling_ux stories
E design storytelling_ux stories
 
E concept metaphors-representations_signs_semiotics
E concept metaphors-representations_signs_semioticsE concept metaphors-representations_signs_semiotics
E concept metaphors-representations_signs_semiotics
 
Intercultural communication (Service Management_2nd semester)
Intercultural communication (Service Management_2nd semester)Intercultural communication (Service Management_2nd semester)
Intercultural communication (Service Management_2nd semester)
 
Persona Driven Keyword Research
Persona Driven Keyword ResearchPersona Driven Keyword Research
Persona Driven Keyword Research
 
The executive summary (Service Management_4th semester)
The executive summary (Service Management_4th semester)The executive summary (Service Management_4th semester)
The executive summary (Service Management_4th semester)
 

Similar to E design affordance theory-mental models

Designing Interactions Downloadable PDF Doc
Designing Interactions Downloadable PDF DocDesigning Interactions Downloadable PDF Doc
Designing Interactions Downloadable PDF Doc
Connie Malamed
 
UX The Bruce Lee Way
UX The Bruce Lee WayUX The Bruce Lee Way
UX The Bruce Lee Way
Joseph Dickerson
 
My Design Theory
My Design TheoryMy Design Theory
My Design Theory
Hung Wei-Hsuan
 
UX in Real Life
UX in Real LifeUX in Real Life
UX in Real Life
Narek Kozmoyan
 
Visual Design Day 1
Visual Design Day 1Visual Design Day 1
Visual Design Day 1
Stanford dmedia
 
Anvendt etnonografi 2012
Anvendt etnonografi 2012Anvendt etnonografi 2012
Anvendt etnonografi 2012
Aalborg Universitet
 
1810.mid1043.05
1810.mid1043.051810.mid1043.05
1810.mid1043.05
vizualizer
 
Dan Lockton Behavior Design Amsterdam New Year 2016
Dan Lockton Behavior Design Amsterdam New Year 2016Dan Lockton Behavior Design Amsterdam New Year 2016
Dan Lockton Behavior Design Amsterdam New Year 2016
Behavior Design AMS
 
TP2 How to use drama methods in service concept design
TP2 How to use drama methods in service concept designTP2 How to use drama methods in service concept design
TP2 How to use drama methods in service concept design
Intelligent_Furniture
 
Usability and User Experience Training Seminar
Usability and User Experience Training SeminarUsability and User Experience Training Seminar
Usability and User Experience Training Seminar
labecvar
 
Dale's Cone of Experience
Dale's Cone of ExperienceDale's Cone of Experience
Dale's Cone of Experience
erwin marlon sario
 
ITP / SED Day 6
ITP / SED Day 6ITP / SED Day 6
ITP / SED Day 6
Sami Niemelä
 
User Interface Design: Definitions, Processes and Principles
User Interface Design: Definitions, Processes and PrinciplesUser Interface Design: Definitions, Processes and Principles
User Interface Design: Definitions, Processes and Principles
MoodLabs
 
Mobile AR lecture 9 - Mobile AR Interface Design
Mobile AR lecture 9 - Mobile AR Interface DesignMobile AR lecture 9 - Mobile AR Interface Design
Mobile AR lecture 9 - Mobile AR Interface Design
Mark Billinghurst
 
Principles of Interactive Design
Principles of Interactive DesignPrinciples of Interactive Design
Principles of Interactive Design
Karen Krull
 
The Lost Art of the Critique
The Lost Art of the CritiqueThe Lost Art of the Critique
The Lost Art of the Critique
David du Plessis
 
Importance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- StackonImportance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- Stackon
najam gs
 
01 class overview_2012
01 class overview_201201 class overview_2012
01 class overview_2012
gcansec
 
Dimensions and Mechanisms of User Experience – from the Product Design Persp...
Dimensions and Mechanisms of User Experience – from the Product  Design Persp...Dimensions and Mechanisms of User Experience – from the Product  Design Persp...
Dimensions and Mechanisms of User Experience – from the Product Design Persp...
Geoffrey Dorne
 
Usability Testing Bootcamp
Usability Testing BootcampUsability Testing Bootcamp
Usability Testing Bootcamp
David Travis
 

Similar to E design affordance theory-mental models (20)

Designing Interactions Downloadable PDF Doc
Designing Interactions Downloadable PDF DocDesigning Interactions Downloadable PDF Doc
Designing Interactions Downloadable PDF Doc
 
UX The Bruce Lee Way
UX The Bruce Lee WayUX The Bruce Lee Way
UX The Bruce Lee Way
 
My Design Theory
My Design TheoryMy Design Theory
My Design Theory
 
UX in Real Life
UX in Real LifeUX in Real Life
UX in Real Life
 
Visual Design Day 1
Visual Design Day 1Visual Design Day 1
Visual Design Day 1
 
Anvendt etnonografi 2012
Anvendt etnonografi 2012Anvendt etnonografi 2012
Anvendt etnonografi 2012
 
1810.mid1043.05
1810.mid1043.051810.mid1043.05
1810.mid1043.05
 
Dan Lockton Behavior Design Amsterdam New Year 2016
Dan Lockton Behavior Design Amsterdam New Year 2016Dan Lockton Behavior Design Amsterdam New Year 2016
Dan Lockton Behavior Design Amsterdam New Year 2016
 
TP2 How to use drama methods in service concept design
TP2 How to use drama methods in service concept designTP2 How to use drama methods in service concept design
TP2 How to use drama methods in service concept design
 
Usability and User Experience Training Seminar
Usability and User Experience Training SeminarUsability and User Experience Training Seminar
Usability and User Experience Training Seminar
 
Dale's Cone of Experience
Dale's Cone of ExperienceDale's Cone of Experience
Dale's Cone of Experience
 
ITP / SED Day 6
ITP / SED Day 6ITP / SED Day 6
ITP / SED Day 6
 
User Interface Design: Definitions, Processes and Principles
User Interface Design: Definitions, Processes and PrinciplesUser Interface Design: Definitions, Processes and Principles
User Interface Design: Definitions, Processes and Principles
 
Mobile AR lecture 9 - Mobile AR Interface Design
Mobile AR lecture 9 - Mobile AR Interface DesignMobile AR lecture 9 - Mobile AR Interface Design
Mobile AR lecture 9 - Mobile AR Interface Design
 
Principles of Interactive Design
Principles of Interactive DesignPrinciples of Interactive Design
Principles of Interactive Design
 
The Lost Art of the Critique
The Lost Art of the CritiqueThe Lost Art of the Critique
The Lost Art of the Critique
 
Importance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- StackonImportance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- Stackon
 
01 class overview_2012
01 class overview_201201 class overview_2012
01 class overview_2012
 
Dimensions and Mechanisms of User Experience – from the Product Design Persp...
Dimensions and Mechanisms of User Experience – from the Product  Design Persp...Dimensions and Mechanisms of User Experience – from the Product  Design Persp...
Dimensions and Mechanisms of User Experience – from the Product Design Persp...
 
Usability Testing Bootcamp
Usability Testing BootcampUsability Testing Bootcamp
Usability Testing Bootcamp
 

More from David Engelby

Formålsparagraf kommunikation
Formålsparagraf kommunikationFormålsparagraf kommunikation
Formålsparagraf kommunikation
David Engelby
 
Project management projektstyring dansk_english_by david engelby
Project management projektstyring dansk_english_by david engelbyProject management projektstyring dansk_english_by david engelby
Project management projektstyring dansk_english_by david engelby
David Engelby
 
Writing for the web_basics
Writing for the web_basicsWriting for the web_basics
Writing for the web_basics
David Engelby
 
Version2 project management projektstyring_dk and english
Version2 project management projektstyring_dk and englishVersion2 project management projektstyring_dk and english
Version2 project management projektstyring_dk and english
David Engelby
 
Oral communication (part I) / Web communication (part II) (Service Management...
Oral communication (part I) / Web communication (part II) (Service Management...Oral communication (part I) / Web communication (part II) (Service Management...
Oral communication (part I) / Web communication (part II) (Service Management...
David Engelby
 
Service and communication / Writing strategies (Service Management_2nd semester)
Service and communication / Writing strategies (Service Management_2nd semester)Service and communication / Writing strategies (Service Management_2nd semester)
Service and communication / Writing strategies (Service Management_2nd semester)
David Engelby
 
Service and communication / Introduction (Service Management_2nd semester)
Service and communication / Introduction (Service Management_2nd semester)Service and communication / Introduction (Service Management_2nd semester)
Service and communication / Introduction (Service Management_2nd semester)
David Engelby
 
Marketing and Advertising: web design, web information architecture, usabilit...
Marketing and Advertising: web design, web information architecture, usabilit...Marketing and Advertising: web design, web information architecture, usabilit...
Marketing and Advertising: web design, web information architecture, usabilit...
David Engelby
 
Academic report design
Academic report designAcademic report design
Academic report design
David Engelby
 
Infographics design
Infographics designInfographics design
Infographics design
David Engelby
 
Philosophy of science and research
Philosophy of science and researchPhilosophy of science and research
Philosophy of science and research
David Engelby
 
Semiotic typography course lite lecture_1
Semiotic typography course lite lecture_1Semiotic typography course lite lecture_1
Semiotic typography course lite lecture_1
David Engelby
 
Semiotik og typografi lite lektion_1_dk_danish
Semiotik og typografi lite lektion_1_dk_danishSemiotik og typografi lite lektion_1_dk_danish
Semiotik og typografi lite lektion_1_dk_danish
David Engelby
 
Social media marketing 3 copywriting and news coverage in the groundswell
Social media marketing 3 copywriting and news coverage in the  groundswellSocial media marketing 3 copywriting and news coverage in the  groundswell
Social media marketing 3 copywriting and news coverage in the groundswell
David Engelby
 
Media - quantitative and qualitative research 2012
Media - quantitative and qualitative research 2012Media - quantitative and qualitative research 2012
Media - quantitative and qualitative research 2012
David Engelby
 
Field theory pierre_bourdieu
Field theory pierre_bourdieuField theory pierre_bourdieu
Field theory pierre_bourdieu
David Engelby
 
Philosophy of science summary presentation engelby
Philosophy of science summary presentation engelbyPhilosophy of science summary presentation engelby
Philosophy of science summary presentation engelby
David Engelby
 
Philosophy of science academic methodology reports_papers
Philosophy of science academic methodology reports_papersPhilosophy of science academic methodology reports_papers
Philosophy of science academic methodology reports_papers
David Engelby
 
Philosophy of science 3 knowledge, theory, communication
Philosophy of science 3 knowledge, theory, communicationPhilosophy of science 3 knowledge, theory, communication
Philosophy of science 3 knowledge, theory, communication
David Engelby
 
Philosophy of science 2 intro ii and qualitative research
Philosophy of science 2 intro ii and qualitative researchPhilosophy of science 2 intro ii and qualitative research
Philosophy of science 2 intro ii and qualitative research
David Engelby
 

More from David Engelby (20)

Formålsparagraf kommunikation
Formålsparagraf kommunikationFormålsparagraf kommunikation
Formålsparagraf kommunikation
 
Project management projektstyring dansk_english_by david engelby
Project management projektstyring dansk_english_by david engelbyProject management projektstyring dansk_english_by david engelby
Project management projektstyring dansk_english_by david engelby
 
Writing for the web_basics
Writing for the web_basicsWriting for the web_basics
Writing for the web_basics
 
Version2 project management projektstyring_dk and english
Version2 project management projektstyring_dk and englishVersion2 project management projektstyring_dk and english
Version2 project management projektstyring_dk and english
 
Oral communication (part I) / Web communication (part II) (Service Management...
Oral communication (part I) / Web communication (part II) (Service Management...Oral communication (part I) / Web communication (part II) (Service Management...
Oral communication (part I) / Web communication (part II) (Service Management...
 
Service and communication / Writing strategies (Service Management_2nd semester)
Service and communication / Writing strategies (Service Management_2nd semester)Service and communication / Writing strategies (Service Management_2nd semester)
Service and communication / Writing strategies (Service Management_2nd semester)
 
Service and communication / Introduction (Service Management_2nd semester)
Service and communication / Introduction (Service Management_2nd semester)Service and communication / Introduction (Service Management_2nd semester)
Service and communication / Introduction (Service Management_2nd semester)
 
Marketing and Advertising: web design, web information architecture, usabilit...
Marketing and Advertising: web design, web information architecture, usabilit...Marketing and Advertising: web design, web information architecture, usabilit...
Marketing and Advertising: web design, web information architecture, usabilit...
 
Academic report design
Academic report designAcademic report design
Academic report design
 
Infographics design
Infographics designInfographics design
Infographics design
 
Philosophy of science and research
Philosophy of science and researchPhilosophy of science and research
Philosophy of science and research
 
Semiotic typography course lite lecture_1
Semiotic typography course lite lecture_1Semiotic typography course lite lecture_1
Semiotic typography course lite lecture_1
 
Semiotik og typografi lite lektion_1_dk_danish
Semiotik og typografi lite lektion_1_dk_danishSemiotik og typografi lite lektion_1_dk_danish
Semiotik og typografi lite lektion_1_dk_danish
 
Social media marketing 3 copywriting and news coverage in the groundswell
Social media marketing 3 copywriting and news coverage in the  groundswellSocial media marketing 3 copywriting and news coverage in the  groundswell
Social media marketing 3 copywriting and news coverage in the groundswell
 
Media - quantitative and qualitative research 2012
Media - quantitative and qualitative research 2012Media - quantitative and qualitative research 2012
Media - quantitative and qualitative research 2012
 
Field theory pierre_bourdieu
Field theory pierre_bourdieuField theory pierre_bourdieu
Field theory pierre_bourdieu
 
Philosophy of science summary presentation engelby
Philosophy of science summary presentation engelbyPhilosophy of science summary presentation engelby
Philosophy of science summary presentation engelby
 
Philosophy of science academic methodology reports_papers
Philosophy of science academic methodology reports_papersPhilosophy of science academic methodology reports_papers
Philosophy of science academic methodology reports_papers
 
Philosophy of science 3 knowledge, theory, communication
Philosophy of science 3 knowledge, theory, communicationPhilosophy of science 3 knowledge, theory, communication
Philosophy of science 3 knowledge, theory, communication
 
Philosophy of science 2 intro ii and qualitative research
Philosophy of science 2 intro ii and qualitative researchPhilosophy of science 2 intro ii and qualitative research
Philosophy of science 2 intro ii and qualitative research
 

Recently uploaded

GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
SAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloudSAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloud
maazsz111
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
Dinusha Kumarasiri
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024
Intelisync
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
LucaBarbaro3
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Tatiana Kojar
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 

Recently uploaded (20)

GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
SAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloudSAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloud
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 

E design affordance theory-mental models

  • 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