interaction styles 1
DESCRIPTION
Interaction Styles 1. Command languages. Agenda. Command languages Advantages, disadvantages Design guidelines WIMP Advantages, disadvantages Design guidelines. Dialog Styles. 1. Command languages 2. Menus 3. WIMP - Window, Icon, Menu, Pointer 4. Direct manipulation - PowerPoint PPT PresentationTRANSCRIPT
Interaction Styles 1
Command languages
Fall 2007 PSYCH / CS 6750 2
Agenda
Command languagesAdvantages, disadvantagesDesign guidelines
WIMPAdvantages, disadvantagesDesign guidelines
Fall 2007 PSYCH / CS 6750 3
Dialog Styles
1. Command languages 2. Menus3. WIMP - Window, Icon, Menu, Pointer
4. Direct manipulation5. Speech/Natural language6. Gesture, pen, VR
Fall 2007 PSYCH / CS 6750 4
1. Command Languages
Earliest UI interaction paradigms(after punch cards gave way to interaction)
ExamplesMS-DOS shellUNIX shelldBaseGPSS
Fall 2007 PSYCH / CS 6750 5
Command Line Attributes
Work primarily by recall, not recognition
Heavy memory loadLittle or nothing is visibleso…
Poor choice for novicesbut...
Fall 2007 PSYCH / CS 6750 6
Command Line Advantages
Advantages for expertsSpeed, conciseness
% ls (hard to beat)Can express actions beyond a limited setFlags, piping one command to another
Repetition, extensibilityScripting, macros
Easier implementation, less overheadAbstraction, wild cards
Power
Fall 2007 PSYCH / CS 6750 7
Command Line Dangers
With added power, comes added responsibility and dangerUNIX
•% rm -r *•Deletes every file that you have, and you can’t get them back
Fall 2007 PSYCH / CS 6750 8
Command Line Reflection
Command languages are often maligned(for good reason)
But increased functionality can win out over bad UI (e.g., UNIX)Try to get bothAvoid excess functionality (comes at cost)
Fall 2007 PSYCH / CS 6750 9
Command Line Design Goals
ConsistencySyntaxOrderEtc.
Good naming and abbreviations
Doing your homework in design can help alleviate some of the negatives
Fall 2007 PSYCH / CS 6750 10
Consistency: Syntax
Pick a consistent syntax strategyUNIX fails here because commands were developed by lots of different people at different organizations•No guidelines provided
Simple command list•e.g, vi, minimize keystrokes
Commands plus arguments•realistic, can provide keyword parameters
•% cp from=foo to=bar
Fall 2007 PSYCH / CS 6750 11
Syntax & Order Choices
English: SVO subject verb object“Bill deletes the file”
CL: S is assumed to be youIs VO or OV better?“delete file” vs. “file delete”
V dO iO vs. V iO dO -- Which is better??% print file calvin% lpr -Pcalvin file
Fall 2007 PSYCH / CS 6750 12
Ordering
Keep ordering consistentVO seems to be the most naturalTypically need to pick where options go
Example% ln -s file1 file2 (how to remember?)
Think of % cp file1 file2 for parallel command
Or “make a link of the symbolic type, pointing to file1, and called file2”
Fall 2007 PSYCH / CS 6750 13
Consistency: Terminology
Same concept expressed with same optionsUseful to provide symmetric (congruent) pairings•forward/backward•next/prev•control/meta
Fall 2007 PSYCH / CS 6750 14
Example
vi text editorw - forward wordb - backward word
Wouldn’t ‘f’ be better for forward?‘f’ already used
How about ‘fw’ and ‘bw’?Extra keystrokes
Fall 2007 PSYCH / CS 6750 15
Abbreviations...
Fall 2007 PSYCH / CS 6750 16
Abbreviations
Abbrevs. allow for faster actionsExpert performance begins to be dominated by motor times such as # of keystrokes
Not good idea for novices(Allow but don’t require)
Fall 2007 PSYCH / CS 6750 17
Picking Good Abbreviations
StrategiesSimple truncation (works best, but conflicts)
Vowel drop plus truncation (avoid conflicts)
First and last lettersFirst letters of words in a phraseStandard abbrev from other contexts
•qty, rm, bldgPhonics
•Xqt
Fall 2007 PSYCH / CS 6750 18
Abbreviation Guidelines
Use single primary rule (with single fallback for conflicts)Use fallback rule as little as possibleMark use of fallback in documentation
Let user know primary and secondary rules
Truncation is good but generates conflicts
Don’t use abbrevs. in system output
Interaction Styles 2
Menus
Fall 2007 PSYCH / CS 6750 20
Menus
Many different typespop-uppull-downradio buttonspie buttonshierarchies
Fall 2007 PSYCH / CS 6750 21
Menus
Key advantages:1 keystroke or mouse operation vs. many
No memorization of commandsLimited input set
Organization strategiesCreate groups of logically similar items
Cover all possibilitiesEnsure that items are non-overlapping
Keep wording concise, understandable
Fall 2007 PSYCH / CS 6750 22
Presentation SequenceLists of related items, shown in order
Use natural order if availableTime
•e.g. Breakfast, Lunch, DinnerNumeric ordering
•e.g. Point sizes for fontSize
•e.g. USA > Georgia > Fulton Co. > Atlanta
Other ChoicesAlphabetical; Group related itemsFrequently used first; Most important first
Fall 2007 PSYCH / CS 6750 23
Presentation Sequence
User studiesNovices: alpha > functional > random
Experts: categorization
How would you do it in general?
Fall 2007 PSYCH / CS 6750 24
Example: YaST
Fall 2007 PSYCH / CS 6750 25
Example: YaST
Interaction Styles 3
WIMP
Fall 2007 PSYCH / CS 6750 27
WIMP
Focus: Menus, Buttons, Forms
Predominant interface paradigm now (with some direct manipulation added)
Advantages:?
Interaction Styles 4
Direct manipulation
Fall 2006 PSYCH / CS 6750 29
Agenda
Direct manipulationDefinitionAdvantages & disadvantagesAnother characterization
Fall 2006 PSYCH / CS 6750 30
Dialog Design
1. Command language2. Menus3. WIMP4. Direct manipulation5. Pen, gesture, VE6. Speech, audio
Fall 2006 PSYCH / CS 6750 31
Direct Manipulation Essence
Representation of reality that can be manipulated
The user is able to apply intellect directly to the task
The tool itself seems to disappear
Fall 2006 PSYCH / CS 6750 32
Direct Manipulation Details
1) Continuous visibility of the objects and actions of interest
2) Rapid incremental actions whose effect is immediately noticeable
3) Reversibility of all actions to encourage experimentation
4) Syntactic correctness of all actions—every action is syntactically legal
5) Replacement of command language syntax by direct manipulation of object of interest (physical actions, buttons, etc.)
Fall 2006 PSYCH / CS 6750 33
Direct Manipulation Examples
WYSIWYG editors and word processors
VISICALC - 1st electronic spreadsheet
CADDesktop metaphorVideo games…drag and drop
Fall 2006 PSYCH / CS 6750 34
DM
Fall 2006 PSYCH / CS 6750 35
DM Advantages
Easier to learn & remember, particularly for novices
Direct WYSIWYGFlexible, easily reversible actions helps reduce anxiety in users
Fall 2006 PSYCH / CS 6750 36
DM Advantages
Provides context & instant visual feedback so user can tell if objectives are being achieved
Exploits human use of visual spatial cues
Limits types of errors that can be made
Fall 2006 PSYCH / CS 6750 37
DM Problems
Screen space intensive (info not very dense) (does this always apply?)
Need to learn meaning of components of visual representation
Visual representation may be misleading
Mouse ops may be slower than typingNot self-explanatory (no prompts)
…but wait a minute…(?)
Fall 2006 PSYCH / CS 6750 38
DM Problems
Not good atRepetition, scriptingHistory-keeping (harder)Certain tasks (Change all italics to bold)
Abstract elements (variables)Macros harder
Fall 2006 PSYCH / CS 6750 39
More Psychological View
What is directness? (not always done well)
Related to two things:Distance“Gulfs” between user’s goals & system image
Engagement
Hutchins, Hollan, Norman ‘86
Fall 2006 PSYCH / CS 6750 40
Distance: Two “Gulfs”Gulf of execution
Distance between user’s goals and means of achieving them in system• Does the system allow the user to do what the user wants to do?
Gulf of evaluation Amount of effort person must expend to interpret system state and judge if intention was achieved• Can user perceive if progressing favorably?
Goals System
Execution
Evaluation
Fall 2006 PSYCH / CS 6750 41
Directness and Distance
Two typesSemantic - Relation between what user wants to express and what is available in interface•Can I say what I want (concisely)?
Articulatory - Relation between meanings of expressions and their physical form(s)•Is the way to perform an action expected and clear (appropriate)?
Fall 2006 PSYCH / CS 6750 42
Engagement
Feeling that you are directly manipulating the objects of interest
Promoted byUnobtrusive interface Minimizing gulfs of execution and evaluation
Appropriately responsive system
Fall 2006 PSYCH / CS 6750 43
Ultimately...
In end, must characterize direct manipulation by feeling of directness and illusion of manipulating objects at hand
Fall 2006 PSYCH / CS 6750 44
Example: CAD
Fall 2006 PSYCH / CS 6750 45
Example: Photoshop