SlideShare a Scribd company logo
1 of 37
Boomerang: Suspendable Drag-and-Drop Interactions Based on a Throw-and-Catch Metaphor Masatomo Kobayashi Takeo Igarashi (The University of Tokyo)
Outline Background & Motivation Our Approach Early Feedback Conclusion & Future Work
Background Drag & drop is versatile and easy to use. Move Copy Create a shortcut Open (Application specific operations)
Problems while dragging Demo
[object Object],[object Object],[object Object],[object Object],[object Object],Problems while dragging Window-scrolling, switching, etc. are difficult or impossible while dragging.
Problems while dragging    Difficult or impossible while dragging. Switching the active window Scrolling a window Opening a deep folder Switching the active view
Previous work Window-switching Window-scrolling Hovering-based interactions are less efficient than clicking-based ones. hovering hovering
Previous work Using heuristics/prediction Window-switching Fold & Drop [Dragicevic 2004] Drag & Guess [Nishida & Igarashi 2007] Drag & Pop [Baudisch et al. 2003] Many other operations are still difficult or impossible. Rock & Roll [Chapuis & Roussel 2007]
How can we make it possible to perform various operations before dropping, without designing and learning alternative interactions for each operation?
Outline Background & Motivation Our Approach Early Feedback Conclusion & Future Work
Suspending a dragging operation Catch Throw Suspend  dragging Resume  dragging Any operation
Suspending a dragging operation Demo
Demo summary ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Differences between boomerang  and  cut-and-paste ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Boomerang  is an extension of  drag-and-drop .
Differences between boomerang  and  cut-and-paste ,[object Object],[object Object],Boomerang  is an extension of  drag-and-drop .
Differences between boomerang  and  flicking   ,[object Object],[object Object],Boomerang  is an extension of  drag-and-drop .
How to throw an item & catch it Release the mouse button while dragging Throw Catch Spinning Mark Move the cursor near the mark and press the mouse button
How to throw an item & catch it Release v  >   v 1 v   <  v 2 S 1 S 0 Tracking Dragging S 2 S 3 Tracking Dragging Release Press Drop Throw Press Catch
How to manage a group Make a group Drop item(s) onto thrown item(s) Drag the group Drag the center of the group Separate an item Drag the item directly
How to copy/delete item(s) Copy Throw item(s) upward Delete Throw item(s) downward
How to copy/delete item(s) Copy Delete (Nothing) (Nothing) (Nothing) (Nothing) (Nothing) (Nothing)
Outline Background & Motivation Our Approach Early Feedback Conclusion & Future Work
Informal study ,[object Object],[object Object]
Early Feedback    Will be useful Feature Feedback Throw-and-catch Grouping Copying, deleting    Exciting    Maybe difficult for novices    Will be useful    Easy to use    Difficult to use    Likely causes errors
Early Feedback Boomerang will be useful. The throw-and-catch interaction is exiting…! Grouping is easy to use.   
Early Feedback The throwing gesture is difficult for novices, isn’t it? 
Early Feedback The copying/deleting feature likely interferes normal throwing gestures…!  I just wanted to throw, but the item was copied.
Early Feedback A mark makes it impossible to interact with the item under the mark.  I cannot click this folder.
Outline Background & Motivation Our Approach Early Feedback Conclusion & Future Work
Conclusion The throw-and-catch interaction makes dragging operations suspendable. Catch Throw Any operation Boomerang supports grouping, copying, & deleting. Grouping Copying Deleting
Conclusion Temporary Glass Pane Gesture
Conclusion A simple gesture can enhance a common WIMP interface, preserving existing functionalities.
Limitations ,[object Object],[object Object]
Limitations ,[object Object],[object Object]
Limitations ,[object Object],[object Object]
Future Work Perform experiments to assess the advantages and disadvantages of the boomerang technique. Window-switching Window-scrolling ?   Can it improve the performance? ?   How does the user fail to throw and catch?
Thank you.

More Related Content

Similar to Boomerang

Animations in User interfaces
Animations in User interfacesAnimations in User interfaces
Animations in User interfaces
Kim Nørskov
 
Job Aid Makeover - Captivate
Job Aid Makeover - CaptivateJob Aid Makeover - Captivate
Job Aid Makeover - Captivate
S. Rose
 
"Do I have your attention?" Chris Atherton at UX Cambridge 2014
"Do I have your attention?" Chris Atherton at UX Cambridge 2014"Do I have your attention?" Chris Atherton at UX Cambridge 2014
"Do I have your attention?" Chris Atherton at UX Cambridge 2014
Chris Atherton @finiteattention
 
Jing Screen Captures And Screen Casts
Jing Screen Captures And Screen CastsJing Screen Captures And Screen Casts
Jing Screen Captures And Screen Casts
Anne Negus
 
Sample Storyboard Computers 101
Sample Storyboard Computers 101Sample Storyboard Computers 101
Sample Storyboard Computers 101
Jacqueline Lewis
 

Similar to Boomerang (20)

Animations in User interfaces
Animations in User interfacesAnimations in User interfaces
Animations in User interfaces
 
Application Design - Part 3
Application Design - Part 3Application Design - Part 3
Application Design - Part 3
 
Anti Patterns2008
Anti Patterns2008Anti Patterns2008
Anti Patterns2008
 
Movement Pursuits
Movement PursuitsMovement Pursuits
Movement Pursuits
 
"Do I have your attention?" Chris Atherton at UX Cambridge 2014
"Do I have your attention?" Chris Atherton at UX Cambridge 2014"Do I have your attention?" Chris Atherton at UX Cambridge 2014
"Do I have your attention?" Chris Atherton at UX Cambridge 2014
 
