Your SlideShare is downloading. ×
0
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
Pointing, Selecting & Direct Manipulation
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 & Direct Manipulation

1,881

Published on

Presentation on interaction design and hci. Summary of some book chapters of About Face 3.0

Presentation on interaction design and hci. Summary of some book chapters of About Face 3.0

Published in: Education, Technology, Business
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,881
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
58
Comments
1
Likes
3
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

Transcript

  • 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

×