View
217
Download
0
Category
Tags:
Preview:
Citation preview
fishnet
patrick baudischmicrosoft research, visualization and interaction research
bongshin leeuniversity of maryland, intern at microsoft research
libby hanna hanna research & consulting
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
contents
• related work—why even consider fisheye?
• fishnet design
• user study
• discussion
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]
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?
design
scrolling, context highlighting
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
extended highlights
• implementation: place color-full table cell behind
popout prism:popouts interfere(need to turn off to read)
fishnet:similar saliency withextended highlights
context area: popouts
• ensure that search terms are readable
• preserves font attribute, such as underline
• shows anchor
anchoring
focus area
top contextcontext
bottom context
anchor points popout
user study
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)
• different from [hornbæck & frokjær, chi’01] • fishnet shows entire page• integrated navigation• search term highlighting add utility to context
areas
independent variables…
distinguishing columns immaterial …
…necessary
distinguishing rows immaterial
task 1 task 2
… necessary task 3 task 4
task 1: In this page outdated? babydisney video sale
task 2:productchoice
512 MB
DVD
XP Home
task 3: co-occurrenceof and Mariners Mets
task 4:textanalysis
Clinton
… 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
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
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
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
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
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
a b c d
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
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
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
Hypotheses
• Tasks where columns matter Fisheye• Tasks where rows matter Overview• Tasks where seeing all matters F or O• Tasks where details matter Linear
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
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
Recommended