Popout Prism: Adding Perceptual Principles toOverview+Detail Document Interfaces

Bongwon SuhHuman-Computer Interaction Laboratory,

Computer Science, University of Maryland,College Park, MD 20742 USA

Allison Woodruff, Ruth Rosenholtz, Alyssa GlassXerox Palo Alto Research Center

3333 Coyote Hill RoadPalo Alto, CA 94304 USA

ABSTRACTWe present an overview+detail document interface thatdraws on perceptual principles to help users work withdocuments. Central to our approach is the use of improveddocument overviews. Our approach also includes novelhighlighting in the full representation of documents, as wellas techniques to help users smoothly transition from theoverview to the full representation of the document. Wepresent a specific implementation of our design for Webbrowsing. We also present a qualitative user study thatindicates that our perceptual design principles are effectiveand that users prefer our interface to traditional “find” andhighlighting techniques. Our user study additionallyreveals interesting tasks and strategies supported in ourframework that have implications for overview+detaildocument interfaces in general.

KeywordsDocument interfaces, overview+detail, popout effects,thumbnails

INTRODUCTIONWhen working with documents, people routinely perform anumber of tasks that can be facilitated by an overview+detail interface. Overview+detail interfaces presentmultiple, coordinated views of data [3]. For documents, theoverviewcan be used for orientation and navigation, whilethe detail viewshows a portion of the full representation ofthe document.

As an example of a task that can be improved by anoverview+detail document interface, consider the task offinding a keyword in a document. Many desktopapplications support afind feature that identifies theoccurrences of a given word in a document. Conventional“find-in-page” or “find-in-document” interfaces do notinclude an overview; instead, users enter a keyword and thesystem automatically scrolls the document to the locationof the next instance of that keyword. Because the systemjumps to the new location without giving any context aboutthat location, users often become disoriented. By contrast,a document overview+detail interface could allow users to

search for words while preserving an understanding of theirlocation within the document.

Despite their potential utility, document overview+detailinterfaces are not widespread. For example, no standardcommercial Web browser supports document overviews.We believe this lack of success is due to the fact thatcurrently available document overview implementations donot adequately address the requirements of common tasks.For example, plain thumbnails (simple scale-reducedimages of documents) provide a gestalt of the document,but contain less detail than users would like, e.g., words inplain thumbnails are generally too small to be read.

In this paper, we apply perceptual principles to improve theutility of document overview+detail interfaces. Todemonstrate our techniques, we have implemented PopoutPrism, an overview+detail system for Web pages. Thesystem includes an overview+detail document interface inwhich the overview is anenhanced thumbnail[17] and thedetail view is a portion of the full document. Perceptualprinciples are applied in both the enhanced thumbnail andthe full document views to make elements of interest “popout” visually. In Popout Prism, thesepopoutelements arebased on user-selected keywords. In addition to drawingattention to key elements, we employ perceptual principlesin other aspects of the design, e.g., to ensure that thetransition between the views places a low perceptual andcognitive load on users. We have also taken care inintegrating perceptual aspects and user interaction aspectsof the design. For example, when the user navigates to newdocuments, the interface automatically applies the existingkeywords so that the popouts appear without requiringfurther action from the user. The popouts in the detail vieware also controlled in a natural way through the use of theoverview thumbnail as a scrollbar. The resulting designnaturally supports a number of tasks ranging from a findfeature that identifies the occurrences of a given word in adocument to monitoring applications that require deliveringinformation to the user in the periphery of their attention.

We have conducted a qualitative user study intended toexamine the effectiveness of our perceptual principles, tostudy the strategies users employ with our system, and toexplore a range of tasks for which overview+detaildocument interfaces could be useful. Participants indicatedthat our popout interface was preferable to plain thumbnailsas well as to other alternatives with which they were

Permission to make digital or hard copies of all or part of this work forpersonal or classroom use is granted without fee provided that copies arenot made or distributed for profit or commercial advantage and thatcopies bear this notice and the full citation on the first page. To copyotherwise, or republish, to post on servers or to redistribute to lists,requires prior specific permission and/or a fee.CHI 2002, April 20-25, 2002, Minneapolis, Minnesota, USA.Copyright 2001 ACM 1-58113-453-3/02/0004…$5.00.

familiar, and they identified specific properties that madeour interface useful and appealing for a number of tasks.

