Human Computer Interaction

IE403

Dr. Manish Khare

Human Information Processing
Big picture of the human processor model

Slide 3
What do cognitive models actually model?

Perceiving the interface

Thinking

Hand
movements

Slide 4
Spot the
number of cats,
dogs , puppies
and FROG.

Recall the
numbers after
sometime.

Slide 5
 Cognitive processing

Cognition refers to the processes by which we become acquired

with things

 Cognition  gain knowledge

 Understanding, attending, being aware, acquiring skills and
creating new ideas

Slide 6
 Why Cognition is an Issue?
O u tp u t (m o v e m e n t)
CO
In p u t
HUMAN
P M

T U

In p u t (v is io n ) R E
O u tp u t

Knowledge transmission
between human and computer

• In order to design good interfaces between humans and

computers, the designer must have a basic understanding of
– How human deals with information
– How computer deals with similar information

Slide 7
Cognition in Man-Machine Interaction

Slide 8
Human Information Processing
Lets try recalling the phone number of a friend

• Identify the words in this cognitive task and then retrieve their
meaning
• Searching our memory for the solution of the problem
• On retrieving the number in the memory we generate a plan and
formulate the answer into a representation

• Then we need to recite the digits or write them down

Note: The major aspects in information processing

analysis is to trace the mental operations and their for a
outcome particular cognitive task

Slide 9
 Human Information Processing
• Three aspects in human information processing
– Perception
• Visual
• Audio
• Other senses (tactile, Gustatory, Smell)

– Cognition
• Memory
• Problem solving
• Learning

– Motor behavior
• Speaking
• Typing
• Pointing
• and others

Slide 10
 Role of Cognition in HCI Design
• Quantitative measurement for HCI design
– The model human processor provides a means of
characterizing the various cognitive processes that
are assumed to underlie the performance of a task

– Card, Moran and Newell (1983) proposed a model

for predicting the speed with which users could
carry out tasks on a computer

Slide 11
Predicting the Cognition by Card et al.
• Essential parameters are
tp = time for perceiving a stimulus
tc = time for making a decision
tm = time for making a tapping motion

• Study reveals that

tp = 100 [50 ~ 200] ms tc
= 70 [20 ~ 170] ms tm
= 70 [30 ~ 100] ms

Slide 12
Predicting the Cognition by Card et al.
• Total time required for some user interface action is
then predicted by the number of times each type of
event must occur in the performance of that action

T = nptp + nctc + nmtm

Slide 13
Human Information processing Model

 High level
 Numerical parameters of
behavior
STSS  STSS
 Perceptual Proc
 LTM
 Cognitive Proc
 WM
 Motor Proc
LTM  Feedback
 Attention

Slide 14
 Perceptual processor
 senses, detects, and accepts inputs from the external world
 stores parts of the perceptions in working memory (these are visual or
auditory)
 Cognitive processor
 interprets, manipulates, and makes decisions about the inputs (along with
memory)
 Motor processor
 generates physical actions (such as keying and mouse clicking) based on
perceptions and cognitions
Capacity of working memory is roughly 7 ± 2 things
Long term memory is unlimited….but difficult to retrieve

Slide 15
 Processors

 Cycle Time : Accept input and

produce output

 Ranges shown vary

 Perceptual processor
 Bright Vs dark environment
 Cognitive processor
 Driving, playing video games
Vs
The Psychology of Human-Computer
 Idle or reading
Interaction, Card, Moran and
Newell, 1983

Slide 16
Model Human Processor

■ Contains three interacting systems: perceptual, cognitive,

and motor systems
■ For some tasks, systems operate in serial (pressing a key in
response to a stimulus)
■ For other tasks, systems operate in parallel (driving, talking
to passenger, listening to radio)
■ Each system has its own memory and processor
■ Memory: storage capacity and decay time
■ Processor: cycle time (includes access time)
■ Each system guided by principles of operation

Slide 17
Model Human Processor

Long Term
Memory

Visual Auditory Working

