1. How can perceptual abilities be quantified, and what does this imply for design?
2. What is J.J. Gibson’s (1979) theory of affordances? How does this concept relate to natural design?
3. Describe Don Norman’s fundamental principles of interaction: affordances/constraints, signifiers, feedback, mapping, and conceptual model.
4. What did Gillan (1994) conclude about measuring mental models?
5. Explain the process and outcomes of information design, and describe some applications and examples.
6. How did the design of the ballot cause voter problems in 2000?
Design standard for highway signs: text should be 1" high for every 50' of recognition distance (Transportation Association of Canada, 2003).
How do you determine things like this?
Psychophysics: the study of the relationship between physical stimuli and mental events
________ threshold:
- minimal limit of a sense modality
- minimum stimulus energy detected 50% of the time
__________ threshold:
- minimum difference needed to discriminate between two stimuli, 50% of the time
- judgment made between ________ and comparison stimuli (both are well above absolute threshold)
- a.k.a. “just noticeable difference,” or ___
_______ Law (1834)
- is the difference threshold the same for all standard stimuli, or does it vary somehow?
k = constant (Weber fraction), S = standard stimulus intensity
e.g., for a 100 g weight, JND = 2 g (difference = 2%)
for a 1,000 g weight, JND = 20 g (difference = 2%)
Weber ________ = 2/100 = 0.02
e.g., reading numbers from a display under different lighting, knowing what colour is being seen (CRT vs. LCD)
(from Krantz, 2001)
Fitts’s Law (Paul M. Fitts, 1954):
- measures the information capacity of the human _____ system
- original task: participants tapped a stylus back and forth between two metal plates; were told to “emphasize accuracy rather than speed”
- definition: the time to acquire (or move to) a target is a function of the distance to and size of the target
- equation:
MT = movement time, D = distance of target, W = _____ (or size) of target; a and b are constants
- originally developed to handle movement in one dimension; could record errors (except when they were way off)
- later version captured accuracy, which showed the tradeoff between speed and accuracy
- applications:
• microscope work (Langolf & Hancock, 1975)
• foot-pedal design (Drury, 1975)
• computers with pointing systems (e.g., mouse, trackpad, touch screen, etc.) (MacKenzie et al., 1991)
- referenced in Apple’s Macintosh Human Interface Guidelines (2012) and Microsoft’s Windows User Experience Interaction Guidelines (2010)
- poor design: menus (that are not at the ____ of the screen) take longer to correctly activate
e.g., original Apple MacOS X Dock
- good design: menus that are at the extreme edges of a screen
eg., Microsoft Windows taskbar at the bottom of the screen has “infinite” target size, so is quick and easy to activate
- better design: menus that are in the _______ of the screen
e.g., Windows 10 start menu
- poor design: small buttons are harder to click
e.g., typical pull-down or pop-up menu
- good design: menus closer to the mouse pointer lead to faster performance
e.g., pie menus
- better design: executing commands without needing to reach a particular target
e.g., mouse or touch gestures can be performed ________
Psychophysical research showed that human performance could be studied ______________; led to much subsequent research.
Good ______ should take perceptual abilities into consideration.
Application of psychophysics: Highway signs (Garvey, Pietrucha, & Meeker, 1998)
- ClearviewHwy® typeface developed over 10 years to be more readable, even with ________ vision (due to aging population, poor viewing conditions, etc.)
- first, existing typefaces were reviewed and rejected
- new design increased size of lowercase letters, and emphasized certain ___________ characteristics of letters “a”, “e”, and “s” to aid distance viewing
- design also reduces halation: spreading and blurring of light from headlights
- research methods:
• experimental design: tests of ___________ (e.g., looking for a street name) and legibility (______________); recognition distances are up to twice as much as legibility distances
• recognition procedure: particular word appeared on a panel with two other words; RT measured
• legibility procedure: read a sign from moving vehicle on test track; record maximum distance for identification
• half of the participants were _____ drivers
- results:
• nighttime sign reading distance improved by up to __% (vs. FHWA Standard Alphabet); at ~70 km/h, extra 24 m of reading distance, or 1.2 s of reading time
• upper/lowercase Clearview gave 14% improvement over all-CAPS FHWA typeface
• greatest improvement came in _____ drivers
- conclusions:
• lab and field experimentation are both valuable
• psychophysical research can have important ____________
Implications for design (Lee et al., 2017):
• maximize ______-__ processing (of incoming stimuli)
- increase visual legibility (or audibility)
e.g., lighting, contrast, colour, location
- avoid easily confusable stimuli
e.g., lowercase L and numeral one (l vs. 1); uppercase O and numeral zero (O vs. 0)
• maximize ____________ and unitization (to separate into units)
- use familiar perceptual representations
e.g., conventional fonts and mixed case text, meaningful icons, words rather than abbrev.
• maximize ___-____ processing (applying knowledge and interpretation)
- in information-poor environments, and when unitization missing (unfamiliar symbology or language)
e.g., put information in a consistent location, as with the height of stop signs
maximize discriminating features
- use a smaller vocabulary: improves guess rate under degraded conditions, and encourages highly discriminable word choices
e.g., “flight level three two zero” for 32,000 feet
- create context
e.g., “your altitude is low” is more effective than “check altitude”
- exploit redundancy
e.g., phonetic alphabet uses many polysyllabic words (A is “alfa”, B is “bravo”, etc.)
- be wary of (and train for) potential perceptual errors
e.g., flying at night in unusual conditions can lead to the “black-hole” illusion
- test stimuli in the real world
e.g., ClearviewHwy field experiments
J.J. Gibson (1977):
Background:
• influenced by ____________ theory
• “__________ approach”: how does individual interact with environment?
• in general, stressed importance of “________ _____”
• downplayed role of _________ in perception
• studied __________: properties of an object that remain constant despite changes in perceiver’s POV
e.g., larger object covers up more background than a smaller object
• basic principles:
1) consider perception from POV of ______ observer (like in real life)
2) consider information in dynamic “_____ _____”, not just static image on a screen
3) optic array is ____ with information; mental processing unnecessary: perception is ______
__________: real (or perceived) set of actions that a specific object or environmental situation makes available to the perceiver
• cups → drinking
• buttons → pushing
• handles → push/pull/hold
- depends on perceiver
- no distinction between “natural” and “__________” world; constructed world is a form of the natural world transformed by humans
Origins:
Kurt Lewin (1931): Aufforderungscharakter translated as “invitation character”, “_______”, or “demand characteristic”
Kurt Koffka (1935):
“To primitive man each thing says what it is and what he ought to do with it...a fruit says ‘Eat me’;
water says ‘Drink me’; thunder says ‘Fear me’; and woman says ‘____ me’ ” (p.7)
- mailbox has a valence only if you want to mail a letter
- for Gibson, affordances deal with the ________
e.g., can you put the letter in the mailbox?
Affordances of the Terrestrial Environment:
1) The ______: the air
- __________ → breathing
- also visual, auditory, olfactory perception
2) The __________: solids and liquids
- _____ → drinking, washing, pouring
- solids (clay) → shaping, moulding
- harder substances → chipped, ground, whittled
3) The ________ and their Layouts
- horizontal, flat, extended, rigid surfaces → support
- vertical surfaces → barriers
- obstacles → circumvented (if paths _______)
4) The _______ (“Everyday Things”)
- may be attached or detached
e.g., 10 cm cube can be grasped; 30 cm cube cannot (unless it has a handle)
- objects not ___________ by their qualities; certain qualities are afforded by certain objects
- alternatively: object can have several affordances
• a special type of object is ______
- they lead to certain affordances → ______ _________, which is based on available stimulus information
e.g., physical attractiveness has commonalities across culture and age
• affordances of places, especially hiding places:
- affords _______ (remaining unseen) via opaque enclosures
- but residents also afforded looking out:
“Architects and designers know such facts, but they lack a theory of affordances to encompass them in a system.” (Gibson, 1979, p.137)
Research evidence:
Eleanor J. Gibson & Walk (1960): visual _____ experiment
- sheet of glass placed across apparent drop-off
- infants tended to avoid deep side
- conclusion: affordances do not require ________
Warren (1984): _____ climbing
- formula from 17th century used up to 1978:
2 × R (riser height) + T (tread depth) = 24 in.
- this is not optimal for all people
- exp’t 1: observers viewed photos of various stairs and rated their climbability
- optimal: R = L (leg length) × 0.25
- exp't 2: observers climbed stairmill adjusted to match photos
- actual energy expenditure matched visual judgments
i.e., the closer the stairs were to a person's optimal, the less energy they expended
- interpreted as evidence for ______ perception
______ in perceiving affordances?
- Gibson admitted affordances are probabilistic
“When Koffka asserted that ‘each thing says what it is,’ he failed to mention that it may lie. More exactly,
a thing may not look like what it is.” (Gibson, 1979, p. 143)
e.g., thin ice covered with snow
Norman (1999): Principles of Design for Understandability and Usability
- mistaken perceptions → inappropriate actions (errors)
e.g., glass door perceived to be open air
- designers should use _________ affordances
e.g., real affordances: what are the actions you can actually do?
vs. perceived affordances: what are the actions you think you can do?
- no signs, pictures, labels should be required (“_______ design”)
Donald A. Norman (1988, 2013): Fundamental Principles of Interaction
- cognitive scientist, cognitive engineer, consultant, writer
- director of the Design Lab at UCSD; worked for Apple and HP
▸ Affordance
- relationship between a physical object and a given person that defines what actions are possible
- is not a ________ of the object, but depends on the properties of the object interacting with the abilities of the person
e.g., door hardware
• actions: pull or push
• action location: door handle or push plate
• cue to action: handle affords pulling, plate affords pushing
▸ Constraint
- restriction on your choice of actions to a limited subset which contains the correct one, thus reducing error
- inverse of affordance, or “anti-affordance” (Norman, 2013)
- like “forcing function” in engineering, which prevents incorrect actions
e.g., using scissors
• actions: put fingers and thumb through holes to pivot blades
• action location: holes
• cue to action: smaller opening is for your thumb, larger one is for your fingers
- perceptible indicator that communicates appropriate behaviour (Norman, 2010)
e.g., opening a typical door
• actions: push or pull
• action location: left or right
• cue to action: door handle
• problem: how to open these doors?
(doors not designed to reveal __________)
- all important parts must be perceptible, and must provide the correct message
e.g., bad: unlabeled containers; good: “S” = salt, “P” = pepper; better: clear containers
- some signifiers are perceived ___________
e.g., door handle
- if affordance cannot be perceived, a signifier may signal its presence
- may indicate relation between intended and actual operations
- allows selection of appropriate actions
e.g., temperature control: red = hot, blue = cold
▸ Feedback
- can be a type of _________, showing outcome of action
e.g., flip switch, see light come on
e.g., taking medication
• actions: take pill
• action location: pill bottle
• cue to action: time to take medication
• problem: how to remember?
(GlowCap® automatic reminder connected to network)
- must be immediate and unambiguous
e.g., blinking light on a battery charger: does that mean it’s still charging or it’s finished?
- allows action to be refined
e.g., if you practice shooting hoops--while blindfolded--will you improve?
▸ Mapping
- relates desired goal to (apparent) means of accomplishing goal
e.g., recording on tape
• actions: each function corresponds to a button:
• action location: button itself
• cue to action: symbols
• problem: record button cannot be pressed
(press record and play buttons ________; all functions are isomorphic with single buttons--except recording)
- based on concept of stimulus-response compatibility
- and control-display relationship
- may use ________ analogies
e.g., move slider up for greater intensity
- may use ________ conventions
Q: Why do ______ go clockwise?
Q: How do you turn on a _____ in the UK?
- _______ mapping exists if there is similarity of layout, behaviour, or meaning
• layout: locations of stovetop controls correspond to the arrangement of burners
• behaviour: turning steering wheel left turns car left
• meaning: emergency stop button is coloured red
▸ (Designer’s) Conceptual Model
- the structures and functions of a system, and how they are interrelated; how it actually works
- case example: heating house quickly
• actions: adjust thermostat (up or down; various amounts)
• action location: thermostat
• cue to action: it’s cold!
• problem: how to heat home as fast as possible?
(furnace only has on/off--no “_____” control; thermostat only controls temperature end-point)
- system designer has conceptual model representing knowledge of how a system is designed and functions (a.k.a. ______ model)
- system _____: provides information to user
e.g., via images and text on a computer screen)
(may be supplemented with auxiliary material, like documentation, manuals, help systems)
- user has ______ model (a.k.a. schema or frame) representing belief about how a system works
Norman (1986, 2004, 2013):
|
Designer’s Conceptual Model |
|
User’s Mental Model |
|||
 |
 |
