Jing Chen & Quincy Clark

Direct Manipulation

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 Manipulation

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

OVERVIEW

Pointing Selection Drag and Drop Object Manipulation

Overview

OVERVIEW

Pointing Selection Drag and Drop Object Manipulation

Overview

Pointing

Pointing

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

Mouse Buttons

The left mouse button The right mouse button The middle mouse button The scroll wheel Meta-keys

Pointing

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, drag, release)

Pointing

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

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

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

OVERVIEW

Pointing

Selection Drag and Drop Object Manipulation

Overview

Selection

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

Selection

Discrete and Contiguous Selection Discrete selection

Discrete data E.g., Icons on the Desktop

These objects are commonly selected independently of their spatial relationships with each other.

Contiguous selection Contiguous data

E.g., The text in a word processor These objects are often selected in contiguous

groups

Selection

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

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

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

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

OVERVIEW

PointingSelection

Drag and DropObject Manipulation

Overview

Drag-and-drop

DefinitionAn idiom that defines GUIDrag-and-drop implies a transformationDirect manipulationTwo levels of directness

1. True direct manipulation idioms2. Indirect manipulation idioms

Definition

Drag-and-drop

Drag-and-drop true direct

Drag-and-drop

Drag-and-drop indirect

Drag-and-drop

Visual FeedbackIndicating drag pliancyIndicating drop candidacyInsertion targets

Visual Feedback

Drag-and-drop

Visual Feedback

Drag-and-drop

Other Drag-and-drop IssuesAuto ScrollingDrag-and-drop twitchinessFine Scrolling

Other Issues

OVERVIEW

PointingSelectionDrag and Drop

Object Manipulation

Overview

Object Manipulation

3 Main OperationsRepositioningResizing and reshapingObject connection

Object Manipulation

Drag-and-drop

Design PrinciplesDrop 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

Programs that demand precise align must offer a vernier

Drag-and-drop

OVERVIEW

PointingSelectionDrag and DropObject Manipulation

Overview

Using the Mouse: Example The scrollbar

Pointing

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. While the meta-key is pressed, the cursor

should change to reflect the new function of the idiom.

Pointing

Mouse Events: Example

A check box in Windows XP

Pointing

Cursor Hinting: Example

Pointing

Group Selection: Example A drag rectangle in Windows Explorer

Selection