The document discusses direct manipulation interfaces. It describes how direct manipulation allows users to visually represent and directly act upon objects through pointing, dragging and dropping, and object manipulation. It provides examples of these interactions, including pointing with a mouse, selecting groups of objects, and using drag and drop to move or copy files between locations. The document outlines principles for visual and direct interaction with objects on the screen.

1. Direct Manipulation
Jing Chen & Quincy Clark

2. Direct Manipulation
 Ben Shneiderman (1974)
 Visual representation of the objects that an
application is concerned with
 Visible and gestural mechanisms for acting upon
these objects
 Immediately visible results of these actions
Visual
Manipulation
Direct

3. Direct manipulation Interaction
Idioms
 Most direct manipulation interaction idioms fall
into one of seven categories:
 Pointing
 Selection
 Drag and drop
 Control manipulation
 Palette tools
 Object manipulation
 Object connection

4. OVERVIEW
 Pointing
 Selection
 Drag and Drop
 Object Manipulation
Overview

5. OVERVIEW
 Pointing
 Selection
 Drag and Drop
 Object Manipulation
Overview

6. Pointing
Pointing

7. Using the Mouse
 Don’t force users to transition between gross
and fine motor skills continually.
 Near and far destination
 Transitioning is challenging
 Programs should fully support both the mouse
and the keyboard for all navigation and
selection tasks.
 For many data-intensive tasks
Pointing

8. Mouse Buttons
 The left mouse button
 The right mouse button
 The middle mouse button
 The scroll wheel
 Meta-keys
Pointing

9. Mouse Actions
 Point (Point)
 Click (Point, click left button, release)
 Right-click (Point, click right button, release)
 Click and drag (Point, click left button, drag, release)
 Double-click (Point, click left button, release, click left button,
release)
 Chord-click (Point, click left button, click right button, release,
release)
 Double-drag (Point, click left button, release, click, Pointing
drag, release)

10. Mouse Events
 Each time the user clicks a mouse button,
the program must deal with two discrete
events: the mouse-down event and the
mouse-up event.
 Mouse-down over an object or data should
select the object or data.
 Mouse-down over controls means propose
action; mouse-up means commit to action.
Pointing

11. The Cursor
 The cursor is the visible representation of the
mouse’s position on the screen.
 The key to successful direct manipulation
is rich visual feedback.
Pointing

12. Pliancy and Hinting
 Pliant: objects or screen areas that may be
manipulated by a user.
 Three ways to visually communicate pliancy.
 Static object hinting
 Dynamic visual hinting
 Cursor hinting
 Waiting cursor hinting
Pointing

13. OVERVIEW
 Pointing
 Selection
 Drag and Drop
 Object Manipulation
Overview

14. Selection
 The act of choosing an object or a control is
referred to as selection.
Selection

15. Discrete and Contiguous
Selection
 Discrete selection
 Discrete data
 E.g., Icons on the Desktop
 Theseobjects are commonly selected
independently of their spatial relationships with
each other.
 Contiguous selection
 Contiguous data
 E.g., The text in a word processor
 Theseobjects are often selected in contiguous
groups Selection

16. Selection Rules
 Mutual exclusion
 Typically, when a selection is made, any
previous selection is unmade.
 Additive selection (sequentially)
 Ctrl in discrete selection
 Shift in contiguous selection
 Group selection (simultaneously)
 Click-and-drag, Ctrl+click, Ctrl+drag in contiguous
selection
 Click-and-drag in discrete selection
Selection

17. Insertion and Replacement
 In discrete selection
 The incoming data may replace the selected
objects
 Alternatively, the selected object may treat the
incoming data in some predetermined way.
 E.g.,
In PowerPoint, when a shape is selected,
incoming keystrokes result in a text annotation of the
selected shape.
Selection

18. Insertion and Replacement
 In contiguous selection
 The incoming data always replaces the currently
selected data.
 E.g., When you type in a word processor, you
replace what is selected with what you are typing.
Selection

19. Visual Indication of Selection
 The selection state should be visually
evident and unambiguous.
 Background color
 Icons on the desktop
 Indicate the selection by movement.
 The marquee tool in Photoshop
Selection

20. OVERVIEW
Pointing
Selection
Drag and Drop
Object Manipulation
Overview

21. Drag-and-drop
Definition
An idiom that defines GUI
Drag-and-drop implies a
transformation
Direct manipulation
Two levels of directness
1. True direct manipulation idioms
2. Indirect manipulation idioms
Definition

22. Drag-and-drop
Drag-and-drop true

23. Drag-and-drop
Drag-and-drop

24. Drag-and-drop
Visual Feedback
Indicating drag pliancy
Indicating drop candidacy
Insertion targets
Visual Feedback

25. Drag-and-drop
Visual Feedback

26. Drag-and-drop
Other Drag-and-drop Issues
Auto Scrolling
Drag-and-drop twitchiness
Fine Scrolling
Other Issues

27. OVERVIEW
Pointing
Selection
Drag and Drop
Object Manipulation
Overview

28. Object Manipulation
3 Main Operations
Repositioning
Resizing and reshaping
Object connection
Object

29. Drag-and-drop
Design Principles
Drop candidates must visually indicate their
receptivity
The drag cursor must visually identify the source
object
Any scrollable drag-and-drop target must auto-
scroll
Debounce all drags Drag-and-drop

30. OVERVIEW
Pointing
Selection
Drag and Drop
Object Manipulation
Overview

31. Using the Mouse: Example
 The scrollbar
Pointing

32. Meta-Keys: Example
 In Windows Explorer, holding the Ctrl key
while dragging and dropping a file turns the
function from a Move into a Copy.
 Use cursor hinting to dynamically show the
meanings of meta-keys.
 Whilethe meta-key is pressed, the cursor should
change to reflect the new function of the idiom.
Pointing

33. Mouse Events: Example
 A check box in Windows XP
Pointing

34. Cursor Hinting: Example
Pointing

35. Group Selection: Example
 A drag rectangle in Windows Explorer
Selection