Store Store Memory

Percept Cogniti
Eye Motor
ual ve
sEar Proces
Proces Proces
sor
s sor sor

Arms,
wrists,
fingers, etc.

Slide 18
Perceptual System

■ Responsible for transforming external environment into a

form that cognitive system can process
■ Composed of perceptual memory and processor

Long Term Memory

Auditor Working Memory

Visual
y
Store
Store

Percep Cogniti
Eyes Motor
tual ve
Process
Ears Proces Process
or
sor or

Slide 19
Perceptual Memory

■ Shortly after onset of stimulus, representation of stimulus

appears in perceptual memory
■ Representation is physical (non-symbolic)
■ E.g., “7” is just the pattern, not the recognized digit
■ As contents of perceptual memory are symbolically coded,
they are passed to WM
■ Which processor does the coding?
■ Codes information in perceptual memory for about 100ms
and then retrieves next stimulus
■ Decay time
■ 200ms for visual store
■ 1500ms for auditory store

Slide 20
In Class Exercises

■ Assume perceptual cycle time = 100ms

■ If 20 clicks per second are played for 5 seconds, about how many
clicks could a person hear?

■ If 30 clicks per second are played for 5 seconds, about how many
clicks could a person hear?

Slide 21
Cognitive System

■ Uses contents of WM and LTM to make decisions and

schedule actions with motor system
■ Composed of a processor and two memories
■ WM and LTM

Long Term Memory

Working Memory
Visual Auditory
Store Store

Eyes Perceptual Cognitive Motor

Ears Processor Processor Processor

Slide 22
How much of Cognitive processing?

• Manual Vs Calculator

https://www.youtube.com/watch?v=s6Omq
XCsYt8&t=258s

Slide 23
Working Memory

■ Holds intermediate products of thinking and

representations produced by perceptual system
■ Comprised of activated sections of LTM called
“chunks”
■ A chunk is a hierarchical symbol structure
■ 7 +/- 2 chunks active at any given time

Slide 24
Working Memory

■ Holds intermediate products of thinking and

representations produced by perceptual system
■ Comprised of activated sections of LTM called
“chunks”
■ A chunk is a hierarchical symbol structure
■ 7 +/- 2 chunks active at any given time

XOFVTMCBN

Slide 25
Working Memory

■ Holds intermediate products of thinking and

representations produced by perceptual system
■ Comprised of activated sections of LTM called
“chunks”
■ A chunk is a hierarchical symbol structure
■ 7 +/- 2 chunks active at any given time

Slide 26
Working Memory

■ Decay caused by:

■ Time: about 7s for three chunks, but high variance
■ Interference: more difficult to recall an item if there are other
similar items (activated chunks) in memory
■ Discrimination Principle
■ Difficulty of retrieval determined by candidates that exist in
memory relative to retrieval cues

Slide 27
Long-Term Memory

■ Holds mass of knowledge; facts, procedures, history

■ Consists of a network of related chunks where edge in the
network is an association (semantic network)
■ Fast read, slow write
■ Infinite storage capacity, but you may forget because:
■ Cannot find effective retrieval cues
■ Similar associations to other chunks interfere with retrieval
of the target chunk (discrimination principle)

Slide 28
 Memory Example
■ Suppose you are verbally given 10 arbitrary filenames to
remember. In which order should you write down the filenames to
maximize recall?
1. Quiz1.txt
2. Hw1.txt
3. In-semSols.pdf
4. In-semQP.pdf
5. Assignment2.txt
6. Quiz3.text
7. Lec2.ppt
8. UserCenteredDesign.ppt
9. NAAC.pdf
10. KLMAnalysis.ppt

Slide 29
■ What if you are given 4 sets of filenames, where each set
starts with the same characters?
1. Week1.ppt
2. Quiz1.pdf
3. Week2.ppt
4. Week3.ppt
5. HW1.txt
6. Quiz2.pdf
7. Week4.ppt
8. Quiz3.pdf
9. HW2.txt
10. Week4.ppt
11. Quiz4.pdf

