Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Techniques for Interacting with Off-Screen Content
-
Upload
richelle-lucas -
Category
Documents
-
view
27 -
download
1
description
Transcript of Techniques for Interacting with Off-Screen Content
![Page 1: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/1.jpg)
Techniques for Interacting with Off-Screen Content
Pourang Irani Carl GutwinUniversity of Manitoba University of Saskatchewan
Grant Partridge Mahtab NezhadaslUniversity of Manitoba University of Manitoba
![Page 2: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/2.jpg)
R
R
R
R
R
R
R
M
M
M
M
Introduction
![Page 3: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/3.jpg)
2D navigation: Time Multiplexing
R
R
R
R
R
R
R
R
M
M
M
M
Zooming
![Page 4: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/4.jpg)
2D navigation: Space Multiplexing
R
R
R
R
R
R
R
R
M
M
M
M
Overview+Detail DragMag
R
R
R
R
R
R
R
M
M
M
M
![Page 5: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/5.jpg)
Proxy-based techniques
[Baudisch et al., 2003] [Bezerianos and Balakrishnan, 2005]
![Page 6: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/6.jpg)
RR
2D navigation: Proxy
Hop (Halo + Proxies)
R
M
![Page 7: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/7.jpg)
Tasks
• Baudisch & Rosenholtz [2003]
– “Position”– “Closest”– “Avoid”
• Spatially Absolute– Existence, Count, Location
• Spatially Relative – Proximity to reference, Proximity b/w objects, Cluster
![Page 8: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/8.jpg)
Evaluation: Conditions
• Navigation Techniques– Zoom - two-level zoom– DragMag – Hop
• Tasks– Absolute– Relative
![Page 9: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/9.jpg)
Zooming
![Page 10: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/10.jpg)
DragMag
![Page 11: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/11.jpg)
Hop
![Page 12: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/12.jpg)
Results: Completion Time
0
10
20
30
40
50
60
70
Existence ObjectCount
Location ProximitybetweenObjects
Proximityfrom
Reference
Cluster
Spatially Absolute Tasks Spatially Relative Tasks
HopDragMagZoom
Tim
e (s
ecs
)
0
10
20
30
40
50
60
70
Existence ObjectCount
Location ProximitybetweenObjects
Proximityfrom
Reference
Cluster
Spatially Absolute Tasks Spatially Relative Tasks
HopDragMagZoom
HopDragMagZoom
Tim
e (s
ecs
)
![Page 13: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/13.jpg)
Possible explanations – strategy
• Number of operations about 1/5 with hop
• Zooming requires more “trips” …– not so good for absolute tasks
• … but good for spatial information– useful for relative tasks
• DragMag reduced the number of “trips”– allows users to perform relative tasks with ease– but added complexity of managing windows
![Page 14: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/14.jpg)
Possible explanations – task-based• Relative tasks
– Need orientation and comparisons b/w views– Rely on VSTM
• Absolute tasks– Require information about the objects– Do not require spatial/orientation information
![Page 15: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/15.jpg)
WinHop (hop + windows)
![Page 16: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/16.jpg)
WinHop
![Page 17: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/17.jpg)
WinHop
![Page 18: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/18.jpg)
WinHop
![Page 19: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/19.jpg)
WinHop
![Page 20: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/20.jpg)
WinHop
![Page 21: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/21.jpg)
WinHop (video)
![Page 22: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/22.jpg)
MultiscaleZoom
![Page 23: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/23.jpg)
MultiscaleZoom
![Page 24: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/24.jpg)
MultiscaleZoom (video)
![Page 25: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/25.jpg)
Absolute: Location (winhop)
![Page 26: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/26.jpg)
Relative: Cluster (msz)
![Page 27: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/27.jpg)
Results
0
10
20
30
40
50
60
70
Existence
Multiscale-ZoomWinHopHopDragMagZoom
Spatially Absolute Tasks Spatially Relative Tasks
Tim
e (s
ecs
)
ObjectCount
Location ProximitybetweenObjects
Proximityfrom
Reference
Cluster0
10
20
30
40
50
60
70
Existence
Multiscale-ZoomWinHopHopDragMagZoom
Multiscale-ZoomWinHopHopDragMagZoom
Spatially Absolute Tasks Spatially Relative Tasks
Tim
e (s
ecs
)
ObjectCount
Location ProximitybetweenObjects
Proximityfrom
Reference
Cluster
![Page 28: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/28.jpg)
Limitations of Hybrid Techniques
• WinHop– Many operations, significant learning curve
• MultiScale Zoom– Clutter from proxies
![Page 29: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/29.jpg)
Main Findings
• Each task requires a different navigation strategy
• Proxy-based ideal for target-only info tasks
• Time/Space multiplexing ideal for target-target info
• Hybrids improve performance in both types of tasks
• Performance with Multiscale Zoom remained constant
![Page 30: Techniques for Interacting with Off-Screen Content](https://reader030.fdocuments.in/reader030/viewer/2022032605/56812c67550346895d90fd76/html5/thumbnails/30.jpg)
Conclusion
• Beneficial to investigate techniques on multiple tasks
• Ideal technique gives target and context information
• Hybrid techniques are reliably good– Consider multiscale zoom for small displays
• Hybrids performance on other tasks