1. fishnet patrick baudisch microsoft research, visualization and interaction research bongshin lee university of maryland, intern at microsoft research libby hanna hanna research & consulting

2. summary: highlighted search US Blackout PGA Microsoft found! don’t know highlights tell me “found” …but cannot tell me “not there”  fishnet not there! found! benefit: judge relevance of web page at a glance Microso

3. contents related work—why even consider fisheye? fishnet design user study discussion

4. 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]

5. 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?

6. design

7. scrolling, context highlighting

8. space filling use parallel projection manhattan lenszoomscapescentral projectionparallel projection readability bottlenecks content disrupted tall objects won’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

9. extended highlights implementation: place color-full table cell behind popout prism: popouts interfere (need to turn off to read) fishnet: similar saliency with extended highlights

10. context area: popouts ensure that search terms are readable preserves font attribute, such as underline shows anchor

11. anchoring focus area context top context bottom context anchor points popout

12. user study

13. 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, chi’01] 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 1task 2 … necessarytask 3task 4

16. task 1: In this page outdated? babydisneyvideosale

17. task 2: product choice 512 MB DVD XP Home

18. task 3: co-occurrence of and MarinersMets

19. task 4: text analysis Clinton

20. … and hypotheses distinguishing columns immaterial … …necessary distinguishing rows immaterial favors overview-fisheyefavors fisheye … necessary favors overviewfavors linear view outdated task product comparison analysis co-occurrence task

21. 0 2 4 6 8 10 12 14 16 18 20 product choice co-occur- rence is this page out-dated? analysis task completion time (in sec) LinearOverviewFisheye results  confirmed hypotheses

22. subjective preference 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? 0 2 4 6 8 10 12 14 16 18 20 Out-datedProduct choiceCo-occurrenceAnalysis Time (in sec) 0 1 2 3 4 5 6 7 8 Out-datedProduct choiceCo-occurrenceAnalysis LinearOverviewFisheye task completion time satisfaction

23. 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

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 you’d like to use our fishnet prototype

25. bongshin 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

28. abcd

29. Fisheye Mode vs. Overview Mode (1) Bringing highlighted search term into focus/detail view overviewfisheye Incremental navigation Need to pan up or down?switch to overviewstay How far to pan?see overviewhard to guess Absolute navigation Direct access to search termfast

30. Fisheye Mode vs. Overview Mode (2) Readability/Utilization of overview/context area dependence of page length Page lengthOverviewFisheye Short enough to fitwastes spacehide context area One page and a bitwastes spacestill readable Very long pagesome distortiontoo dense to read

31. OverviewFisheye same rowcan check in overview (but risk of occlusions) too dense to check same columncan check in overview (but risk of occlusions) easy (aligned) Fisheye Mode vs. Overview Mode (3) Checking the relationship of the aligned popouts

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 TaskLinearOverviewFisheye 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.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.25 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 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  favors fisheye … necessary co-occurrence task  favors overview analysis task  favors linear View