Slide 30
Cognitive Processor

■ Based on recognize-act cycle

■ Recognize: activate associatively-linked chunks in LTM
■ Act: modify contents of WM
■ Cycle time = ~70ms

Slide 31
Cognitive System Principles

■ Uncertainty Principle
■ Decision time increases with the uncertainty about the
judgment to be made, requires more cognitive cycles

■ Variable Rate Principle:

■ Cycle time Tc is shorter when greater effort is induced by
increased task demands or information loads; it also
diminishes with practice.

Slide 32
Motor System

■ Translates thoughts into actions

■ Head-neck and arm-hand-finger actions

Long Term
Memory
Working
Visual Auditory
Store Store Memory

Eyes Perceptual Cognitive Motor

Ears Processor Processor Processor

Arms, hands, fingers

Slide 33
Motor Processor

■ Controls movements of body

■ Movement composed of discrete micro-movements
■ Micro-movement lasts about 70ms
■ Cycle time of motor processor about 70ms
■ Caches common behavioral acts such as typing and speaking
■ No mention of this cache in the model

Slide 34
What We Know So Far

Long Term
Memory
Working
Visual Auditory
Store Store Memory

Eyes Perceptual Cognitive Motor

Ears Processor Processor Processor

Cycle Times

Slide 35
What We Know So Far

Long Term
Memory
Working
Visual Auditory
Store Store Memory

Eyes Perceptual Cognitive Motor

Ears Processor Processor Processor

Cycle Times 100 ms

Slide 36
What We Know So Far

Long Term
Memory
Working
Visual Auditory
Store Store Memory

Eyes Perceptual Cognitive Motor

Ears Processor Processor Processor

Cycle Times 100 ms 70 ms

Slide 37
What We Know So Far

Long Term
Memory
Working
Visual Auditory
Store Store Memory

Eyes Perceptual Cognitive Motor

Ears Processor Processor Processor

Cycle Times 100 ms 70 ms 70 ms

Slide 38
Model Human Processor

Long Term
Memory
Working
Visual Auditory
Store Store Memory

Eyes Perceptual Cognitive Motor

Ears Processor Processor Processor

Cycle Times 100 ms 70 ms 70 ms

Perceive-Recognize-Act cycle ~= 240 ms

Slide 39
In General Case

■ Need a bridge from task structure to MHP

■ Enables top down as opposed to bottom up analysis
■ Analyze goal structure of the task, then for each step:
■ Analyze user actions required (motor system)
■ Analyze user perception of the output (perceptual system)
■ Analyze mental steps to move from perception to action
(cognitive system)
■ Sum the processing times from each step to get a
reasonably accurate prediction of task performance

Slide 40
HIPs are used to understand and model how user
interacts with an interface

Slide 41
Approaches to model cognition

Slide 42
Cognitive (User) models

Greater number of steps Complex Cognitive activities

Higher complexity Usability

Predict: how many cognitive steps required?

Slide 43
 Keystroke Level Model (KLM)
 Predictive model
 Time taken for avg user to
execute through
 Interface
 Interaction method
 Eg: close editor, save
file, open document etc., • How to use it?
• Focus on task
 How it works?
• Encode as sequence of steps
 Break down into simple steps • Calculate time
 Operators • Using operators for each step
• Sum all time values

The Psychology of Human-Computer Interaction, Card,

Moran and Newell, 1983

Slide 44
Physical Motor Operators

Slide 45
 Mental
operator
 Core thinking Response
process (M) operator
 Decision making
• Sys response time
• Key press output

Slide 46
Different styles of Keyboard typing

Slide 47
 How to use KLM

 Focus on task
 Replace a word
 Encode as sequence of
steps
 K, B, P, H, D (if any)
 Mental operator time
 (Operator times)
 Cognitive Task Analysis

Slide 48
Avg Motor Operator times

Slide 49
Mental Operator time

Slide 50
 Example

