Your SlideShare is downloading. ×
Pointing, selecting, manipulation jing & quincy
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Pointing, selecting, manipulation jing & quincy


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • ['pælit]
  • has the most flexible interaction
  • Transcript

    • 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 InteractionIdioms 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 ContiguousSelection 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. OVERVIEWPointingSelectionDrag and DropObject Manipulation Overview
    • 21. Drag-and-dropDefinition An idiom that defines GUI Drag-and-drop implies atransformation 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-dropVisual Feedback Indicating drag pliancy Indicating drop candidacy Insertion targets Visual Feedback
    • 25. Drag-and-drop Visual Feedback
    • 26. Drag-and-dropOther Drag-and-drop Issues Auto Scrolling Drag-and-drop twitchiness Fine Scrolling Other Issues
    • 27. OVERVIEWPointingSelectionDrag and DropObject Manipulation Overview
    • 28. Object Manipulation3 Main Operations Repositioning Resizing and reshaping Object connection Object
    • 29. Drag-and-dropDesign Principles Drop candidates must visually indicate theirreceptivity The drag cursor must visually identify the sourceobject Any scrollable drag-and-drop target must auto-scroll Debounce all drags Drag-and-drop
    • 30. OVERVIEWPointingSelectionDrag and DropObject 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