AJIS vol. 7, no 2 May 2000 ISSUES OF PAGE REPRESENTATION AND ORGANISATION IN WEB BROWSER'S REVISITATION TOOLS Andy Cockburn1 and Saul Greenberg2 'Department of Computer Science, University of Canterbury, Christchurch, New Zealand, andv@cosc.canterburv.ac.nz Department of Computer Science, University of Calgary, Calgary, Alberta, Canada. saul@cpsc.ucalearv.ca ABSTRACT Many commercial and research WWW browsers include a variety of graphical revisitation tools that let users return to previously seen pages. Examples include history lists, bookmarks and site maps. In this paper, we examine two fundamental design and usability issues that all graphical tools for revisitation must address. First, how can individual pages be represented to best support page identification? We discuss the problems and prospects of various page representations: the pages themselves, image thumbnails, text labels, and abstract page properties. Second, what display organisation schemes can be used to enhance the visualisation of large sets of previously visited pages? We compare temporal organisations, hub-and spoke dynamic trees, spatial layouts and site maps. KEYWORDS World-Wide Web navigation, history and revisitation, graphical navigation maps. INTRODUCTION Web browsers have rapidly become an almost essential component of the desktop-computing environment. They provide access to local and global documents and news, digital libraries, powerful search facilities, and shopping and banking. Navigating the web has become such a central paradigm for human-computer interaction that Microsoft has made its 'Internet Explorer' web browser the main interface for file management. Despite this incredible popularity, the user interfaces to web browsers are far from ideal. For example, previous studies clearly show that users have a poor understanding of the Back and Forward buttons (Cockburn & Jones 1996), one of the most rudimentary navigational interface components available in a browser. Yet alternatives are possible; other research has shown that Back behaviour can be modified to something that better matches a user's notion of how it works (Greenberg & Cockburn 1999). In this paper we investigate user-interface considerations that influence the design and use of graphical revisitation tools that people can use to return to temporally distant pages (unlike Back which is best used for pages seen very recently). In particular, we consider two questions that must be addressed by the designers of such systems. First, how can the tool represent pages so that people can readily distinguish previously visited pages and identify the one they want to return to? Second, what display organisation schemes can be used to enhance the visualisation of a large set of previously visited pages? The relative merits of each design alternative are discussed, and related systems are used to exemplify techniques. We defer application of this discussion to our companion paper, where we describe our own WebView system that implements and demonstrates alternative techniques for page representation and organisation (Cockburn, Greenberg etal. 1999). REVISITATION ON THE WEB WITH LINEAR NAVIGATION In this section we summarise the nature of people's page revisitation patterns when navigating the WWW. We also briefly critique the Back button, arguing that alternate page revisitation tools must complement Back if a person is to navigate efficiently to pages seen a while ago. Data on web-page revisitation Tauscher and Greenberg (1997) analysed patterns of web revisitation by logging the user actions of twenty-three users with a specially equipped browser. They found that on average 58% of page visits were to pages that the user had seen previously. They also found a strong recency effect, where the most recently visited pages were very likely to be visited next. To illustrate, Figure 1 plots the cumulative percentage URL recurrence rate as a running sum against the history distance between pages visited. For example, there is a 39% chance that the next page a person visits will be within the six most recently visited pages. The study also indicates that Back is the dominant interface mechanism used for page revisitation, accounting for more than 30% of all navigational acts. Other revisitation facilities were used infrequently: for example, <3% for bookmarks, and <1% for history. 120 AJIS vol. 7, no 2 May 2000 Tauscher and Greenberg's study provides powerful evidence that page revisitation is a fundamental requirement in web navigation. It also shows that while most revisitations are back to pages that have been seen recently, a modest amount are to more distant pages. For example, Figure 1 shows that there is a 19% chance that the next page the user visits will be more than six pages away from the current page (measured in terms of recency). Advantages and Limitations of Back The web-browser's Back and Forward buttons can implement a surprising variety of linear navigation schemes, allowing the user to sequentially return to previously seen pages (Greenberg and Cockburn 1999). In general, there are two major advantages of using Back. First, it is cognitively undemanding in that there is little need for decision- making—users need only repeatedly click Back until either the desired page is displayed, or until the start of the Back list is reached, or until they give up. Second, it is visually compact—the two buttons consume minimal screen real estate, and for this reason it is reasonable for users to keep them on permanent display within their browsers; consequently they are always ready to hand. However, there are also several limitations to Back, as follows. Inefficiency in retrieving distant pages. People visit many pages, resulting in large page histories. While Back is appropriate for returning to recent pages, it requires many time consuming button-clicks and page redisplays to revisit distant pages. Some previously seen pages are unreachable with stack-based Back schemes. The stack-based schemes supported by current commercial browsers only allow a sub-set of pages to be revisited because of the branch-pruning that occurs when pages are popped off the top of the stack. While Back can be redesigned as linear rather than stack lo Figure 1: Cumulative URL recurrence rate against history distance between pages (Tauscher & Greenberg 1997). traversal, this introduces other side-effects that can compromise usability (Greenberg and Cockburn 1999). Scalability. Commercial browsers are incorporating file-management capabilities into their functionality. Consequently, the range of data sources accessed through 'web'-browsers is likely to increase dramatically, as will the temporal range of data elements that the user will want to revisit. This implies that many of the 'pages' a person would like to revisit will be further back on the history list than they are now. Context. Back gives the user a single viewpoint—the current page—into the information space through which they are navigating. The user's sense of orientation within the information space is therefore entirely dependent on their memory of previously visited pages and the contents of the current page. The reality is that most people just click Back until they see their desired page or until they give up. Minimalist representation. The linear navigation model underlying Back represents the user's navigational actions in one-dimension. While appropriate for simple revisitation tasks, other models showing the true hypertext navigational network in two or three dimensions may be more appropriate to help a person recall a page's location. The Potential of Enhanced Graphical Tools Graphical visualisations of web spaces, such as overview maps, have long been used to help users overcome the disorientation associated with navigating through hypertext (Nielsen 1990). Because of their representational richness, they can (and have) been used to ease the chore of revisiting pages. Specifically, graphical visualisations can potentially ease or resolve the issues associated with Back. They can represent many pages in a small space; this 121 AJIS vol. 7, no 2 May 2000 means they are not limited to sequential page displays, and that they are scalable as they can show both recent and distant pages. Selecting these distant pages is also easier, because a page can be directly accessed from its representation (provided the user can identify the page from its graphical representation!). Finally, they can reveal the structure and relationship between pages, helping users orient themselves in the information space and overcoming the problems of context and minimalist representation. Even if this potential could be attained, there remains a fundamental problem confounding the use of graphical tools for page revisitation. Users make continual trade-offs between the screen real estate consumed by these tools and the value of the information provided. If users can successfully navigate some or most of the time without the tool, they are likely to remove, iconify, or bury its window. Once the tool is no longer visible, it is no longer ready to hand: it is easily forgotten and requires overhead to redisplay it. Revisitation tools must therefore maximise the value of the information they present, and do so using minimal screen real estate. The following sections address two questions that focus on this issue. First, how can each page be best represented in a graphical display? Second, how can the display be organised to best reveal the relationships between pages? ISSUES IN GRAPHICAL PAGE REPRESENTATION The ideal page representation in a graphical display would allow immediate and unique identification of the page while consuming only minimal screen real estate. Four categories of techniques for page identification are presented: the pages themselves, textual labels representing the page, thumbnail images of the rendered page, and visual cues showing abstract properties of the page. Many of the techniques discussed can be combined to reinforce page identification. The pages themselves Perhaps the easiest way to represent a page is to just show it within the main window. This is the technique employed by the Back and Forward buttons; as the buttons are pressed, the page is displayed in the browser. The result is that users just click these buttons until they recognise the page they are looking for. This simple technique can be leveraged into more powerful graphical representations by choosing appropriate metaphors. The Web Book, for example, can collect previously seen pages by organising them into a book; through page-turning, users can browse the book by rapidly flipping through its pages (Card, Roberston and York 1996). Yet showing the full page is space-intensive: only one or two pages can be realistically shown at a time on the display. Textual labels representing the page Several mechanisms use textual labels to assist page identification. Typical approaches to labelling use the page URL, the and <H1> text in the page's HTML source, samples of text from the body of the page, and explicit user annotations. While each type of label is effective in some situations, they all have serious problems that limit their universal application. URLs. Many revisitation systems display raw URLs, either as primary labels or as tooltips. The problem is that URLs are primarily machine-oriented. While some site addresses can be readily parsed and recognised by users (for example, netscape.com, microsoft.com, acm.org), not all site names are meaningful. For example, the name xoom.com gives no hint about its purpose and contents. Furthermore, users thinking that they are navigating within a site may actually be navigating several different sites (either because the site links to other sites, or because the site is sub-divided). For example, links from www.microsoft.com lead to shop.microsoft.com, messenger.msn.com, msdn.microsoft.com, and www.msn.com. Finally, path descriptions to specific pages within a site can be long and cryptic, and therefore of limited use. Again using a page from the Microsoft site (no better or worse than most other sites), it is difficult to tell what is on the page represented by the URL www.microsoft.com/msdownload/iebuild/ie5 win32/en/63242.htm. 122 AJIS vol. 7, no 2 May 2000 . Back Forxw'd Reload "Home 1 Home page for mputer Interaction 2 CPSC 861 Home Page 3 Discover Alber.. actions, and inapt. 4 Reviews-: 5 Business 6 Internet Explorer Brother internet Explorer Sites i ^'Features: . ' to Welcome to toe xplorer Home Pagel Figure 2: Netscape's Back menu, showing labels extracted from <Title> tags. Titles, extracted from the <Title> tag in the page's source, can also be poor identifiers of page contents. Problems with titles affect a wide range of navigation aids including the Back and Forward menus supported by Microsoft Internet Explorer and Netscape (Figure 2), their history lists, and graphical overview maps. Titling problems include the following. Erroneous and missing titles. Many pages provide little or no useful information about the contents of the page, even on pages that are otherwise highly professional. For example, the blank entry '7' in Figure 2 resulted from an absent title in the page offering 'More Info' on Microsoft's Internet Explorer, located at www.microsoft.com/ie/info/default.asp. We have also noticed that many pages have wrong titles. We believe this is due to the poor facilities most page editors provide, where titles can be changed only by raising a pop-up dialog. This causes authors to forget to add or modify titles; the later causes mis-titling to happen easily when a previous page is copied as a template for a new page. Mismatch between titles and actual page representation. The title field in a page does not always match the visually prominent text or graphics appearing at the top of the page. For example, the site pos.epson.com is titled 'Epson POS Products', yet the dominant graphics at the top of the display says 'Welcome to Epson America'. Identical titles within a site. It is common to find a set of pages with identical or almost identical titles. For example, we have come across sites where all pages have the same title! Sites that use HTML frames are particularly problematical because title information remains constant while the user navigates through pages contained within the frame. Inconsistent titling. An absence of consistency in title format can also frustrate page identification. Entries ' 1' and '2' in Figure 2 demonstrate poor title-format consistency in undergraduate course home pages entitled 'CPSC 681 Home Page' and 'Home page for the course CPSC481: Foundations and Principle of Human Computer Interaction'. Although these titles accurately describe the page contents, the lack of consistency in their presentation complicates and slows page identification. Note that this example comes from one of the author's carefully crafted sites... he was very surprised (and somewhat red-faced) to find this inconsistency! Long titles and truncation. Many graphical mechanisms constrain the number of characters displayed. Truncation is used to shorten the title length, but this can remove essential information for page identification. Entries '1', '3' and '10' in Figure 2 demonstrate truncation, and in entry T the major page identification cue 'CPSC 481' has been removed from the displayed title. Note that some browsers truncate the middle (as in Figure 2), while others truncate either the beginning or end; this means that authors cannot know where to position important words. Other text sources. Heuristic techniques could extract text labels from a variety of sources other than the <Title> tag, such as from the major heading text for the page, or from the first few sentences of the body of the page. These techniques are also problematical as a primary label. For instance <H1> text is often intentionally omitted in pages that rely on graphical banners for page headings, and there is no easy way to extract text from these graphical banners. Sometimes a summary of the first paragraph on a page is shown instead; unfortunately this often consumes too much space and consequently is usually displayed as a pop-up rather than an always-present label. Explicit user annotations. Explicit user-supplied annotations (such as user-crafted title added to a bookmark) are likely to be easily remembered and recognisable (for that particular user). However, it is unlikely that users will be willing to supply annotations for anything other than the most important pages. In summary, text labels are unreliable. While each technique will succeed for some pages, it will fail for others. 123 AJIS vol. 7, no 2 May 2000 Images of the rendered page Miniaturised 'thumbnail' page images can be automatically captured as each page is rendered in the web-browser. At low scaling factors (large thumbnails), pages are readily identifiable, but image quality degrades as size is reduced. Different pages suffer scaling better than others, as described below. a) Calgary Computer Science Homepage at pixel widths 12, 25, 50, 100. b) a text page at pixel widths 12, 25, 50, 100. c) four pages within the Calgary Computer Science site at 50 pixels wide. Figure 3. Comparing various thumbnails. When viewed in colour, the distinctly coloured blocks of the Calgary Computer Science Homepage in Figure 3a make it identifiable at small sizes, but even at large sizes the text-based page (Figure 3b) provides few cues to identification. The problems are further exacerbated by consistent page-styles used within web-sites, including similarly coloured backgrounds, frames, uniform corporate banners and logos, and so on. For example, the four different images in Figure 3c show the poor distinction between several Calgary Computer Science pages with thumbnails that are 50 pixels wide. Breaking consistency is, of course, a poor solution for obvious reasons. In reality, constraints on screen real-estate make icons of even this modest size unlikely to proliferate: for example, the icons used in file browsers such as Microsoft's Explorer are approximately 15 by 10 pixels. We can partially fix this problem of low page distinction between pages at small sizes by using zooming techniques to increase their size and distinctiveness. MosaicG (Ayers & Stasko 1995), and Web View (Cockburn, Greenberg et al. 1999) support thumbnails that are magnified as the user moves the mouse over them. The Data Mountain adjusts the size of thumbnails as they are positioned on a 3-d inclined plane, with closer ones being larger than those further away (Robertson et al. 1998). The zoomable web browser descri bed in Bederson et al. (1999) takes this one step further by integrating browser functionality within each of the miniaturised page representations; the zoomed thumbnail becomes the web page. Visual cues showing abstract page properties Visual cues displaying abstract page properties can be used to reinforce page identification techniques. In particular, temporal information about the frequency and timing of previous visits may help users to identify pages. Netscape and Microsoft Internet Explorer, for example, both use temporal information in their history views of past visits. However, these are typically coded by text and are difficult to scan 'at a glance'. Figure 4: Cues showing bookmarks, temporal properties of page visitation, and visit frequency For example, Figure 4 combines several graphical cues with a thumbnail to capture various abstract properties. The top left 'dog-ear' denotes how often the page has been visited, where it automatically turns progressively darker with visit frequency. The bottom-left red dog-ear is created explicitly when a person marks a page, thus becoming a type of 'bookmark'. The blue flashes on the right-hand side of the thumbnail indicate the relative time of the first and last access to the page, where the bottom of the thumbnail equates to the eldest page in the display and the top of the thumbnail equates to the current time. Web View, described in Cockburn and Greenberg (1999) as well as an unnamed system in Greenberg and Cockburn (1999) implements most these concepts. ISSUES IN STRUCTURAL ORGANISATION OF PAGE DISPLAY This section discusses issues in organising the display of many pages. Four schemes are described: hub-and-spoke techniques that depict the user's navigational branching actions; spatial schemes that exploit the user's memory for 124 AJIS vol. 7, no 2 May 2000 the spatial location of objects; site-maps that model the physical storage location of pages; and temporal schemes. The relative merits of each organisational scheme are discussed, and systems demonstrating each technique are noted; Table 1 summarises their capabilities and relative merits. Hub-and-spoke dynamic trees Hub-and-spoke dynamic trees are generated in response to the user's navigational acts. Each newly visited page is added to the display, with a link showing its connection with the previous page. Various graph-drawing algorithms can be used to generate the display (with consideration of cyclic page links), resulting in a tree, nested or graph display (Cockbum & Jones 1996). Hub-and-spoke dynamic trees offer several advantages. First, they recognise that a fundamental way that people revisit pages is through hub-and-spoke navigation, where people follow many 'spoke' links from a single 'hub' page, returning to the hub each time (Tauscher and Greenberg 1997). Second, they cluster pages logically related by a user's navigation patterns, independent of a page's actual storage location. Problems occur, however, when trees are deep; because each branching navigational act is treated as a new spoke of the current page, a new tree level must be created. These create long chains that are difficult to draw and visualise as a tree in a small space. To alleviate this problem, information visualisation techniques such as the Hyperbolic Lens (Lamping el al. 1995) can be used. Systems demonstrating hub-and-spoke dynamic trees include MosaicG (Ayers & Stasko 1995), webNet (Cockburn & Jones 1996), padPrints (Hightower el al. 1998), and WebView (Cockburn, Greenberg el al. 1999). Spatial layouts Spatial organisations aim to exploit people's memory for the spatial location of objects. For this to work effectively, users explicitly position page representations (such as thumbnails) in a 2D or 3D space, and the location then serves as an additional cue to page identification. For example, Robertson el al. (1998) showed that with the Data Mountain—a 3D spatial organisation of page thumbnails on an inclined plane—users were able to accurately find specific pages within a set of 100 pages, even after long time intervals. This result was a statistically significant improvement in page access time and error rates when compared with Internet Explorer's favourites utility. Other systems demonstrating spatial layouts include the WebForager (Card el al. 1996). The primary disadvantage of spatial techniques is that users must explicitly position pages within the information space, placing both a cognitive and manipulative burden on the user. First the user must decide how to categorise the page, and consequently decide where it should be located. They must then move it to the desired location. The combination of these activities may be unacceptable to users who wish to simply glance at a page and go onto the next. Although this burden could be eased by having pages assume a default location, there is a risk that the default region could become excessively cluttered, reducing the user's ability to locate pages. Site maps Site maps show a topology of the physical storage locations of pages. They are normally generated statically—as a batch process prior to the user's navigation to the site—and once generated, they can be made available to all site visitors. Page representations within site-maps are normally active, allowing users to navigate directly to pages by clicking. The primary advantage of site-maps is their coverage. All pages at a site can be included in the site-map, aiding the user's orientation and navigation across the entire site. Statically generated site-maps can support initial access to pages as well as revisitation to pages previously seen. Although the wide coverage of site-maps offers advantages, it also means that the representation is likely to show many more pages than the user needs, thus unnecessarily cluttering the display. There are other disadvantages of basing the site-map topology on the physical location of pages: in particular, the physical location of pages need not reflect semantic relationships, and pages on the same topic at different sites will be excluded from the display. Systems supporting site-maps include the Navigational View Builder (Mukherjea & Foley 1995), WebViz (Pitkow & Bharat 1996). WebView uses partial site-maps to ease the problem of excessive nesting that occurs with hub-and- spoke organisation, where new sites become top-level hubs (Cockburn, Greenberg etal. 1999). Temporal organisation Temporal organisation schemes exploit the user's memory for the timing of their actions. For recently accessed pages, a variety of linear Back and Forward revisitation schemes are efficient and easy to use (Greenberg & Cockburn 1996). For temporally distant page access, time segments can be used. For example, Microsoft Internet Explorer's history mechanism allows users to view the last few days, weeks, and months. Many pages are likely to be present within coarse-grained temporal segments such as 'last month', and it is therefore necessary to use secondary categorisation techniques to assist page identification. 125 AJIS Issue When generated? Coverage Supports page Hub-and-spoke Dynamic. Models user's actions. All visited pages. • vol. 7, no 2 Spatial Dynamic. Explicitly positioned by user. All visited pages. • May 2000 Site-map Temporal Static (or dynamic to specific link-depth). All site pages. • X (site only). Dynamic. All visited pages. • revisits? Display tailored to user's interest? X (models site, not actions). Semantic groupings of related pages in display? • (assumes child pages are related to parent pages). • (explicit by user). •• (physical location need not model semantic relationships). X (only if user visits semantically related pages in sequence). Primary advantage Reveals browsing path within and across sites. Location provides a cue to page identification. Supports orientation within site. Recency is a clue to page identification. Primary disadvantage Excessive display nesting with long browsing paths. Explicit action necessary to position page representation. Reveals a superset of 'interesting' pages. Usability of temporal chunks uncertain, distant pages harder to find. Table 1: Summarising the capabilities and merits of display organisation techniques. SUMMARY Interactive graphical tools have the potential to ease many user problems in navigating through the world wide web: they are scalable and can depict extremely large data-spaces, they can support revisitation to all previously seen pages, and they can aid the user's sense of orientation in the web-space. To realise this potential the tools must represent individual pages in a manner that aids rapid identification, and they must organise the display of large sets of pages in a manner that is meaningful to the user. This paper has raised issues in providing identifiable representations of individual pages and in organising the display of many pages. By explicitly recording these issues, we aim to promote the consideration of design alternatives. ACKNOWLEDGEMENTS Partial funding for this work was provided by NSERC Canada and Microsoft Research. REFERENCES Ayers, E. and Stasko, J. 1995, Using graphic history in browsing the World Wide Web, in 'Proceedings of the Fourth International WWW Conference. 11-14 December, Boston'. Bederson, B., Hollan, J., Steward, J., Rogers, D., Vick, D., Ring, L., Grose, E. and Forsythe, C. 1999, A zooming web browser, in 'Human Factors in Web Development'. Card, SK., Robertson, GC. and York, W. 1996, The WebBook and the WebForager: An Information Workspace for the World-Wide Web, in 'Proceedings of CHI'96', ppl 11—117. Cockburn, A. and Jones, S. 1996, 'Which way now? Analysing and easing inadequacies in WWW navigation', International Journal of Human-Computer Studies 45(1), 105-129. Cockburn, A., Greenberg, S., McKenzie, B., Smith, M. and Kaasten, S. (1999) 'WebView: A Graphical Aid for Revisiting Web Pages.' Submitted to OZCHI'99. Greenberg, S. and Cockburn, A. 1999, 'Getting back to back: Alternate behaviors for a web browser's back button', 5th Conference on Human Factors and the Web. Hightower, R., Ring, L., Helfman, J., Bederson, B. and Hollan, J. 1998, Graphical multiscale web histories: A study of padprints, in 'Proceedings of Hypertext'98', ACM Press, pp. 58-65. Lamping, J., Rao, R., and Pirolli, P. 1995, A Focus+Context Technique Based on Hyperbolic Geometry for Visualising Large Hierarchies, in 'Proceedings of CHI'95', ACM Press, pp401-408. Mukherjea, S. and Foley, J. 1995, Visualizing the world wide web with the navigational view builder, in 'Proceedings 3rd International WWW Conference', Vol. 27, pp. 1075-1087. Nielsen, J. 1990, The art of navigating through hypertext', Communications of the ACM 33(3), 296-310. Pitkow, J. and Bharat, K. 1996, Webviz: A tool for world-wide web access log analysis, in 'Proceedings of the 1st International WWW Conference'. 126 AJIS vol. 7, no 2 May 2000 Robertson, G., Czerwinski, M., Larson, K., Robbins, D., Thiel, D. and van Dantzich, M. 1998, Data mountain: Using spatial memory for document management, in 'Proceedings of UIST'98', pp. 153-162. Tauscher, T and Greenberg, S. 1997, 'How people revisit web pages: Empirical findings and implications for the design of history systems', International Journal of Human Computer Studies 47(1), 97-138. 127