To summarize, the contributions of this paper include anovel overview+detail interface, perceptual principles foroverview+detail interface design, and a qualitative userstudy of how participants use an overview+detail documentinterface. As we will see, while the popouts studied herecontain keywords, our interface, principles, and study allhave applicability beyond simple find interfaces.

In the next section, we describe our interface andimplementation. In the following section, we discussperceptual principles used in our design. We then discussthe method and findings of our user study. Next, wediscuss related work, and finally, we conclude.

POPOUT PRISMIn this section, we present Popout Prism’s user interface, asample use scenario, and our implementation.

User InterfacePopout Prism is composed of three panes: an overview onthe left hand side that shows enhanced thumbnails of thecurrent Web page, a detail view on the right hand side thatshows the current Web page at full scale, and a toolbaralong the top that supports standard browsing functions(e.g., back, forward, URL entry) as well as keyword entryfor the popouts. In this subsection, we give a summary ofuser interaction with the system and then further describethe overview and the detail view.

When the user enters keywords, the system locatesinstances of these keywords in the document and applies apopout transformation to those instances that are currentlyvisible in either the overview or detail view, enlarging andtransparently highlighting them. (See Figure 1.) Keywordsremain active until the user removes them from thekeyword field in the toolbar. If the user navigates to a newpage while keywords are active, popouts are automaticallycreated for the new page.

The thumbnail overview can be used to navigate in thedetail view. A sliding window, drawn as a dotted rectangleon the thumbnail overview, identifies the currently visibleportion of the full Web page. This sliding window istightly coupled with the full Web page so that thethumbnail overview may be used as a scrollbar. Users candrag the sliding window, moving smoothly through theWeb page, or they may double-click anywhere in thethumbnail to automatically scroll the full Web page to aspecified location.

The overview contains a thumbnail of the Web pagedisplayed to its right. Thumbnails are one-quarter thewidth of the Web page and are generated immediately afterthe Web page has been fully downloaded. If the thumbnailwould be taller than the vertical height of the overviewpane, we vertically compress it to fit in the pane, so thatusers always have a complete overview of the document.(By default, this happens when the full Web page is morethan four screens long; approximately 11% of the pages in

our user study were in this category.) When users do notspecify any keywords, the overview is essentially a plainthumbnail. Popouts in the overview appear when keywordsare entered and remain visible as long as keywords areactive. The popouts are designed in accordance withprevious research on enhanced thumbnail summaries [17].They are enlarged so their text is readable in the thumbnailand are highlighted in a salient color, using a different colorfor each keyword or keyword phrase. The resultingpopouts are transparently overlaid at the location of theoriginal textual element in the underlying thumbnail.Showing elements in context is a very powerful technique,allowing the user to see the spatial relationship betweenmultiple elements, and also allowing the user to see theposition of a given element relative to the structure of thedocument. The colors in the underlying thumbnail aredesaturated so it will be less likely to distract attention fromthe popouts.

The detail view is a scrollable display of the current Webpage. When users do not specify any keywords, the Webpage appears as it would normally appear in Microsoft®Internet Explorer. When users do specify keywords, thesystem adds popouts to draw attention to the textualelements that match the keywords and are currently visible.The popouts in the detail view are designed to be similar tothe popouts in the overview in style aspects such as color,transparency, and relative size. The upper left hand cornerof the popouts in the detail view is aligned to the upper lefthand corner of the original text, so that users can quicklyfind the original text associated with each popout. Unlikethe popouts in the overview, popouts in the detail view arenot continuously visible while the keywords are active. Asthe detail view popouts are predominantly useful forlocating keywords and may be distracting during otherphases of the user’s task (such as reading), they are madeavailable selectively. Popouts are shown for five secondswhen keywords are first entered and then disappear;according to our informal observations, five seconds issufficient time to allow users to recognize the existence ofmatching keywords. Users can make popouts disappearearlier by clicking anywhere on the thumbnail overview.Users can recall the popouts at any time by pressing the leftmouse button on the thumbnail overview; the popoutsdisappear as soon as the mouse button is released. Thisbutton assignment means that popouts are visible in thedetail view while the user is navigating with the thumbnailoverview (e.g., dragging the sliding window) and disappearas soon as navigation is complete.

ScenarioTo more clearly illustrate the usability and effectiveness ofPopout Prism, we offer a sample use scenario. Suppose auser is browsing through news sites and decides she isparticularly interested in economic news related to FederalReserve rate cuts and the possibility of a recession. In thekeyword section of Popout Prism, the user enters keywords‘rates cut recession.’ She then leaves these keywords ineffect while browsing a variety of Web sites. As she is

