Week 5 – 2014
HCI – COMP3315
psychological and physiological constraints
People: psychological and
physiological constraints
First Principles of Interaction Design
(Revised & Expanded) March 2014
http://asktog.com/atc/principles-ofinteraction-design/
A challenge for HCI lectures… lecture
notes versus the experience
People learn more if they engage eg have to click to
see the information, have to think about issues and
use information rather than just read it.
Human cognition…. Impact on assignment
Overview
•
Thinking about people
– Cognitive
– Physical
– Physiological
•
Some theories and terms
–
–
–
–
•
•
Mental models
Gulf of execution
Conceptual models
Fitts’ Law
Some very fine-grained guidelines, useful for design and for no-user
Heuristic Evaluation
Importance of empirical validation of all theories
Mental models
Definitions, links to most other parts
of HCI, valuable language and mental
tools
Mental models
http://www.nngroup.com/articles/mental-models/
• Summary: What users believe they know about a UI
strongly impacts how they use it. Mismatched mental
models are common, especially with designs that try
something new.
• Definition: A mental model is what the user believes
about the system at hand.
• Note:
–
–
–
–
Beliefs …. Not facts
Mental models drive predictions, planning actions
Individual MMs differ …. Designer MM versus “user” MM
MMs change…. Implications for One Sentence Statement
Example: “Cannot save file…. No
space”
Mental models….
•
•
•
•
What was the user’s mental model?
What is the designer’s (actual) system model
Cause of the problem???
How to overcome it???
• In this case
• In general
The refrigerator challenge
• Your refrigerator’s freezer section is not cold
enough
• You find a dial at the back of the freezer
labelled as below and set on 3
– warmer 1 2 3 4 5 6 7 colder
• What will you do? Will it work? What is your
mental model?
Neilsen on MM
• ….many less-techy users don't understand the differences
between many other common features:
–
–
–
–
–
–
Operating-system windows vs. browser windows
A window vs. an application,
Icons vs. applications,
Browser commands vs. native commands in a Web-based app
Local vs. remote info
Different passwords and log-in options (users often log in to
other websites as if they were logging in to their email)
• Implications for
– usable security?
– Building on metaphors
How to address…
• “Make the system conform to users' mental models —
…. This is the approach we usually recommend to fix IA
problems:
– eg If people look for something in the wrong place, then
move it to the place where they look for it.
– Card sorting is a useful way to discover users' mental
model of an information space so that you can design your
navigation accordingly.
• Improve users' mental models so that they more
accurately reflect your system.
– eg explaining things better
– making labels clearer to make the UI more transparent
(even though the underlying system remains unchanged).
Some useful distinctions
• Slips:
– correct user model, inadvertent incorrect action
– eg car “malfunction”, tap caps lock accidentally
• Mistakes: incorrect mental model
• Use this tightened vocabulary for your thinkaloud reports
Norman’s Gulf of Execution
http://learnline.cdu.edu.au/units/hit381/resources/popups/normantheoryof
action.html
Norman’s Gulf of Evaluation
http://learnline.cdu.edu.au/units/hit381/resources/popups/normantheoryof
action.html
Gulf of evaluation: the amount of effort required to determine the system state
When problems occur in the evaluation phase, the "gulf of execution" widens
Some examples
"What happened then?"
"What did I do wrong"
User repeats the action (e.g. clicks the NEXT or SUBMIT button)
Norman’s Gulf of Execution
http://learnline.cdu.edu.au/units/hit381/resources/popups/normantheoryof
action.html
Gulf of execution….distance between the user's goals and
the means of achieving them through the system
Some examples:
"What do I do now?"
"How do I [...]?"
"I wanted to [...], but I can't see how I would do that?"
"Do I press this?"
"Do I type this in here?"
"I'm looking for [...] but I can't find it"
Norman’s Gulf of Execution
http://learnline.cdu.edu.au/units/hit381/resources/popups/normantheoryof
action.html
Overcoming gulfs - Norman’s questions :
Norman, D.A. 1988 "The Design of Everyday Things." MIT Press
• How easily can a person determine:
– 1 determine the function of the device?
– 2 tell what actions are possible?
– 3 determine mapping from intention to physical
movement?
– 4 perform the action?
– 5 tell what state the system is in?
– 6 tell if system is in desired state?
– 7 determine mapping from system state to
interpretation?
Principles of good design
• Provide a good conceptual model
– Enables user user to build good mental model of the device.
– And to predict the effects of their actions.
• Make things visible/audible/tangible
– Ensure user can see, hear, feel… the state of the device and the
alternatives for action.
• The Principle of Mapping
– Relies on linking existing mental model to perceived system
• Natural mapping
• Physical analogies
• Cultural standards
• The Principle of Feedback
– Information on what has been accomplished or is doing.
– full and continuous feedback about results of actions.
Mental versus conceptual models
http://uxmag.com/articles/the-secret-to-designing-an-intuitive-user-experience
• “…. a mental model refers to the representation of
something—the real world, a device, software, etc.—
that the user has in mind. It is a representation of an
external reality. Users create mental models very
quickly, often before they even use the software or
device. Users’ mental models come from their prior
experience with similar software or devices,
assumptions they have, things they’ve heard others
say, and also from their direct experience with the
product or device. Mental models are subject to
change. Users refer to mental models to predict what
the system, software, or product is going to do, or what
they should do with it.
“… A conceptual model is the actual model [available] to the
user through the interface of the product.
[eg] iPad ebook … mental model about ..
– what reading a book will be like in the iPad,
– how it will work, what you can do with it.
But when you sit down with the iPad, the “system” (the iPad) will
display …. screens, and buttons, and things that happen.
The actual interface is representing the conceptual model. Someone
designed a user interface and that interface is communicating to you
the conceptual model of the product.
Case study
• Moded interfaces:
– The same interface action has a different meaning
depending upon the context
• Class activity: define some examples of moded
interaction in common interfaces eg text
editor, Powerpoint, Word
• What are the challenges for the user?
Redraw this, adding conceptual model, and
making changes to correct any errors
Challenges for design:
• conceptual model doesn’t match the user’s mental
model
• designers of the conceptual model needs to account
for the user’s mental model
– How does CI help?
– And the role of Think-Aloud?
• multiple user groups
• conceptual model purely reflects underlying hardware,
software or database
• creating materials/training to build an appropriate
mental model
– One Sentence Statement?
Returning to Assignment 1
• Why are sketches better for exploring the
space of conceptual models?
• Some students used software for wireframes
and prototyping – why is this dangerous?
• Clarity on differences between mental model,
conceptual model, actual system
Fitts’ Law
http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/
time …. to complete the action
a and b are empirically determined regression coefficients,
…..values gained from direct observation that build a slope.
distance … from the starting point to the …target object
width is the width of the target object
http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/
http://mindhacks.com/2005/01/20/siz
e-and-selection-times-fittss-law/
Age matters
http://hcil2.cs.umd.edu/trs/2003-16/2003-16.html
Participant in (1) was a 4 year 6 month old female.
Participant in (2) was a 5 year 8 month old female.
Participant in (3) was a 21 year-old female.
http://hcil2.cs.umd.edu/trs/2003-16/2003-16.html
All paths taken by 5 year old participants to click on a 32 pixel target at a distance of 256 pixels.
http://hcil2.cs.umd.edu/trs/2003-16/2003-16.html
All paths taken by adult participants to click on a 32 pixel target at a distance of 256 pixels.
Beyond the mouse?
Fitts’ Law in action –
Grouping, layout, hierarchies
http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/
Fitts’ Law in action –
The prime pixel……where your cursor is now
http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/
Windows, …. right-click ….contextual menu of options usually appears that
has its point of origin at the prime pixel.
http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/
Magic pixels….. What are they? Fitts’ link?
Why are they important?
http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/
Summary
• Empirical foundations
• Heuristics for designers
– Grouping items for flow of action
• Special locations
– Prime pixel
– Magic pixels
A Quiz Designed to Give You Fitts
http://www.asktog.com/columns/022DesignedToGiveFitts.html
•
Microsoft Toolbars offer the user the option of displaying a label below each tool. Name at least
one reason why labeled tools can be accessed faster. (Assume, for this, that the user knows the tool
and does not need the label just simply to identify the tool.)
•
You have a palette of tools in a graphics application that consists of a matrix of 16x16-pixel icons
laid out as a 2x8 array that lies along the left-hand edge of the screen. Without moving the array
from the left-hand side of the screen or changing the size of the icons, what steps can you take to
decrease the time necessary to access the average tool?
•
A right-handed user is known to be within 10 pixels of the exact center of a large, 1600 X 1200
screen. You will place a single-pixel target on the screen that the user must point to exactly. List the
five pixel locations on the screen that the user can access fastest. For extra credit, list them in order
from fastest to slowest access.
•
Microsoft offers a Taskbar which can be oriented along the top, side or bottom of the screen,
enabling users to get to hidden windows and applications. This Taskbar may either be hidden or
constantly displayed. Describe at least two reasons why the method of triggering an auto-hidden
Microsoft Taskbar is grossly inefficient.
A Quiz Designed to Give You Fitts
http://www.asktog.com/columns/022DesignedToGiveFitts.html
•
Explain why a Macintosh pull-down menu can be accessed at least five times faster than a typical
Windows pull-down menu. For extra credit, suggest at least two reasons why Microsoft made such
an apparently stupid decision.
•
What is the bottleneck in hierarchical menus and what techniques could make that bottleneck less
of a problem?
•
Name at least one advantage circular popup menus have over standard, linear popup menus.
•
What can you do to linear popup menus to better balance access time for all items?
•
The industrial designers let loose on the Mac have screwed up most of the keyboards by cutting
their function keys in half so the total depth of the keyboard was reduced by half a key. Why was
this incredibly stupid?
•
What do the primary solutions to all these questions have in common?
Attention
Attention
• http://www.youtube.com/watch?v=vJG698U2
Mvo&feature=c4-overviewvl&list=PLB228A1652CD49370
• Daniel Simons
Attention
• Why did this happen?
• What is attention?
– Visual **
– Audio
• What are the implications for UI designers?
– Multi-tasking
– Attention-grabbers
• And for UI evaluations?
– Eye tracking
– Think-aloud
• For your project
– Guiding the user in where to attend
Memory
• Working memory
–
Miller, George A. "The magical number seven, plus or minus two: some limits on our capacity for processing information."
Psychological review 63.2 (1956): 81. (>17K gcites, Sep 2013) http://cogprints.org/730/1/miller.html
– WM very limited
– Chunking is really important
– Complex to user this to predict … but may explain thinkaloud observations
– (Claude Shannon theory of information .. Brain as
information processing machine)
• Long term memory
– Critical for recall at UI
– And learning about UI
– Mental model
Perception
• Translating external stimuli into the memory
– Senses
– Processing their information
– Tightly interlinked physical and cognitive
• Simple example, reading a screen
– Vision… visibility
Screen design
•
•
•
Tullis, Thomas S. "The formatting of alphanumeric displays: A review and analysis."
Human Factors: The Journal of the Human Factors and Ergonomics Society 25.6
(1983): 657-682.
http://www.eastonmass.net/tullis/publications/1983HF/FormattingAlphanumericDisplays.pdf
Key outcomes in terms of
– Performance versus affect (preferences)
– Density (local/overall), grouping, layout complexity
– Grouping related elements, organised for vertical scanning, with space between them aids
search in speed and preference
•
Science of screen design
–
–
–
–
–
–
–
Careful empirical studies
Design of initial study
Replication
Impact of different technology
Impact of the particular task
Impact of user’s mental model, standards for device, application
Translation to your interface
Colour
• Valuable for screen design
– Performance ++
– Affect ++
• Well understood challenges that are avoidable
but failure to do so can compromise
performance
Tog Principles
http://asktog.com/atc/principles-of-interaction-design/
• “Principle: Any time you use color to convey
information in the interface, you should also use
clear, secondary cues to convey the information
to those who cannot see the colors presented
• Principle: Test your site to see what color-blind
individuals see
• Principle: Do not avoid color in the interface just
because not every user can see every color.
• Principle: Do not strip away or overwhelm color
cues in the interface because of a passing
graphic-design fad.
Colour blindness
• Affected ~ 8% of men, .5% women
• Tetsting tools eg
– http://enably.com/chrometric/.
• For images images
– http://www.colblindor.com/coblis-colorblindness-simulator/.
• xxxx
Coblis — Color Blindness Simulator
Their demo: normal vision
Green-Blind/Deuteranopia
Blue-Blind/Tritanopia
Red-Blind/Protanopia
Normal vision
Blue-Weak/Tritanomaly
What can you do about colour
blindness?
• Be aware!
• Design in black and white and add colour
sparingly
• What else? …. Class activity
Colour
• Valuable for screen design
– Performance ++
– Affect ++
• Well understood challenges that are avoidable
but failure to do so can compromise
performance
Coding
• Means distinguishing different parts of an interface
• Includes
– Font changes such as these
– Font with style and size
–
–
–
–
Use of colour such as here and here – seriously
Special symbols, shapes
Sound
Movement
• All are about ...
Coding
• Means distinguishing different parts of an interface
• Includes
– Font changes such as these
– Font with style and size
–
–
–
–
Use of colour such as here and here – seriously
Special symbols, shapes
Sound
Movement
• All are about ... gaining attention
Colour can be poorly used
• Means distinguishing different parts of an interface
• Includes
– Font changes such as these
– Font with style and size
– Use of colour such as here and here – seriously
– Special symbols, shapes
– Sound
– Movement
• All are about ... gaining attention
HAI2008.
Lifelong ambient companions:
challenges and steps to
Stroop effect
http://faculty.washington.edu/chudler/java/ready.html
Stroop Effect
From http://faculty.washington.edu/chudler/words.html
Colour
• Properties
– Hue – wavelength (red .. violet)
– Saturation, chroma (purity, mix of wavelengths)
• High saturation very pure
• Low saturation, greyish
– Brightness, intensity, value
• very low intensity becomes black
Visible Spectrum
Winter 2013
CSE 440: User Interface Design,
Prototyping, and Evaluation
68
Physiology and colour
• Rods and cones
• Fovea – detailed vision (eg text)
• Only cones sensitive to colour
– 64% respond to red
– 32% to green
– 2% to blue (none in fovea!)
• Opposing colours at the neuron level
– Red-green, yellow-blue
• Visual acuity reduced for violet end of spectrum
• Insensitivity to blue increases with age
• Blue seems harder to read, especially on some
backgrounds
• With normal light, we see mid-spectrum colours best
(ie green, yellow)
• Colour blindness
– 8% men, 0.4% women
– Use additional redundant cue eg colour + box +
brightness difference and this improves broad
performance
• Reds appear closer than blues
• Warm colours appear larger than cool colours
– eg red larger than blue
• Blooming effect
– Light colours on dark backgrounds appear larger
• Colours distant on spectrum require refocusing
• After images and shadows can follow
– Opposing colours
– Highly saturated colours
• Illumination matters too
Light text on a dark background
Dark text on a light background
Light text on a dark background
Dark text on a light background
Blooming – light text on dark background seem larger
Red text on a dark background
Red text on a light background
Red text seems to focus differently
Red text seems to focus differently
Red text seems to focus differently
Red text seems to focus differently
Red text seems to focus differently
Red text seems to focus differently
So many ways to make mistakes...
Color Guidelines
Avoid simultaneous display of highly saturated, spectrally
extreme colors
– e.g., no cyans/blues at the same time as reds, why?
• refocusing!
– desaturated combinations are better  pastels
Winter 2013
CSE 440: User Interface Design,
Prototyping, and Evaluation
80
Using the Hue Circle
• Pick non-adjacent colors
– opponent colors
go well together
• (red & green) or
(yellow & blue)
Winter 2013
CSE 440: User Interface Design,
Prototyping, and Evaluation
81
Guidelines
eg
http://colorusage.arc.nasa.gov/guidelines.p
hp
Examples:
• Pure blue shall not be used on a dark background
for text, thin lines, or high resolution
information. [Source: DOE-HFAC 1, 1992] FAA
Human Factors Design Standard, p 8-58
• 8.6.2.2.7 Blue. Blue should not be used as the
foreground color if resolution of fine details is
required. [Source: DOD HCISG V2.0, 1992] FAA
Human Factors Design Standard, p 8-57.
• http://colorusage.arc.nasa.gov/assets/blue_1.gif
More examples from NASA:
from http://colorusage.arc.nasa.gov/guidelines_discrim_id.php
• Use no more than six colors to label graphic
elements.
• Use colors in conformity with cultural
conventions.
• Use color coding consistently across displays and
pages
• Use color coding redundantly with other graphic
dimensions.
• Don't use color coding on small graphic elements
Recommendations
• Use colour sparingly
• Maximum codings 5 (+ or – 2) matching short
term memory
• Design in monochrome first
• Optimise all other aspects of design and layout
• Add colour (with awareness of problems)
• Use colour to:
– Draw attention (better than shape, size, brightness)
– Show organisation, status, relationships
cont
• With black foreground, use cyan, magenta, white
• Ensure contrast ib hue and brightness of foreand background
•
•
•
•
Allow users to control colour coding
Use colour consistently across system
Use other (redundant) cues as well
Avoid saturated blue for small text and thin lines
Blinking and movement
When is it good?
And not?
Take yourself back to hunter and
gatherer times:
A hungry tiger is coming from the
distance at your right
Blinking and movement
• Hard to ignore
• Reduces legibility
• Can be really annoying
• Helpful for tiny cursors (otherwise hard to find
and large ones are obtrusive)
• Helpful for critical situations
Shapes
• Conventions for some shapes
– eg warning and errors
• Special shapes
– eg little hand pointing
• Cultural boundaries
Summary
• Awareness of human factors affecting
design
• Awareness of some basic guidelines for use
of colour
– Apply these for a simple form of no-user testing
by checking your UI against guidelines
– Better done by person other than designer (role
for your teams to desk-check each other’s
designs)