Pointing, Selecting & Direct Manipulation
4 likes2,969 views
This document provides an overview of direct manipulation techniques for desktop and mobile interfaces. It discusses pointing, selection, drag and drop, control manipulation, palette tools, object manipulation, and object connection. Examples are given for each technique. The document also discusses domain expert Terry Winograd and the book About Face 3.0. It notes current trends in direct manipulation for web applications and rich visual feedback.
Pointing, Selecting & Direct Manipulation
- 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
- 2. DIRECT MANIPULATION – REDUCE COMPLEXITY 14 January 2009 2
- 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
- 9. POINTING DEVICES 14 January 2009 The mouse Alternatives: Light Pens / CRTs Trackball Tablets Touchpads Touchscreens 9
- 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
- 11. 14 January 2009 11 POINTING
- 12. 14 January 2009 12 CLICKING
- 13. CLICKING & DRAGGING 14 January 2009 13
- 14. DOUBLE-CLICKING 14 January 2009 14
- 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
- 32. 14 January 2009 32 QUESTIONS