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

339
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
339
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

    ×