Suppose a user is writing some text using a text editor program. At some
instant, the user notices a single character error (i.e., a wrong character is
typed) in the text. In order to rectify it, the user moves the cursor to the location
of the character (using mouse), deletes the character and retypes the correct
character. Afterwards, the user returns to the original typing position (by
repositioning the cursor using mouse).
Calculate the time taken to perform this task (error rectification) following a
KLM analysis.

Slide 51
 Building KLM for the Task

• Step 1: user brings cursor to the error location

– To carry out step 1, user moves mouse to the location
and ‘clicks’ to place the cursor there

• Operator level task sequence

Description Operator
Move hand to mouse H
Point mouse to the location of the erroneous character P
Place cursor at the pointed location with mouse click BB

Slide 52
Building KLM for the Task

• Step 2: user deletes the erroneous character

– Switches to keyboard (from mouse) and presses a key
(say “Del” key)

• Operator level task sequence

Description Operator
Return to keyboard H
Press the “Del” key K

Slide 53
Building KLM for the Task

• Step 3: user types the correct character

– Presses the corresponding character key

• Operator level task sequence

Description Operator
Press the correct K
character key

Slide 54
 Building KLM for the Task

• Step 4: user returns to previous typing place

– Moves hand to mouse (from keyboard), brings the
mouse pointer to the previous point of typing and
places the cursor there with mouse click

• Operator level task sequence

Description Operator
Move hand to mouse H
Point mouse to the previous point of typing P
Place cursor at the pointed location with mouse click BB

Slide 55
 Example

Suppose a user is writing some text using a text editor program. At some
instant, the user notices a single character error (i.e., a wrong character is
typed) in the text. In order to rectify it, the user moves the cursor to the location
of the character (using mouse), deletes the character and retypes the correct
character. Afterwards, the user returns to the original typing position (by
repositioning the cursor using mouse).
Calculate the time taken to perform this task (error rectification) following a
KLM analysis.

Slide 56
Slide 57
 What Is missing ?

 What about M (mental operator) – where to place them in the

list?

Slide 58
 Something Missing!!

• What about M (mental operator) – where to

place them in the list?

• It is usually difficult to identify the correct

position of M
– However, we can use some guidelines and heuristics

Slide 59
 But what it is this M Operator?

 How was 1.35 arrived at?

 Modeling variety of methods
 tM = texecute – (rest)
 tM /Nchunks
 Number of Ms crucial in modeling

Slide 60
 M placement Heuristics

General Rule:
 Initial insertion of candidate Ms – Mouse-operated widgets (like
 Insert Ms in front of all keystrokes (K) buttons, check boxes, radio buttons,
and links) are considered
Insert Ms in front of all acts of
commands


pointing (P) that select commands

 Do not insert Ms before any P that – Text entry is considered as
points to an argument argument

Slide 61
Rule 0

Slide 62
 M Placement Heuristics

• Rule 1: deletion of anticipated Ms

– If an operator following an M is fully anticipated in
an operator immediately preceding that M, then
delete the M
– Example : if user clicks the mouse with the intention of
typing at the location, then delete the M as a consequence
of rule 0 – YOU already know that you are going to type

Slide 63
 M Placement Heuristics
• Rule 2: deletion of Ms within cognitive units
– If a string of MKs belongs to a cognitive unit then
delete all Ms except the first

– A cognitive unit refers to a chunk of cognitive

activities which is predetermined

– Example - if a user is typing “100”, MKMKMK

becomes MKKK (since the user decided to type 100 it
constitutes a single cognitive unit)

Slide 64
 Another Example: deleting a word

Using Mouse to select word Pressing Del key n times

 M  M
 P [start of word]
 BB [click]
 P [start of word]
 M  BB [click]
 P [end of word]  H
 K [shift]
 BB [click]
 M
 H [to keyboard]  K [Del]
 M  × n [where n = length of word]
 K [Del]
 Total: 3M + 2P + 4B + 1K = 6.93 sec
 Total: 2M+P+2B+H+nK
 = 4.36 + 0.28n sec

