Melange: Space Folding for Multi-Focus Interaction

1,127 views

Published on

Interaction and navigation in large geometric spaces typically require a sequence of pan and zoom actions. This strategy is often ineffective and cumbersome, especially when trying to study several distant objects. We propose a new distortion technique that folds the intervening space to guarantee visibility of multiple focus regions. The folds themselves show contextual information and support unfolding and paging interactions. Compared to previous work, our method provides more context and distance awareness. We conducted a study comparing the space-folding technique to existing approaches, and found that participants performed significantly better with the new technique.

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,127
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Melange: Space Folding for Multi-Focus Interaction

    1. 1. Mélange Space Folding for Multi-Focus Interaction Niklas Elmqvist Nathalie Henry Yann Riche Jean-Daniel Fekete CHI 2008 – Florence, Italy
    2. 2. Motivation <ul><li>Large visual spaces in information visualization </li></ul><ul><ul><li>Social networks </li></ul></ul><ul><li>Several focus points </li></ul><ul><ul><li>High precision </li></ul></ul><ul><ul><li>High detail </li></ul></ul><ul><ul><li>Overview? </li></ul></ul><ul><li>Multi-focus interaction </li></ul>
    3. 3. Multi-Focus Interaction <ul><li>Example : Planning a trip to Florence </li></ul>distance?
    4. 4. Solution: Split-Screen <ul><li>Show the foci as two different views </li></ul>?
    5. 5. Mélange <ul><li>Demonstration! </li></ul>
    6. 6. Generalizing Requirements <ul><li>G1: Guaranteed focus visibility </li></ul><ul><ul><ul><li>Montreal and Florence </li></ul></ul></ul><ul><li>G2: Surrounding context visibility </li></ul><ul><ul><ul><li>Local area around Montreal and Florence </li></ul></ul></ul><ul><li>G3 : Intervening context awareness </li></ul><ul><ul><ul><li>Relative positions, detours (interesting places?) </li></ul></ul></ul><ul><li>G4 : Distance awareness </li></ul><ul><ul><ul><li>Approximate trip distance </li></ul></ul></ul>
    7. 7. Related Work: Space Distortion <ul><li>Fisheye views </li></ul><ul><ul><li>[Furnas 1986, Shoemaker 2007] </li></ul></ul><ul><li>Rubber sheet </li></ul><ul><ul><li>[Sarkar 1993, Munzner 2003] </li></ul></ul>
    8. 8. Related Work: Semantic Distortion <ul><li>DOITrees [Card 2002] </li></ul><ul><li>SpaceTree [Plaisant 2002] </li></ul>
    9. 9. Space-folding using Mélange
    10. 10. Basic Idea
    11. 11. Visualizing Folds open fold page closed fold pages focus A focus B mouse cursor
    12. 12. Implementation <ul><li>Java platform built using OpenGL </li></ul><ul><ul><li>JOGL bindings </li></ul></ul><ul><li>Scene graph w/ geometrical shapes </li></ul><ul><ul><li>Arcs, circles, rectangles (textured), etc </li></ul></ul><ul><li>Focus points (one primary) controlled by user and/or application </li></ul><ul><li>Mélange canvas guarantees visibility </li></ul><ul><ul><li>Seamlessly splits shapes into subshapes </li></ul></ul>
    13. 13. Evaluation
    14. 14. Evaluation - Overview <ul><li>Controlled Experiment </li></ul><ul><li>Based on social networks analysis: compare the immediate context of two distant connected nodes </li></ul>MatLink: social network analysis using matrices [Henry&Fekete @ Interact 2007]
    15. 15. Evaluation - Overview <ul><li>Controlled Experiment </li></ul><ul><li>Based on social networks analysis: compare the immediate context of two distant connected nodes </li></ul>MatLink: social network analysis using matrices [Henry&Fekete @ Interact 2007]
    16. 16. Evaluation - Overview <ul><li>Controlled Experiment </li></ul><ul><li>Based on social networks analysis: compare the immediate context of two distant connected nodes </li></ul>MatLink: social network analysis using matrices [Henry&Fekete @ Interact 2007]
    17. 17. Evaluation - Overview <ul><li>Controlled Experiment </li></ul><ul><li>Based on social networks analysis: compare the immediate context of two distant connected nodes </li></ul>MatLink: social network analysis using matrices [Henry&Fekete @ Interact 2007]
    18. 18. Evaluation - Overview <ul><li>1 trial consisted in 3 tasks </li></ul><ul><ul><li>(T1) Find the connected twin of the source node </li></ul></ul><ul><ul><li>(T2) Estimate the distance between the two nodes </li></ul></ul><ul><ul><li>(T3) Estimate the number of contextual features </li></ul></ul>Distractor Nodes Connected Twin Node Source Node
    19. 19. Evaluation - Overview <ul><li>1 trial consisted in 3 tasks </li></ul><ul><ul><li>(T1) Find the connected twin of the source node </li></ul></ul><ul><ul><li>(T2) Estimate the distance between the two nodes </li></ul></ul><ul><ul><li>(T3) Estimate the number of contextual features </li></ul></ul>1 Screen Target Node Contextual Features Source Node
    20. 20. Evaluation - Factors <ul><li>3x3x2x2 within-subject design </li></ul><ul><li>3 Presentation techniques, interaction with PZ </li></ul><ul><ul><li>Single Viewport (SV) </li></ul></ul><ul><ul><li>Split-Screen Viewport (SSV) </li></ul></ul><ul><ul><li>Melange (M) </li></ul></ul><ul><li>3 Off-Screen Distance : 4, 8 or 16 screens (distance between the two nodes) </li></ul><ul><li>2 Distractor density : low or high (1 or 2 per screen) (number of false targets between the two nodes) </li></ul><ul><li>2 Contextual Features density : few (≤5) many (>5) (number of contextual features between the two nodes) </li></ul>
    21. 21. Evaluation - Hypotheses <ul><li>Mélange’s presentation of context does not interfere with navigation </li></ul><ul><li>Mélange’s presentation of context provides significant improvement to: </li></ul><ul><ul><li>Distance awareness </li></ul></ul><ul><ul><li>Contextual features awareness </li></ul></ul>
    22. 22. Evaluation – Results Outline <ul><li>Time </li></ul><ul><ul><li>Finding the twin of the source node (T1) No significant difference in completion time between techniques </li></ul></ul><ul><ul><li>Estimating distance between the nodes (T2) Mélange is significantly faster than both Single Viewport and Split Screen Viewport ( F 2,22 = 8.695, p ≤.05) </li></ul></ul>
    23. 23. Evaluation – Results Outline <ul><li>Time </li></ul><ul><ul><li>Finding the twin of the source node (T1) No significant difference in completion time between techniques </li></ul></ul><ul><ul><li>Estimating distance between the nodes (T2) Mélange is significantly faster than both Single Viewport and Split Screen Viewport ( F 2,22 = 8.695, p ≤.05) </li></ul></ul>
    24. 24. Evaluation – Results Outline <ul><li>Time </li></ul><ul><ul><li>Finding the twin of the source node (T1) No significant difference in completion time between techniques </li></ul></ul><ul><ul><li>Estimating distance between the nodes (T2) Mélange is significantly faster than both Single Viewport and Split Screen Viewport ( F 2,22 = 8.695, p ≤.05) </li></ul></ul>
    25. 25. Evaluation – Results Outline <ul><li>Time </li></ul><ul><ul><li>Finding the twin of the source node (T1) No significant difference in completion time between techniques </li></ul></ul><ul><ul><li>Estimating distance between the nodes (T2) Mélange is significantly faster than both Single Viewport and Split Screen Viewport ( F 2,22 = 8.695, p ≤.05) </li></ul></ul>Time T2 + Time T3 F 2,22 =9.855, p<0.001.
    26. 26. Evaluation – Results Outline <ul><li>Correctness </li></ul><ul><ul><li>Estimating distance between the nodes (T2) Mélange is significantly better than Split Screen Viewport and similar to Single Viewport </li></ul></ul>
    27. 27. Results Summary <ul><li>Mélange provides </li></ul><ul><ul><li>G1: Guaranteed focus visibility </li></ul></ul><ul><ul><li>G2: Surrounding context visibility </li></ul></ul><ul><li>Mélange is significantly more efficient in supporting contextual tasks </li></ul><ul><ul><li>G3 : Intervening context awareness </li></ul></ul><ul><ul><li>G4 : Distance awareness </li></ul></ul><ul><li>Mélange is not slower than the other techniques for navigation </li></ul>
    28. 28. Conclusions and Future Work <ul><li>Presentation technique for supporting multi-focus interaction </li></ul><ul><li>Folds 2D space into 3D to guarantee visibility of focus points </li></ul><ul><li>Evaluation shows significant improvement over state of the art </li></ul><ul><li>Future : Interaction for large spaces, real-world applications </li></ul>
    29. 29. Questions? <ul><li>Contacts ( @lri.fr ): Niklas Elmqvist – elm Nathalie Henry – nhenry Yann Riche – riche Jean-Daniel Fekete – fekete </li></ul>Project website: http://www.lri.fr/~elm/projects/melange.html Thanks to our drummer, Pierre
    30. 30. Related Work Technique G1 G2 G3 G4 Zoom and pan [Appert 2006, Igarashi 2000] - - - - Split-screen [Shoemaker 2007] Y Y - - Fisheye views [Furnas 1986, Shoemaker 2007] Y P Y - Rubber sheet [Sarkar 1993, Munzner 2007] P P Y P Semantic distortion [Card 2002, Plaisant 2002] Y Y Y -

    ×