browsing the CNNÿ Financial Network Web site,http://www.cnnfn.com/, a cluster ofpopouts in theoverview alerts her that some of her keywords appear in apart of the document that is not currently visible in thedetail view. She drags the sliding window in the overviewto scroll the document to the place the popouts appear. Shethen looks over at the popouts in the detail view and seesthat they are associated with a short summary of an article.Based on the configuration and content of the popouts, andthe document text she can read through the popouts, shedecides to click through to the article.

When the article has loaded, new popouts based on thesame keywords direct her attention to sections of the articlethat may be of particular interest to her, as shown in Figure1. She drags the sliding window to navigate directly to theportion of the document that contains the keywords ‘rates’and ‘cut’ in close proximity (Figure 1, left). She then usesthe popouts in the detail view to locate the correspondingwords in the document (Figure 1, right) and begins reading.

ImplementationThe system is currently written in Java with a C++ JNIinterface. To generate thumbnails efficiently, we includeMicrosoft® Internet Explorer 5.5 as an ActiveX controlinside Popout Prism. This scheme enables us to displayWeb pages rendered as in a standard browser.

Popout Prism is able to generate thumbnails of Web pagesshorter than 1000 pixels in height in less than two seconds.For example, it takes approximately two seconds for thesystem to generate a thumbnail containing several popoutsfrom http://www.yahoo.com/ on a Pentium III 800 MHz PC

with 256 MB of main memory. Web pages longer than tenscreens (>8000 pixels) may take more than 5 seconds. Thedisplay of the popouts in the detail view is virtuallyinstantaneous. As with any Web browser, network delaysmay also impact Popout Prism’s speed. We believe thatperformance can be improved in future versions of PopoutPrism by using threads efficiently, or by doing incrementalrendering, so that the thumbnail generation does not disturbpage navigation.

In the long term we envision embedding Popout Prism inexisting browsers. Therefore, we did not focus effort oncore Web browser functionality, such as histories andbookmarks. Finally, the current implementation of PopoutPrism does not correctly handle some Web pages that useframes. We hope to address this issue in future versions.

PERCEPTUAL PRINCIPLESWhile designing our system, we considered a number ofprinciples from the study� of human perception. In thissection, we present some of the principles we used to drawattention to popouts, preserve the usability of the detailview, and ensure that users could easily map betweenviews. Each principle is followed by a discussion withreferences to the perceptual literature and examples of usefrom our system.

Drawing Attention to PopoutsWe want the popouts to draw the user’s attention so that theuser will be alerted to the presence of relevant popouts andalso so that the user will be easily able to locate popouts inboth views. We use color and size modifications to drawthe user’s attention to the popouts.

Figure 1. News Article Scenario.Note that the zoomed portions are added for presentation purposes and are not present in the actual interface.

(This figure is reproduced in color on page 000.)

Principle 1: Colors that are unusual compared to othercolors in the display draw more attention; converselycolors that are similar to others in the display draw lessattention

A quantitative model of visual search says that colors aremore likely to draw attention if they are outliers to thedistribution of surrounding colors in the display [15]. Thissuggests thatpopouts will stand out more when they aremore distant in color space from surrounding colors, andfurther, it suggests that reducing the variability ofsurrounding colors in the display will make popouts drawmore attention.

Accordingly, we use the above referenced model of visualsearch to choose popout colors that are distant fromsurrounding colors in the display. Additionally, wedesaturate the underlying thumbnail. This reduces itscontrast, thus reducing the variability of its colors. In asense, we are reducing the attentional demands of theunderlying thumbnail, so as to better allow the popouts todraw attention. Desaturating the background also allows usto use less saturated colors for the popouts while stilldrawing attention. Less saturated colors for the popoutshave the advantages that they facilitate reading and aremore soothing. Using a quantitative model of visual searchto choose the colors of the popouts allows us to balance thecompeting goals of having the popouts draw attention andensuring their readability.

Principle 2: Enlarging elements draws attention to them

Recall that in the thumbnail overview, we enlarge thepopout text to make it more readable. Providing readabletext places less cognitive load on the user than alternativedesigns that rely solely on color-coding to convey semanticinformation, since such designs require the user to mentallymap colors to keywords. The enlargement of the popoutsfor readability has the added benefit of drawing attention tothem, as it tends to make them larger than other objects –particularly text – in the thumbnail (see, e.g., [16] for adiscussion of the impact of size on attention).

