D-menus

1,667 views

Published on

Considering the Direction of Cursor Movement for Efficient Traversal of Cascading Menus (presented at UIST 2003)

Published in: Economy & Finance, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,667
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

D-menus

  1. 1. Considering the Direction of Cursor Movement for Efficient Traversal of Cascading Menus (TechNote) Masatomo Kobayashi Takeo Igarashi The University of Tokyo
  2. 2. Outline <ul><li>Problems to Solve </li></ul><ul><li>Our Solution </li></ul><ul><li>Evaluation </li></ul><ul><li>Conclusion </li></ul>Considering the Direction of Cursor Movement ...
  3. 3. Problems to Solve <ul><li>Unnecessary submenu appearance </li></ul><ul><li>Long, long paths </li></ul><ul><li>Irregular overlapping of menus </li></ul>Considering the Direction of Cursor Movement ... (a) (b) (c) 1. Problems to Solve
  4. 4. Traditional Cascading Menu Demo Considering the Direction of Cursor Movement ... 1. Problems to Solve
  5. 5. Unnecessary Submenu Appearance <ul><li>Submenus pop up unnecessarily during vertical motion. </li></ul><ul><ul><li>Increasing delay reduces the operating speed. </li></ul></ul>Considering the Direction of Cursor Movement ... 1. Problems to Solve
  6. 6. Long, long Paths <ul><li>Long/narrow paths reduce the efficiency of mouse operations. </li></ul><ul><ul><li>Steering law [Accot and Zhai 1997] </li></ul></ul>Considering the Direction of Cursor Movement ... 1. Problems to Solve
  7. 7. Irregular Overlapping of Menus <ul><li>Menu chains often need to be folded back at the sides of the screen. </li></ul>Considering the Direction of Cursor Movement ... 1. Problems to Solve
  8. 8. Outline <ul><li>Problems to Solve </li></ul><ul><li>Our Solution </li></ul><ul><li>Evaluation </li></ul><ul><li>Conclusion </li></ul>Considering the Direction of Cursor Movement ...
  9. 9. Our Solution <ul><li>Considering the Movement Direction </li></ul><ul><li>Overlapping menus </li></ul>Considering the Direction of Cursor Movement ... (a) (b) 2. Our Solution
  10. 10. Considering the Movement Direction (1/2) Considering the Direction of Cursor Movement ... Open a submenu / Select an item Close the menu Up the selection Down the selection <ul><li>We use movement direction of the cursor in addition to absolute position. </li></ul>2. Our Solution
  11. 11. Considering the Movement Direction (2/2) <ul><li>No submenus pop up unnecessarily. </li></ul>Considering the Direction of Cursor Movement ... 2. Our Solution
  12. 12. Overlapping menus (1/2) <ul><li>Submenus pop up at the position where horizontal motion occurs . </li></ul><ul><li>This feature causes few movement errors. </li></ul>Considering the Direction of Cursor Movement ... The path is not long or narrow. . 2. Our Solution
  13. 13. Overlapping menus (2/2) <ul><li>Overlapped menus are ordered by hierarchy. </li></ul>Considering the Direction of Cursor Movement ... Level 1 Level 2 Level 3 Level 4 Not irregular overlapping . 2. Our Solution
  14. 14. Our Cascading Menu Demo Considering the Direction of Cursor Movement ... 2. Our Solution
  15. 15. <ul><li>Problems to Solve </li></ul><ul><li>Our Solution </li></ul><ul><li>Evaluation </li></ul><ul><li>Conclusion </li></ul>Outline Considering the Direction of Cursor Movement ...
  16. 16. Evaluation <ul><li>10 participants × 36 trials × 2 menus </li></ul><ul><li>360 trials of menu-selection for each menu </li></ul><ul><li>2-5 hierarchical levels of target items </li></ul>Considering the Direction of Cursor Movement ... i) Traditional menu ii) Our direction-based menu Instruction on the target item 3. Evaluation
  17. 17. Menus Used in the Experiment Demo Considering the Direction of Cursor Movement ... 3. Evaluation
  18. 18. Result (1/2) Considering the Direction of Cursor Movement ... Selection time Movement path length Unexpected submenu appearance (sec) (kilopixels) Traditional Proposed (per trial) 3. Evaluation
  19. 19. Result (2/2) <ul><li>Users’ preference </li></ul>Considering the Direction of Cursor Movement ... 3. Evaluation Traditional Proposed Others
  20. 20. <ul><li>Problems to Solve </li></ul><ul><li>Our Solution </li></ul><ul><li>Evaluation </li></ul><ul><li>Conclusion </li></ul>Outline Considering the Direction of Cursor Movement ...
  21. 21. Discussion (1/2) <ul><li>Our techniques can be applied to menu systems that have a traditional appearance. </li></ul><ul><ul><li>Easy to implement on existing systems. </li></ul></ul><ul><ul><li>Easy to use for existing users. </li></ul></ul><ul><ul><li>Easy to use with existing devices. </li></ul></ul>Considering the Direction of Cursor Movement ... 4. Conclusion
  22. 22. Discussion (2/2) <ul><li>The proposed system reduced: </li></ul><ul><ul><li>Unexpected submenu appearance </li></ul></ul><ul><ul><li>Selection time </li></ul></ul><ul><ul><li>Movement path length </li></ul></ul><ul><li>Our techniques are effective at least when the user knows which menu contains the target item. </li></ul>Considering the Direction of Cursor Movement ... 4. Conclusion
  23. 23. Limitations <ul><li>Our techniques might not be effective when the user doesn’t know where the target is. </li></ul>Considering the Direction of Cursor Movement ... “ Unnecessary submenu appearance” is preferable for browsing menus and searching unknown items. 4. Conclusion
  24. 24. Conclusion <ul><li>We proposed a direction-based cascading menu. </li></ul><ul><li>Evaluation showed that our techniques could improve the performance of menu traversal. </li></ul>Considering the Direction of Cursor Movement ... We think various GUI widgets can be improved with a little refinement... 4. Conclusion
  25. 25. Thank you
  26. 27. Menu Traversal of Traditional Systems <ul><li>Vertical motion  Changes the selection </li></ul><ul><li>Wait  Opens a submenu </li></ul><ul><li>Horizontal motion  Traverses menus </li></ul>Considering the Direction of Cursor Movement ... 0. Appendix
  27. 28. Menu Traversal of Our System <ul><li>Users can use our system like traditional systems. </li></ul>Considering the Direction of Cursor Movement ... 0. Appendix
  28. 29. Unnecessary Submenu Appearance <ul><li>Increasing the delay reduces the speed of the operation. </li></ul>Considering the Direction of Cursor Movement ... 0. Appendix
  29. 30. Long and Narrow Paths <ul><li>Steering law [Accot and Zhai 1997] </li></ul><ul><li>Movement errors </li></ul>Considering the Direction of Cursor Movement ... 0. Appendix
  30. 31. Irregular Overlapping of Menus <ul><li>When there is not enough space to the right of the menu. </li></ul>Considering the Direction of Cursor Movement ... 0. Appendix
  31. 32. vs. Circular/Marking Menus <ul><li>The hierarchical structure of the menus is visually clear. </li></ul>Considering the Direction of Cursor Movement ... 0. Appendix
  32. 33. Offsets between Submenus and Parent Menus <ul><li>The hierarchical structure of the menus is visually clear. </li></ul>Considering the Direction of Cursor Movement ... 0. Appendix
  33. 34. The Hierarchical Structure of the Menus <ul><li>e.g. In a lecture... </li></ul><ul><ul><li>If the structure is invisible, it is difficult for students to follow teacher’s operation. </li></ul></ul>Considering the Direction of Cursor Movement ... 0. Appendix
  34. 35. Location Adjustment of Submenus <ul><li>If there is not enough space below or to the right of the menu... </li></ul>Considering the Direction of Cursor Movement ... Bottom Right Side 0. Appendix
  35. 36. Significance of the Results <ul><li>Unexpected submenu appearance </li></ul><ul><ul><li>10/10 improved p < .005 </li></ul></ul><ul><li>Selection time </li></ul><ul><ul><li>9/10 improved p < .005 </li></ul></ul><ul><li>Movement path length </li></ul><ul><ul><li>10/10 improved p < .005 </li></ul></ul>Considering the Direction of Cursor Movement ... (We used the Wilcoxon signed-ranks test) 0. Appendix

×