||||
|
System Image |
|
|||
(note that Norman sometimes uses the term “conceptual model” broadly to mean conceptual or mental model)
- may employ an interface ________ (skeuomorph)
e.g., computer “desktop” has files, folders, trash can, etc.
- most important part of a successful design: allows users to _______ outcomes
- user’s mental model constructed by:
• system image
What information is given, and how is it presented?
• ___________/constraints (and signifiers)
What do you perceive you can (or cannot) do with an object?
• past __________, training, or instruction: forms of top-down processing
What “baggage” comes with the metaphor?
▸ Natural Design
- things should have natural signals
- users should not require additional information to indicate how to use the object
e.g., “PUSH” sign on door is poor design
Gillan (1994):
Measure mental models:
1) _______-based methods: ask user directly about how they think the system works
2) ___________-based methods: put user into different situations and see how they react, to reveal mental model
3) ________ methods: ask user to judge similarity (or distance) between several things
Best method?
- no way to determine “real” mental model objectively
- instead, compare methods to ____ _____
Stimuli: names & locations of:
- 13 U. of Idaho buildings, and 12 major US cities
Procedure:
- content method: draw location of items on map & label
- indirect method: rate distance between items on 6-point scale
- (no performance-based test done)
- participants took part in two sessions; data were correlated across sessions
- objective accuracy was not assessed
Results (test-retest correlations):
sessions |
UofI |
US |
combined |
|---|---|---|---|
draw-draw |
.91 |
.94 |
.92 |
rate-rate |
.77 |
.80 |
.80 |
draw-rate |
.62 |
.51 |
.52 |
rate-draw |
.66 |
.62 |
.55 |
Conclusions:
- drawing was more ________ than rating
- for a mental model to produce a response, it apparently goes through a ______________
- different transformations applied for different actions (drawing vs. rating)
- definition: organizing and presenting information to maximize clarity, understanding, and usability; optimizing the user experience (UX) and _________ task that the information is intended to support
- visual elements such as text, images, graphs, and diagrams are designed to communicate complex data
- used to design infographics, websites, textbooks, manuals, videos, museum exhibits, wayfinding visuals, etc.
e.g., Florence Nightingale’s (1858) “rose diagrams” (multicomparative polar-area diagrams) of causes of death led to improvements in sanitation and a decrease in mortality
e.g., London Underground map went from a geographical map to a _______, inspired by electrical circuit diagrams
- specific ID principles include simplicity, contrast, readability, and consistency, which are informed by Gestalt principles of grouping and perceptual research
- information design should create a system image that constructs a good ______ _____
2000 US Presidential election
• won by George W. Bush over Al Gore
• Bush won Florida by 537 votes, gaining its 25 electoral votes
• Palm Beach County used “butterfly ballot”: vote cast by punching hole in a card with a stylus
• Gore lost 6,607 votes due to “over-votes” on spoiled ballots (Bush lost only 1,631)
• why all the errors?
Sinclair et al. (2000):
- participants “voted” for Prime Minister
- indicated preference using a) single-column ballot, or b) two-column “butterfly” ballot
- ballot compared to written selection
- UAlberta students: no errors (but butterfly rated more _________)
- mall shoppers:
• single-column: no errors
• butterfly: 4 errors made on 53 ballots
Why the poor design?
• Palm Beach County Supervisor of Elections put presidential candidates on two pages to keep _____ ____ big enough for elderly voters
• but voters expected Bush and Gore to be the first two choices, as Florida law requires
(Why was Bush first? The candidate of the party of the incumbent governor appears first on the ballot. The governor was: Jeb Bush.)
• instead, Pat Buchanan, on the opposite page, was between them (vertically):
(as a result, Buchanan received an inordinately high 0.8% of the vote in Palm Beach County, compared to 0.29% in Florida as a whole.)
• design problems:
- unconventional double-column “butterfly” design
- text aligned away from hole location
- vertical placement/ordering of candidates
- arrows and confusing numbers
- manual _________ required to use stylus
- no way to verify choice