Because the popouts are readable and salient, the overviewin our system contains sufficient detail to help the userdecide where they want to go – a key attribute fordocument navigation.

Preserving the Usability of the Detail ViewUsing popouts in the detail view is more complex thanusing them in the overview because we need to ensure thatthe popouts do not compromise the overall readability ofthe document. We recognize that persistent modificationsto the page will reduce the usability of the document andthen discuss how to strategically add emphasis.

Principle 3: Persistent emphasis in the page distractsreaders

Humans seem to have an “attentional control setting” –essentially, a setting for what they are (and are not) lookingfor while performing a given task. They have difficultyswitching their attentional control setting instantaneously,

even in order to ignore an irrelevant and distracting cue[7]. Highlighting or other emphasis of keywords is likelyto be selected by the user’s attentional control setting andtherefore distract the user from activities such as reading orskimming. This is particularly true since the emphasis isoften relevant to the user’s task. Further, forms ofemphasis in the text are known to slow a reading task, atleast for older users [5].

Therefore, although our transparent popouts generallyallow reading of the underlying content of the page, weremove the emphasis – i.e., popouts – from the detail viewwhen the user is not using them to navigate. Also observethat Principle 3 indicates that removing emphasis from thedetail view makes sense even for modifications that are lessobtrusive than popouts, such as simple highlighting [9,10].

Principle 4: Making objects appear draws attention

In our system, in addition to using color and size to drawattention in the detail view, we make use of the fact that an“onset,” or appearance of an object in the display, drawsattention [18]. This is somewhat of an oversimplification,as it depends upon the features of items relevant to the task[7] and the level of focus of the user on the task [19], butfor many situations this is a good rule of thumb. Thus thepopouts particularly draw attention when they first appear,as well as when the user makes them reappear by clickingthe left mouse button.

Making it Easy for Users to Map between ViewsWe apply perceptual principles to make the transition fromthe overview to the detail as smooth as possible. Recallthat while the user navigates, the popouts are visible in boththe overview and the detail view. Here we discussprinciples for helping users map from popouts in one viewto popouts in the other view. Note that these principles aregenerally relevant to brushing techniques [2].

Principle 5: People are good at recognizing the samepattern shown at two different scales

Because the overview and the detail views are at differentscales, one might be concerned that it would be difficult forusers to map from a group of objects in one view to thesame group of objects in another view. However, researchsuggests that perceptual learning for object recognition issize-invariant [8]. Therefore, popout configurations aresimilar in the overview and the detail view to make it easyfor the user to map between them.

Principle 6: Using the same emphasis style in two viewsmakes it easier to map between the views

We use the same styles (e.g., colors) for popouts in both theoverview and the detail view, thereby reducing thecognitive load required to switch views and allowing theuser to maintain the same attentional control setting forboth views.

Not all systems use the same emphasis style in both views(e.g., [10]), and in fact, using the same style is notnecessarily an obvious design choice. For example, when

views are at different scales, different colors may seemappropriate for emphasis in each view. Yellow is anappropriate highlight color for dark text and thereforemight be desirable in a detail view. However, yellow is notsalient at smaller scales, due to low sensitivity of the visualsystem to yellow at high spatial frequencies [12]; therefore,a color like saturated red (which would be highlyundesirable to highlight readable text) might be chosen inan overview. We specifically choose colors that balancereadability and saturation, and our popouts are enlarged sothey are not at as small a scale as the highlights in systemssuch as Reader’s Helper [10]. This allows us to use thesame colors in both overview and detail.

METHODWe conducted a qualitative user study to examine whetherour visual design was effective, to learn more about thetasks for which Popout Prism’s functionality would beuseful, and to observe the strategies users employed.

ProcedureParticipants used Popout Prism for 3-5 days during themonth of August,2001. Because Popout Prism did notprovide all of the functionality of a standard Web browser,such as bookmarks, participants were permitted to use otherWeb browsers as well during the study. A few participantsused Popout Prism as their primary browser while othersused it in more specific situations. Outside the interviews,each participant visited over 120 pages in Popout Prism andperformed nearly 20 new keyword searches on average.

We interviewed each participant twice, once very early intheir use of the system and once later in their use of thesystem, so that we could see which strategies participantsdeveloped immediately and which evolved over time. Eachinterview was videotaped and consisted of directobservation of participants using Popout Prism to performtheir normal Web tasks, as well as a semi-structuredinterview.

