fishnet

1
fishnet

• patrick baudischmicrosoft research,
  visualization and interaction research
• bongshin leeuniversity of maryland, intern at
  microsoft research
• libby hanna
• hanna research consulting

2
summary highlighted search
Microso
US
Blackout
PGA
Microsoft
3
contents

• related workwhy even consider fisheye?
• fishnet design
• user study
• discussion

4
related work

• overview detail meets semantic zooming
• the readers helper graham, chi99
• enhanced thumbnails woodruff, chi01
• popout prism suh, et al., chi02

• focus context fisheye
• bifocal displays bob spence ? next
• generalized fisheye views furnas, chi86
• document lens robertson, uist93
• unifying presentation space carpendale, uist01
• improving focus targeting gutwin, chi02
• 3d probe sonnet, avi04

• non-distorting focus context
• focus-plus-context screens baudisch, chi02
• halo baudisch, chi03

5
why even consider fisheye?

• web pages contain little spatial information
• limit distortion to what is absolutely necessary
• enhance periphery with something usefulsearch
  term popouts
• research question
• for what types of pages does highlighted search
  benefit from fisheye view?

6

• design

7
scrolling, context highlighting
8
use parallel projection
readabilitybottlenecks
content disrupted
tall objectswont shrink
space filling
space filling
space filling




manhattan lens
zoomscapes
central projection
parallel projection

• two tasksthus 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

9
extended highlights
popout prismpopouts interfere (need to turn off
to read)

• implementation place color-full table cell behind

10
context area popouts

• ensure that search terms are readable
• preserves font attribute, such as underline
• shows anchor

11
anchoring
top context
focus area
bottom context
12

• user study

13
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)

?
14

• different from hornbæck frokjær, chi01
• fishnet shows entire page
• integrated navigation
• search term highlighting add utility to context
  areas

15
independent variables
distinguishing columns immaterial necessary
distinguishing rows immaterial task 1 task 2
necessary task 3 task 4
16
task 1 In this page outdated?
baby
disney
video
sale
17
task 2productchoice
512 MB
DVD
XP Home
18
task 3 co-occurrenceof and
Mariners
Mets
19
task 4textanalysis
Clinton
20
and hypotheses
distinguishing columns immaterial necessary
distinguishing rows immaterial favors overview-fisheye favorsfisheye
necessary favors overview favors linear view
product comparison
outdated task
analysis
co-occurrence task
21
results
Linear
Overview
Fisheye
20
18
16
14
12
10
task completion time (in sec)
8
6
4
2
0
productchoice
co-occur-rence
is this pageout-dated?
analysis
? confirmed hypotheses
22
subjectivepreference
task completion time
Out-dated
Product choice
Co-occurrence
Analysis
0
2
4
6
8
10
Time (in sec)
12
14
16

• per interface task
• consistent with task time
• exception overview preferredfor the
  co-occurrence task
• however overall
• 10 participants preferred overview,only 3
  preferred fisheye, none preferred linear
• fisheye view less familiar, more cognitive effort?

18
20
satisfaction
Linear
Overview
Fisheye
8
7
6
5
4
3
2
1
0
Out-dated
Product choice
Co-occurrence
Analysis
23
discussionwhen 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

24
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 youd like to use our fishnet
  prototype

25
thanks!

• read more at
• www.patrickbaudisch.com
• thanks to
• our pilots sara su,jeremy thorpe,duke
  hutchings
• sumit basu
• The VIBE gang

bongshin lee
bongshin lee
bongshin lee
26
(No Transcript)
27
(No Transcript)
28
(No Transcript)
29
Fisheye Mode vs. Overview Mode (1)

• Bringing highlighted search term into
  focus/detail view

overview fisheye
Incremental navigation Incremental navigation Incremental navigation
Need to pan up or down? switch to overview stay
How far to pan? see overview hard to guess
Absolute navigation Absolute navigation Absolute navigation
Direct access to search term fast fast
30
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
31
Fisheye Mode vs. Overview Mode (3)

• Checking the relationship of the aligned popouts

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)
32
Hypotheses

• Tasks where columns matter ? Fisheye
• Tasks where rows matter ? Overview
• Tasks where seeing all matters ? F or O
• Tasks where details matter ? Linear

33
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.23 3.39 3.77 6.12 6.39 5.85 6.58 6.75 6.83
Co-occurrence Good sense of the page as a whole Easy to locate highlighted words Easy to complete the task 3.33 4.17 4.42 6.39 6.00 6.39 4.04 4.04 4.15
Outdated Good sense of the page as a whole Easy to locate highlighted words Easy to complete the task 3.85 3.54 3.46 6.85 6.92 6.92 6.25 6.58 6.58
Analysis Good sense of the page as a whole Easy to locate highlighted words Easy to complete the task 3.85 4.77 5.85 5.85 6.34 5.15 5.08 5.85 4.62
on a scale from 1 to 7, with 1 completely
disagree and 7 completely agree
34
independent variables
distinguishing columns immaterial necessary
distinguishing rows immaterial outdated task ? favors overview fisheye product choice task ? favorsfisheye
necessary co-occurrence task ? favorsoverview analysis task favorslinear View