Slide 65
 GOMS MODEL

GOMS,
 a hierarchical cognitive (thought) process is assumed

KLM
 Elementary (cognitive) steps or operators required to carry out a complex interaction
task
 The listing of operators implies a linear and sequential cognitive behaviour

 Both assume error-free and ‘logical’ behavior

 A logical behavior implies that we think logically, rather than driven by emotions

Slide 66
GOMS: Models user’s behavior in terms of:

 Goals
 What the user wants to do.
 Operators
 Specific steps a user is able to take and assigned a specific execution time.

 the notion of operators is not restricted to those seven

 The modeler has the freedom to define any “elementary” cognitive operation

and use that as

operator
 Methods
 Well-learned sequences of subgoals and operators that can accomplish a goal.

 Selection Rules
 Guidelines for deciding between multiple methods.

Slide 67
 Analysis of the GOM S goal structure can yield m easures of
perform ance. The stacking depth of a goal structure can be used to
estim ate short-term m em ory requirem ents

Slide 68
 Execution of a Mental Step

 GOMS allows explicit representation of

mental steps of a task (the “Cognitive
Processor”):

Retrieval of goal Select a method to

achieve the goal

Retrieval of motor
movements necessary
to execute the command Execution of each of the
chosen commands

Slide 69
 How to do GOMS analysis

 Generate task description

 Pick high-level user Goal
 Write Methods for reaching Goal - may invoke subgoals
 Write Methods for subgoals
 This is recursive
 Stops when Operators are reached
 Evaluate description of task
 Apply results to UI
 Iterate!

Slide 70
 General Example

•Goal: delete text (n chars long)

•Select:
• method 1 if n > 10
 Goal: Edit text • method 2 if n < 10
 Operators •Method 1: Goal: highlight text &
 Use arrow keys delete
 Use mouse • Goal: highlight text
 Use other keys • Point
 Method: Delete text (sub-goal) • Click
 Positioning: 1) arrow key 2) mouse • Point
 Marking: 1) double click 2) use mouse
• Shift
 Delete (and add text): 1) start writing 2)
• Click
press delete, then write new text
•Method 2: Goal: delete n char
 Selection rules: if close, use arrow key etc.

Slide 71
Description Duration (sec)
GOAL: MOVE-TEXT
…….GOAL: CUT-TEXT
……………GOAL: HIGHLIGHT-TEXT
………………..MOVE-CURSOR-TO-BEGINNING 1.10
………………..CLICK-MOUSE-BUTTON 0.20
………………..MOVE-CURSOR-TO-END 1.10
………………..SHIFT-CLICK-MOUSE-BUTTON 0.48
………………..VERIFY-HIGHLIGHT 1.35
……….........GOAL: ISSUE-CUT-COMMAND
…………………MOVE-CURSOR-TO-EDIT-MENU
…………………PRESS-MOUSE-BUTTON 0.10
…………………MOVE-MOUSE-TO-CUT-ITEM 1.10
…………………VERIFY-HIGHLIGHT 1.35
…………………RELEASE-MOUSE-BUTTON 0.10
………GOAL: PASTE-TEXT
…………….GOAL: POSITION-CURSOR-AT-INSERTION-POINT
…………………MOVE-CURSOR-TO-INSERTION-POINT 1.10
…………………CLICK-MOUSE-BUTTON 0.20
…………………VERIFY-POSITION 1.35
…………….GOAL: ISSUE-PASTE-COMMAND
…………………MOVE-CURSOR-TO-EDIT-MENU
…………………PRESS-MOUSE-BUTTON 0.10
…………………MOVE-MOUSE-TO-PASTE-ITEM
…………………VERIFY-HIGHLIGHT 1.35
…………………RELEASE-MOUSE-BUTTON 0.10
TOTAL PREDICTED TIME 14.38

Slide 72
 Example

• Suppose we want to find out the definition of a

word from an online dictionary. How can we
model this task with (CMN)GOMS?

