Download - Interaction Styles 1
![Page 1: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/1.jpg)
Interaction Styles 1
Command languages
![Page 2: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/2.jpg)
Fall 2007 PSYCH / CS 6750 2
Agenda
Command languagesAdvantages, disadvantagesDesign guidelines
WIMPAdvantages, disadvantagesDesign guidelines
![Page 3: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/3.jpg)
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
![Page 4: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/4.jpg)
Fall 2007 PSYCH / CS 6750 4
1. Command Languages
Earliest UI interaction paradigms(after punch cards gave way to interaction)
ExamplesMS-DOS shellUNIX shelldBaseGPSS
![Page 5: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/5.jpg)
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...
![Page 6: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/6.jpg)
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
![Page 7: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/7.jpg)
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
![Page 8: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/8.jpg)
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)
![Page 9: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/9.jpg)
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
![Page 10: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/10.jpg)
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
![Page 11: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/11.jpg)
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
![Page 12: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/12.jpg)
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”
![Page 13: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/13.jpg)
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
![Page 14: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/14.jpg)
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
![Page 15: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/15.jpg)
Fall 2007 PSYCH / CS 6750 15
Abbreviations...
![Page 16: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/16.jpg)
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)
![Page 17: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/17.jpg)
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
![Page 18: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/18.jpg)
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
![Page 19: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/19.jpg)
Interaction Styles 2
Menus
![Page 20: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/20.jpg)
Fall 2007 PSYCH / CS 6750 20
Menus
Many different typespop-uppull-downradio buttonspie buttonshierarchies
![Page 21: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/21.jpg)
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
![Page 22: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/22.jpg)
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
![Page 23: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/23.jpg)
Fall 2007 PSYCH / CS 6750 23
Presentation Sequence
User studiesNovices: alpha > functional > random
Experts: categorization
How would you do it in general?
![Page 24: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/24.jpg)
Fall 2007 PSYCH / CS 6750 24
Example: YaST
![Page 25: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/25.jpg)
Fall 2007 PSYCH / CS 6750 25
Example: YaST
![Page 26: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/26.jpg)
Interaction Styles 3
WIMP
![Page 27: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/27.jpg)
Fall 2007 PSYCH / CS 6750 27
WIMP
Focus: Menus, Buttons, Forms
Predominant interface paradigm now (with some direct manipulation added)
Advantages:?
![Page 28: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/28.jpg)
Interaction Styles 4
Direct manipulation
![Page 29: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/29.jpg)
Fall 2006 PSYCH / CS 6750 29
Agenda
Direct manipulationDefinitionAdvantages & disadvantagesAnother characterization
![Page 30: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/30.jpg)
Fall 2006 PSYCH / CS 6750 30
Dialog Design
1. Command language2. Menus3. WIMP4. Direct manipulation5. Pen, gesture, VE6. Speech, audio
![Page 31: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/31.jpg)
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
![Page 32: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/32.jpg)
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.)
![Page 33: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/33.jpg)
Fall 2006 PSYCH / CS 6750 33
Direct Manipulation Examples
WYSIWYG editors and word processors
VISICALC - 1st electronic spreadsheet
CADDesktop metaphorVideo games…drag and drop
![Page 34: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/34.jpg)
Fall 2006 PSYCH / CS 6750 34
DM
![Page 35: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/35.jpg)
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
![Page 36: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/36.jpg)
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
![Page 37: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/37.jpg)
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…(?)
![Page 38: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/38.jpg)
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
![Page 39: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/39.jpg)
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
![Page 40: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/40.jpg)
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
![Page 41: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/41.jpg)
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)?
![Page 42: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/42.jpg)
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
![Page 43: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/43.jpg)
Fall 2006 PSYCH / CS 6750 43
Ultimately...
In end, must characterize direct manipulation by feeling of directness and illusion of manipulating objects at hand
![Page 44: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/44.jpg)
Fall 2006 PSYCH / CS 6750 44
Example: CAD
![Page 45: Interaction Styles 1](https://reader035.vdocument.in/reader035/viewer/2022062314/56812f2b550346895d94bd98/html5/thumbnails/45.jpg)
Fall 2006 PSYCH / CS 6750 45
Example: Photoshop