Direct Manipulation and DragandDrop

1
Direct ManipulationandDrag-and-Drop
Cooper, About Face, Chapters 17 and 18
2
Direct Manipulation

• Three elements of direct manipulation
• Visual representation of the manipulated objects
• Physical actions instead of text entry
• Immediately visible impact of the operation
• More than clicking and dragging
• The visual feedback is essential
• Note cannot visually manipulate what you cannot
  see
• render data, objects, gizmos and cursors with
  good graphic details and richness
• A rich visual interaction is the key to
  successful direct manipulation

3
Variants of Direct Manipulation

• Management manipulation
• Varieties
• making selections (Chapter 16)
• dragging and dropping (Chapter 18)
• manipulating gizmos
• resizing, reshaping, repositioning
• arrowing
• Accessible to all users
• Content manipulation
• Drawing, layout, text manipulation, image
  manipulation
• Results reflect the graphic talent of the user

4
Manipulating Gizmos

• Point-and-click
• Few variants buttcons, pushbuttons, checkboxes,
  and radio boxes
• User uses them often
• Click-and-drag
• Anatomy point-click-drag-release
• Master object owner of the mouse-down point
• If concrete data drag is a selection extension
• If a gizmo drag is a gizmo state change
• If discrete object drag is a drag-and-drop
• Constrained drag
• Shift meta-key constrains drag along 90º and
  45º axes

mouse-down point
mouse-up point
interaction with user capture state
5
Inform user of effect of drag

• Once drag begins, the meaning of the users
  action varies depending on the type of drag
  action
• and the drag action depends on the program, the
  context, and the master object
• Concrete data drag means extend selection
• So visually highlight selection between
  mouse-down point and current selection point and
  subsequent mouse-up point
• Non-dragging gizmo
• On mouse down, visually show what the gizmo will
  do if button is released
• If selection point is then moved from gizmo
  (drag) before being released, the gizmo should
  visually show its state is not changed or action
  is not invoked

6
Inform user of effect of drag

• Menus
• Primary gizmo for new users
• but relatively difficult to manipulate
• so provide other idioms, too, and guide the
  learner to them
• Cascading menus
• Click and drag along a cascade path
• dont stray, or you will lose your menu context!
• Alternately, can click to anchor a point in the
  path, then point and select next point in path,
  etc.
• Windows menu mode click a menu, then move mouse
  around to see other menu options without having
  to hold down the mouse button
• Carefully organize the resulting hierarchy of
  menus and sub-menus
• Most people do not understand hierarchies
• How one person labels and organizes things is
  probably different than how another person
  organizes the same things

7
Repositioning

• Click to select, drag to new position, release
• Positions master object as a whole
• Not manipulating some aspect/part of the object
• So, if an object can be repositioned, then click
  and drag cannot be used for some other idiom
• For large or complex objects, may show only an
  outline of the object being positioned
• If you want to reposition AND use click-and-drag
  for some other idiom on the object
• Then dedicate a specific physical area to the
  repositioning function
• e.g., with a window, grab the title bar
• Not visually apparent (no affordance) but easily
  learned and effective

8
Resizing and Reshaping

• Resize windows
• Grab the frame and drag
• Thick frame gives a visual affordance, but it is
  expensive in screen real estate
• Corner resizer (shangle) or other affordance
• Thin frames are still there cursor hinting
• Resize graphical objects
• Cannot permanently attach resizing controls
• Resizing handles
• (grapples)
• 
  
  

Corner resizer
Resizing handles
9
Arrowing

• Draw a directed line (arrow) from one object to
  another
• Click-and-drag, but instead of moving master
  object, a line is drawn from it to current cursor
  position
• The line is animated, visually indicating effect
  of drag
• Often, the two objects are logically linked in
  some underlying semantic model
• Target object and\or cursor should visually hint
  if target object is valid connection target
• Click-and-drag idiom is already used by most
  master objects
• Select a connection tool first
• Use right mouse, meta-key, etc.

10
Escape from capture

• User needs a way to abort from a drag, along with
  assurance that he did so successfully
• Abort
• ESCAPE key
• Return system to previous state
• Dont forget to discard the following mouse-up
  event