Slide 73
 Example

• We shall list the goals (high level tasks) first

– Goal: Access online dictionary (first, we need to
access the dictionary)

– Goal: Lookup definition (then, we have to find out the

definition)

Slide 74
 Example

• Next, we have to determine the methods

(operator or goal-operator sequence) to achieve
each of these goals
– Goal: Access online dictionary
• Operator: Type URL sequence
• Operator: Press Enter

Slide 75
 Example

• Next, we have to determine the methods

(operator or goal-operator sequence) to achieve
each of these goals
– Goal: Lookup definition
• Operator: Type word in entry field
• Goal: Submit the word
– Operator: Move cursor from field to Lookup button
– Operator: Select Lookup
• Operator: Read output

Slide 76
 Example

• Thus, the complete model for the task is

– Goal: Access online dictionary
• Operator: Type URL sequence
• Operator: Press Enter
– Goal: Lookup definition
• Operator: Type word in entry field
• Goal: Submit the word
– Operator: Move cursor from field to Lookup button
– Operator: Select Lookup button
• Operator: Read output

Slide 77
 Example

• Notice the hierarchical nature of the model

• Note the use of operators

– The operator “type URL sequence” is a high-level
operator defined by the modeler

– “Press Enter” is a keystroke level operator

– Note how both the low-level and high-level operators

co-exist in the same model

Slide 78
 Example

• Note the use of methods

– For the first goal, the method consisted of two
operators

– For the second goal, the method consisted of two

operators and a sub-goal (which has a two-operators
method for itself)

Slide 79
 GOMS – Advantages

■ Enables quantitative comparison of task performance

before implementation
■ Empirical data shows model provides a good approximation of
actual performance

■ Could be embedded in sketch simulation tool

■ Designer provides GOMS model and interface sketch, tool returns
performance prediction

Slide 80
 GOMS – Disadvantages

■ Predicting movement time based on the level of micro-movements

not plausible
■ Need a higher-level method for predicting movement time
■ Fitt’s Law

Slide 81
 Use Model to Compute Reaction
Time for Simple Matching Task
■ A user sits before a computer terminal. A window appears
containing a grey box in the centre. This is the initial stimulus.
After a delay, the box turns red whereupon the user presses a key
as quickly as possible. Any key may be pressed. What is the time
between stimulus and response? Tp + Tc + Tm = 240 ms

Slide 82
 Use Model to Compute Reaction
Time for a Symbol Matching Task
■ Two symbols appear on the computer terminal. If the second
symbol matches the first, the user presses “Y” and presses “N”
otherwise. What is the time between the second signal and
response?

Slide 83
 Use Model to Compute Reaction
Time for a Symbol Matching Task
■ Two symbols appear on the computer terminal. If the second
symbol matches the first, the user presses “Y” and presses “N”
otherwise. What is the time between the second signal and
response?

Tp + 2Tc (compare + decide) + Tm = 310 ms

Slide 84
 In General Case

■ Need a bridge from task structure to MHP

■ Enables top down as opposed to bottom up analysis
■ Analyze goal structure of the task, then for each step:
■ Analyze user actions required (motor system)
■ Analyze user perception of the output (perceptual system)
■ Analyze mental steps to move from perception to action
(cognitive system)
■ Sum the processing times from each step to get a
reasonably accurate prediction of task performance

Slide 85
 Objective

• A second type of cognitive models used in HCI

is the individual models of human factors

• To recap, these are models of human factors

such as motor movement, choice-reaction, eye
movement etc.
– The models provide analytical expressions to
compute values associated with the corresponding
factors, such as movement time, movement effort etc.

Slide 86
 Objective

– The Fitts’ law: a law governing the manual (motor)

movement

– The Hick-Hyman law: a law governing the decision

making process in the presence of choice

Slide 87
 Fitts’ Law

It is one of the earliest predictive models

•
used in HCI (and among the most well-
known models in HCI also)
First proposed by PM Fitts (hence the name)
•
in 1954

