Dialog Design
description
Transcript of Dialog Design
![Page 1: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/1.jpg)
___________________________________________________________________________________________________
SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA
Dialog Design
Categories of Dialogs
![Page 2: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/2.jpg)
Feb 10, 2011 IAT 334 2
Agendag Dialog design
– Command Language– WIMP - Window, Icon, Menu, Pointer– Direct manipulation– Speech/Natural language– Gesture, pen, multi-touch, VR…
![Page 3: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/3.jpg)
Feb 10, 2011 IAT 334 3
Dialog Designg How does a user interact with the
interface?
![Page 4: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/4.jpg)
Feb 10, 2011 IAT 334 4
Command Languagesg Earliest UI interaction paradigms
g Examples– MS-DOS shell– UNIX shell
![Page 5: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/5.jpg)
Feb 10, 2011 IAT 334 5
CL Attributesg Work primarily by recall, not
recognitiong Heavy memory loadg Little or nothing is visible
so…
g Poor choice for novicesbut...
![Page 6: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/6.jpg)
Feb 10, 2011 IAT 334 6
CL Attributesg Specify commands to operate on
current data collectiong User only controls initiationg Single thread of controlg Some other display area needed
![Page 7: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/7.jpg)
Feb 10, 2011 IAT 334 7
CL Advantagesg Advantages for experts
– Speed, conciseness• % ls <ret>
– Can express actions beyond a limited set• Flags, pipes
– Repetition, extensibility• Scripts, macros
– Easier implementation, less overhead– Power
• eg. Wild cards
![Page 8: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/8.jpg)
Feb 10, 2011 IAT 334 8
CL Dangersg With added power, comes added
responsibility and danger– UNIX
% rm -r *• Deletes every file that you have, and you
can’t get them back
![Page 9: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/9.jpg)
Feb 10, 2011 IAT 334 9
CL Reflectiong Command languages are often
maligned (for good reason)g But increased functionality can win
out over bad UI (e.g., LINUX)– Try to get both– Avoid excess functionality (comes at
cost)
![Page 10: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/10.jpg)
Feb 10, 2011 IAT 334 10
CL Design Goalsg Consistency
– Syntax, orderg Good naming and abbreviations
g Doing your homework in design can help alleviate some of the negatives
![Page 11: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/11.jpg)
Feb 10, 2011 IAT 334 11
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
![Page 12: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/12.jpg)
Feb 10, 2011 IAT 334 12
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
![Page 13: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/13.jpg)
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 13
![Page 14: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/14.jpg)
Feb 10, 2011 IAT 334 14
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
![Page 15: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/15.jpg)
Feb 10, 2011 IAT 334 15
Terminologyg Keep terminology consistent
– Same concept expressed with same options
– Useful to provide symmetric (congruent) pairings• forward/backward• next/prev• control/meta
![Page 16: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/16.jpg)
Feb 10, 2011 IAT 334 16
Exampleg vi text editor
w - forward wordb - backward word
g Wouldn’t ‘f’ be better for forward?‘f’ already used
g How about ‘fw’ and ‘bw’?Extra keystrokes
![Page 17: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/17.jpg)
Feb 10, 2011 IAT 334 17
Orderingg Keep ordering consistent
– VO seems to be the most natural– Typically need to pick where options go
g Example– % ln -s file1 file2 (I can never
remember)– Think of % cp file1 file2
![Page 18: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/18.jpg)
Feb 10, 2011 IAT 334 18
Names and Abbreviationsg Specificity versus Generality
– General words• More familiar, easier to accept
– Specific (typically better)• More descriptive, meaningful, distinctive
– (Nonsense does surprisingly well in small set)
![Page 19: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/19.jpg)
Abbreviations
Feb 10, 2011 IAT 334 19
![Page 20: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/20.jpg)
Feb 10, 2011 IAT 334 20
Abbreviationsg Abbrevs. allow for faster actions
– Expert performance begins to be dominated by motor times such as # of keystrokes
– Not good idea for novices– (Allow but don’t require)
• IBM CMS and DEC VMS had shortened commands- first unique characters were enough
• filelist -- f, fi, fil, file, filel, fileli, filelis, filelist
![Page 21: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/21.jpg)
Feb 10, 2011 IAT 334 21
Picking Good Abbrevs.g Strategies
– Simple truncation (works best, but conflicts)
– Vowel drop plus truncation (avoid conflicts)
– First and last letters– First letters of words in a phrase– Standard abbrev from other contexts
• qty, rm, bldg– Phonics
• xqt
![Page 22: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/22.jpg)
Feb 10, 2011 IAT 334 22
Abbrv Gdlnsg Use single primary rule (with single
fallback for conflicts)– Use fallback as little as possible– Mark use of fallback in documentation
g Let user know primary and secondary rulesg Truncation is good but generates conflictsg Fixed length is better than variable lengthg Don’t use abbrevs in system output
![Page 23: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/23.jpg)
Feb 10, 2011 IAT 334 23
Agendag Dialog design
– Command Language– WIMP - Window, Icon, Menu, Pointer– Direct manipulation– Speech/Natural language– Gesture, pen, multi-touch, VR…
![Page 24: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/24.jpg)
Feb 10, 2011 IAT 334 24
WIMPg Focus: Menus, Buttons, Forms
g Predominant interface paradigm now (with some direct manipulation added)
g Advantages:– ?
![Page 25: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/25.jpg)
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 25
![Page 26: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/26.jpg)
Feb 10, 2011 IAT 334 26
Menusg Key advantages:
– 1 keystroke or mouse operation vs. many
– No memorization of commands– Limited input set
![Page 27: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/27.jpg)
Feb 10, 2011 IAT 334 27
Menusg Many different types
– pop-up– pull-down– radio buttons– pie buttons– hierarchies
![Page 28: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/28.jpg)
Feb 10, 2011 IAT 334 28
Menu Itemsg Organization strategies
– Create groups of logically similar items– Cover all possibilities– Ensure that items are non-overlapping– Keep wording concise, understandable
![Page 29: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/29.jpg)
Feb 10, 2011 IAT 334 29
Bad Exampleg Travel web page links:
– Flight page– 3 Best Itineraries– Flights & Prices– Timetables– Fares
g Which do you choose for reservations?
![Page 30: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/30.jpg)
Feb 10, 2011 IAT 334 30
Presentation Sequenceg Use natural if available
– Time• e.g. Breakfast, Lunch, Dinner
– Numeric ordering• e.g. Point sizes for font
– Size• Canada-> BC -> Surrey
![Page 31: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/31.jpg)
Feb 10, 2011 IAT 334 31
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!
![Page 32: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/32.jpg)
Feb 10, 2011 IAT 334 32
Presentation Sequenceg User studies
– Novices: alpha > functional > random– Experts: categorization
g How would you do it in general?
![Page 33: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/33.jpg)
Feb 10, 2011 IAT 334 33
Presentation Sequenceg One possible methodology (first-
>last)– Natural order (if it exists)– Frequency of use– Order of use– Categorical– Alphabetical
g Don’t change dynamically!
![Page 34: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/34.jpg)
Feb 10, 2011 IAT 334 34
Agendag Dialog design
– Command Language– WIMP - Window, Icon, Menu, Pointer– Direct manipulation– Speech/Natural language– Gesture, pen, multi-touch, VR…
![Page 35: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/35.jpg)
Feb 10, 2011 IAT 334 35
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
![Page 36: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/36.jpg)
Feb 10, 2011 IAT 334 36
Direct Manipulationg Examples
– WYSIWYG editors and word processors– VISICALC - 1st electronic spreadsheet– CAD– Desktop metaphor– Video games
![Page 37: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/37.jpg)
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 37
![Page 38: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/38.jpg)
Feb 10, 2011 IAT 334 38
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
![Page 39: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/39.jpg)
Feb 10, 2011 IAT 334 39
DM Advantagesg Easier to learn & rememberg Direct WYSIWYGg Flexible, easily reversible actions
helps reduce anxiety in usersg Provides context & instant visual
feedbackg Exploits human use of visual spatial
cuesg Limits types of errors
![Page 40: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/40.jpg)
Feb 10, 2011 IAT 334 40
DM Problemsg Takes of screen spaceg Need to learn meaning of
components of visual representationg Visual representation must be
learnedg Mouse ops may be slower than
typingg Not self-explanatory (no prompts)
![Page 41: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/41.jpg)
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 41
![Page 42: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/42.jpg)
Feb 10, 2011 IAT 334 42
DM Problemsg Not good at
– Repetition
– History keeping (harder)– Certain tasks (Change all italics to bold)– Macros harder– Abstract elements (variables)
![Page 43: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/43.jpg)
Feb 10, 2011 IAT 334 43
What is Directness?g Related to three things:
– Physical Distance– “Gulfs” between user’s goals & system
image– Engagement
Hutchins, Hollan, Norman ‘86
![Page 44: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/44.jpg)
Feb 10, 2011 IAT 334 44
Distance: Two “Gulfs”g 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?
g 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 45: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/45.jpg)
Feb 10, 2011 IAT 334 45
Directness and Distanceg Two types
– Semantic - 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 46: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/46.jpg)
Feb 10, 2011 IAT 334 46
Engagementg Feeling that you are directly
manipulating the objects of interestg Promoted by
– Unobtrusive interface – Minimizing gulfs of execution and
evaluation– Appropriately responsive system
![Page 47: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/47.jpg)
Feb 10, 2011 IAT 334 47
Agendag Dialog design
– Command Language– WIMP - Window, Icon, Menu, Pointer– Direct manipulation– Speech/Natural language– Gesture, pen, multi-touch, VR…
![Page 48: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/48.jpg)
Feb 10, 2011 IAT 334 48
Speech Inputg Speech synthesisg Speaker recognitiong Speech recognitiong Natural language understanding
![Page 49: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/49.jpg)
Feb 10, 2011 IAT 334 49
English Speechg Made up of 40 phonemes, 24
consonants and 16 vowels
![Page 50: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/50.jpg)
Feb 10, 2011 IAT 334 50
Speech Synthesisg Often hear robotic voice
g Store tones, then put them together– The transition is the difficult thing to do
![Page 51: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/51.jpg)
Feb 10, 2011 IAT 334 51
Speaker Recognitiong Tell which person it is (voice print)
g Could be important for monitoring meetings
![Page 52: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/52.jpg)
Feb 10, 2011 IAT 334 52
Speech Recognitiong Primarily identifying words
g Improving all the timeg Commercial systems:
– IBM/Nuance ViaVoice, Ford Sync ...
![Page 53: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/53.jpg)
Feb 10, 2011 IAT 334 53
Recognition Dimensionsg Speaker dependent/independent
– Parametric patterns are sensitive to speaker
– With training can get betterg Vocabulary
– Some are getting 50,000+ wordsg Isolated word vs. continuous speech
– Continuous: where words stop & begin– Typically a pattern match, no context
used
![Page 54: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/54.jpg)
Feb 10, 2011 IAT 334 54
Recognition Systemsg Typical system has 5
components:– Speech capture device - Has analog -> digital
converter– Digital Signal Processor - Gets word
boundaries, scales, filters, cuts out extra stuff– Preprocessed signal storage - Processed
speech buffered for recognition algorithm– Reference speech patterns - Stored templates
or generative speech models for comparisons– Pattern matching algorithm - Goodness of fit
from templates/model to user’s speech
![Page 55: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/55.jpg)
Feb 10, 2011 IAT 334 55
Errorsg Systems make four types of errors:
– Substitution – one word for another– Rejection - detected, but not recognized– Insertion – word added– Deletion – word not detected
g Which is more common, dangerous?
![Page 56: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/56.jpg)
Feb 10, 2011 IAT 334 56
Natural Language Understandingg Putting meaning to the words
g Input might be speech or could be typed
g Holy grail of Artificial Intelligence problems
![Page 57: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/57.jpg)
Feb 10, 2011 IAT 334 57
NL Factors/Termsg Syntactic
– Grammar or structureg Prosodic
– Inflection, stress, pitch, timingg Pragmatic
– Situated context of utterance, location, time
g Semantic– Meaning of words
![Page 58: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/58.jpg)
Feb 10, 2011 IAT 334 58
SR/NLU Advantagesg Easy to learn and rememberg Powerfulg Fast, efficient (not always)g Little screen real estate
![Page 59: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/59.jpg)
Feb 10, 2011 IAT 334 59
SR/NLU Disadvantagesg Doesn’t work well enough yetg Assumes knowledge of problem
domain– Not prompted, like menus
g Requires typing skill (if keyboard)g Enhancements are invisibleg Expensive to implement
![Page 60: Dialog Design](https://reader036.fdocuments.in/reader036/viewer/2022070501/5681697b550346895de1817c/html5/thumbnails/60.jpg)
Feb 10, 2011 IAT 334 60
Good in Situationsg Hands busyg Mobility requiredg Eyes occupiedg Conditions preclude use of keyboardg Visual impairmentg Physical limitation