[Individual presentation] android fragment
[Individual presentation] android fragment[Individual presentation] android fragment
[Individual presentation] android fragment
 
Web Animations
Web AnimationsWeb Animations
Web Animations
 
Job Aid Makeover - Captivate
Job Aid Makeover - CaptivateJob Aid Makeover - Captivate
Job Aid Makeover - Captivate
 
"Do I have your attention?" Chris Atherton at UX Cambridge 2014
"Do I have your attention?" Chris Atherton at UX Cambridge 2014"Do I have your attention?" Chris Atherton at UX Cambridge 2014
"Do I have your attention?" Chris Atherton at UX Cambridge 2014
 
Usability
UsabilityUsability
Usability
 
Gestalt principles
Gestalt principlesGestalt principles
Gestalt principles
 
Jing Screen Captures And Screen Casts
Jing Screen Captures And Screen CastsJing Screen Captures And Screen Casts
Jing Screen Captures And Screen Casts
 
Newbie UX: Something I learned about UX (Business vs Design)
Newbie UX: Something I learned about UX (Business vs Design)Newbie UX: Something I learned about UX (Business vs Design)
Newbie UX: Something I learned about UX (Business vs Design)
 
HCI Group Project Presentation
HCI Group Project PresentationHCI Group Project Presentation
HCI Group Project Presentation
 
Featuring Whiteboards
Featuring WhiteboardsFeaturing Whiteboards
Featuring Whiteboards
 
Sample Storyboard Computers 101
Sample Storyboard Computers 101Sample Storyboard Computers 101
Sample Storyboard Computers 101
 
Eblogger tools
Eblogger toolsEblogger tools
Eblogger tools
 
Swift Paris - Dealing The Cards
Swift Paris - Dealing The CardsSwift Paris - Dealing The Cards
Swift Paris - Dealing The Cards
 
UX London Redux - Dan Saffer
UX London Redux - Dan SafferUX London Redux - Dan Saffer
UX London Redux - Dan Saffer
 
Geogebra for physics
Geogebra for physicsGeogebra for physics
Geogebra for physics
 

Recently uploaded

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 

Boomerang

  • 1. Boomerang: Suspendable Drag-and-Drop Interactions Based on a Throw-and-Catch Metaphor Masatomo Kobayashi Takeo Igarashi (The University of Tokyo)
  • 2. Outline Background & Motivation Our Approach Early Feedback Conclusion & Future Work
  • 3. Background Drag & drop is versatile and easy to use. Move Copy Create a shortcut Open (Application specific operations)
  • 5.
  • 6. Problems while dragging  Difficult or impossible while dragging. Switching the active window Scrolling a window Opening a deep folder Switching the active view
  • 7. Previous work Window-switching Window-scrolling Hovering-based interactions are less efficient than clicking-based ones. hovering hovering
  • 8. Previous work Using heuristics/prediction Window-switching Fold & Drop [Dragicevic 2004] Drag & Guess [Nishida & Igarashi 2007] Drag & Pop [Baudisch et al. 2003] Many other operations are still difficult or impossible. Rock & Roll [Chapuis & Roussel 2007]
  • 9. How can we make it possible to perform various operations before dropping, without designing and learning alternative interactions for each operation?
  • 10. Outline Background & Motivation Our Approach Early Feedback Conclusion & Future Work
  • 11. Suspending a dragging operation Catch Throw Suspend dragging Resume dragging Any operation
  • 12. Suspending a dragging operation Demo
  • 13.
  • 14.
  • 15.
  • 16.
  • 17. How to throw an item & catch it Release the mouse button while dragging Throw Catch Spinning Mark Move the cursor near the mark and press the mouse button
  • 18. How to throw an item & catch it Release v > v 1 v < v 2 S 1 S 0 Tracking Dragging S 2 S 3 Tracking Dragging Release Press Drop Throw Press Catch
  • 19. How to manage a group Make a group Drop item(s) onto thrown item(s) Drag the group Drag the center of the group Separate an item Drag the item directly
  • 20. How to copy/delete item(s) Copy Throw item(s) upward Delete Throw item(s) downward
  • 21. How to copy/delete item(s) Copy Delete (Nothing) (Nothing) (Nothing) (Nothing) (Nothing) (Nothing)
  • 22. Outline Background & Motivation Our Approach Early Feedback Conclusion & Future Work
  • 23.
  • 24. Early Feedback  Will be useful Feature Feedback Throw-and-catch Grouping Copying, deleting  Exciting  Maybe difficult for novices  Will be useful  Easy to use  Difficult to use  Likely causes errors
  • 25. Early Feedback Boomerang will be useful. The throw-and-catch interaction is exiting…! Grouping is easy to use.   
  • 26. Early Feedback The throwing gesture is difficult for novices, isn’t it? 
  • 27. Early Feedback The copying/deleting feature likely interferes normal throwing gestures…!  I just wanted to throw, but the item was copied.
  • 28. Early Feedback A mark makes it impossible to interact with the item under the mark.  I cannot click this folder.
  • 29. Outline Background & Motivation Our Approach Early Feedback Conclusion & Future Work
  • 30. Conclusion The throw-and-catch interaction makes dragging operations suspendable. Catch Throw Any operation Boomerang supports grouping, copying, & deleting. Grouping Copying Deleting
  • 32. Conclusion A simple gesture can enhance a common WIMP interface, preserving existing functionalities.
  • 33.
  • 34.
  • 35.
  • 36. Future Work Perform experiments to assess the advantages and disadvantages of the boomerang technique. Window-switching Window-scrolling ? Can it improve the performance? ? How does the user fail to throw and catch?