Web browsers currently support only minimal information to be associated with a link. The color of a link, if it has not been altered by the page designer, can tell ...
Enriched Links: Supporting AgileViews for Diverse User Needs Gary Geisler, Gary Marchionini Interaction Design Laboratory School of Information and Library Science University of North Carolina at Chapel Hill Chapel Hill, North Carolina +1 919 966-3611 {geisg, march}@ils.unc.edu
ABSTRACT
We describe Enriched Links, a technique for enhancing Web links by displaying small pop-up visualizations—agile views—that provide the user with information about linked resources. Users activate the agile views simply by moving the mouse over a hyperlink, which causes a small selector menu to pop-up. The selector menu provides immediate, intuitive access to several types of views. By examining one or more views, users can quickly evaluate the potential relevance of a linked resource to their particular information seeking need. We believe that this technique improves the browsing experience of Web users by reducing the time and cognitive effort that is often wasted following links that are not relevant to the user’s unique needs. Keywords
Enriched Links, AgileViews, hypertext, links, navigation, visualization, overviews, previews, World Wide Web
While information seeking often entails some degree of trial and error, there is clearly a need to reduce the amount of wasted time and cognitive effort by providing users with more information about resources represented by hyperlinks. Furthermore, because the type of information that most effectively helps a user evaluate a resource depends on that user’s unique information seeking need, the user should have control over the type of information they choose to examine. In this paper we describe Enriched Links, a technique that provides users with information about linked resources that can be used to determine the potential usefulness of the resource before the user expends the time and cognitive effort of navigating to the resource and waiting for it to load. This information is presented in small pop-up views located next to the hyperlink. Access to the views is through a relatively unobtrusive pop-up selector, shown in Figure 1, which is activated when the user moves the mouse over the link anchor, similar to a tooltip.
INTRODUCTION
The World Wide Web provides users with a vast number of resources, easily accessible with a click of the mouse. This opportunity, however, comes at a price. As any regular user of the Web knows, selecting a link is often a gamble, involving the hope that by waiting for the linked page to load the user will be rewarded with information that meets their current need. Unfortunately, many times this gamble is lost and significant time is wasted following links that lead to pages that are dead, out-dated, bloated with images, or otherwise inappropriate to the user’s needs. Even worse, the navigation process sometimes leads a user down a blind path and they lose their way completely.
Figure 1. Enriched Link with Pop-Up Selector The pop-up selector gives the user the capability to mouse over the menu selections to examine one or more types of information about the linked resource via pop-up views. Figure 2 shows an example of a Preview for a linked Web page. In this case, the user is able to see the title and file size of the linked page, as well as the general layout of the page in a thumbnail image. Depending on the user’s needs, he or she might quickly mouse over the Overview and History selections to view more data about the linked page, or simply move the mouse off the menu, causing it disappear, and move on to examine other links on the page.
description provided by the Web page author and the knowledge and context of the user. Often, the information most relevant to a user in determining the likelihood of a linked resources value is the URL itself, displayed in the status bar at the bottom of the browser window [13]. As an informative indicator, the URL is highly dependent on the user’s Web browsing experience, both in general (knowing “index.html” is usually an introductory page, or that “links.html” is often a related resources page), and in particular (knowing a certain server is slow during the day, or that clicking will return them to a page they already know about). Figure 2. Preview Pop-Up Visualization The use of the multiple views accessed through a simple pop-up menu is modeled on basic characteristics of human information processing and the way humans intuitively use views in the physical world. Just as in the real world people quickly and smoothly change their focus from a distant to a close-up to a peripheral view, we believe that flexible, easily-controllable views of digital information will provide users with a more natural and satisfying experience. We believe that using this model—which we call AgileViews—to enhance the information provided by Web links will improve the user’s browsing experience, not only by reducing the amount of cognitive effort wasted following inappropriate links, but also by enabling users to focus on the view that provides the type of information most appropriate for their unique context and information seeking needs. The examples of Enriched Links in this paper show three types of views, but it is important to note that the exact number, name, and content of each of these views is not fixed; as discussed later, careful consideration of the type of information provided by a Web site will dictate these choices. THE IMPOVERISHMENT OF WEB LINKS
While there are several ways that users come across new Web pages (e.g., references from friends, colleagues, news media; search engines), users most often reach new pages by selecting hyperlinks. Studies by Tauscher and Greenberg [14] and by Catledge and Pitkow [4] both show that the Open URL navigation action makes up about 50% of all navigation actions, and of those Open URL actions, about 50% are clicks on links (42% and 50% in each study, respectively). Despite this relatively high frequency of use, users select links based on remarkably little information. The popular Web browsers currently support only minimal information to be associated with a link. The color of a link, if it has not been altered by the page designer, can tell the user whether or not they have recently visited the page. The text of the link can provide information ranging from very informative to not informative at all, depending on the
There are potential, partial solutions to this problem. The HTML 4.0 specification [11] lists a number of possible attributes for the link anchor element, including ways to identify the type of content contained in the linked resource, its language, as well as specifying a title and class information. The popular Web browsers currently provide little or no support for these attributes, however. An XML-related language called XLink contains provisions to associate metadata with links and to describe the relationship between linked resources [6]. This is a relatively new development, however, and again, not supported by current Web browsers. Likewise, link services have been proposed to store link information separately from the linked documents; this model has many potentially beneficial ramifications, but it is unlikely that it will be widely adopted in the near future [3]. Even if current Web browsers did support link types as defined by HTML 4.0 or XLink, it would be a limited solution to the problem. Several hypertext systems developed before the arrival of the Web featured ways of providing information about links and linked resources. These systems enabled authors to either select from a defined set of identifiers (gIBIS [5], MUCH [15]), or specify arbitrary identifiers (NoteCards [7]). The usefulness of these features, however, is dependent on the assumptions that authors actually take the time to apply chosen identifiers and that these identifiers are applied appropriately. There is evidence that even in relatively restricted hypertext systems these assumptions are often violated [15]. In the much more open and decentralized Web environment it is likely that these assumptions would be violated much more frequently. Rather than rely solely on authors to properly identify links and linked resources in their pages, a more complete approach might be to automatically extract information from the pages and associate this information with Web links that connect to the pages. Automatically extracted information does not rely on the conscientiousness or skill of the Web page author, is always relatively up to date, and can be presented in ways that speed up and improve the Web browsing experience. Furthermore, by carefully considering the information that can be extracted from Web
2
pages and logically grouping it, we can provide a means to support the variations of users in terms of experience, context, and specific information need. Although two users may be viewing the same Web page, it is very possible that they have different purposes for viewing that page and that these different purposes extend to the resources linked to that page. Even the same user viewing a given Web page will have different information needs at different times. Describing the entire range of possible types of information needs is probably impossible, but reviews of browsing behavior indicate that there are three general types of browsing that can be represented by the type of information need [8]. In a directed or “known item search” the user is motivated to find a specific resource. In the Web context, this may be a specific Web page the user has seen before, or a bit of information on a specific Web page. The goal of a semi-directed search is less definite, but there exists some conception in the user’s mind of what type of information would satisfy the information need. Marchionini describes this as similar to a user entering a single term in a full-text retrieval system and carefully examining the results. Finally, an undirected search resembles what is sometimes referred to as “surfing the Web,” a general, somewhat random search for Web pages that might interest the user. While users with different information needs as described above may initially begin browsing at different starting points (for example, a user looking for a specific page might start at a search engine, while the Web-surfer might start at a resources page for a favorite topic), all users inevitably reach a point where they face a page containing a number of links that could potentially help them with their information need and must decide which to follow. By enriching links with several different types of views of the linked resource, we believe each user can quickly examine one or more views appropriate to their information need and make a more informed decision about which link to click. ENRICHING LINKS WITH AGILEVIEWS
Conceptually, the Enriched Links technique “loads” or enriches Web page links with information about the linked resource. Moving the mouse over a link activates the display of the resource information. Quite a bit of potentially useful information about Web pages is readily available for this purpose. A crucial factor on the usefulness of the system, therefore, is the consideration of how to select, organize, and display the information available so that it provides maximum benefit to the user without negatively affecting the browsing experience.
available information in one view would require different users with different needs to sort through some irrelevant information to get what they need, again probably increasing cognitive effort. To help us determine how to most appropriately organize available information to maximize usefulness while minimizing the changes to the user’s expected browsing experience, we ground our decisions in a framework that mimics human information processing in the real world called AgileViews. AgileViews
AgileViews is a human-centered framework for interface design that gives people flexible control over different views of an information space [10]. These views are designed to help users make more informed decisions about where they should focus their attention during information seeking. Views are defined through visual partitioning of the information space, where the partitioning is based on metrics appropriate to the space (e.g., time, linear direction, magnitude, or spectrum). In addition to defining useful and appropriate views, control mechanisms must be available to easily control transitions from one view to another. When driving an automobile, you are able to effortlessly shift your view from the road directly in front of you to what lies in the distance, to your review mirror to see where you have just been, even to a map of the road you are driving. We believe that just as people are able to easily and naturally shift their focus from one view to the next in the physical world, users should be able to shift between different views of their information space as appropriate to their current information seeking needs. By creating useful views and methods to easily move between them, we can give users more control over the information seeking process and provide for better decision-making and understanding. Figure 3 illustrates the AgileViews model. The primary view is represented by the stacked rectangles at the right. Overviews and previews provide information seekers with look ahead functionality to make judgments before primary views are displayed. Reviews provide historical information about current or past searches. Shared views leverage the skill and knowledge of other people. Peripheral views provide the context for the current focus and includes any views in windows that are on the screen but not currently active.
Displaying the information physically distant from the link, for example, probably causes almost as much cognitive effort as actually navigating to the page. Displaying all
3
different information needs browse a Web page containing enriched links. Using Enriched Links with AgileViews
The Open Video Repository1 is a Web site that houses a collection of digital video segments freely available for research purposes [12]. Researchers who use the repository have a wide range of digital video related research interests, such as automatic segmentation, face-recognition, or keyframe extraction algorithms. In the examples that follow, we suggest how three users with different experience and goals might utilize agile views to more easily and efficiently find content appropriate to their needs when visiting a Web site that uses the Enriched Links technique. Figure 3. The AgileViews Model When designing an interface for an information space, one can use this model as a guide to determining which views might be most appropriate for the given context and organize displayed information in accordance with the chosen views. For instance, a basic implementation of the AgileViews model in a general Web context might define three views: •
Preview: A thumbnail image of a Web page, supplemented by the title, an abstract, and the size of the page. Preview information provides the most immediate, most holistic look at the linked resource; while the thumbnail image would be to small to read, we believe that the visual cues in a page layout provide important clues that inform intelligent link following.
•
Overview: A summary of the objects within a collection, including objects that make up a linked page. A graphical representation might show the number of links, images, and other media contained by the linked page, each categorized by internal or external links (indicating perhaps whether the page is a self-contained entity or more of a pointer to other resources). Also, a representation of dead links could be provided to help identify pages that are out-dated or poorly maintained.
•
Shared view: An indication of how frequently other users access the page and which domains they come from, which might be used as a rough measure of the page’s popularity among different types of users. Or, in an e-commerce context, ratings of the page or product by other users.
Defining the views in this way ensures the views are relatively small, cohesive, and self-explanatory. At the same time, the distinct partitioning of views supports the use of specific views by users with different experience and information seeking needs. To complete the model we define a method that gives users effective control over the agile views, which in this paper is the Enriched Links technique. To illustrate these last points more concretely, we next present a scenario in which three users with
Imagine first a user who has previously visited the Open Video site (shown in Figure 4) and downloaded several video segments that contain lots of shots of people. These segments proved ideal for this researcher’s face-recognition research, and he would like to download another segment with similar visual characteristics. He knows he saw at least one other segment on a previous visit to the site that would be ideal.
Figure 4. Open Video Repository Web Site Search Facility Data that can help a user with this type of information need might be a thumbnail preview of a Web page that enables visual recognition, such as the one shown in Figure 5, along with the title and a text description that helps the user determine whether this is the sought after page. This user quickly moves the mouse down the list of video titles, pausing over each to display the Preview. The Preview shows the user a keyframe from the video and the video
1
http://openvideo.dsi.internet2.edu/
4
title, information that he can use to very quickly determine if this is the item being sought.
than others, this user might download a few segments at random, but he might also use the Shared view (called History at the Open Video site) to determine which segments have been used by other researchers most frequently, as shown in Figure 7. Upon finding a couple of the most popular segments, he downloads these to take a look.
Figure 5. Open Video Preview Pop-Up Visualization The goal of the second user is less definite. This user is performing research that requires a variety of video segments in terms of length. She has already downloaded several short clips and now wants to try her algorithms on a long segment in color with relatively little movement. Useful information that would support this type of information need is likely to be the Overview, which summarizes the general characteristics of the object in relation to the video collection as a whole. By quickly examining Overview information for each video segment to see when it was created, its sound and color characteristics, and graph showing the length of the clip compared to the longest clip in the collection, this user can rapidly move down the list until a likely match for her needs is displayed.
Figure 7. Open Video Shared View Pop-Up Visualization In each of these examples, the AgileViews enabled the user to move his or her mouse down the list of available video segments, quickly selecting from the Enriched Links popup menu a view of information that helped him or her determine if the resource would meet his or her particular goal. By eliminating the need to navigate to an additional page each time he or she wanted more information about an item in the list, the Enriched Links technique made the process of examining and evaluating many potential items much more efficient. SYSTEM DESIGN
In this paper we describe the Enriched Links technique as one that is implemented by the administrators of a given Web site. The result is that any user who requests a page hosted by the given site is able to see and use the enriched links on that page, for links to resources also hosted by that site. While useful for many specific situations, this implementation is limited in its scope.
Figure 6. Open Video Overview Pop-Up Visualization Our third user has been told that the Open Video Repository might be a good source for video segments he might need for some future research and is visiting the Web site for the first time. After browsing the various views for several video segments, he decides to download a few segments and check out their quality. Without detailed knowledge of what characteristics might make a particular segment better
A more general version of this implementation would provide enriched links for any Web page, regardless of where it was hosted. Such an implementation could use a proxy server as an intermediary which fetches and processes requested Web pages before displaying them to the user with the additional view information. Both methods are feasible and indeed could co-exist. While an implementation that provided users with enriched links for any Web page is certainly a more attractive solution in the long run, for our initial prototypes we have chosen to focus on the more restricted hosted site implementation. This implementation provides several advantages.
5
Because we have access to all the Web pages and associated information such as access logs, much of the processing necessary to create the agile views can be performed in advance. This is likely to result in noticeably faster page loading when compared to the proxy implementation, where all processing must take place at the time the user requests the page. Some types of information, such as the access logs, can be very useful for users to judge the potential usefulness of a page, but are unlikely to be available using the proxy implementation. In the hosted implementation, detailed access data could be analyzed and provided in a history view, as shown in Figure 7. Finally, concentrating on a hosted implementation enables us to design views that are less generic and more appropriate to the type of information a specific Web site offers. The Open Video Repository scenario described in the previous section is an example of customizing the views to the Web site content. Generating View Information
The data displayed in the pop-up views and the HTML code to support this function are generated by automated scripts on a regular basis (nightly, for instance) to ensure that users accessing the site will view relatively current information. These scripts operate on a customizable set of directories, or an entire Web server, by examining the contents of each file to generate the appropriate information for the views, such as a thumbnail image of the page; the file size of the page; and a count of links, images, and other linked media, categorized by internal or external domain. Other scripts process the Web access logs to generate access data, such as counts of hits to the page by requestor domain and test the links in the page to determine the number of dead links. With all the necessary data extracted, an HTML fragment file for each link in each page is generated and saved. Each fragment consists of the extracted data along with JavaScript and Dynamic HTML code. Each fragment is basically a Dynamic HTML layer, named so that it is uniquely associated with the resource it represents. Separating the layer code into a unique fragment file enables the system to efficiently reuse code: While only one fragment per resource exists, this fragment may be integrated into many different Web pages that link to the associated resource. By generating view information offline and integrating it into requested Web pages at runtime, we are able to ensure that the requested page is always the most recently edited version while adding only a minimal delay to the page response time to integrate the pre-existing view information.
Displaying the Pop-Up Views
With the layers containing view data generated and stored on the Web server, enabling the user to actually view the pop-ups is relatively simple. The Web server is configured to intercept each Web page request and execute a script that, for each link in the page for which a fragment file exists, inserts the generated fragment file into the page and updates the associated link with some JavaScript code. Some additional JavaScript code is inserted into the HEAD section of each modified page to enable the mouseovers that cause the pop-up visualizations to be displayed. The modified file is then returned to the browser. Note that by using the technique described in this section, the modifications to the page described above occur only to the version of the file returned to the browser; no permanent changes to the original source file are made. RELATED WORK
As mentioned in the introduction, the recognition that hyperlinks impose cognitive effort on the user existed before the arrival of the World Wide Web. A number of pre-Web hypertext systems explored methods of reducing cognitive overhead by enhancing links in some way. Most commonly, this enhancement involved identifying the “semantic type” of the link or linked resource. The gIBIS system (graphical Issue-Based Information System), for example, enables authors to provide a description of a linked resource and specify the type of link that connects it to another resource [5]. gIBIS is intended as a hypertext communication tool for structuring issue-based discussions, and thus the types include labels such as “questions,” “generalizes,” and “is suggested”. gIBIS makes use of graphical maps, pop-up windows, and colorcoding to display resources and their relationships. Another hypertext system which enables authoring users to specify the type of link that connects resources is MUCH (Many Using and Creating Hypermedia). The designers of MUCH found that despite providing a number of recommended link types for users, the users tended to use the default link type, and when they did select an alternative type, there were often inconsistencies among users in how they applied the available types [15]. To deal with this problem, the MUCH designers developed a new system, RICH (Reusable Intelligent Collaborative Hypermedia), in which rules for typing links was emphasized. Hyperties [9] provides a brief description of the linked resource at the bottom of the window. This gives the user a concise summary of the resource, but the summary is not necessarily located near the link. The Guide system [1] enables a user to select a link such that the linked resource is displayed in a pop-up window that remains in view until the mouse is released, while the source page remains in view. The pop-up window enables the information to be
6
more closely located to the link, but it consists of the entire content of the linked resource, rather than a summary.
expected download delay, type of object, and time of last visit.
The Fluid links technique developed at Xerox PARC enhances links by providing additional textual descriptions, or “glosses,” that expand out from the selected link [17]. Mousing over a link triggers an animated effect where the page text moves to allow the gloss of additional information to appear in close proximity to the link, without obscuring the any of the existing page text.
CONCLUSIONS AND FUTURE WORK
The Web provides challenges beyond those of dedicated hypertext systems. The basic language of the Web, HTML, is limited in its support for many of the functions the developers of dedicated hypertext systems employed. Web page authors vary greatly in their skills, experience, and goals. Hyperlinks can refer to many types of resources located on servers anywhere in the world. One consequence of the distributed architecture of the Web is wide variability in system response time, or how it takes to connect to a given server. To give users more information about Internet connection speeds, Campbell and Maglio demonstrated a simple method of enhancing Web links by adding “traffic lights” next to links [2]. By referring to the small colored vertical bars, users can gauge in a relative way how long the linked page will take to download. Experiments showed that the traffic lights reduced user time to select links, thus facilitating decisionmaking. Several techniques are being developed that are similar in concept to the Enriched Links technique described in this paper in that they attempt to enhance Web links in a way similar to the traffic lights idea, but provide much more information than server response time. Like Enriched Links, these projects appear to be in the prototype stage and neither has undergone formal user evaluation. Link Lens [13] emphasizes information that will help users judge the time it will take the linked document to download. The Link Lens prototype is a four-tabbed window of information that would overlay the Web page similar to a Magic Lens or movable filter. In addition to server response time and associated network data, the authors propose to show data representing the author, title, keywords, abstract, and number and types of links contained by the page. They also illustrate showing a thumbnail preview of the page and a visual representation of keyword distribution in the document. HyperScout [16] is a system that uses a proxy server and a database of meta information to gather and store document attributes, and JavaScript and Dynamic HTML to display these attributes in a small pop-up window below the selected link. Attributes related to the user’s browsing history is also stored and used to supplement the displayed information. The information contained in the pop-up window varies depending on the information available for the link, but includes such items as title, author, language,
By giving users control over agile views, the Enriched Links technique enables people to evaluate information about linked resources that can help them judge the likely relevance of the linked resource to their particular information seeking need. Using the information provided by the agile views, users can reduce the time and cognitive effort they expend following links to resources that are not relevant to their needs. The AgileViews model partitions information into several types of views. By carefully considering the characteristics of the resources provided by their Web site and creating agile views that succinctly describe these resources, system designers and information architects can use the Enriched Links technique to enable users with diverse information needs to more efficiently use and navigate their site. Several prototype implementations of the Enriched Links technique have been developed, including one for a general-use Web site and one for an e-commerce Web site. We are currently developing a complete system for the Open Video Repository Web site that we believe will enable users to more efficiently find video segments appropriate to their research needs. We also intend to test the effectiveness of the Enriched Links technique for agile views by conducting usability studies in the near future. ACKNOWLEGMENTS
This project was partially funded by the NSF’s Summer Institute in Japan program and the Smallwood Foundation. We also thank Jun Rekimoto and the Sony Computer Science Laboratory in Tokyo for providing additional support. REFERENCES
1. Brown, P. J. Turning ideas into products: the Guide system. Proceedings of the ACM conference on Hypertext. 1987. ACM Press. 2. Campbell, C.S. & Maglio, P.P. (1999) Facilitating Navigation in Information Spaces: Road-Signs on the World Wide Web. International Journal of HumanComputer Studies. 50, 309-327. 3. Carr, Leslie, De Roure, David, Hall, Wendy, and Hill, Gary. The Distributed Link Service: A Tool for Publishers, Authors and Readers. Proceedings of the Fourth International World Wide Web Conference. 1995. 4. Catledge, L. and Pitkow, J. Characterising browsing strategies in the World Wide Web. Proceedings of the 3rd International World Wide Web Conference. 1995. 5. Conklin, J. and Begeman, M. L. gIBIS: a tool for all reasons. Journal of the American Society for Information Science. 40(3), 200-13. 1989.
7
6. DeRose, Steve, Maler, Eve, Orchard, David, and Trafford, Ben (editors). XML Linking Language (XLink), W3C Working Draft. 2000. http://www.w3.org/TR/xlink.
12. Slaughter, L., Marchionini, G., & Geisler, G. (2000) Open Video: A Framework for a Test Collection. Journal of Network and Computer Applications. In press.
7. Halasz, F. G. Reflections on NoteCards: seven issues for the next generation of hypermedia systems. Communications of the ACM. 31(7), 836-52. 1988.
13. Stanyer, Dominic and Procter, Rob. Improving Web Usability with the Link Lens. Proceedings of the Eighth International World Wide Web Conference. 1999.
8. Marchionini G. (1995) Information seeking in electronic environments. Cambridge University Press, Cambridge.
14. Tauscher, L. and Greenberg, S. How people revisit web pages: empirical findings and implications for the design of history systems. International Journal of Human-Computer Studies. 47(1), 97-137. 1997.
9. Marchionini, G. and Shneiderman, B. Finding facts vs. browsing knowledge in hypertext systems. Computer. 21(1), 70-9. 1988. 10. Marchionini, Gary, Geisler, Gary, and Brunk, Ben. AgileViews: A Human-Centered Framework for Interfaces to Information Spaces. Proceedings of the Annual Conference of the American Society for Information Science. 2000, forthcoming. 11. Raggett, Dave, Le Hors, Arnaud, and Jacobs, Ian (editors). HTML 4.01 Specification. 1999. http://www.w3.org/TR/REC-html40/struct/links.html.
15. Wang, W. and Rada, R. Experiences with semantic net based hypermedia. International Journal of HumanComputer Studies. 43(3), 419-39. 1995. 16. Weinreich, Harald and Lamersdorf, Winfried. Concepts for Improved Visualization of Web Link Attributes. Paper submitted to the Ninth International World Wide Web Conference. 2000. 17. Zellweger, P. T., Chang, B.-W., and Mackinlay, J. D. Fluid Links for Informed and Incremental Link Transitions. Proceedings of HyperText 98. 50-57. 1998. ACM Press.
8