Using the videotapes, we made notes on the interviews andclustered the results by theme. Note that some topics wereraised by only a few participants. Therefore, the fact that asubset of participants made an observation does not implythat other participants did or did not agree.

ParticipantsParticipants were twelve members of the Xerox PARCcommunity, six men and six women. Approximately halfthe participants had a technical background andapproximately half did not (e.g., administrative assistants,business development staff, a public relations manager).Participants spanned a wide range of ages and variedwidely in terms of the average amount of time they spendusing the Web in one week. Participants’ typical Webtasks include reading news, reading documentation, visitingportals, and conducting literature searches.

FINDINGSIn this section, we present results from our user study. Wehave selected seven topic clusters, which have in turn beendivided into three groups for expository reasons. These

groups are participant responses to the interface, participantstrategies for using the interface, and participantcomparisons with other systems.

Participant ResponseParticipants articulated their impressions and preferences ata variety of levels. These included general attitudes,opinions on usability, and assessments of the most usefulaspects of the system.

High-level Impressions. Response was generally positive.Participants described Popout Prism using words such as“fun” and “cool.” They said it was useful, “handy,” and “adefinite time-saver.” A few participants did observe thatwhile they liked it and found it useful, it was a nice-to-havetool rather than a must-have tool. The main complaintswere about the lack of standard browser functions, thememory requirements of the tool, and the perceived slowspeed of the tool. Only a few participants commented onPopout Prism’s screen real estate requirements, and theseparticipants indicated this was only a minor issue for them.

Overall, ten of the twelve participants said they would liketo use Popout Prism again if it were a standard tool. A fewparticipants were interested in continuing to use it in itscurrent research-prototype state, commenting, “I’m hopingyou don’t take it away after a week” and “I’m not giving itback.”

Usability. Participants generally found the tool easy to use.Training was minimal (usually either a short demo or abrief review of a short user manual). Participantsimmediately grasped the main concepts such as popoutsand navigating with the thumbnail overview and quicklydeveloped strategies for using the features. Someparticipants had minor confusion about mouse-click events,e.g., what made popouts appear and disappear.

Participants found popouts easy to locate in both thethumbnail overview and in the detail view: “I know exactlywhere I’m going… I know exactly here [points tothumbnail] and I know exactly here [points to full Webpage]. There’s no doubt, absolutely.” Participants seemedto immediately understand the correspondence betweenpopouts in the thumbnail overview and popouts in thedetail view.

Participants did not generally feel that the thumbnailoverview interfered with their tasks. The majority ofparticipants did not feel that the popouts in the detail viewinterfered with their tasks, although a few participants didsay that it was difficult to read in the detail view when largenumbers of popouts were present.

Utility. We asked participants to compare the utility ofthumbnail overviews with popouts to that of thumbnailoverviews without popouts, and we asked participants toassess the utility of popouts in the detail view as well as theutility of the navigation mechanism. We also askedparticipants about the types of pages and tasks for whichthey found Popout Prism useful.

Most participants indicated that the thumbnail overviewswith popouts were the most useful feature of the system.One participant said she found this part of the tool so usefulthat she physically moved her chair to orient to it. Bycontrast, plain thumbnails (thumbnail overviews withoutpopouts) were judged to be significantly less useful thaneither the overview or the detail view with popouts, severalparticipants saying plain thumbnails were not useful at all.

Most participants said that the popouts in the detail viewwere useful, primarily when used in conjunction with thethumbnail popouts to navigate to a popout or popouts.Correspondingly, the ability to navigate with the overviewwas also judged highly useful when popouts were present,although many participants did enjoy using the slidingwindow to navigate even when no popouts were present.

By the first interview, most participants had specific ideasabout situations in which Popout Prism would be useful.For example, in terms of page characteristics, participantsmentioned that Popout Prism was useful on longer pages(approximately 69% of the pages in our user study weremore than one screen long), pages with which they werenot familiar, and pages with poor structure. Participantsmentioned that it was less useful (or not useful at all) onshort pages, pages they knew well, pages they intended toread in entirety, and pages on which the word they weresearching for appeared very frequently.

Participants suggested Popout Prism would be useful for anumber of tasks such as reading news, reviews,documentation, or mailing lists, or for doing searches. Afew participants suggested thatpopouts would be useful forproviding information about pages other than the currentpage, e.g., a site map could be composed of thumbnailswith popouts. Nearly half the participants volunteered thatthe popout functionality would be useful to them in otherapplications such as mail tools, word processors,spreadsheets, development environments, and PDFviewers.