• Chord-click
• Design tip Cancel drags on chord-click
• Inform
• Undo visual hints of drag (cursor change, outline
  box)
• Drag canceled bitmap and rubber stamp sound
• Provide an escape from dragging, and inform the
  user

11
Direct Manipulation Visual Feedback

• Remember, rich visual feedback is important to
  successful direct manipulation
• Three phases
• Free phase before any user action
• Indicate direct manipulation pliancy
• Free cursor hinting
• Captive phase once the user has begun the drag
• Positively indicate the direct manipulation has
  begun
• Visually identify the potential participants in
  the action
• Visually indicate the effects of the drag
• Captive cursor hinting
• Termination phase after the user releases the
  mouse button
• Visually indicate the action has terminated
• Visually indicate the action effect
• Observe various cursor hinting strategies in your
  applications

12
Drag-and-Drop
13
Drag-and-Drop

• A powerful idiom that characterizes many
  graphical user interfaces
• In a single, smooth action, it combines
• On position (master object)
• Another position (target object)
• A function or transformation from master object
  to target object
• An especially powerful application integration
  technique when the master object and target
  object are in separate applications
• Microsoft Object Linking and Embedding (OLE)

14
Master-and-Target Drag-and-Drop

• Select and drag a discrete object (master) to
  another discrete object (target)
• Master object (and its containing process/window)
  controls the operation
• Dragging data to functions
• For example, drag a file to a printer,
  compression utility, bit bucket (trash/recycler),
  fax
• Target and master negotiate format of the dragged
  data, so the target can accept it
• Accept, at a minimum, ASCII, bitmaps, references
  to files, and functions
• Functions and references to files make the
  functionality of the master application available
  in the target application
• Dragging functions to data
• For example, drag an italics button to selected
  text
• Rare

15
Master-and-Target How it works

• Candidate master objects visually hint at pliancy
• How they are drawn, cursor hinting, tool-tip,
  text hint, etc.
• A drop target candidate should visually indicate
  if it can accept the dropped object
• The drop candidate must visually indicate its
  dropability
• The drag cursor must visually indicate the master
  object
• Do not obscure drop target
• Make cursor hot spot clear
• Drop over background or concrete data use
  bombsight
• Dont use Dont do that ?
• Indicates danger, not nothing will happen
• If user finishes drag (mouse-up point) when over
  a target that will not accept drop, then do and
  say nothing
• After drop, visually indicate action completion

16
Tool-manipulation drag-and-drop

• In drawing and painting programs, the user
  manipulates tools with drag-and-drop
• Select a tool from a list (toolbox, palette) and
  use it for actions (like erase or effects) or to
  draw (shapes, for example)
• Change cursor to visually indicate selected tool
• When the number of tools gets large, user spends
  a lot of time grabbing another tool
• Use meta keys, right-button option list, etc.
• Include the select cursor as a default tool
• Modal tool stays selected for multiple uses
• Single-use (charged cursor) use once then
  revert to default select pointer

17
Drag-and-drop autoscroll

• Autoscroll
• Wherever the drop target can be outside the
  currently visible area in the application, allow
  autoscroll
• Any scrollable drag-and-drop target must
  autoscroll
• Autoscroll region is just inside the application
  border, allowing drop to outside applications,
  too
• Avoid scrolling too fast consider scrolling
  faster as drop point gets closer to the border
• Avoid scrolling too soon start scroll after the
  cursor has been in the zone for about a
  half-second

18
Drag-and-drop sensitivity

• It is very difficult to select without also
  moving the mouse
• Interpret slight motion as select, not drag
• Debounce all drags
• Slight ? Drag threshold of three pixels
• Fine positioning
• Problem mouse resolution makes it very difficult
  to move the selection point by only one pixel
• Solution an program that demands precise
  alignment must offer a vernier
• Example each ten pixels of mouse motion
  interpreted as one pixel of object motion
• Enter vernier mode with a meta-key during drag,
  or use arrow keys as fine-motion actions during
  drag or after drop
• After entering vernier mode, ignore small (lt 5
  pixel) mouse motions