Midterm Review PacketStolen Borrowed from Prof. Marti Hearst
HFID Spring 2005
Affordances
The perceived properties of an object that determine how it can be used.– Knobs are for turning.– Buttons are for pushing.
Some affordances are obvious, some learned– Glass can be seen through.– Glass breaks easily.
Sometimes visual plus physical feedback– Floppy disk example
• Rectangular – can’t insert sideways• Tabs on the disk prevent the drive from letting it be fully inserted
backwards
Norman’s Affordances
Affordances:– Have perceived properties that may or may not exist– Have suggestions or clues about to how to use these
properties– Can be dependent on the
• Experience• Knowledge• Culture of the actor
– Can make an action easy or difficult
From McGrenere & Ho, Proc of Graphics Interfaces, 2000
Based on slide by Saul Greenberg
Affordances in Screen-Based Interfaces
In graphical, screen-based interfaces, all that the designer has available is control over perceived affordances– Display screen, pointing device, selection buttons,
keyboard– These afford touching, pointing, looking, clicking on
every pixel of the display.
Based on slide by Saul Greenberg
Affordances in Screen-Based Interfaces
Most of this affordance is not used– Example: if the display is not touch-sensitive, even
though the screen affords touching, touching has no effect.
– Example: • does a graphical object on the screen afford clicking?• yes, but the real question is does the user perceive this
affordance; does the user recognize that clicking on the icon is a meaningful, useful action?
Visual affordances of a scrollbar
Mappings
Mapping: – Relationships between two things
• Between controls and their results– Related to metaphor discussion– Related to affordances
Slide adapted from Saul Greenberg
Mapping controls to physical outcomes
backright
frontleft
backleft
frontright
24 possibilities, requires: -visible labels -memory
arbitrary full mapping
back front front back
2 possibilities per side =4 total possibilities
paired
Mappings
For devices, appliances– Natural mappings use constraints and correspondences in the
physical world• Controls on a stove• Controls on a car
– Radio volume» Knob goes left to right to control volume» Should also go in and out for front to rear speakers
For computer UI design– Mapping between controls and their actions on the computer
• Controls on a digital watch• Controls on a word processor program
Based on slide by Saul Greenberg
Transfer Effects
People transfer their expectations from familiar objects to similar new ones– positive transfer: previous experience applies to new
situation– negative transfer: previous experience conflicts with
new situation
Based on slide by Saul Greenberg
Cultural Associations
Groups of people learn idioms– red = danger, green = go
But these differ in different places– Light switches
• America: down is off• Britain: down is on
– Faucets• America: counter-clockwise is on• Britain: counter-clockwise is off
Gulf of Evaluation
The amount of effort a person must exert to interpret – the physical state of the system– how well the expectations and intentions have been
met
We want a small gulf!
Based on slide by Saul Greenberg
Example
Scissors– affordances:
• holes for insertion of fingers• blades for cutting
– constraints• big hole for several fingers, small hole for thumb
– mapping• between holes and fingers suggested and constrained by appearance
– positive transfer• learnt when young
– conceptual model• implications clear of how the operating parts work
Based on slide by Saul Greenberg
Bad Example
Digital Watch– affordances
• four push buttons, not clear what they do– contraints and mapping unknown
• no visible relation between buttons and the end-result of their actions– negative transfer
• little association with analog watches– cultural standards
• somewhat standardized functionality, but highly variable– conceptual model
• must be taught; not obvious
How to design a better one?
Based on slide by Saul Greenberg
Bad Example
Digital Watch– affordances
• four push buttons, not clear what they do– contraints and mapping unknown
• no visible relation between buttons and the end-result of their actions– negative transfer
• little association with analog watches– cultural standards
• somewhat standardized functionality, but highly variable– conceptual model
• must be taught; not obvious
How to design a better one?
The Metaphor of Direct Manipulation
Direct Engagement– the feeling of working directly on the task
Direct Manipulation– An interface that behaves as though the interaction was with a real-world
object rather than with an abstract system
Central ideas– visibility of the objects of interest– rapid, reversible, incremental actions– manipulation by pointing and moving– immediate and continuous display of results
Almost always based on a metaphor– mapped onto some facet of the real world task semantics)
Slide adapted from Saul Greenberg
Object-Action vs Action-Object
Select object, then do action– interface emphasizes 'nouns' (visible objects) rather than 'verbs' (actions)
Advantages– closer to real world– modeless interaction– actions always within context of object
• inappropriate ones can be hidden– generic commands
• the same type of action can be performed on the object• eg drag ‘n drop:
my.doc
move
Slide adapted from Saul Greenberg
Direct manipulation
Representation directly determines what can manipulated
Slide adapted from Saul Greenberg
Games
Slide adapted from Saul Greenberg
Is direct manipulation the way to go?
Some Disadvantages– Ill-suited for abstract operations
• Spell-checker?
• Search database by scrolling or by query?
Solution: Most systems combine direct manipulation and abstractions
• Word processor:– WYSIWYG document (direct manipulation)– buttons, menus, dialog boxes (abstractions, but direct manipulation “in
the small”)
Image from Newsweek, Jan 2001
Raskin on Cognition
Cognitive Conscious / Unconscious– Examples?
• What is the last letter in your first name?– You know it but weren’t consciously accessing this information a moment ago,
but now you are.• How do your shoes feel right now?• How did “The Shining” make you feel?• Having a name on the “tip of your tongue”
– Differences?• New situations/routines• Decisions / one standard choice• Sequential / simultaneous
Image from Newsweek, Jan 2001
Raskin on Cognition
Locus of Attention– What is it?
• An idea/object/event about which you are intently and actively thinking.• The one entity on which you are currently concentrating
– You see and hear much more– E.g., white noise
» Turn the lights off, you have a full-fidelity recording of their sound in your mind, which fades quickly
– Why locus?• Focus implies volition; locus not always under conscious control• Attention can be either active or “going with the flow”
– Why is it important for HCI?
Raskin on Cognition
Locus of Attention– Why is it important for HCI?
• Cannot be conscious of more than one task at a time• Make the task the locus of attention
– Don’t count on people to read labels or directions• Beware of the power of mental habits
– Repetitive confirmations don’t work• Take advantage of it
– Do pre-loading while user thinking about next step– Streamline resumption of interrupted tasks
Cooper on error dialog boxes
Why are they problematic?How related to locus of attention?What are the alternatives?– Cooper is talking to programmers
• “Silicon Sanctimony”• You should feel as guilty as for using a goto – an
admission of failure in design
What happens when you cancel a cancelled operation?
Do I have any choice in this?
Umm, thanks for the warning,but what should I do?
Uhhh… I give up on this one
Slide adapted from Saul Greenberg
“HIT ANY KEY TO CONTINUE”
Modes
What are they?– The same user actions have different effects in different
situations.– Examples:
• Adobe reader example: vs. • Powerpoint drawing example• Keycaps lock
Modes
When are they useful?Why can they be problematic?How can these problems be fixed?
Modes
When are they useful?– Temporarily restrict users actions– When logical and clearly visible and easily switchable
• Drawing with paintbrush vs. pencil• Autocorrect (if easy to switch the mode)
Why can they be problematic?– Big memory burden– Source of many serious errors
How can these problems be fixed?– Don’t use modes – redesign the system to be modeless– Redundantly visible– Raskin -- quasimodes
A Summary Statement
Raskin, p. 69– “We must make sure that every detail of an interface
matches both our cognitive capabilities and the demands of the task…”
Wireframing
What is the main idea?– Separate content from layout and display– Next week:
• Use the page layout to signal the flow of interaction• Group conceptually related items together
– Nielsen: • What does the layout communicate?• Test if a page of content becomes more usable because of the layout• A template (for a home page) should contain what items?
How WireFraming Fits In
Kelly Goto & Eric Ott of Macromedia
http://www.gotomedia.com/macromedia/monterey/architecture/
From http://www.gotomedia.com/macromedia/monterey/architecture/
Today
Evaluation based on Cognitive ModelingComparing Evaluation Methods
Another Kind of Evaluation
Evaluation based on Cognitive Modeling Fitts’ Law
Used to predict a user’s time to select a target
Keystroke-Level Model low-level description of what users would
have to do to perform a task. GOMS
structured, multi-level description of what users would have to do to perform a task
Slide adapted from Melody Ivory
GOMS at a glance
Proposed by Card, Moran & Newell in 1983– Apply psychology to CS
• employ user model (MHP) to predict performance of tasks in UI– task completion time, short-term memory requirements
– Applicable to • user interface design and evaluation• training and documentation
– Example of• automating usability assessment
Slide adapted from Melody Ivory
Model Human Processor (MHP)
Card, Moran & Newell (1983)– most influential model of user interaction
• used in GOMS analysis– 3 interacting subsystems
• cognitive, perceptual & motor• each with processor & memory
– described by parameters» e.g., capacity, cycle time
• serial & parallel processing
Adapted from slide by Dan Glaser
Slide adapted from Melody Ivory
Original GOMS (CMN-GOMS)
Card, Moran & Newell (1983)Engineering model of user interaction
• Goals - user’s intentions (tasks)– e.g., delete a file, edit text, assist a customer
• Operators - actions to complete task– cognitive, perceptual & motor (MHP)– low-level (e.g., move the mouse to menu)
Slide adapted from Melody Ivory
CMN-GOMS
Engineering model of user interaction (continued)• Methods - sequences of actions (operators)
– based on error-free expert– may be multiple methods for accomplishing same goal
» e.g., shortcut key or menu selection
• Selections - rules for choosing appropriate method– method predicted based on context
– hierarchy of goals & sub-goals
Keystroke-Level Model
Simpler than CMN-GOMSModel was developed to predict time to accomplish a task on a computerPredicts expert error-free task-completion time with the following inputs:– a task or series of subtasks– method used– command language of the system– motor-skill parameters of the user– response-time parameters of the system
Prediction is the sum of the subtask times and overhead
Slide adapted from Newstetter & Martin, Georgia Tech
KLM-GOMS
Keystroke level model
1. Predict
(What Raskin refers to as GOMS)
Action 1
Action 2
Action 3
x sec.
y sec.
z sec.+
t sec.
2. Evaluate
Time usinginterface 1 Time using
interface 2
Slide adapted from Newstetter & Martin, Georgia Tech
Symbols and values
KBPHD
MR
Press KeyMouse Button PressPoint with MouseHome hand to and from keyboardDrawing - domain dependent
Mentally prepareResponse from system - measure
0.2.10/.201.10.4-
1.35-
Operator Remarks Time (s)
Raskin excludes
Assumption: expert user
Slide adapted from Newstetter & Martin, Georgia Tech
Raskin’s rules
KBPHD
MR
0.2.10/.201.10.4-
1.35-
Rule 0: Initial insertion of candidate M’s
Rule 1: Deletion of anticipated M’s
M before KM before P iff P selects command
If an operator following an M is fully anticipated, delete that M.
i.e. not when P points to arguments
e.g. when you point and click
Slide adapted from Newstetter & Martin, Georgia Tech
Raskin’s rules
KBPHD
MR
0.2.10/.201.10.4-
1.35-
Rule 2: Deletion of M’s within cognitive units
Rule 3: Deletion of M’s before consecutive terminators
If a string of MK’s belongs to a cognitive unit, delete all M’s but the first.
If a K is a redundant delimiter, delete the M before it.
e.g. 4564.23
e.g. )’
Slide adapted from Newstetter & Martin, Georgia Tech
Raskin’s rules
KBPHD
MR
0.2.10/.201.10.4-
1.35-
Rule 4: Deletion of M’s that are terminators of commands
Rule 5: Deletion of overlapped M’s
If K is a delimiter that follows a constant string, delete the M in front of it.
Do not count any M that overlaps an R.
Slide adapted from Newstetter & Martin, Georgia Tech
Example 1
KBPHD
MR
0.2.10/.201.10.4-
1.35-
Temperature Converter
Choose which conversion is desired, then type the temperature and press Enter.
Convert F to C.Convert C to F.
HPBHKKKKK
HMPMBHMKMKMKMKMK
HMPBHMKKKKMK
Apply Rule 0
Apply Rules 1 and 2
Convert to numbers
.4+1.35+1.1+.20+.4+1.35+4(.2)+1.35+.2
=7.15
Slide adapted from Newstetter & Martin, Georgia Tech
Example 1
KBPHD
MR
0.2.10/.201.10.4-
1.35-
Temperature Converter
Choose which conversion is desired, then type the temperature and press Enter.
Convert F to C.Convert C to F.
HPBHKKKKK
HMPMBHMKMKMKMKMK
HMPBHMKKKKMK
Apply Rule 0
Apply Rules 1 and 2
Convert to numbers
.4+1.35+1.1+.20+.4+1.35+4(.2)+1.35+.2
=7.15
Example 2
GUI temperature interfaceAssume a button for compressing scaleEnds up being much slower– 16.8 seconds/avg prediction
Using KLM and Information Theory to Design More Efficient Interfaces (Raskin)
Armed with knowledge of the minimum information the user has to specify:– Assume inputting 4 digits on average– One more keystroke for C vs. F– Another keystroke for Enter
Can we design a more efficient interface?
Using KLM to Make More Efficient Interfaces
First Alternative:
To convert temperatures, Type in the numeric temperature,Followed by C for Celcius or
F for Fahrenheit. The converted Temperature will be displayed.
MKKKKMK = 3.7 sec
Using KLM to Make More Efficient Interfaces
Second Alternative: – Translates to both simultaneously
MKKKK = 2.15 sec
C
F
Slide adapted from Melody Ivory
GOMS in Practice
Mouse-driven text editor (KLM)CAD system (KLM)Television control system (NGOMSL)Minimalist documentation (NGOMSL)Telephone assistance operator workstation (CMP-GOMS)– saved about $2 million a year
Drawbacks
Assumes an expert userAssumes an error-free usageOverall, very idealized
Slide adapted from Newstetter & Martin, Georgia Tech
Fitts’ Law
Models movement time for selection tasks
The movement time for a well-rehearsed selection task • increases as the distance to the target increases• decreases as the size of the target increases
Slide adapted from Newstetter & Martin, Georgia Tech
Fitts’ Law
Time (in msec) = a + b log2(D/S+1)where a, b = constants (empirically derived) D = distance S = size
ID is Index of Difficulty = log2(D/S+1)
Slide adapted from Pourang Irani
Fitts’ Law
Same ID → Same Difficulty
Target 1 Target 2
Time = a + b log2(D/S+1)
Slide adapted from Pourang Irani
Fitts’ Law
Smaller ID → Easier
Target 2Target 1
Time = a + b log2(D/S+1)
Slide adapted from Pourang Irani
Fitts’ Law
Larger ID → Harder
Target 2Target 1
Time = a + b log2(D/S+1)
Slide adapted from Pourang Irani
Determining Constants for Fitts’ Law
To determine a and b design a set of tasks with varying values for D and S (conditions)
For each task condition – multiple trials conducted and the time to execute each is recorded and stored
electronically for statistical analysis
Accuracy is also recorded– either through the x-y coordinates of selection or – through the error rate — the percentage of trials selected with the cursor outside
the target
Adapted from slide by James Landay
Formal Usability Studies
When useful– to determine time requirements for task completion– to compare two designs on measurable aspects
• time required• number of errors• effectiveness for achieving very specific tasks
Require Experiment Design
Experiment Design
Experiment design involves determining how many experiments to run and which attributes to vary in each experiment
Goal: isolate which aspects of the interface really make a difference
Experiment Design
Decide on – Response variables
• the outcome of the experiment• usually the system performance• aka dependent variable(s)
– Factors (aka attributes))• aka independent variables
– Levels (aka values for attributes)– Replication
• how often to repeat each combination of choices
Experiment Design
Example: – Studying a system (ignoring users)
Say we want to determine how to configure the hardware for a personal workstation – Hardware choices
• which CPU (three types)• how much memory (four amounts)• how many disk drives (from 1 to 3)
– Workload characteristics• administration, management, scientific
Experiment Design
We want to isolate the effect of each component for the given workload type.How do we do this?– WL1 CPU1 Mem1 Disk1– WL1 CPU1 Mem1 Disk2– WL1 CPU1 Mem1 Disk3– WL1 CPU1 Mem2 Disk1– WL1 CPU1 Mem2 Disk2– …
There are (3 CPUs)*(4 memory sizes)*(3 disk sizes)*(3 workload types) = 108 combinations!
Experiment Design
One strategy to reduce the number of comparisons needed:– pick just one attribute– vary it– hold the rest constant
Problems:– inefficient– might miss effects of interactions
Interactions among Attributes
A1 A2B1 3 5B2 6 8
A1 A2B1 3 5B2 6 9
A1
B1B1
A2
A1
B2
A2
B2
Non-interacting Interacting
A2A2 A1A1
B1 B2B1 B2
Experiment Design
Another strategy: figure out which attributes are important firstDo this by just comparing a few major attributes at a time – if an attribute has a strong effect, include it in future
studies– otherwise assume it is safe to drop it
This strategy also allows you to find interactions between attributes
Experiment Design
Common practice: Fractional Factorial Design– Just compare important subsets– Use experiment design to partially vary the
combinations of attributes
Blocking– Group factors or levels together– Use a Latin Square design to arrange the blocks
Between-Groups Design
Wilma and Betty use one interface
Dino and Fred use the other
Within-Groups Design
Everyone uses both interfaces
Adapted from slide by James Landay
Between-Groups vs. Within-Groups
Between groups – 2 or more groups of test participants– each group uses only 1 of the systems
Within groups – one group of test participants– each person uses all systems
• can’t use the same tasks on different systems
Between-Groups vs. Within-Groups
Within groups design– Pros:
• Is more powerful statistically (can compare the same person across different conditions, thus isolating effects of individual differences)
• Requires fewer participants than between-groups
– Cons:• Learning effects• Fatigue effects
Special Considerations for Formal Studies with Human Participants
Studies involving human participants vs. measuring automated systems– people get tired– people get bored– people (may) get upset by some tasks– learning effects
• people will learn how to do the tasks (or the answers to questions) if repeated• people will (usually) learn how to use the system over time
More Special Considerations
High variability among people
– especially when involved in reading/comprehension tasks
– especially when following hyperlinks! (can go all over the place)