AffordancesSWEN-445

WhatisanAffordance?•  PsychologistJamesGibson,“Theoryof

Affordances”,1977article –  “Theaffordancesoftheenvironmentare

whatitofferstheanimal,whatitprovidesorfurnishes,eitherforgoodorill.

•  CognitivescientistDonNorman,studied

underGibson.–  “...thetermaffordancereferstothe

perceivedandactualpropertiesofthething,primarilythosefundamentalpropertiesthatdeterminejusthowthethingcouldpossiblybeused...Affordancesprovidestrongcuestotheoperationofthings.”

http://www.kkstudio.gr/projects/the-uncomfortable

AffordancesinUXDesign•  UX design must consider affordances and their role in

•  Appearance •  Content and meaning •  Manipulation characteristics •  Software functionality connection •  Potential for emotional impact

•  Affordances work together. Types of Affordances in Interaction Design: •  Physical •  Cognitive •  Sensory

•  Functional •  Emotional

PhysicalAffordances•  A design feature that facilitates or enables users to do

their physical actions •  Clicking, touching, pointing, gesturing, and moving things

•  E.g.,buttonsizeandlocation •  In non-computer designs, it is about handles, levers, gripping,

turning, moving things •  Designissues

•  Physical characteristics of interaction devices •  Physical disabilities

Example-PhysicalAffordance•  Shapedeterminesgraspstrategy

18 CHAPTER 2. THE PSYCHOLOGY OF USABLE THINGS

Figure 2.13: Ambiguous door designs. A knob a↵ords turning, but do you push or pull? A hori-zontal bar a↵ords pushing, but which side do you push on?

Figure 2.14: Good use of a↵ordances in door designs. A vertical handle a↵ords grasping andpulling. A flat panel a↵ords pushing and the broadness indicates which side to push.

Figure 2.15: An example of ambiguous a↵ordances in door design. The vertical handles mountedon both sides of the door suggest grasping and pulling. Unfortunately, from one side,the door has to be pushed! Note the signs above the handles.

Example-PhysicalAffordance•  Buttonsaffordpushing.•  Slidersandscrollbarsafforddragging.

Fitts’Law•  Anempiricalmodelexplainingspeed-accuracytradeoffcharacteristicsof

humanmusclemovement,1954.•  Thetimetakentohitatarget(e.g.abutton,menuoricononscreen)isa

functionofthesizeofthetargetandthedistancethathastobemovedtothetarget•  Alargertargetiseasiertohitthanasmallone•  Aclosetargetiseasiertohitthanadistantone

•  TimeTtomoveyourhandtoatargetofsizeSatdistanceD–  T=RT+MT

•  RTisreactiontime(gethandmoving),and•  MTismovementtime

–  MT=a+blog(D/S+1)–  Wherelog(D/S+1)istheindexofdifficulty

D

S

Fitts’LawDemoFittsLawSimulator

•  Basis:physiologicalfeedbackloop1.  Perceptualprocessorperceiveshandlocation2.  Cognitiveprocessorcomparestotargetlocationtodetermineremaining

distance3.  Motorsystemcorrectstomoveremainingdistance(mayovershoot)

ImplicationsofFitts’Law•  Largetargetsandsmalldistancesbetweentargetsareadvantageous•  Screenelementsshouldoccupyasmuchoftheavailablescreenspaceas

possible•  ThelargestFitts-basedpixelistheoneunderthecursor(why?)•  Screenelementsshouldtakeadvantageofthescreenedgewheneverpossible

•  The edges of the screen have infinite depth and no targeting required•  Steeringtasks–movinglinearlyina“tunnel”oflengthDandsizeSismore

difficultthanpointing

LimitationsofFitts’Law•  Groupedtargetsthataretoocloseleadto

overshooterrors•  Differingsizesconflictwithconsistency•  Frequency-basedwidgetarrangementsmaybe

lessefficienttofindthingsthanlogic-basedarrangements

•  Pop-upmenusnotvisibleuntilactivated•  Speed-accuracy tradeoff - fast decision –

more errors and vice versa

CognitiveAffordances•  A design feature that facilitates or enables users to do their cognitive

actions •  Thinking •  Deciding •  Learning •  Understanding •  Remembering •  Knowing about things

•  Precise words and symbols for communicating •  E.g., clear precise error messages •  E.g., Icon symbol clearly conveys its meaning

Examples:GoodorBador?

False cognitive affordances misinform, mislead

False cognitive affordances misinform, mislead

SensoryAffordances•  A design feature that facilitates or enables users to

sense things •  Seeing, hearing, feeling (and tasting and smelling) something

•  Used in supporting role to help user sense cognitive and physical affordances •  Visibility and legibility of text •  Audibility of sound •  Devices associated with haptic/tactile sensations

•  Example, legibility of button label text supported by •  Adequate size font •  Appropriate color contrast between text and background

Example-GoodorBad?

FunctionalAffordances•  Connect physical user actions to invoke system (back-

end) functionality •  Link usability to usefulness •  Add purpose to physical affordance

•  For example, it’s the reason a users clicks on a button

EmotionalAffordances•  A design feature that facilitates or

enables a quality emotional impact •  Features or design elements that

make an emotional connection with users

•  Derived from the cumulative impact of how well the other affordances succeed

•  Example, the ambiance inside Ikea stores

User-created affordances as wake-up calls to designers

Example•  Affordancesinthedesignofa“sort”button

•  Firstquestion–isthefunctionalityuseful?•  Cognitiveaffordance

•  Clearandunambiguouslabel•  Contexttolettheuserknowwhenitisappropriatetouseit

•  Physicalaffordance–buttonsizeandlocationrelativetootherobjects•  Sensoryaffordance–insupportofcognitiveandphysicalaffordances–

textsizeandfont,color,backgroundcontrast

ProjectActivity•  Startworkingonthedetaileddesignofyourproject•  DiscussitsUIelements’affordances

–  Whatphysical,cognitive,sensory,andemotionalaffordancesdoyourecognize?

–  Howcantheybeimproved?

UIId UIType Functionalaffordance

Cognitiveaffordance

Physicalaffordance

Sensoryaffordance

Emotionalaffordance

B1 Button