Participant StrategiesThe intuitive interface design enabled users to adapt thesystem to their daily tasks with little effort. The interviewsrevealed that users very quickly developed strategies forusing visual properties of popouts, navigating, andchoosing keywords.

Visual Search Strategies. Participants expressed pleasurethat they could see an overview of the entire page at once,including all popouts, and they took advantage of severalvisual properties of the popouts to determine relevance.Here, we discuss three key visual properties: density,position in the document, and spatial configuration.Participants used the density of popouts to assess therelevance of a page. For example, when participantsclicked through on search engine results to visit pageswhere they were hoping to find a particular piece ofinformation, they said popouts helped them decide whetheror not to stay at a page; if there were only one popout, theymight conclude the topic was not covered in depth and try

another site, whereas if there were several popouts, theywould be more likely to stay and look. For example, oneparticipant said if no popouts were present, “I can justmove on. I don’t have to even scroll down.” Density wasalso a useful cue about regions within documents;participants said they would save time by ignoring parts ofdocuments that did not have popouts. They also said theycould ignore popouts based on their position in thedocument, e.g., if they could tell from the thumbnail thatthe popout appeared in a navigation bar, or if the popoutwere at the end of a document, they might ignore it. Thespatial configuration of popouts was also useful, e.g.,participants said they would go to a “gathering” of popouts,or would look for places where multiple keywords co-occurred.

Overall, participants felt the visual properties of popoutssaved time and effort. For example, one participant saidthat when he visits pages recommended by Googleÿ, henormally reads the titles of pages; with Popout Prism,rather than reading the titles, he would instead glance at thegrouping of popouts on the thumbnails to decide if the pagewere relevant to him.

Navigation Strategies. Since the thumbnail overview withpopouts helped users assess what parts of a page to visit,participants found it very helpful for navigation. A generalapproach was for participants to identify a region of interestusing popouts, and then navigate directly to that regionusing the sliding window. As one participant said, “… thethumbnail is really handy for saying, well, that’s where Igo.” Participants said that they stayed oriented while usingthe sliding window, in comparison to using traditional findinterfaces (discussed further below) or to scrolling.

Keyword Strategies. Participants used a variety ofstrategies to choose and enter keywords for popouts. Mostparticipants left keywords active at least some of the timeas they navigated across sites, sometimes because theywanted to search for the same keywords at multiple sitesand sometimes because they did not want to botherchanging keywords until they were ready to enter newones. A couple of participants observed that having toenter keywords was tiring. Some participants suggestedsmart keywords, e.g., keywords that were personalized, orsite-specific keywords that would automatically come upwhenever they browsed to a given site.

A couple of participants talked about specifying differenttypes of keywords simultaneously, some for the currentsearch, and others for background monitoring. Forexample, one participant entered his name as a keyword sothat anytime he came across a page with his name on it, hewould be notified. As one participant said, “[Y]ou’reviewing a site and you weren’t really viewing it for thispurpose but [Popout Prism] happens to tell you that oh,today’s slashdot has an article on MEMS and like, oh, cool,I wasn’t looking, I wasn’t planning on reading aboutMEMS, but you know, I’ll read about MEMS today.”Since popouts appear automatically on navigation to a site

and because they can be ignored, they are well-suited tosuch peripheral monitoring tasks.

The interaction of Popout Prism with search engines isparticularly interesting. Some users entered the samekeywords in both tools. A couple of users articulated amulti-level strategy, entering broad search terms in thesearch engine and more specific terms in Popout Prism; thesearch engine finds documents with certain terms that mustbe present, and within these results, Popout Prismhighlights additional terms of interest. To illustrate thisusage, one user entered “VB mysterious crashes versionDLL” into the search engine and then “MDAC” for thepopouts, because he had a suspicion that the source of themysterious crashes was MDAC, and he wanted to see ifMDAC appeared on the search results page.

A similar multi-level search was suggested by anotherparticipant. He frequently visits his personalized stockportfolio, a page with information about user-specifiedstocks containing a matrix with pricing information, etc.,and pointers to relevant news articles. He has a number ofstocks that he cares about only peripherally (e.g., the stockof a friend’s startup, or companies he uses to monitorindustry trends) and a smaller number of stocks that heowns and cares about a great deal. He wants to see theentire stock portfolio, but can use popouts to highlight thestocks that he owns. In this way, he can focus on the stocksof highest relevance to him while viewing them in thecontext of the other stocks on the page.

