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