May 18, 2010 IAT 334 1
IAT 334Interface Design
Chris Shaw______________________________________________________________________________________
SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA
May 18, 2010 IAT 334 2
Exam Materialsg Slidesg Shneiderman & Plaisant Chapters 1-8g Programming materials
– Supplemantary: Glassner Book• Chapters 1-5, • Chapters 10.2, 13.1-13.6
– On Sakai: Password: GlassnerIAT334
May 18, 2010 IAT 334 3
Why We Are Hereg Look at human factors that affect
software design and development
g Central Topic: User interface design
May 18, 2010 IAT 334 4
HCIg 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)
May 18, 2010 IAT 334 5
Why is this important?g Computers (in one way or another)
affect every person in society– Increasing % use computers in work, at
home in the road…
g Product success depends on ease of use
May 18, 2010 IAT 334 6
Course Aimsg Consciousness raising for you
– Eg. Don Norman • “The Design of Everyday Things”
– Doors• Handles afford various opening method
g Design critic
May 18, 2010 IAT 334 7
Goals of HCI (Shneiderman & Plaisant Chap1)
g Allow users to carry out tasks– Safely
– Effectively
– Efficiently
– Enjoyably
May 18, 2010 IAT 334
Goals of System EngineeringFunctionality
• Tasks and sub-tasks to be carried outReliability
• Maintaining trust in the systemStandardization, integration, consistency
and portabilitySchedules and budgets
• Adhering to timelines and expense• Human factors principles and testing
reduces costs
May 18, 2010 IAT 334 9
Usabilityg Five Measurable Goals of UI Designg Combination of
– Ease of learning– High speed of user task performance– Low user error rate– Subjective user satisfaction– User retention over time
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
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
May 18, 2010 IAT 334
Accommodating Human Diversity
PhysicalAbilities andWorkplaces
Cognitiveand Perceptual
Abilities
PersonalityDifferences
Culturaland International
Diversity
Users withDisabilities
ElderlyUsers
May 18, 2010 IAT 334 13
Key Historical Eventg Design of the first Mac 1983-1984g “The computer for the rest of us”
May 18, 2010 IAT 334 14
Improving Interfacesg Know the User!
– Physical abilities– Cognitive abilities– Personality differences– Skill differences– Cultural diversity– Motivation– Special needs
May 18, 2010 IAT 334 15
Two Crucial Errorsg Assume all users are alike
g Assume all users are like the designer
Another Crucial Errorg Have the user design it!
g 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
designMay 18, 2010 IAT 334 16
May 18, 2010 IAT 334 17
UI Design/Develop Processg Analyze user’s goalsg Create design alternativesg Analyze designsg Implement prototypeg Testg Refine
Design
Evaluate Implement
May 18, 2010 IAT 334 18
Evaluationg Things we can measure
– Time to learn– Speed of performance– Rate of errors by user– Retention over time– Subjective satisfaction
May 18, 2010 IAT 334 19
Interfaces in the Worldg VCRg Mouseg Phoneg Copierg Carg Airline reservationg Air traffic control
May 18, 2010 IAT 334 20
History of HCI
______________________________________________________________________________________
SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA
May 18, 2010 IAT 334 21
Ivan Sutherlandg SketchPad - ‘63 PhD thesis at MIT
– Hierarchy - pictures & subpictures– Master picture with instances– Constraints– Icons– Copying– Light pen as input device– Recursive operations
May 18, 2010 IAT 334 22
Douglas Engelbartg Invented the mouseg Landmark system/demo:
– hierarchical hypertext, multimedia, mouse, high-res display, windows, shared files, electronic messaging, CSCW, teleconferencing, …
g http://www.youtube.com/watch?v=JfIgzSoTMOs
May 18, 2010 IAT 334
The Mouse
source: resonancepub.com & brittanica.com
Doug Engelbart’s mouse - 1963-64
May 18, 2010 IAT 334 24
Alan Kayg Dynabook - Notebook sized
computer loaded with multimedia and can store everything
g Personal Computingg Desktop Interface
May 18, 2010 IAT 334 25
PCs with GUIsg Xerox PARC - mid 1970’s
– Alto– Local processor, Bitmap display, Mouse– Precursor to modern GUI– LAN - Ethernet
May 18, 2010 IAT 334
Menus
source: folklore.org
Bill Atkinson’s Polaroids of the first pull-down menu prototype - circa 1979
May 18, 2010 IAT 334 27
Xerox Star - ‘81g First commercial PC designed for
“business professionals”– Desktop metaphor, pointing, WYSIWYG
g First system based on usability engineering
Windows 95
May 18, 2010 IAT 334 28
Handheldsg Portable computing + phoneg Newton, Palm, Blackberry, iPhone
May 18, 2010 IAT 334 29
May 18, 2010 IAT 334 30
Human Capabilitiesg Want to improve user performance
g Know the user!– Senses– Information processing systems
May 18, 2010 IAT 334 31
Sensesg Sight, hearing, touch important for
current HCI
– smell, taste ???
May 18, 2010 IAT 334 32
Sightg Visual System workings
g Color - color blindness: 8% males, 1% females
g Much done by context & grouping (words, optical illusions, …)
May 18, 2010 IAT 334 33
Hearingg Often taken for granted how good it
is– Pitch - frequency– Loudness - amplitude– Timbre - type of sound (instrument)
g Sensitive to range 20Hz - 22000Hzg Limited spatially, good temporal
performance
May 18, 2010 IAT 334 34
Touchg Three main sensations handled by
different types of receptors:– Pressure (normal)– Intense pressure (heat/pain)– Temperature (hot/cold)
g Where important?
May 18, 2010 IAT 334 35
Models of Human Performanceg Predictiveg Quantitative
– Time to perform– Time to learn– Number and type of errors– Time to recover from errors
g Approximations
May 18, 2010 IAT 334 36
Basic HCIg Model Human Processor
– A simple model of human cognition– Card, Moran, Newell 1983
g Components:– Senses – Sensory store– Short-term memory– Long-term memory– Cognition
May 18, 2010 IAT 334 37
Information Processingg Usually serial action
– Respond to buzzer by pressing button g Usually parallel recognition
• Driving, reading signs, listening to radio
May 18, 2010 IAT 334 38
Model Human Processor Basicsg Parameters
– Processors cycle time of 50-200ms– Memories have type, capacity, decay
timeg Types
– Visual– Auditory– Tactile – Taste, smell, proprioception, etc
May 18, 2010 IAT 334 39
Model Picture Closeup
May 18, 2010 IAT 334 40
Perceptual Processorg Continually “grabs data” from the
sensory systemg Cycle time: 100ms [50 - 200] msg Passes data to Image Store in
unrecognized form– “Array of Pixels” (or whatever it is) from eyes– “Sound Intensities” from ears
May 18, 2010 IAT 334 41
Sensory Storeg The “input buffer” of the sensesg Stores most recent input unrecognizedg Storage time and capacity varies by type
– Visual: Nominal Range• 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
May 18, 2010 IAT 334 42
Memoryg Three “types”
– Short-term memory Conscious thought, calculations
– Intermediate Storing intermediate results, future plans
– Long-term Permanent, remember everything ever happened to us
May 18, 2010 IAT 334 43
Memory: Sort Term
g 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: Nominal Range• Capacity: 7 chunks [5 - 9] chunks• Decay Time: 7 seconds [5 - 226] seconds• Access Time: 70ms [25 - 170] ms
May 18, 2010 IAT 334 44
Memory: Long Termg Long Term Memory (LTM)
– “Unlimited” size– Slower access time (100ms)– Little decay– Episodic & Semantic
g Why learn about memory?– Know what’s behind many HCI
techniques– Predict what users will understand
May 18, 2010 IAT 334 45
LT Memory Structureg Episodic memory
– Events & experiences in serial form
g Semantic memory– Structured record of facts, concepts &
skills
May 18, 2010 IAT 334 46
Read the colors of the words
Black Red Orange
Yellow Blue
May 18, 2010 IAT 334 47
MHP Operationg Recognize-Act Cycle
– On each cycle, contents in WM initiate actions associatively linked to them in LTM
– Actions modify contents of WMg Discrimination Principle
– Retrieval is determined by candidates that exist in memory relative to retrieval cues
– Interference by strongly activated chunks
May 18, 2010 IAT 334 48
Perceptiong 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
g Perceptual causality– two distinct stimuli can fuse if the first event
appears to cause the other– events must occur in the same cycle
May 18, 2010 IAT 334 49
Operationg Variable Cognitive Processor Rate
– Cognitive Processor cycle time Tc is shorter with greater effort
– Induced by increased task demands/information
– Decreases with practice
May 18, 2010 IAT 334 50
Operation: Target findingg Task: Move hand to target areag 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
Jan 13, 2011 IAT 334 51
IAT 334Interface Design
Task Analysis______________________________________________________________________________________
SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA
Jan 13, 2011 IAT 334 52
Task Conformanceg Task coverage
– Can system do all tasks of interest?
g Task adequacy– Can user do tasks?– Does system match real-world tasks?
Jan 13, 2011 IAT 334 53
Task Analysisg Analyzing how people do their jobs
– Go to their environment– Learn about, analyze and describe their
tasks
g Examine users’ tasks to better understand what they need from interface and how they will use it
Task Analysisg Gather data about what users need
to do or accomplish
…then…
g Represent data for interpretation and use in design decisions
Jan 13, 2011 IAT 334 54
Information to be Gatheredg Information about usersg Description of environment
– where the tasks will be performedg Major goals of the job
– what will result in a successful end state?
g User preferences & needs– before they even start: coffee, pen,
notebook, log sheets…Jan 13, 2011 IAT 334 55
Jan 13, 2011 IAT 334 56
Task Analysisg Broad Focusg Observe users of current system(s)g Generate requirements
– Hierarchical task analysis– Knowledge-based task analysis– Entity-Relationship model
Data Gathering Techniques1. Observation2. Interviews & Contextual Inquiry3. Ethnographyalso…4. Surveys & Questionnaires5. Focus Groups & Expert Debriefing6. Competitive Product Review7. Documentation mining8. Data loggingJan 13, 2011 IAT 334 57
Information to be Gatheredg Tasks & Subtasks:
– Physical– Cognitive– Communication
g Conditions under which these tasks are done
g Results/outcomes of tasksg Requirements to perform task:
– Information– Communication with others– EquipmentJan 13, 2011 IAT 334 58
1. Observationg Watch users do what they do
– Typically from a distanceg Record with videotape
– May require coding video laterg Take lots of notes, sketchesg Focus on specific task-relevant
behaviors in notes, but later convert to abstract subtasks
Jan 13, 2011 IAT 334 59
2. Interviewsg Engage the user more than just
watchingg Structured interviews
– Efficient, but requires trainingg Unstructured
– Inefficient, but requires no trainingg Semi-structured
– Good balance– Often appropriateJan 13, 2011 IAT 334 60
3. Ethnographyg Deeply contextual inquiry
– “Wallow in the data”g “Live among” the usersg Understanding the full complexity of
behavior, in its complete social context
g Note: Techniques based in sociology and anthropology--the study of humansJan 13, 2011 IAT 334 61
4. Surveys & Questionnaires
g Subjective answers in a quantitative format – What does this mean?
g 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
5. Focus Groupsg 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 discussiong Focus on preferences and views, not
performanceg Relatively low cost, quick way to learn a
lotg Audio or video record, with permissionJan 13, 2011 IAT 334 63
6. Competitive Productsg Looking for both good and bad ideas
– Functionality– UI style
g Why are they successful or unsuccessful?
g What does successful really mean?– (Note: Successful does not equal
usable)Jan 13, 2011 IAT 334 64
7. Document Miningg Documentation
– Often contains description of how the tasks should be done
– Standards docs– Manuals– Histories– Best Practices
Jan 13, 2011 IAT 334 65
8. Data Loggingg Automatically tracking:
– Keystroke/mouse clicks– Timers– Logs of transactions– Physical location/movement trackers
• Cell phones• GPS
Jan 13, 2011 IAT 334 66
Now that you have observed…
g You have piles of notes, hours of video, surveys up to here…
g How can you digest and represent the data, to turn it into information?
Jan 13, 2011 IAT 334 67
Describe Tasks
1. Task Outlines2. Narratives3. Hierarchies & Network Diagrams
– Hierarchical Task Analysis (HTA)– Entity-Relationship Diagrams
4. Flow Charts5. Card Sorting
Jan 13, 2011 IAT 334 68
1. Task OutlineUsing a lawnmower to cut grass
Step 1. Examine lawna. Make sure grass is dryb. Look for objects laying in the grass
Step 2. Inspect lawnmowerc. 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 adaptor3) Make sure that deck cover is in place4) Check for any loose parts (such as oil caps)5) Check to make sure blade is attached securely
d. Check engine oil level1) Remove oil fill cap and dipstick2) Wipe dipstick3) Replace dipstick completely in lawnmower4) Remove dipstick5) Check that oil is past the level line on dipstick
Jan 13, 2011 IAT 334 69
2. Narrativesg Describe tasks in sentencesg Often expanded version of task
outlineg More effective for communicating
general idea of taskg Not effective for detailsg Not effective for branching tasksg Not effective for parallel tasksJan 13, 2011 IAT 334 70
3. Hierarchies & Networksg Hierarchical Task Analysis (HTA)
– Graphical notation & decomposition of tasks– Tasks as sets of actions– Tasks organized into plans (describes
sequence)g 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
4. Flow Chartsg 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
Jan 13, 2011 IAT 334 73
5. Knowledge-based Analysisg List all objects and actions involved
in a task, then build a taxonomy of them
g Often times, work with domain expert to get help
Summary:Data Gathering Techniques1. Observation2. Interviews & Contextual Inquiry3. Ethnographyalso…4. Surveys & Questionnaires5. Focus Groups & Expert Debriefing6. Competitive Product Review7. Documentation mining8. Data loggingJan 13, 2011 IAT 334 74
Summary:Describe Tasks
1. Task Outlines2. Narratives3. Hierarchies & Network Diagrams
– Hierarchical Task Analysis (HTA)– Entity-Relationship Diagrams
4. Flow Charts5. Card Sorting
Jan 13, 2011 IAT 334 75
Jan 20, 2011 IAT 334 76
UI Design Principlesg Categories
– Learnability• support for learning for users of all levels
– Flexibility• support for multiple ways of doing tasks
– Robustness• support for recovery
g Always think about exceptions, suitability
Jan 20, 2011 IAT 334 77
Learnability Principlesg Predictabilityg Synthesizabilityg Familiarityg Generalizabilityg Consistency
Jan 20, 2011 IAT 334 78
Predictabilityg I think that this action will do…
g Operation visibility - can see avail actions– e.g. menus vs. command shell– grayed menu items
Jan 20, 2011 IAT 334 79
Synthesizabilityg From the resulting system state, My
previous action did…
– compare in command prompt vs UI– same feedback needed for all users, all
apps?
Jan 20, 2011 IAT 334 80
Familiarityg 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?
Jan 20, 2011 IAT 334 81
Generalizabilityg Does knowledge of one UI apply to
others?– Cut and paste in many apps
g Does knowledge of one aspect of a UI apply to rest of the UI?– File browsers in MacOS/ Windows
g Aid: UI Developers guidelines
Jan 20, 2011 IAT 334 82
Consistencyg Similar ways of doing tasks
– interacting– output– screen layout
g Is this always desirable for all systems, all users?
Jan 20, 2011 IAT 334 83
Flexibility Principlesg Dialog Initiativeg Multithreadingg Task migratibilityg Substitutivityg Customizability
Jan 20, 2011 IAT 334 84
Dialog Initiativeg System pre-emptive
– system does all prompts, user responds• sometimes necessary• Eg. Bank machine
g User pre-emptive– user initiates actions
• more flexible
Jan 20, 2011 IAT 334 85
Multithreadingg Two types
– Concurrent • input to multiple tasks simultaneously
– Interleaved• many tasks, but input to one task at a time
Jan 20, 2011 IAT 334 86
Task migratabilityg Ability to move performance of task
to entity (machine or person) that can do it better– Eg. Autopilot– Spellchecking
– When is this good? Bad?
Jan 20, 2011 IAT 334 87
Substitutivityg 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
Jan 20, 2011 IAT 334 88
Customizabilityg Ability to modify interface
– By user - adaptability
– By system - adaptivity
Jan 20, 2011 IAT 334 89
Robustness Principlesg Observabilityg Recoverabilityg Responsivenessg Task Conformance
Jan 20, 2011 IAT 334 90
Observabilityg 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?
Jan 20, 2011 IAT 334 91
Recoverabilityg 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)
Jan 20, 2011 IAT 334 92
Responsivenessg 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
Jan 20, 2011 IAT 334 93
Task Conformanceg Task coverage
– can system do all tasks of interest?
g Task adequacy– Can user do tasks?– Does system match real-world tasks?
Feb 3, 2011 IAT 334 94
IAT 334Interface Design
User Centered DesignMetaphorModels Practice______________________________________________________________________________________
SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA
Feb 3, 2011 IAT 334 95
Agendag User Centered Design -- Overall Processg Design
– Metaphors– Mental Models– Idea generation
g Design principlesg Displaying your designs
– Storyboards– Lo-Fi– Wizard of Oz– Visual Basic, Flash, etc
Feb 3, 2011 IAT 334 96
User-Centered Designg User-centered design process
– Analysis of user needs– Prototype– Informal feedback– Iterate on design– Final application– Formal feedback
Feb 3, 2011 IAT 334 97
Analysis of User Needsg Techniques:
– Surveys– Card-sorting tasks– Interviews– Focus groups
• Look at competing products– Ethnography
• Participant observation
Feb 3, 2011 IAT 334 98
Prototypingg Storyboardsg Paper simulations of applicationg Wizard of Oz experimentg Prototyping toolsg Cheap!
Feb 3, 2011 IAT 334 99
Informal Feedbackg Present prototype to usersg Do a quick questionnaireg Observe the user struggle with your
lousy design
Feb 3, 2011 IAT 334 100
Iterate on Designg Redesign system
– in light of initial user impressions– pay attention to common complaints
g Be prepared to abandon bad ideas!!
g It’s just an idea, not a measure of your worth!
Feb 3, 2011 IAT 334 101
Idea Creation
g Ideas come from– Imagination– Analogy– Observation of current practice– Observation of current systems
g Borrow from other fields– Animation– Theatre– Information displays– Architecture– ...
How do we create and develop new interface ideas and designs?
Feb 3, 2011 IAT 334 102
Interface Metaphorsg 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
Feb 3, 2011 IAT 334 103
Mental Modelsg What models of the world are the
users using?g Two Classes:g Functional model
– “Press the accelerator once, then turn the key”
g Structural model– OK, why do we do that?
Feb 3, 2011 IAT 334 104
Another example...g Functional model
– “Go north on King George, Cross the Pattullo, Turn left at 10th Ave, Turn right at Kingsway, go 4.5km”
g Structural model– What location??
Feb 3, 2011 IAT 334 105
Idea Creationg Methods for creating and developing
interface ideas
– Turn off your natural critique mechanism!
– ?
Feb 3, 2011 IAT 334 106
Idea Creation Methodsg 1. Consider new use for object
g 2. Adapt object to be like something else
g 3. Modify object for a new purpose
Feb 3, 2011 IAT 334 107
Idea Creation Methodsg 4. Magnify - add to object
g 5. Minimize - subtract from object
g 6. Substitute something similar
Feb 3, 2011 IAT 334 108
Idea Creation Methodsg 7. Rearrange aspects of object
g 8. Change the point of view
g 9. Combine data into an ensemble
Feb 3, 2011 IAT 334 109
Guidelines for Designg 1. Provide a good conceptual model
– User has mental model of how things work
– Build design that allows user to predict effects of actions
g 2. Make things visible– Visible affordances, mappings,
constraints– Remind person of what can be done and
how to do it
Feb 3, 2011 IAT 334 110
Design Principlesg 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!
Feb 3, 2011 IAT 334 111
Design Principlesg Here are 10 more detailed principles
to follow about what to design and why
Feb 3, 2011 IAT 334 112
Design Principlesg 2. Strive for consistency
– Sequences, actions, commands, layout, terminology
– Makes more predictable– Dialog boxes all having same “closure”
options
Feb 3, 2011 IAT 334 113
Design Principlesg 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
Feb 3, 2011 IAT 334 114
Design Principlesg 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
Feb 3, 2011 IAT 334 115
Design Principlesg 5. Permit easy reversal of actions
– Undo!
– Reduces anxiety, encourages experimentation
Feb 3, 2011 IAT 334 116
Design Principlesg 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
Feb 3, 2011 IAT 334 117
Design Principlesg 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
Feb 3, 2011 IAT 334 118
Design Principlesg 8. Support internal locus of control
– Put user in charge, not computer– Can be major source of anxiety
Feb 3, 2011 IAT 334 119
Design Principlesg 9. Handle errors smoothly and
positively– “That Filename already exists”vs.– “Rename failed”
g 10. Provide useful help and documentation
Dialog Design
Categories of Dialogs
Feb 10, 2011 IAT 334 121
Agendag Dialog design
– Command Language– WIMP - Window, Icon, Menu, Pointer– Direct manipulation– Speech/Natural language– Gesture, pen, multi-touch, VR…
Feb 10, 2011 IAT 334 122
Command Languagesg Earliest UI interaction paradigms
g Examples– MS-DOS shell– UNIX shell
Feb 10, 2011 IAT 334 123
CL Attributesg Work primarily by recall, not
recognitiong Heavy memory loadg Little or nothing is visible
so…
g Poor choice for novicesbut...
Feb 10, 2011 IAT 334 124
CL Attributesg Specify commands to operate on
current data collectiong User only controls initiationg Single thread of controlg Some other display area needed
Feb 10, 2011 IAT 334 125
CL Design Goalsg Consistency
– Syntax, orderg Good naming and abbreviations
g Doing your homework in design can help alleviate some of the negatives
Feb 10, 2011 IAT 334 126
Consistencyg 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
Feb 10, 2011 IAT 334 127
Dialog Orderg English: SVO subject verb object
g CL: S assumed (you)Is VO or OV better? % rm file
% file rmg V dO iO vs. V iO dO
% print file thePrinter% lpr -PthePrinter file
Dialog Orderg Technical issues dictate the choice:g V iO dO
% lpr -PthePrinter fileg The command must parse the
arguments– So the command comes first
g Flags control how to act on the file– Want to parse all flags before checking
files– e.g. -o outputFileFeb 10, 2011 IAT 334 128
Feb 10, 2011 IAT 334 129
Syntaxg 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
Feb 10, 2011 IAT 334 130
Terminologyg Keep terminology consistent
– Same concept expressed with same options
– Useful to provide symmetric (congruent) pairings• forward/backward• next/prev• control/meta
Feb 10, 2011 IAT 334 131
WIMPg Focus: Menus, Buttons, Forms
g Predominant interface paradigm now (with some direct manipulation added)
g Advantages:– ?
Recognition g 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
Feb 10, 2011 IAT 334 133
Menusg Key advantages:
– 1 keystroke or mouse operation vs. many
– No memorization of commands– Limited input set
Feb 10, 2011 IAT 334 134
Menusg Many different types
– pop-up– pull-down– radio buttons– pie buttons– hierarchies
Feb 10, 2011 IAT 334 135
Menu Itemsg Organization strategies
– Create groups of logically similar items– Cover all possibilities– Ensure that items are non-overlapping– Keep wording concise, understandable
Feb 10, 2011 IAT 334 136
Presentation Sequenceg Use natural if available
– Time• e.g. Breakfast, Lunch, Dinner
– Numeric ordering• e.g. Point sizes for font
– Size• Canada-> BC -> Surrey
Feb 10, 2011 IAT 334 137
Presentation Sequenceg Choices
– Alphabetical– Group related items– Frequently used first– Most important first– Conventional order (MTWRF)
g Don’t change the order on the fly!
Feb 10, 2011 IAT 334 138
Direct Manipulationg Continuous visibility of the objects and
actions of interestg Rapid, incremental actionsg Reversibility of all actions to encourage
experimentationg Syntactic correctness of all actions—every
action is syntactically legalg Replacement of command language
syntax by direct manipulation of object of interest
Feb 10, 2011 IAT 334 139
Direct Manipulationg Examples
– WYSIWYG editors and word processors– VISICALC - 1st electronic spreadsheet– CAD– Desktop metaphor– Video games
DM Syntaxg Typical DM syntax is postfixg DirectObjects first, Verb second
– In this case, the command completes the utterance
g Enables separate selection syntaxg Indirect objects typically specified
before direct objects– e.g. brush size before painting in
PhotoshopFeb 10, 2011 IAT 334 140
Feb 10, 2011 IAT 334 141
DM Essenceg Representation of reality that can be
manipulated
g The user is able to apply intellect directly to the task
g Don’t have to name things, just touch them
g The tool itself seems to disappear
Direct Manipulation is Localityg DM Relies on a primary geometric
organizationg Items located nearby are frequently
edited together– The words in a sentence– A column of numbers in a spreadsheet
g Less related -> Less local -> Less DM!
Feb 10, 2011 IAT 334 142
User Modeling
Predicting thoughts and actionsGOMS
Feb 24, 2011 IAT 334 144
Agendag User modeling
– Fitt’s Law
– GOMS
Feb 24, 2011 IAT 334 145
User Modelingg 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
g Many different modeling techniques exist
User Modeling – 2 typesg Stimulus-Response
– Hick’s law– Practice law– Fitt’s law
g 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
Power Law of Practiceg 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
Hick’s Lawg Decision time to choose among n
equally likely alternatives– T = Ic log2(n+1)– Ic ~ 150 msec
Feb 24, 2011 IAT 334 148
Fitts’ Lawg Models movement times for
selection (reaching) tasks in one dimension
g 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
Fitts: Index of Difficultyg ID - Index of difficulty
g 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
Design implicationsg Menu item sizeg Icon sizeg Put frequenlty used icons togetherg 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
Feb 24, 2011 IAT 334 152
GOMSg One of the most widely known
g Assumptions– Know sequence of operations for a task– Expert will be carrying them out
g Goals, Operators, Methods, Selection
Rules
Feb 24, 2011 IAT 334 153
GOMS Procedureg Walk through sequence of steps g Assign each an approximate time
duration
-> Know overall performance time
g (Can be tedious)
Feb 24, 2011 IAT 334 154
Limitationsg GOMS is not for
– Tasks where steps are not well understood
– Inexperienced usersg Why?
g Good example: Move a sentence in a document to previous paragraph
Feb 24, 2011 IAT 334 155
Goalg End state trying to achieveg Then decompose into subgoals
Moved sentence
Select sentence
Cut sentence
Paste sentenceMove to new spot
Place it
Feb 24, 2011 IAT 334 156
Operatorsg Basic actions available for
performing a task (lowest level actions)
g Examples: move mouse pointer, drag, press key, read dialog box, …
Feb 24, 2011 IAT 334 157
Methodsg Sequence of operators (procedures)
for accomplishing a goal (may be multiple)
g Example: Select sentence– Move mouse pointer to first word– Depress button– Drag to last word– Release
Feb 24, 2011 IAT 334 158
Selection Rulesg Invoked when there is a choice of a
method
g Example: Could cut sentence either by menu pulldown or by ctrl-x
Feb 24, 2011 IAT 334 159
Further Analysisg 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
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
Keystroke-Level Modelg Simplified GOMSg KSLM - developed by Card, Moran &
Newell, see their book– The Psychology of Human-Computer
Interaction, Card, Moran and Newell, Erlbaum, 1983
g Skilled users performing routine tasksg Assigns times to basic human operations -
experimentally verifiedg Based on MHP - Model Human ProcessorFeb 24, 2011 IAT 334 161
Feb 24, 2011 IAT 334 162
User Profilesg Attributes:
– attitude, motivation, reading level, typing skill, education, system experience, task experience, computer literacy, frequency of use, training, color-blindness, handedness, gender,…
g Novice, intermediate, expert
Feb 24, 2011 IAT 334 163
Motivationg User
– Low motivation, discretionary use– Low motivation, mandatory– High motivation, due to fear– High motivation, due to interest
g Design goal– Ease of learning
– Control, power
– Ease of learning, robustness, control– Power, ease of use
Feb 24, 2011 IAT 334 164
Knowledge & Experienceg Experienceg task system
– low low
– high high
– low high
– high low
g Design goals– Many syntactic and semantic prompts– Efficient commands, concise syntax– Semantic help facilities
– Lots of syntactic prompting
Feb 24, 2011 IAT 334 165
Job & Task Implicationsg Frequency of use
– High - Ease of use– Low - Ease of learning & remembering
g Task implications– High - Ease of use– Low - Ease of learning
g System use– Mandatory - Ease of using– Discretionary - Ease of learning
Feb 24, 2011 IAT 334 166
Modeling Problemsg 1. Terminology - example
– High frequency use experts - cmd language
– Infrequent novices - menus
g What’s “frequent”, “novice”?
Feb 24, 2011 IAT 334 167
Modeling Problems (contd.)g 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
Feb 24, 2011 IAT 334 168
Modeling Problems (contd.)g 3. Does not involve user per se
– Don’t inform designer of what user wants
g 4. Time-consuming and lengthy