Comparison with Alternative Keyword Search InterfacesParticipants compared Popout Prism to other tools withwhich they were familiar. Roughly half the participantssaid they commonly use the traditional find interface tolocate terms in Web pages, and all were familiar with findeither from Web browsers or other applications. Allparticipants preferred popouts to find, citing three mainreasons. First, most participants cited the advantagesassociated with the popouts in the thumbnail overview: asense of context, density, and the ability to see alloccurrences of a keyword at once. One participant said thatwith find, he needs to make two passes through thedocument, one to get an overview, and the second to lookat individual instances; having the overview changed hissearch process to a single pass. Second, about half theparticipants complained about getting disoriented whenusing find, and said they disliked repetitively jumping fromone place to the next. As one participant said, “It’s verydisorienting to say find and then… jump to an entirelydifferent part of the document… Every time I search, Ijump to the next spot, I have to sort of spend a little bit oftime, you know, figuring out where I am.” Because ofthese effects, participants said popouts were a goodreplacement for find: “Anywhere I would normally usefind, I would be very happy to have the thumbnail show mewhere it is in the document all at once.” Additionally,participants said that they would use popouts in instances inwhich they would not use find: “I found myself using this a

lot more than I would find... I think that means I like thisbetter.” Third, participants found popouts in the Web pageeasier to spot than the highlighting done by find.

One participant was a frequent user of Googleÿ Toolbarÿhighlighting [9], and three participants were familiar withthe feature but used it infrequently. These participantscompared Popout Prism favorably to Google Toolbarhighlighting, generally citing the same types of advantagesthat it had over find. The frequent user of Google Toolbarhighlighting said, “Especially like when I showed you themailing list... that was kind of like a godsend… I didn’thave to rely on Google’s highlighting and … go uh-uh-uhthere’s a highlight there [mimics scrolling through pagesearching for highlights in actual Web page as he scrolls],uh-uh-uh-uh there’s a highlight there. I didn't have to dothat. That was really nice.”

RELATED WORKA number of previous systems use reduced-scale documentrepresentations such as plain thumbnails, slightly modifiedthumbnails, and abstract representations (e.g., [14], [4], and[11], respectively). Previous work suggests that enhancedthumbnails showing a portion of a Web page have anumber of advantages over these other representations asdocument summaries (communicating gist, genre, etc.) forWeb search tasks [17]; in this paper we have built on thiswork to illustrate the benefits of using enhanced thumbnailsof full Web pages as document overviews (providingcontext for the entire document).

Researchers have also enhanced full size documents. TheGoogle Toolbar [9], for instance, highlights user-specifiedkeywords within pages as the user visits them. Thus, theGoogle Toolbar enables “persistent search” as does PopoutPrism. However, as the Google Toolbar is not anoverview+detail system, it does not have the benefit of anoverview to help the user easily navigate to important partsof the document, and our user study indicates that users canbecome disoriented as they search the document forkeywords. Several overview+detail document viewershighlight text in the detail view of the document[6,10,11,13]. However, in both the Google Toolbar andthese overview+detail systems, text is highlighted in placeand/or made bold. A study reported in [13] showed a lackof utility for this sort of enhancement in theiroverview+detail system. Additionally, as we havediscussed, human perception research suggests that theenlarged, transparently highlighted text of Popout Prism isbetter at drawing the user’s attention, and that the automaticfading of the popouts interferes less with reading in thedetail view than persistent enhancement.

There are a number of overview+detail documentinterfaces, and several of these systems use a thumbnailoverview to navigate through the detail view, as in oursystem [1,10]. Of these, the Adobe� Acrobat� Reader�does not enhance either the overview or the detail view.The Reader’s Helper [10] has a “Thumbar” that providesusers with an overview of a Web page, with interesting

topics (automatically selected using personalizationtechniques) highlighted in both views. Though theReader’s Helper has some similarities to Popout Prism, wefeel there are some key perceptual and usage differences.These result from its optimization for a very specializedtask and greatly reduce the effectiveness of its designchoices for keyword tasks. For example, no text is readablein the Thumbar overview (text is greeked and topiclocations are indicated by a colored line), the personalizedtopics are application settings as opposed to keywordsselected on-the-fly, and, at least in the examples in [10], alltopics are indicated by the same color. The keywords inPopout Prism are readable in both views, keywords areuser-selected at run-time, and different colors are used fordifferent keywords, making it easy for users to identify andnavigate to particular words of interest. Furthermore, wehave argued that our popouts are better at drawing attentionthan the Reader’s Helper’s highlights. Finally, in theexamples in [10], the thumbnail highlights are in red, whilethe detail highlights are in yellow. Though there are validreasons to choose different colors for views at differentscales, perceptual research suggests that using identicalemphasis styles in both views makes it easier for the user totransition between the views.

