1. May 18, 2010 IAT 334 1
IAT 334
Interface Design
Chris Shaw
______________________________________________________________________________________
SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA
3. May 18, 2010 IAT 334 3
Why We Are Here
Look at human factors that affect
software design and development
Central Topic: User interface design
4. May 18, 2010 IAT 334 4
HCI
What happens when a human and a computer
get together to perform a task
– Task
• Write a document
• Plan a budget
• Design a presentation
• Play a video game
– Not a task..
• Goof off (obviously)
5. May 18, 2010 IAT 334 5
Why is this important?
Computers (in one way or another) affect
every person in society
– Increasing % use computers in work, at
home in the road…
Product success depends on ease of use
6. May 18, 2010 IAT 334 6
Course Aims
Consciousness raising for you
– Eg. Don Norman
• “The Design of Everyday Things”
– Doors
• Handles afford various opening method
Design critic
7. May 18, 2010 IAT 334 7
Goals of HCI
(Shneiderman & Plaisant Chap1)
Allow users to carry out tasks
– Safely
– Effectively
– Efficiently
– Enjoyably
8. May 18, 2010 IAT 334
Goals of System Engineering
Functionality
• Tasks and sub-tasks to be carried out
Reliability
• Maintaining trust in the system
Standardization, integration, consistency and
portability
Schedules and budgets
• Adhering to timelines and expense
• Human factors principles and testing reduces costs
9. May 18, 2010 IAT 334 9
Usability
Five Measurable Goals of UI Design
Combination of
– Ease of learning
– High speed of user task performance
– Low user error rate
– Subjective user satisfaction
– User retention over time
10. May 18, 2010 IAT 334
Life-critical systems: air traffic control, emergency, power utilities
etc.
• high reliability, error-free performance, lengthy training for
systems, subjective satisfaction less of an issue
Industrial and commercial uses: banking, inventory management,
airline and hotel reservations, etc.
• low costs is critical over reliability, ease of learning, errors
calculated against costs, subjective satisfaction of modest
importance
Interests in Human Factors
in Design
11. Sept14, 2009 IAT 334
Office, home, entertainment: productivity and entertainment
applications
• ease of learning, low error rates, subjective satisfaction are
paramount since use is discretionary and competition is fierce.
Range of types of users from novice to expert.
Exploratory, creative, and cooperative: web-based, decision-
making, design-support, collaborative work, etc.
• users knowledgeable in domain but vary in computer skills, direct-
manipulation using familiar routines and gestures work best,
difficult systems to design and evaluate.
Interests in Human Factors
in Design
12. May 18, 2010 IAT 334
Accommodating
Human Diversity
Physical
Abilities and
Workplaces
Cognitive
and Perceptual
Abilities
Personality
Differences
Cultural
and International
Diversity
Users with
Disabilities
Elderly
Users
13. May 18, 2010 IAT 334 13
Key Historical Event
Design of the first Mac 1983-1984
“The computer for the rest of us”
14. May 18, 2010 IAT 334 14
Improving Interfaces
Know the User!
– Physical abilities
– Cognitive abilities
– Personality differences
– Skill differences
– Cultural diversity
– Motivation
– Special needs
15. May 18, 2010 IAT 334 15
Two Crucial Errors
Assume all users are alike
Assume all users are like the designer
16. Another Crucial Error
Have the user design it!
Users bring vital knowledge to design:
– They know a lot about the problem
– They know a lot about the current tools
– They typically know very little about design
May 18, 2010 IAT 334 16
18. May 18, 2010 IAT 334 18
Evaluation
Things we can measure
– Time to learn
– Speed of performance
– Rate of errors by user
– Retention over time
– Subjective satisfaction
19. May 18, 2010 IAT 334 19
Interfaces in the World
VCR
Mouse
Phone
Copier
Car
Airline reservation
Air traffic control
20. May 18, 2010 IAT 334 20
History of HCI
______________________________________________________________________________________
SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA
21. May 18, 2010 IAT 334 21
Ivan Sutherland
SketchPad - ‘63 PhD thesis at MIT
– Hierarchy - pictures & subpictures
– Master picture with instances
– Constraints
– Icons
– Copying
– Light pen as input device
– Recursive operations
23. May 18, 2010 IAT 334
The Mouse
source: resonancepub.com & brittanica.com
Doug Engelbart’s mouse - 1963-64
24. May 18, 2010 IAT 334 24
Alan Kay
Dynabook - Notebook sized computer
loaded with multimedia and can store
everything
Personal Computing
Desktop Interface
25. May 18, 2010 IAT 334 25
PCs with GUIs
Xerox PARC - mid 1970’s
– Alto
– Local processor, Bitmap display, Mouse
– Precursor to modern GUI
– LAN - Ethernet
26. May 18, 2010 IAT 334
Menus
source: folklore.org
Bill Atkinson’s Polaroids of the first pull-down menu prototype - circa 1979
27. May 18, 2010 IAT 334 27
Xerox Star - ‘81
First commercial PC designed for
“business professionals”
– Desktop metaphor, pointing, WYSIWYG
First system based on usability
engineering
30. May 18, 2010 IAT 334 30
Human Capabilities
Want to improve user performance
Know the user!
– Senses
– Information processing systems
31. May 18, 2010 IAT 334 31
Senses
Sight, hearing, touch important for
current HCI
– smell, taste ???
32. May 18, 2010 IAT 334 32
Sight
Visual System workings
Color - color blindness: 8% males,
1% females
Much done by context & grouping
(words, optical illusions, …)
33. May 18, 2010 IAT 334 33
Hearing
Often taken for granted how good it is
– Pitch - frequency
– Loudness - amplitude
– Timbre - type of sound (instrument)
Sensitive to range 20Hz - 22000Hz
Limited spatially, good temporal
performance
34. May 18, 2010 IAT 334 34
Touch
Three main sensations handled by
different types of receptors:
– Pressure (normal)
– Intense pressure (heat/pain)
– Temperature (hot/cold)
Where important?
35. May 18, 2010 IAT 334 35
Models of Human Performance
Predictive
Quantitative
– Time to perform
– Time to learn
– Number and type of errors
– Time to recover from errors
Approximations
36. May 18, 2010 IAT 334 36
Basic HCI
Model Human Processor
– A simple model of human cognition
– Card, Moran, Newell 1983
Components:
– Senses
– Sensory store
– Short-term memory
– Long-term memory
– Cognition
37. May 18, 2010 IAT 334 37
Information Processing
Usually serial action
– Respond to buzzer by pressing button
Usually parallel recognition
• Driving, reading signs, listening to radio
38. May 18, 2010 IAT 334 38
Model Human Processor
Basics
Parameters
– Processors cycle time of 50-200ms
– Memories have type, capacity, decay time
Types
– Visual
– Auditory
– Tactile
– Taste, smell, proprioception, etc
40. May 18, 2010 IAT 334 40
Perceptual Processor
Continually “grabs data” from the sensory
system
Cycle time: 100ms [50 - 200] ms
Passes data to Image Store in
unrecognized form
– “Array of Pixels” (or whatever it is) from eyes
– “Sound Intensities” from ears
41. May 18, 2010 IAT 334 41
Sensory Store
The “input buffer” of the senses
Stores most recent input unrecognized
Storage time and capacity varies by type
– Visual: NominalRange
• Capacity: 17letters of text [7 - 17] letters
• Decay Time: 200ms [70 - 1000] ms
– Audio:
• Capacity: 5 letters of text [4.4-6.6] letters
• Decay Time: 1500 ms [900 - 3500] ms
42. May 18, 2010 IAT 334 42
Memory
Three “types”
– Short-term memory
Conscious thought, calculations
– Intermediate
Storing intermediate results, future plans
– Long-term
Permanent, remember everything ever
happened to us
43. May 18, 2010 IAT 334 43
Memory: Sort Term
Short Term (Working) Memory (WM)
– Gets basic recognition from Sensory Store
• “Stop sign” vs. “red octagon w/white marks”
– 7 +/- 2 “chunks”
• 4048946328 vs. 404-894-6328
– WM: NominalRange
• Capacity: 7 chunks [5 - 9] chunks
• Decay Time: 7 seconds [5 - 226] seconds
• Access Time: 70ms [25 - 170] ms
44. May 18, 2010 IAT 334 44
Memory: Long Term
Long Term Memory (LTM)
– “Unlimited” size
– Slower access time (100ms)
– Little decay
– Episodic & Semantic
Why learn about memory?
– Know what’s behind many HCI techniques
– Predict what users will understand
45. May 18, 2010 IAT 334 45
LT Memory Structure
Episodic memory
– Events & experiences in serial form
Semantic memory
– Structured record of facts, concepts & skills
46. May 18, 2010 IAT 334 46
Read the colors of the words
Black Red
Orange Yellow
Blue
47. May 18, 2010 IAT 334 47
MHP Operation
Recognize-Act Cycle
– On each cycle, contents in WM initiate actions
associatively linked to them in LTM
– Actions modify contents of WM
Discrimination Principle
– Retrieval is determined by candidates that
exist in memory relative to retrieval cues
– Interference by strongly activated chunks
48. May 18, 2010 IAT 334 48
Perception
Stimuli that occur within one PP cycle fuse into a
single concept
– movies (frame rate)
• Frame rate > 1 / Tp = 1/(100 msec/frame) = 10 f/sec
– morse code listening rate
Perceptual causality
– two distinct stimuli can fuse if the first event appears
to cause the other
– events must occur in the same cycle
49. May 18, 2010 IAT 334 49
Operation
Variable Cognitive Processor Rate
– Cognitive Processor cycle time Tc is shorter
with greater effort
– Induced by increased task
demands/information
– Decreases with practice
50. May 18, 2010 IAT 334 50
Operation: Target finding
Task: Move hand to target area
Fitts Law
– A series of microcorrections
• Correction takes Tp + Tc + Tm
– Time Tpos to move hand to target width W
which is distance D:
• Tpos = a + b log2 (d/w + 1.0)
– Movement time depends on relative precision
51. Jan 13, 2011 IAT 334 51
IAT 334
Interface Design
Task Analysis
______________________________________________________________________________________
SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA
52. Jan 13, 2011 IAT 334 52
Task Conformance
Task coverage
– Can system do all tasks of interest?
Task adequacy
– Can user do tasks?
– Does system match real-world tasks?
53. Jan 13, 2011 IAT 334 53
Task Analysis
Analyzing how people do their jobs
– Go to their environment
– Learn about, analyze and describe their tasks
Examine users’ tasks to better understand
what they need from interface and how
they will use it
54. Task Analysis
Gather data about what users need to do
or accomplish
…then…
Represent data for interpretation and use
in design decisions
Jan 13, 2011 IAT 334 54
55. Information to be Gathered
Information about users
Description of environment
– where the tasks will be performed
Major goals of the job
– what will result in a successful end state?
User preferences & needs
– before they even start: coffee, pen,
notebook, log sheets…
Jan 13, 2011 IAT 334 55
56. Jan 13, 2011 IAT 334 56
Task Analysis
Broad Focus
Observe users of current system(s)
Generate requirements
– Hierarchical task analysis
– Knowledge-based task analysis
– Entity-Relationship model
57. Data Gathering Techniques
1. Observation
2. Interviews & Contextual Inquiry
3. Ethnography
also…
4. Surveys & Questionnaires
5. Focus Groups & Expert Debriefing
6. Competitive Product Review
7. Documentation mining
8. Data logging
Jan 13, 2011 IAT 334 57
58. Information to be Gathered
Tasks & Subtasks:
– Physical
– Cognitive
– Communication
Conditions under which these tasks are done
Results/outcomes of tasks
Requirements to perform task:
– Information
– Communication with others
– Equipment
Jan 13, 2011 IAT 334 58
59. 1. Observation
Watch users do what they do
– Typically from a distance
Record with videotape
– May require coding video later
Take lots of notes, sketches
Focus on specific task-relevant behaviors
in notes, but later convert to abstract
subtasks
Jan 13, 2011 IAT 334 59
60. 2. Interviews
Engage the user more than just watching
Structured interviews
– Efficient, but requires training
Unstructured
– Inefficient, but requires no training
Semi-structured
– Good balance
– Often appropriate
Jan 13, 2011 IAT 334 60
61. 3. Ethnography
Deeply contextual inquiry
– “Wallow in the data”
“Live among” the users
Understanding the full complexity of
behavior, in its complete social context
Note: Techniques based in sociology and
anthropology--the study of humans
Jan 13, 2011 IAT 334 61
62. 4. Surveys & Questionnaires
Subjective answers in a quantitative format
– What does this mean?
Questions:
– Exploratory vs. confirmatory
– Open-ended vs. categorical (exhaustive)
– NB: If you ask it, use it. If you won’t/can’t use it,
don’t ask it.
Jan 13, 2011 IAT 334 62
63. 5. Focus Groups
Structured Interview with groups of individuals
– 3 to 10 persons
– Use several different groups with different roles or
perspectives
– Manage the interaction
• Avoid few people dominating the discussion
Focus on preferences and views, not
performance
Relatively low cost, quick way to learn a lot
Audio or video record, with permission
Jan 13, 2011 IAT 334 63
64. 6. Competitive Products
Looking for both good and bad ideas
– Functionality
– UI style
Why are they successful or unsuccessful?
What does successful really mean?
– (Note: Successful does not equal usable)
Jan 13, 2011 IAT 334 64
65. 7. Document Mining
Documentation
– Often contains description of how the tasks
should be done
– Standards docs
– Manuals
– Histories
– Best Practices
Jan 13, 2011 IAT 334 65
67. Now that you have observed…
You have piles of notes, hours of video,
surveys up to here…
How can you digest and represent the
data, to turn it into information?
Jan 13, 2011 IAT 334 67
69. 1. Task Outline
Using a lawnmower to cut grass
Step 1. Examine lawn
a. Make sure grass is dry
b. Look for objects laying in the grass
Step 2. Inspect lawnmower
a. Check components for tightness
1) Check that grass bag handle is securely fastened to the grass bag support
2) Make sure grass bag connector is securely fastened to bag adaptor
3) Make sure that deck cover is in place
4) Check for any loose parts (such as oil caps)
5) Check to make sure blade is attached securely
b. Check engine oil level
1) Remove oil fill cap and dipstick
2) Wipe dipstick
3) Replace dipstick completely in lawnmower
4) Remove dipstick
5) Check that oil is past the level line on dipstick
Jan 13, 2011 IAT 334 69
70. 2. Narratives
Describe tasks in sentences
Often expanded version of task outline
More effective for communicating general
idea of task
Not effective for details
Not effective for branching tasks
Not effective for parallel tasks
Jan 13, 2011 IAT 334 70
71. 3. Hierarchies & Networks
Hierarchical Task Analysis (HTA)
– Graphical notation & decomposition of tasks
– Tasks as sets of actions
– Tasks organized into plans (describes sequence)
Network / Entity-Relationship Diagrams
– Objects/people with links to related objects
– Links described functionally and in terms of strength
Jan 13, 2011 IAT 334 71
72. 4. Flow Charts
Flow Chart of Task Steps
– Combines Entity-relationship (network) with
sequential flow, branching, parallel tasks.
– Includes actions, decisions, logic, by all
elements of the system
– Abstracted
– Mature, well-known, good tools
Jan 13, 2011 IAT 334 72
73. Jan 13, 2011 IAT 334 73
5. Knowledge-based
Analysis
List all objects and actions involved in a
task, then build a taxonomy of them
Often times, work with domain expert to
get help
76. Jan 20, 2011 IAT 334 76
UI Design Principles
Categories
– Learnability
• support for learning for users of all levels
– Flexibility
• support for multiple ways of doing tasks
– Robustness
• support for recovery
Always think about exceptions, suitability
78. Jan 20, 2011 IAT 334 78
Predictability
I think that this action will do…
Operation visibility - can see avail actions
– e.g. menus vs. command shell
– grayed menu items
79. Jan 20, 2011 IAT 334 79
Synthesizability
From the resulting system state, My
previous action did…
– compare in command prompt vs UI
– same feedback needed for all users, all apps?
80. Jan 20, 2011 IAT 334 80
Familiarity
Does UI task relate real-world task or
domain knowledge?
– to anything user is familiar with?
– Use of metaphors
• pitfalls
– Are there limitations on familiarity?
81. Jan 20, 2011 IAT 334 81
Generalizability
Does knowledge of one UI apply to
others?
– Cut and paste in many apps
Does knowledge of one aspect of a UI
apply to rest of the UI?
– File browsers in MacOS/ Windows
Aid: UI Developers guidelines
82. Jan 20, 2011 IAT 334 82
Consistency
Similar ways of doing tasks
– interacting
– output
– screen layout
Is this always desirable for all systems, all
users?
84. Jan 20, 2011 IAT 334 84
Dialog Initiative
System pre-emptive
– system does all prompts, user responds
• sometimes necessary
• Eg. Bank machine
User pre-emptive
– user initiates actions
• more flexible
85. Jan 20, 2011 IAT 334 85
Multithreading
Two types
– Concurrent
• input to multiple tasks simultaneously
– Interleaved
• many tasks, but input to one task at a time
86. Jan 20, 2011 IAT 334 86
Task migratability
Ability to move performance of task to
entity (machine or person) that can do it
better
– Eg. Autopilot
– Spellchecking
– When is this good? Bad?
87. Jan 20, 2011 IAT 334 87
Substitutivity
Flexibility in details of operations
– Allow user to choose suitable interaction
methods
– Allow different ways to
• perform actions
• specify data
• configure
– Allow different ways of presenting output
• to suit task, user
88. Jan 20, 2011 IAT 334 88
Customizability
Ability to modify interface
– By user - adaptability
– By system - adaptivity
90. Jan 20, 2011 IAT 334 90
Observability
Can user determine internal state of
system from observable state?
– Browsability
• explore current state (without changing it)
– Reachability
• navigate through observable states
– Persistence
• how long does observable state persist?
91. Jan 20, 2011 IAT 334 91
Recoverability
Ability to continue to a goal after
recognizing error
• Difficulty of Recovery procedure should relate to
difficulty of original task
– Forward Recoverability
• ability to fix when we can’t undo?
– Backward Recoverability
• undo previous error(s)
92. Jan 20, 2011 IAT 334 92
Responsiveness
Rate of communication between user and
system
– Response time
• time for system to respond in some way to user
action(s)
– Stability principle
• response time, rate should be consistent
– As computers have gotten better, required
computer response has gotten shorter
93. Jan 20, 2011 IAT 334 93
Task Conformance
Task coverage
– can system do all tasks of interest?
Task adequacy
– Can user do tasks?
– Does system match real-world tasks?
94. Feb 3, 2011 IAT 334 94
IAT 334
Interface Design
User Centered Design
Metaphor
Models
Practice
______________________________________________________________________________________
SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA
95. Feb 3, 2011 IAT 334 95
Agenda
User Centered Design -- Overall Process
Design
– Metaphors
– Mental Models
– Idea generation
Design principles
Displaying your designs
– Storyboards
– Lo-Fi
– Wizard of Oz
– Visual Basic, Flash, etc
96. Feb 3, 2011 IAT 334 96
User-Centered Design
User-centered design process
– Analysis of user needs
– Prototype
– Informal feedback
– Iterate on design
– Final application
– Formal feedback
97. Feb 3, 2011 IAT 334 97
Analysis of User Needs
Techniques:
– Surveys
– Card-sorting tasks
– Interviews
– Focus groups
• Look at competing products
– Ethnography
• Participant observation
98. Feb 3, 2011 IAT 334 98
Prototyping
Storyboards
Paper simulations of application
Wizard of Oz experiment
Prototyping tools
Cheap!
99. Feb 3, 2011 IAT 334 99
Informal Feedback
Present prototype to users
Do a quick questionnaire
Observe the user struggle with your lousy
design
100. Feb 3, 2011 IAT 334 100
Iterate on Design
Redesign system
– in light of initial user impressions
– pay attention to common complaints
Be prepared to abandon bad ideas!!
It’s just an idea, not a measure of your
worth!
101. Feb 3, 2011 IAT 334 101
Idea Creation
Ideas come from
– Imagination
– Analogy
– Observation of current
practice
– Observation of current
systems
Borrow from other
fields
– Animation
– Theatre
– Information displays
– Architecture
– ...
How do we create and develop new interface
ideas and designs?
102. Feb 3, 2011 IAT 334 102
Interface Metaphors
Metaphor - Application of name or
descriptive term to another object which
is not literally applicable
– Use: Natural transfer - apply existing
knowledge to new, abstract tasks
– Problem: May introduce incorrect mental
model
103. Feb 3, 2011 IAT 334 103
Mental Models
What models of the world are the users
using?
Two Classes:
Functional model
– “Press the accelerator once, then turn the
key”
Structural model
– OK, why do we do that?
104. Feb 3, 2011 IAT 334 104
Another example...
Functional model
– “Go north on King George, Cross the Pattullo, Turn
left at 10th Ave, Turn right at Kingsway, go 4.5km”
Structural model
– What location??
105. Feb 3, 2011 IAT 334 105
Idea Creation
Methods for creating and developing
interface ideas
– Turn off your natural critique mechanism!
– ?
106. Feb 3, 2011 IAT 334 106
Idea Creation Methods
1. Consider new use for object
2. Adapt object to be like something else
3. Modify object for a new purpose
107. Feb 3, 2011 IAT 334 107
Idea Creation Methods
4. Magnify - add to object
5. Minimize - subtract from object
6. Substitute something similar
108. Feb 3, 2011 IAT 334 108
Idea Creation Methods
7. Rearrange aspects of object
8. Change the point of view
9. Combine data into an ensemble
109. Feb 3, 2011 IAT 334 109
Guidelines for Design
1. Provide a good conceptual model
– User has mental model of how things work
– Build design that allows user to predict
effects of actions
2. Make things visible
– Visible affordances, mappings, constraints
– Remind person of what can be done and how
to do it
110. Feb 3, 2011 IAT 334 110
Design Principles
1. Use simple and natural dialog in user’s
language
– Match user’s task in a natural way
– Avoid jargon, techno-speak
– Present exactly info that user needs
• Less is more!
111. Feb 3, 2011 IAT 334 111
Design Principles
Here are 10 more detailed principles to
follow about what to design and why
112. Feb 3, 2011 IAT 334 112
Design Principles
2. Strive for consistency
– Sequences, actions, commands, layout,
terminology
– Makes more predictable
– Dialog boxes all having same “closure”
options
113. Feb 3, 2011 IAT 334 113
Design Principles
3. Provide informative feedback
– Continuously inform user about what is
occurring
– Most important on frequent, substantive
actions
• % in file
– How to deal with delays?
• Special cursors
• % Done graphs
114. Feb 3, 2011 IAT 334 114
Design Principles
4. Minimize user’s memory load
– Recognition is better than recall
• Make visible!
– Describe required input format, include
example and default
• Date: _ _ - _ _ - _ _ (DD-MM-YY)
– Use small # of generally applicable cmds
116. Feb 3, 2011 IAT 334 116
Design Principles
6. Provide clearly marked exits
– Don’t want the user to feel trapped
– Examples
• Cancel button on dialogs
• Quit any time
• Interrupt/resume on lengthy operations
117. Feb 3, 2011 IAT 334 117
Design Principles
7. Provide shortcuts
– Enable frequent users to perform often-used
operations quickly
• Keyboard & mouse
– Abbreviations
– Menu shortcuts
– Function keys
– Command completion
– Double click vs. menu selection
• Navigation between windows/forms
• Reuse
– Provide a history system
118. Feb 3, 2011 IAT 334 118
Design Principles
8. Support internal locus of control
– Put user in charge, not computer
– Can be major source of anxiety
119. Feb 3, 2011 IAT 334 119
Design Principles
9. Handle errors smoothly and positively
– “That Filename already exists”
vs.
– “Rename failed”
10. Provide useful help and
documentation
123. Feb 10, 2011 IAT 334 123
CL Attributes
Work primarily by recall, not recognition
Heavy memory load
Little or nothing is visible
so…
Poor choice for novices
but...
124. Feb 10, 2011 IAT 334 124
CL Attributes
Specify commands to operate on current
data collection
User only controls initiation
Single thread of control
Some other display area needed
125. Feb 10, 2011 IAT 334 125
CL Design Goals
Consistency
– Syntax, order
Good naming and abbreviations
Doing your homework in design can help
alleviate some of the negatives
126. Feb 10, 2011 IAT 334 126
Consistency
Provide a consistent syntax
– In general: Have options and arguments
expressed the same way everywhere
– UNIX fails here because commands were
developed by lots of different people at
different organizations
• No guidelines provided
127. Feb 10, 2011 IAT 334 127
Dialog Order
English: SVO subject verb object
CL: S assumed (you)
Is VO or OV better? % rm file
% file rm
V dO iO vs. V iO dO
% print file thePrinter
% lpr -PthePrinter file
128. Dialog Order
Technical issues dictate the choice:
V iO dO
% lpr -PthePrinter file
The command must parse the arguments
– So the command comes first
Flags control how to act on the file
– Want to parse all flags before checking files
– e.g. -o outputFile
Feb 10, 2011 IAT 334 128
129. Feb 10, 2011 IAT 334 129
Syntax
Pick a consistent syntax strategy
– Simple command list
• eg., vi minimize keystrokes
– Commands plus arguments
• realistic, can provide keyword parameters
• % cp from=foo to=bar
– Commands plus options plus arguments
• what you usually see
130. Feb 10, 2011 IAT 334 130
Terminology
Keep terminology consistent
– Same concept expressed with same options
– Useful to provide symmetric (congruent)
pairings
• forward/backward
• next/prev
• control/meta
131. Feb 10, 2011 IAT 334 131
WIMP
Focus: Menus, Buttons, Forms
Predominant interface paradigm now
(with some direct manipulation added)
Advantages:
– ?
132. Recognition
Recognition is easier than recall!
– Recall has one cue
– Recognition has the recall cue + the presence
of the prompting word/icon
Feb 10, 2011 IAT 334 132
133. Feb 10, 2011 IAT 334 133
Menus
Key advantages:
– 1 keystroke or mouse operation vs. many
– No memorization of commands
– Limited input set
134. Feb 10, 2011 IAT 334 134
Menus
Many different types
– pop-up
– pull-down
– radio buttons
– pie buttons
– hierarchies
135. Feb 10, 2011 IAT 334 135
Menu Items
Organization strategies
– Create groups of logically similar items
– Cover all possibilities
– Ensure that items are non-overlapping
– Keep wording concise, understandable
136. Feb 10, 2011 IAT 334 136
Presentation Sequence
Use natural if available
– Time
• e.g. Breakfast, Lunch, Dinner
– Numeric ordering
• e.g. Point sizes for font
– Size
• Canada-> BC -> Surrey
137. Feb 10, 2011 IAT 334 137
Presentation Sequence
Choices
– Alphabetical
– Group related items
– Frequently used first
– Most important first
– Conventional order (MTWRF)
Don’t change the order on the fly!
138. Feb 10, 2011 IAT 334 138
Direct Manipulation
Continuous visibility of the objects and actions
of interest
Rapid, incremental actions
Reversibility of all actions to encourage
experimentation
Syntactic correctness of all actions—every action
is syntactically legal
Replacement of command language syntax by
direct manipulation of object of interest
139. Feb 10, 2011 IAT 334 139
Direct Manipulation
Examples
– WYSIWYG editors and word processors
– VISICALC - 1st electronic spreadsheet
– CAD
– Desktop metaphor
– Video games
140. DM Syntax
Typical DM syntax is postfix
DirectObjects first, Verb second
– In this case, the command completes the
utterance
Enables separate selection syntax
Indirect objects typically specified before
direct objects
– e.g. brush size before painting in Photoshop
Feb 10, 2011 IAT 334 140
141. Feb 10, 2011 IAT 334 141
DM Essence
Representation of reality that can be
manipulated
The user is able to apply intellect directly to
the task
Don’t have to name things, just touch them
The tool itself seems to disappear
142. Direct Manipulation is
Locality
DM Relies on a primary geometric organization
Items located nearby are frequently edited
together
– The words in a sentence
– A column of numbers in a spreadsheet
Less related -> Less local -> Less DM!
Feb 10, 2011 IAT 334 142
144. Feb 24, 2011 IAT 334 144
Agenda
User modeling
– Fitt’s Law
– GOMS
145. Feb 24, 2011 IAT 334 145
User Modeling
Idea: If we can build a model of how a
user works, then we can predict how s/he
will interact with the interface
– Predictive modeling
Many different modeling techniques exist
146. User Modeling – 2 types
Stimulus-Response
– Hick’s law
– Practice law
– Fitt’s law
Cognitive – human as interperter/predictor –
based on Model Human Processor (MHP)
– Key-stroke Level Model
• Low-level, simple
– GOMS (and similar) Models
• Higher-level (Goals, Operations, Methods, Selections)
• Not discussed here
Feb 24, 2011 IAT 334 146
147. Power Law of Practice
Tn = T1n-a
– Tn to complete the nth trial is T1 on the first trial
times n to the power -a; a is about .4, between .2
and .6
– Skilled behavior - Stimulus-Response and routine
cognitive actions
• Typing speed improvement
• Learning to use mouse
• Pushing buttons in response to stimuli
• NOT learning
Feb 24, 2011 IAT 334 147
148. Hick’s Law
Decision time to choose among n equally
likely alternatives
– T = Ic log2(n+1)
– Ic ~ 150 msec
Feb 24, 2011 IAT 334 148
149. Fitts’ Law
Models movement times for selection
(reaching) tasks in one dimension
Basic idea: Movement time for a selection
task
– Increases as distance to target increases
– Decreases as size of target increases
Feb 24, 2011 IAT 334 149
150. Fitts: Index of Difficulty
ID - Index of difficulty
ID is an information theoretic quantity
– Based on work of Shannon – larger target => more
information (less uncertainty)
Feb 24, 2011 IAT 334 150
ID = log2 (d/w + 1.0)
bits
result
width (tolerance)
of target
distance
to move
151. Design implications
Menu item size
Icon size
Put frequenlty used icons together
Scroll bar target size and placement
– Up / down scroll arrows together or at top
and bottom of scroll bar
Feb 24, 2011 IAT 334 151
152. Feb 24, 2011 IAT 334 152
GOMS
One of the most widely known
Assumptions
– Know sequence of operations for a task
– Expert will be carrying them out
Goals, Operators, Methods, Selection
Rules
153. Feb 24, 2011 IAT 334 153
GOMS Procedure
Walk through sequence of steps
Assign each an approximate time duration
-> Know overall performance time
(Can be tedious)
154. Feb 24, 2011 IAT 334 154
Limitations
GOMS is not for
– Tasks where steps are not well understood
– Inexperienced users
Why?
Good example: Move a sentence in a
document to previous paragraph
155. Feb 24, 2011 IAT 334 155
Goal
End state trying to achieve
Then decompose into subgoals
Moved sentence
Select sentence
Cut sentence
Paste sentence
Move to new spot
Place it
156. Feb 24, 2011 IAT 334 156
Operators
Basic actions available for performing a
task (lowest level actions)
Examples: move mouse pointer, drag,
press key, read dialog box, …
157. Feb 24, 2011 IAT 334 157
Methods
Sequence of operators (procedures) for
accomplishing a goal (may be multiple)
Example: Select sentence
– Move mouse pointer to first word
– Depress button
– Drag to last word
– Release
158. Feb 24, 2011 IAT 334 158
Selection Rules
Invoked when there is a choice of a
method
Example: Could cut sentence either by
menu pulldown or by ctrl-x
159. Feb 24, 2011 IAT 334 159
Further Analysis
GOMS is often combined with a keystroke
level analysis
– Assigns times to different operators
– Plus: Rules for adding M’s (mental
preparations) in certain spots
160. Feb 24, 2011 IAT 334 160
Example
1. Select sentence
Reach for mouse H 0.40
Point to first word P 1.10
Click button down K 0.60
Drag to last word P 1.20
Release K 0.60
3.90 secs
2. Cut sentence
Press, hold ^ Point to menu
Press and release ‘x’ or Press and hold mouse
Release ^ Move to “cut”
Release
3. ...
Move Sentence
161. Keystroke-Level Model
Simplified GOMS
KSLM - developed by Card, Moran & Newell, see
their book
– The Psychology of Human-Computer Interaction,
Card, Moran and Newell, Erlbaum, 1983
Skilled users performing routine tasks
Assigns times to basic human operations -
experimentally verified
Based on MHP - Model Human Processor
Feb 24, 2011 IAT 334 161
162. Feb 24, 2011 IAT 334 162
User Profiles
Attributes:
– attitude, motivation, reading level, typing
skill, education, system experience, task
experience, computer literacy, frequency of
use, training, color-blindness, handedness,
gender,…
Novice, intermediate, expert
163. Feb 24, 2011 IAT 334 163
Motivation
User
– Low motivation,
discretionary use
– Low motivation,
mandatory
– High motivation, due
to fear
– High motivation, due
to interest
Design goal
– Ease of learning
– Control, power
– Ease of learning,
robustness, control
– Power, ease of use
164. Feb 24, 2011 IAT 334 164
Knowledge & Experience
Experience
task system
– low low
– high high
– low high
– high low
Design goals
– Many syntactic and
semantic prompts
– Efficient commands,
concise syntax
– Semantic help facilities
– Lots of syntactic
prompting
165. Feb 24, 2011 IAT 334 165
Job & Task Implications
Frequency of use
– High - Ease of use
– Low - Ease of learning & remembering
Task implications
– High - Ease of use
– Low - Ease of learning
System use
– Mandatory - Ease of using
– Discretionary - Ease of learning
166. Feb 24, 2011 IAT 334 166
Modeling Problems
1. Terminology - example
– High frequency use experts - cmd language
– Infrequent novices - menus
What’s “frequent”, “novice”?
167. Feb 24, 2011 IAT 334 167
Modeling Problems (contd.)
2. Dependent on “grain of analysis”
employed
– Can break down getting a cup of coffee into
7, 20, or 50 tasks
– That affects number of rules and their types
168. Feb 24, 2011 IAT 334 168
Modeling Problems (contd.)
3. Does not involve user per se
– Don’t inform designer of what user wants
4. Time-consuming and lengthy