Dialog Design - Direct Manipulation

1. Dialog Design - Direct Manipulation This material has been developed by Georgia Tech HCI faculty, and continues to evolve. Contributors include Gregory Abowd, Jim Foley, Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris Shaw, John Stasko, and Bruce Walker. Comments directed to foley@cc.gatech.edu are encouraged. Permission is granted to use with acknowledgement for non-profit purposes. Last revision: February 2012.

2. Dialog Styles 1. Command languages 2. GUI, aka WIMP - Window, Icon, Menu, Pointer 3. Direct manipulation 4. Speech/Natural language 5. Gesture, pen UI Design - Georgia Tech

3. Agenda • Review of dialogue design issues • Direct Manipulation • Advantages, disadvantages • Design guidelines • A psychological characterization of DM • In supplemental material UI Design - Georgia Tech

4. General Issues in Choosing Dialogue Style • Gulf of evaluation / gulf of execution • Initial training required • Learning time to become proficient • Speed of use • Generality/flexibility/power • Locus of control - user or computer • Special skills - typing • Platform(s) • Screen space required • Computational resources required UI Design - Georgia Tech

5. DM • What is direct manipulation? • That is, how can we characterize DM? • How do we know it when we see it? UI Design - Georgia Tech

6. DM 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 UI Design - Georgia Tech

7. DM Characteristics • Continuous visibility of the objects and actions of interest • Rapid, reversible, incremental actions whose effect is immediately noticeable • Replacement of command language syntax by direct manipulation of object of interest (physical actions, buttons, etc.) Shneiderman ‘82 UI Design - Georgia Tech

8. DM Examples • Examples • WYSIWYG text and graphics editors • VISICALC - 1st electronic spreadsheet • CAD • Desktop metaphor • Video games • 3D immersive Virtual Reality systems • Can use either • Physical controller (mouse, Wii) • ‘Air gestures’ UI Design - Georgia Tech

9. DM – Need Not Mimic Real Things UI Design - Georgia Tech

10. Write down some advantages, individually or in groups If in class, now share with the group Direct Manipulation Advantages UI Design - Georgia Tech

11. Some DM Advantages • Easier to learn & remember, particularly for novices • Direct WYSIWYG • Error messages rarely needed (why?) • Flexible, easily reversible actions helps reduce anxiety in users • User in control UI Design - Georgia Tech

12. DM Advantages • Provides context & instant visual feedback so user can tell if objectives are being achieved • Easier to remember how to use if are infrequent user • Exploits human use of visual spatial cues • Limits types of errors that can be made • Reduces need for error messages UI Design - Georgia Tech

13. DM Disadvantages • What could possibly be wrong with direct manipulation :) • Write down some disadvantages,individually or in groups • If in class, now sharewith the group UI Design - Georgia Tech

14. Some DM Disadvantages • Screen space intensive • Need to learn meaning of components of visual representation • Users may take metaphor too literally • Visual representation may be misleading • Mouse ops may be slower than typing • Subtle aspects may not be self-explanatory UI Design - Georgia Tech

15. DM Disadvantages • Not good at • Repetition • History keeping (harder) • Certain tasks (Change all italics to bold) • Abstract elements (variables) • Macros harder than with CL (but possible) • Tasks that are best delegated to computer • Spell checking UI Design - Georgia Tech

16. Which of these use DM? • Word? • Emacs? • Powerpoint? • Unix? • Palm Pilot? UI Design - Georgia Tech

17. Any Way to Combine DM and CL? • Show commands that DM is using • Show DM effects of commands UI Design - Georgia Tech

18. Tangible UIs • Directly manipulate physical objects, not computer images of physical objects • Manipulate physical objects • Manipulations sensed by computer • Results of manipulations reflected in computer display • Pioneered by Hiroshi Ishii (MIT) UI Design - Georgia Tech

19. Urp: A Luminous-Tangible Workbench for Urban Planning and Design Wind-flow around buildings Shadows cast by buildings UI Design - Georgia Tech

20. Tangible UI – Supply Chain (Video) UI Design - Georgia Tech

21. The End Continue for supplemental material --> UI Design - Georgia Tech

22. A More Psychological View of DM • What is directness? (not always done well) • Related to two things: • Distance • Engagement Hutchins, Hollan, Norman ‘86 UI Design - Georgia Tech

23. Distance • Two gaps or “gulfs” between user’s goals and system image • Directness partly depends on the distance between these two gulfs • Gulf of execution • Gulf of evaluation Execution Goals System Evaluation UI Design - Georgia Tech

24. 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 they want? • Gulf of evaluation • Amount of effort person must expend to interpret system state and judge if intention was achieved • Can use perceive if progressing favorably? UI Design - Georgia Tech

25. 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)? UI Design - Georgia Tech

26. Engagement • Feeling that you are directly manipulating the objects of interest • Promoted by • Unobtrusive interface • Minimizing gulfs of execution and evaluation • Appropriately responsive system UI Design - Georgia Tech

27. Example: CAD UI Design - Georgia Tech

28. Example: Photoshop UI Design - Georgia Tech

29. Example - Excel UI Design - Georgia Tech