CONCLUSIONWe have presented an overview+detail document interfacethat draws on perceptual principles to help users effectivelywork with documents. Specifically, our interface offersimprovements in the areas of document overviews,highlighting in the full representation of the document, andvisual coupling between the two views. We have presenteda specific implementation of our design for Web pages.

We have also presented a user study that confirms ourexpectations about the usability of our interface. Our userstudy additionally reveals interesting tasks and strategiesthat are supported in our framework. Finally, our userstudy indicates that our interface has advantages overtraditional find and highlighting techniques, as well as overplain thumbnails.

We intend to pursue several directions in the future. Inaddition to refining the implementation and adding newfeatures, we also intend to develop further design principlesand conduct quantitative studies.

ACKNOWLEDGMENTSWe are grateful to the participants in our study for usingexperimental software and sharing their insights. We thankPaul Aoki, Ben Bederson, and Lance Good for helpfuldiscussion and comments. We are indebted to Maarten vanDantzich of Microsoft Research for advice on interfacingwith Internet Explorer. This work was performed whileBongwon Suh was an intern in the User Interface Researchgroup at Xerox PARC.

REFERENCES1. Abobe� Acrobat� Reader�. http://www.adobe.com/

2. Becker, R.A., and Cleveland, W. S. Brushingscatterplots.Technometrics, 29(2):127-42, 1987.

3. Card, S.K, Mackinlay J.D., and Shneiderman, B.Information Visualization: Using Vision to Think.Morgan-Kaufmann, San Francisco, 1998.

4. Cockburn, A., and Greenberg, S. Issues of pagerepresentation and organisation in Web browser’srevisitation tools. Austr. J. Info. Sys.7(2):120-7, 2000.

5. Connelly, S.L., Hasher, L., and Zacks, R.T. Age andreading: the impact of distraction.Psych. & Aging,6:533-41, 1991.

6. Eick, S. G., Steffen, J. L., and Sumner, E. E. SeeSoft –a tool for visualizing line oriented software statistics.IEEE Trans. Software Eng., 18(11):957-68, 1992.

7. Folk, C.L., Remington, R.W., and Johnston, J.C.Involuntary covert orienting is contingent on attentionalcontrol settings. J. Exp. Psych: HP&P, 18:1030-44,1992.

8. Furmanski, C.S. and Engel, S.A. Perceptual learning inobject recognition: object specificity and sizeinvariance.Vision Research, 40:473-84, 2000.

9. Googleÿ Toolbarÿ. http://toolbar.google.com/

10.Graham, J. The Reader’s Helper: a personalizeddocument reading environment.Proc. SIGCHI ’99,481-8, 1999.

11.Hearst, M. TileBars: visualization of term distributioninformation in full text information access. Proc.SIGCHI ’95, 59-66, 1995.

12.Mullen, K. T. The contrast sensitivity of human colourvision to red-green and blue-yellow chromatic gratings.J. Physiology, 359:381-400, 1985.

13.Ogden, W.C., Davis, M. W., and Rice, S. Documentthumbnail visualization for rapid relevance judgments:when do they pay off?TREC 1998, 528-34, 1998.

14.Robertson, G., Czerwinski, M., Larson, K., Robbins, D.C., Thiel, D., and van Dantzich, M. Data Mountain:using spatial memory for document management.Proc.UIST ’98, 153-62, 1998.

15.Rosenholtz, R. A simple saliency model predicts anumber of motion popout phenomena.Vision Research,39:3157-63, 1999.

16.Treisman, A., and Gelade, G. A feature-integrationtheory of attention.Cog. Psych., 12:97-136, 1980.

17.Woodruff, A., Faulring, A., Rosenholtz, R., Morrison,J., and Pirolli, P. Using thumbnails to search the Web.Proc. SIGCHI 2001, 198-205, 2001.

18.Yantis, S., and Jonides, J. Abrupt visual onsets andselective attention: evidence from visual search.J.Exp. Psych: HP&P, 10:601-21, 1984.

19.Yantis, S., and Jonides, J. Abrupt visual onsets andselective attention: voluntary versus automaticallocation. J. Exp. Psych: HP&P, 16:121-34, 1990.