1 / 45

Interaction Styles 1

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

noel-richmond
Download Presentation

Interaction Styles 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Interaction Styles 1 Command languages

  2. Agenda • Command languages • Advantages, disadvantages • Design guidelines • WIMP • Advantages, disadvantages • Design guidelines PSYCH / CS 6750

  3. Dialog Styles • 1. Command languages • 2. Menus • 3. WIMP - Window, Icon, Menu, Pointer • 4. Direct manipulation • 5. Speech/Natural language • 6. Gesture, pen, VR PSYCH / CS 6750

  4. 1. Command Languages • Earliest UI interaction paradigms (after punch cards gave way to interaction) • Examples • MS-DOS shell • UNIX shell • dBase • GPSS PSYCH / CS 6750

  5. Command Line Attributes • Work primarily by recall, not recognition • Heavy memory load • Little or nothing is visibleso… • Poor choice for novicesbut... PSYCH / CS 6750

  6. Command Line Advantages • Advantages for experts • Speed, conciseness % ls (hard to beat) • Can express actions beyond a limited set Flags, piping one command to another • Repetition, extensibility Scripting, macros • Easier implementation, less overhead Abstraction, wild cards • Power PSYCH / CS 6750

  7. Command Line Dangers • With added power, comes added responsibility and danger • UNIX • % rm -r * • Deletes every file that you have, and you can’t get them back 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 both • Avoid excess functionality (comes at cost) PSYCH / CS 6750

  9. Command Line Design Goals • Consistency • Syntax • Order • Etc. • Good naming and abbreviations • Doing your homework in design can help alleviate some of the negatives PSYCH / CS 6750

  10. Consistency: Syntax • Pick a consistent syntax strategy • UNIX 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 PSYCH / CS 6750

  11. Syntax & Order Choices • English: SVO subject verb object • “Bill deletes the file” • CL: S is assumed to be you • Is 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 PSYCH / CS 6750

  12. Ordering • Keep ordering consistent • VO seems to be the most natural • Typically 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” PSYCH / CS 6750

  13. Consistency: Terminology • Same concept expressed with same options • Useful to provide symmetric (congruent) pairings • forward/backward • next/prev • control/meta PSYCH / CS 6750

  14. Example • vi text editor • w - forward word • b - backward word • Wouldn’t ‘f’ be better for forward? • ‘f’ already used • How about ‘fw’ and ‘bw’? • Extra keystrokes PSYCH / CS 6750

  15. Abbreviations... PSYCH / CS 6750

  16. Abbreviations • 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) PSYCH / CS 6750

  17. Picking Good Abbreviations • 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 PSYCH / CS 6750

  18. Abbreviation Guidelines • Use single primary rule (with single fallback for conflicts) • Use fallback rule as little as possible • Mark 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 PSYCH / CS 6750

  19. Interaction Styles 2 Menus

  20. Menus • Many different types • pop-up • pull-down • radio buttons • pie buttons • hierarchies PSYCH / CS 6750

  21. Menus • Key advantages: • 1 keystroke or mouse operation vs. many • No memorization of commands • Limited input set • Organization strategies • Create groups of logically similar items • Cover all possibilities • Ensure that items are non-overlapping • Keep wording concise, understandable PSYCH / CS 6750

  22. Presentation Sequence • Lists of related items, shown in order • Use natural order if available • Time • e.g. Breakfast, Lunch, Dinner • Numeric ordering • e.g. Point sizes for font • Size • e.g. USA > Georgia > Fulton Co. > Atlanta • Other Choices • Alphabetical; Group related items • Frequently used first; Most important first PSYCH / CS 6750

  23. Presentation Sequence • User studies • Novices: alpha > functional > random • Experts: categorization • How would you do it in general? PSYCH / CS 6750

  24. Example: YaST PSYCH / CS 6750

  25. Example: YaST PSYCH / CS 6750

  26. Interaction Styles 3 WIMP

  27. WIMP • Focus: Menus, Buttons, Forms • Predominant interface paradigm now (with some direct manipulation added) • Advantages: • ? PSYCH / CS 6750

  28. Interaction Styles 4 Direct manipulation

  29. Agenda • Direct manipulation • Definition • Advantages & disadvantages • Another characterization PSYCH / CS 6750

  30. Dialog Design • 1. Command language • 2. Menus • 3. WIMP • 4. Direct manipulation • 5. Pen, gesture, VE • 6. Speech, audio 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 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.) PSYCH / CS 6750

  33. Direct Manipulation Examples • WYSIWYG editors and word processors • VISICALC - 1st electronic spreadsheet • CAD • Desktop metaphor • Video games • …drag and drop PSYCH / CS 6750

  34. DM PSYCH / CS 6750

  35. DM Advantages • Easier to learn & remember, particularly for novices • Direct WYSIWYG • Flexible, easily reversible actions helps reduce anxiety in users 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 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 typing • Not self-explanatory (no prompts) • …but wait a minute…(?) PSYCH / CS 6750

  38. DM Problems • Not good at • Repetition, scripting • History-keeping (harder) • Certain tasks (Change all italics to bold) • Abstract elements (variables) • Macros harder 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 PSYCH / CS 6750

  40. Execution Goals System Evaluation 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? PSYCH / CS 6750

  41. Directness and Distance • 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)? PSYCH / CS 6750

  42. Engagement • Feeling that you are directly manipulating the objects of interest • Promoted by • Unobtrusive interface • Minimizing gulfs of execution and evaluation • Appropriately responsive system PSYCH / CS 6750

  43. Ultimately... • In end, must characterize direct manipulation by feeling of directness and illusion of manipulating objects at hand PSYCH / CS 6750

  44. Example: CAD PSYCH / CS 6750

  45. Example: Photoshop PSYCH / CS 6750

More Related