1. POINTING, SELECTING &
DIRECT MANIPULATION
Old models applied to new technologies…
Presentation for the class: HCI Desktop to Mobile
Lecturer: Dennis Krannich
Place & Time: Uni Bremen, 14. Jan. 2009
Presenters: Mohammad Shahin & Jan Smeddinck
http://www.io.com/~hcexres/power_tools/teams/glove_small.gif
http://www.freewebs.com/sonypsfree/nintendo_ds_lite.jpg
http://scr3.golem.de/screenshots/0807/iPhone_3G/xx_iphone3g_pair.jpg
3. DOMAIN - TERRY WINOGRAD
14 January 2009
From direct manipulation to “being there”:
We interact with the world around us in three main
ways; manipulation, locomotion, and conversation.
manipulation: move things around with hands
locomotion: move oneself from place to place
conversation: say something and another person
says something back
3
http://www.stanford.edu/group/dschool/images/left/people_terry_winograd_top.jpg
4. ABOUT FACE 3.0: THE ESSENTIALS OF
INTERACTION DESIGN
14 January 2009
by Alan Cooper, Robert Reimann, Dave Cronin
A “how-to” book
How to design the user experience based on first
identifying user goals and then building and utilizing
personas to build user-centered interaction
Not all that scientific, but useful
First edition (1995), now: 3.0 (2007)
Today: Chapter 19
www.cooper.com
4
5. DIRECT MANIPULATION
14 January 2009
Definition:
A human-computer interaction style
which involves continuous
representation of objects of interest,
and rapid, reversible, incremental
actions and feedback
5
6. EXAMPLE
14 January 2009
Showing direct manipulation in Windows Explorer
6
7. COINED BY SHNEIDERMAN, 1974
14 January 2009
1. Visual representation of manipulated objects
2. Physical actions instead of text entry
3. Immediately visible impact of the operation 7
8. 7 VARIETIES OF DIRECT MANIPULATION
14 January 2009
1. Pointing
2. Selection
3. Drag and drop
4. Control manipulation
5. Palette tools
6. Object manipulation
7. Object connection
Program manipulation vs. content manipulation
8
http://www.allhatnocattle.net/swiss-knife.jpg
10. USING THE MOUSE
14 January 2009
Mouse buttons
The left mouse button
The right mouse button
The middle mouse button
The scroll wheel
Meta-keys
Pointing and clicking
Pointing
Clicking
Clicking and dragging
Double-clicking
Chord-clicking
10
Double-clicking and dragging
15. EVENTS: MOUSE-UP & MOUSE-DOWN
14 January 2009
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.
15
16. POINTING AND THE CURSOR
14 January 2009
Pliancy and Hinting
Object hinting
Cursor hinting
Wait cursor hinting
16
17. SELECTION
14 January 2009
The act of choosing an object or
control is referred to as selection
Command ordering and selection
verb-object and object-verb order
Discrete and contiguous selection
Mutual exclusion
Additive selection
Group Selection
Insertion and replacement
Visual indication of selection
17
18. PLAYTIME
14 January 2009
http://www.dontclick.it/
18
19. DRAG-N-DROP
14 January 2009
Very powerful idiom!
Efficient: Connects 2 locations with a
function (in 1 move)
source -> target
Drag to new position / window /
function icon (trash)
Interior vs. external
External difficult:
interface standards, target capabilities,
formats, DnD data vs. functions, no standard
Long time little use online. That
changes…
19
e.g. http://www.bbc.co.uk/
20. DRAG-N-DROP - INTERACTIONS
14 January 2009
Forgiving interaction: Encourage users to try out DM
Indicate drop targets
not by cursor-hinting!
No drop-target = no action
Hinting at drag pliancy difficult
Assume: Everything is dragable
Show visual indication while dragging
Use insertion targets, when necessary
Indicate completion
20
21. DRAG-N-DROP - ISSUES
14 January 2009
Auto-scroll! (where to begin,
how fast?)
Not automatic scrollbar
insertion, but automatic
scroll-movement
Selecting vs. dragging
need drag-threshold after
click
Fine scrolling
Exact positioning of dragged
data not always easy
Use meta-keys for fine
resolution
21
Or arrow-keys for positioning
22. DRAG-N-DROP – MOBILE DEVICES
14 January 2009
One hand problem!
Past: Only with stylus…
Currently: Revival with touch screens / multi touch
Future: Important!
22
http://assets.gearlive.com/blogimages/gallery/iphone-113-preview/002-iphone-113-drag-calc_medium.jpg
23. CONTROL MANIPULATION
14 January 2009
Menus used to be difficult click-n-drag
motion
Beginners use menus often, but they are
difficult!
Menus now often “click-based”
Palette Tools:
Modal
Not too many!
Charged cursor
Not for functions!
Good for objects
With mobile devices:
Not yet that important
Will get more important with more tools 23
available
http://z.about.com/d/graphicssoft/1/0/5/P/1/cs2-workspace-2menus.gif
24. OBJECT MANIPULATION
14 January 2009
Repositioning
Click-n-drag in certain area, constrain drags
with meta-keys, snapping
Resizing & reshaping
Where to grab, vertex handles, constrains,
3D object manipulation
Display, input, movement, indication,
shadow, etc., problems
With mobile devices:
Very difficult…
Not often used. Difficult motion. High
24
potential.
25. OBJECT MANIPULATION 3D
14 January 2009
25
http://www.free3dtutorials.com/userimages/dorian/11)-wireframe_view-fig.jpg
http://www.radoxist.com/download/my_works/worht_enough_shade_wire.jpg
26. OBJECT CONNECTION
14 January 2009
Click-n-drag to connect objects
rubberbanding
Find valid target locations
Indicate with handles
Useful to indicate connection /
flow, but no insertion / function
execution
With mobile devices:
Until now hardly ever used…
26
27. EFFICIENCY STATS
14 January 2009
27
Interaction Design for Handheld
Computers
Jesper Kjeldskov and Nikolaj Kolbe
28. CURRENT TRENDS
14 January 2009
Direct Manipulation Web-
Applications (AJAX)
Rich visual feedback
New unsuspected uses
Video Browsing by Direct
Manipulation
http://www.aviz.fr/dimp/dimp-
chi08.pdf
Virtual physical direct
manipulation
BumpTop
http://www.youtube.com/watch?v=M0ODskdEPnQ
Devices: Motion, alignment,
28
position
29. FUTURE – PHYSICAL DIRECT MANIPULATION
14 January 2009
http://cache.gizmodo.com/assets/resources/2007/08/405587346_ba45
30bdbd.jpg
29
30. 3D FUTURE & PERSPECTIVE PRESENCE
14 January 2009
http://www.cs.cmu.edu/~johnny/projects/wii/
http://medien.informatik.uni- 30
bremen.de/research/hci/mrt/
31. FUTURE – DM VS. INTERFACE AGENTS
14 January 2009
Direct Manipulation will stay
important
Become more intuitive
Faster with better feedback
Limits with huge data sets
Agents can help handling that
or: SoundTorch
http://vimeo.com/groups/digmed/videos/2446867
Be polite to users and give
them controls that let them
31
focus on their jobs
http://farm1.static.flickr.com/8/7157243_a5cf2853bc.jpg?v=0