Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee...
-
Upload
lydia-pearson -
Category
Documents
-
view
215 -
download
0
Transcript of Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee...
![Page 1: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/1.jpg)
fishnet
patrick baudischmicrosoft research, visualization and interaction research
bongshin leeuniversity of maryland, intern at microsoft research
libby hanna hanna research & consulting
![Page 2: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/2.jpg)
summary: highlighted search
US
Blackout
PGA
Microsoft
found!
found!
don’t know
don’t know
• highlights tell me “found”• …but cannot tell me “not there”
fishnet
not there!not there!
found!found!
benefit: judge relevanceof web page at a glance
benefit: judge relevanceof web page at a glance
Microso
![Page 3: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/3.jpg)
contents
• related work—why even consider fisheye?
• fishnet design
• user study
• discussion
![Page 4: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/4.jpg)
related work• overview + detail meets semantic zooming
• the reader’s helper [graham, chi’99]• enhanced thumbnails [woodruff, chi’01]• popout prism [suh, et al., chi’02]
• focus + context: fisheye• bifocal displays [bob spence next]• generalized fisheye views [furnas, chi’86]• document lens [robertson, uist’93]• unifying presentation space [carpendale, uist’01]• improving focus targeting [gutwin, chi’02]• 3d probe [sonnet, avi’04]
• non-distorting focus + context• focus-plus-context screens [baudisch, chi’02]• halo [baudisch, chi’03]
![Page 5: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/5.jpg)
why even consider fisheye?
• web pages contain little spatial information
• limit distortion to what is absolutely necessary
• enhance periphery with something useful:search term popouts
research question
• for what types of pages does highlighted search benefit from fisheye view?
![Page 6: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/6.jpg)
design
![Page 7: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/7.jpg)
scrolling, context highlighting
![Page 8: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/8.jpg)
space fillingspace filling
use parallel projection
manhattan lens zoomscapes central projection parallel projection
readabilitybottlenecks
contentdisrupted
tall objectswon’t shrink
• two tasks…thus two resolutions• reading: render as much as possible at full size• skimming: preserve readability of context as well as possible
• homogenous context resolution preserves alignment
space filling
![Page 9: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/9.jpg)
extended highlights
• implementation: place color-full table cell behind
popout prism:popouts interfere(need to turn off to read)
fishnet:similar saliency withextended highlights
![Page 10: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/10.jpg)
context area: popouts
• ensure that search terms are readable
• preserves font attribute, such as underline
• shows anchor
![Page 11: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/11.jpg)
anchoring
focus area
top contextcontext
bottom context
anchor points popout
![Page 12: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/12.jpg)
user study
![Page 13: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/13.jpg)
user study
• goal: when to use fisheye view; when not to use it 4 tasks
• 3 interfaces with comparable functionality• linear: standard internet explorer• overview: left 25% of screen = overview• fisheye: top & bottom 25% = context
• all running on fishnet
• size & aspect ration:• same amount of screen space• fit in professional web pages, 800 pixels wide with overview/context: different aspect ratios
• 13 participants (7 males, 6 females)
![Page 14: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/14.jpg)
• different from [hornbæck & frokjær, chi’01] • fishnet shows entire page• integrated navigation• search term highlighting add utility to context
areas
![Page 15: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/15.jpg)
independent variables…
distinguishing columns immaterial …
…necessary
distinguishing rows immaterial
task 1 task 2
… necessary task 3 task 4
![Page 16: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/16.jpg)
task 1: In this page outdated? babydisney video sale
![Page 17: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/17.jpg)
task 2:productchoice
512 MB
DVD
XP Home
![Page 18: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/18.jpg)
task 3: co-occurrenceof and Mariners Mets
![Page 19: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/19.jpg)
task 4:textanalysis
Clinton
![Page 20: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/20.jpg)
… and hypotheses
distinguishing columns immaterial …
…necessary
distinguishing rows immaterial
favors overview-fisheye favorsfisheye
… necessaryfavors overview favors linear view
outdated task
product comparison
analysis
co-occurrence task
![Page 21: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/21.jpg)
02468
101214161820
productchoice
co-occur-rence
is this pageout-dated?
analysistas
k c
om
ple
tio
n t
ime
(in
sec
)
Linear Overview Fisheye
results
confirmed hypotheses
![Page 22: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/22.jpg)
subjectivepreference
• per interface + task• consistent with task time• exception: overview preferred
for the co-occurrence task
• however overall• 10 participants preferred overview,
only 3 preferred fisheye, none preferred linear• fisheye view less familiar, more cognitive effort?
02
46810
121416
1820
Out-dated Product choice Co-occurrence Analysis
Tim
e (i
n s
ec)
0
1
2
3
4
5
6
7
8
Out-datedProduct choice Co-occurrence Analysis
Linear Overview Fisheye
task completion time
satisfaction
![Page 23: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/23.jpg)
discussion:when to use what?• fisheye views + search term highlighting
results in useful interface
• as expected, there is no black and white wrt fisheye views (thanks Catherine!)
• use fisheye view• if grouping in rows does not matter
• use overview• if grouping in columns does not matter
• consider fisheye & overview on demand• unlike overview, fisheye no page reflow
![Page 24: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/24.jpg)
future work
• this study investigated two task variables
• investigate impact of other variables,such as page length:
• investigate other ways of making the periphery useful semantic zooming
• let me know if you’d like to use our fishnet prototype
![Page 25: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/25.jpg)
bongshin leebongshin lee
thanks!
• read more at• www.patrickbaudisch.com
• thanks to:• our pilots: sara su,
jeremy thorpe,duke hutchings
• sumit basu• The VIBE gang
bongshin lee
![Page 26: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/26.jpg)
![Page 27: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/27.jpg)
![Page 28: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/28.jpg)
a b c d
![Page 29: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/29.jpg)
Fisheye Mode vs. Overview Mode (1)
• Bringing highlighted search term into focus/detail view
overview fisheye
Incremental navigation
Need to pan up or down? switch to overview stay
How far to pan? see overview hard to guess
Absolute navigation
Direct access to search term fast fast
![Page 30: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/30.jpg)
Fisheye Mode vs. Overview Mode (2)
• Readability/Utilization of overview/context area dependence of page length
Page length Overview Fisheye
Short enough to fit wastes space hide context area
One page and a bit wastes space still readable
Very long page some distortion too dense to read
![Page 31: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/31.jpg)
Overview Fisheye
same row can check in overview
(but risk of occlusions)
too dense to check
same column can check in overview
(but risk of occlusions)
easy (aligned)
Fisheye Mode vs. Overview Mode (3)
• Checking the relationship of the aligned popouts
![Page 32: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/32.jpg)
Hypotheses
• Tasks where columns matter Fisheye• Tasks where rows matter Overview• Tasks where seeing all matters F or O• Tasks where details matter Linear
![Page 33: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/33.jpg)
Results – Subject Preference
Task Linear Overview Fisheye
Product choice Good sense of the page as a whole Easy to locate highlighted words Easy to complete the task
3.233.393.77
6.126.395.85
6.586.756.83
Co-occurrence Good sense of the page as a whole Easy to locate highlighted words Easy to complete the task
3.334.174.42
6.396.006.39
4.044.044.15
Outdated Good sense of the page as a whole Easy to locate highlighted words Easy to complete the task
3.853.543.46
6.856.926.92
6.256.586.58
Analysis Good sense of the page as a whole Easy to locate highlighted words Easy to complete the task
3.854.775.85
5.856.345.15
5.085.854.62
on a scale from 1 to 7, with 1 = completely disagree and 7 = completely agree
![Page 34: Fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby.](https://reader035.fdocuments.us/reader035/viewer/2022062720/56649f165503460f94c2c386/html5/thumbnails/34.jpg)
independent variables…
distinguishing columns immaterial …
…necessary
distinguishing rows immaterial
outdated task
favors overview & fisheye
product choice task favorsfisheye
… necessaryco-occurrence task
favorsoverview
analysis taskfavorslinear View