Fitts, P. M. (1954). The information capacity of

the human motor system in controlling the
amplitude of movement. Journal of Experimental
Psychology, 47, 381-391.

Slide 88
 Fitts’ Law

• Fitts’ law is a model of human motor

performance
– It mainly models the way we move our hand and
fingers

• Fitts aimed to find the bandwidth of human

movement — how many repetitive movements
could be performed in a given time interval

Slide 89
Fitts’ Law - Characteristics

• The law models human motor performance

having the following characteristics
– The movement is related to some “target acquisition
task” (i.e., the human wants to acquire some target
at some distance from the current hand/finger
position)

Slide 90
Fitts’ Law - Characteristics

• The law models human motor performance

having the following characteristics
– The movement is rapid and aimed (i.e., no decision
making is involved during movement)

Slide 91
 What does Fitts’s law give?

the relationship between the time it takes a pointer (such as a

mouse cursor, a human finger, or a hand) to move to a
particular target (e.g., physical or digital button, a physical
object) in order to interact with it in some way (e.g., by clicking or
tapping it, grasping it, etc.):

D is distance to TARGET
w is width of TARGET

https://www.nngroup.com/articles/fitts-
law/#:~:text=Fitts's%20law%20says%20that%20the,user's%20most
%20probable%20prior%20location
Slide 92
 Measuring Task Difficulty

ID = log2(D/W+1) [unit is bits]

Logarithm : as distance increases, does not

mean time increases linearly. It increases,
slowly.
As target is longer, movement fast but slows
down as we approach the target
1.The larger the distance to the target, the longer it will take
for the pointer to move to it. In other words, closer targets are
faster to acquire.
2.The bigger the target, the shorter the movement time to
it. In other words, bigger targets are better.
Slide 93
Slide 94
Uses of Fitts’ law in UI design

Slide 95
Fitts law uses

• Edge of the screen space

• controls at the edges of the screen,
they should be active all the way to the
edge to take advantage of this effect

• Pop menus relative to position

• Nearest pixel pop up opens

• Menu item size

• Icon size
• Scroll bar target size and placement
• Up / down scroll arrows together or at
top and bottom of scroll bar

Slide 96
Slide 97
 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.

Slide 98
• The label becomes part of the target. The target
is therefore bigger. Bigger targets, all else being
equal, can always be acccessed faster.

• When labels are not used, the tool icons crowd

together.

Slide 99
What is the bottleneck in hierarchical menus and
what techniques could make that bottleneck less of
a problem?

Slide 100
 The bottleneck is the
passage between the
first-level menu and
the second-level menu

• Fitts' law is not just about

target size and distance;
it's also about the
number of targets.
• The more targets, all else
being equal, the longer
the task will take.
• Hierarchicals
automatically add one
extra target.
• Making it difficult to
enter a second-level
menu adds an additional
target, the second-level
menu itself.

Slide 101
Name at least one advantage circular
popup menus have over standard, linear
popup menus.

Slide 102
• With the options displayed around you in a circle,
you need to only move a pixel or two to enter the
"slice of pie" you want. Less travel, good target
size. Good design.
• Feeding directional information into your motor
memory. As long as the options are few enough,
Learnability and Memorability EASY
Slide 103
 Nature of the Fitts’ Law

• Another important thing about the Fitts’ law is

that, it is both a descriptive and a predictive
model
• Why it is a descriptive model?
– Because it provides “throughput”, which is a
descriptive measure of human motor performance

Slide 104
 Nature of the Fitts’ Law

• Another important thing about the Fitts’ law is

that, it is both a descriptive and a predictive
model
• Why it is a predictive model?
– Because it provides a prediction equation (an
analytical expression) for the time to acquire a
target, given the distance and size of the target

Slide 105
Fitts’s law says that the time to move to a target depends on
how big it is and on how far away it is. As you are creating
new UI designs, think about optimizing both these
variables by creating well-spaced, big targets and
positioning them so that they are close to the user’s most
probable prior location.

Slide 106