WWW 2008 / Poster Paper April 21-25, 2008 · Beijing, China The Seamless Browser: Enhancing the Speed of Web Browsing by Zooming and Preview Thumbnails ByungIn Yoo* JongHo Lea Computing & Intelligence Lab. Samsung Advanced Institute of Technology, Gyeonggi-Do, Korea {byungin.yoo, john.lea, kimybae}@samsung.com YeunBae Kim ABSTRACT In this paper, we present a new web browsing system, Seamless Browser, for fast link traversal on a large screen like TV In navigating web, users mainly suffer from cognitive overhead of determining whether or not to follow links. This overhead can be reduced by providing preview information of the destination of links, and also by providing semantic cues on the nearest location in relation to the anchor. In order to reduce disorientation and annoyance from the preview information, we propose that users will focus on the small area nearside around a pointer, and a small number of hyperlink previews in that focused area will appear differently depending on the distances between the pointer and the hyperlinks: the nearer the distance is, the richer the content of the information scent is. We also propose that users can navigate the link paths by controlling the pointer and the zooming interface, so that users may go backward and forward seamlessly along several possible link paths. We found that combining the pointer and a zoom significantly improved performance for navigational tasks. which to ignore. Users seem to rely on various cues (i.e. "information scent") in the information environment of IPTV to guide them to promising links. For example, Kopetzky and Mühlhäuser introduced a system representing a hyperlink with a thumbnail image that appears temporarily (7 seconds) at the position just below the link [7]. Fisheye-based solutions such as fishnet were shown to be useful in reducing the browsing burden with the compact height of a web page [4]. Not only using a visual preview, but [5] combined the advantages of image thumbnail and text summaries. Lam and Baudisch [3] presented Summary thumbnails - thumbnail views with additional text fragments. Summary thumbnails help users both recognize the content of the hyperlink and distinguish visually the pre-view of it from others [3]. Previous work suggests that a number of designs with thumbnails and zoom interaction can enhance the usability of information foraging [6]. This paper presents a new dynamic control approach in combining an image thumbnail, in addition to using both distance-based thumbnails and zoom-transition to the pages on a link-path. In the next section we will see how our new way lightens the burden of chasing the links to find out whether the links are relevant for the user, while keeping the source context as well as determining the usefulness of the chosen link. Categories and Subject Descriptors H.5.4 [Hypertext/Hypermedia]: Navigation ­ hyperlink search, navigation flow, distance based algorithm; H.5.2 [User Interfaces]: Graphical user interface ­ zoomable user interaction. General Terms Algorithms, Performance, Design, Human Factors 2. THE SEAMLESS BROWSER In this paper, we regard that hyperlink documents as a three dimensional space, which contains 2D of the present document and additional depth dimension relating to a path of hyperlinks in the document. So we can imagine browsing around a page with a pointer and finding some interesting link and then digging into it or jumping out of it to the previous page with a zoom interface. Figure 1 shows the state diagram of our seamless browser way controlling with a zoom interface. When we first zoom in on a point, a surrounding area near from the point is chosen and a number of thumbnails (the number varies from 1 to 3 depending on conditions) within this area are shown differently based on the distance from the pointer (i.e. Hyperlink searching mode). Keywords Seamless Browser, Zoomable Interaction, Preview Thumbnails 1. INTRODUCTION IPTV (Internet Protocol Television) is a TV system where a digital television services are delivered by using Internet Protocol over Internet. It provides Video on Demand (VOD) and Internet services such as web full browsing and VoIP. It is very challenging to make IPTV watching experience such as web full browsing more interactive and personalized because it is inconvenient for users to use input devices in the 10-feet distance from IPTV. The 10-feet distance makes it hard to pinpoint the hypertext links or the windows amongst others when a user navigates links in web pages Usually when navigating through webs, users tend to have navigation problems, such as deciding which links to follow and Copyright is held by the author/owner(s). WWW 2008, April 21­25, 2008, Beijing, China. ACM 978-1-60558-085-2/08/04. . Figure 1. The state diagram of our seamless browsing way 1019 WWW 2008 / Poster Paper April 21-25, 2008 · Beijing, China Table 1. Results of experiments in browsing webs (10 subjects) Basic Task Completion Time (Sec) Total # of visited pages Total moving distance of the pointer (in pixels) User Interestedness (1~9) 12.8 1.6 1867.4 1.6 2.4 Single 5.9 1.1 1050.3 4.7 5.3 Triple 5.7 1.1 1125.9 6.7 4.1 Figure 2. Preview thumbnails that show content of pages When a user moves the pointer at the hyperlink searching mode, then the size and the opacity of the thumbnails are changed dynamically: the closer will be bigger and richer (see Fig. 2). If the user zooms in again, then the biggest one will swell and the others will shrink. This is the hyperlink previewing mode, and we can zoom in further to the biggest thumbnail page, and finally transfer it to the current page (i.e. null state). When we zoom out, then we can roll back the steps we have followed. The size and or opacity of the seamless preview thumbnails are determined based on the zoom ratio and the distances of the hyperlinks from the pointer. The distance dn between the pointer (p) and the hyperlink (hn) is calculated by Equation 1. The distance will be restricted within some area in order to reduce the attention diversion, with the [2] principles. 2 2 dn = (| px-hx |) +(| py-hy |) (1) n n User Convenience (1~9) We expected that the condition with triple-thumbnails (i.e. one dominant and large thumbnail beside two smaller ones) will give much more information scent than the single or the basic condition. This hypothesis was supported from the task completion time, but not from the total number of visited pages. The single thumbnail condition was slightly more efficient as a viewpoint of total moving distance of the pointer. The users felt that the triple condition was the most interesting, and that the single condition was the most convenient way. 4. CONCLUSION In this paper, we proposed the seamless browser on IPTV and found that it has following benefits. First, users felt that the transition between hyperlinks using a zoom is smooth (i.e. seamless) and convenient. Second, the restriction of the cursor's activation area and the control of thumbnail numbers help users browse the document in a focused way (i.e. reducing the movement of the pointer) and reduce the void visiting of hyperlinks (i.e. reducing the number of visited pages). Our future work is to investigate the effect of the layout, location, and content variations for the multiple thumbnails Equation 2 shows how to regulate the opacity of the thumbnails. The longest distance between the pointer and a thumbnail within the area is dl. Smax denotes maximum zoom magnification, Sc indicates current zoom magnification, and Z denotes a function that normalizes a ratio of screen zoom magnification (the range from 0 to 1). The size of the preview thumbnail of the hyperlink is calculated by Equation 3, where the maxim size of the preview thumbnail is Thmax. That is, if the nearer is the distance between the pointer and the hyperlink, the bigger the size of the thumbnail, and also the clearer the preview thumbnail will be. dl Sc Z + dn Smax (2 ) + Z ×50100 d S max Op = n Thn = n dl Sc 2 (3) × Thmax 5. REFERENCES [1] Edward Cutrell and Zhiwei Guan, What are you looking for? An eye-tracking study of information usage in Web search, Proc.CHI2007 [2] Tovi Grossman and Ravin Balakrishnan, The Bubble Cursor: Enhancing Target Acquisition by Dynamic Resizing of the Cursor's Activation Area, Proc. CHI2005 [3] Heidi Lam and Patrick Baudish, Summary Thumbnails: Readable Overviews for Small Screen Web Browsers, Proc. CHI 2005 3. EXPERIMENT We implemented the proposed system on C# using Microsoft .NET Framework 3.0 running on the Windows XP. With a full-HD (1920x1080) 52-inch Samsung LCD TV set, a web page with many hyperlinks was displayed (with 28-pt SECPTB033 font). Ten participants were assigned news search tasks 10-feet away from the IPTV [1]. They used a pointing device with three buttons such as zoom-in, zoom-out, and enter button. To investigate the effect of the number of the previews on how users browse on web, we analyzed the following measures: task completion time, total number of visited pages, total moving distance of the pointer, user interestedness, and user convenience. We compared three conditions: legacy (basic) hypertext, single thumbnail, and triple thumbnails. [4] Patrick Baudish, Bongshin Lee and Libby Hanna, Fishnet, a fisheye web browser with search term pop outs: a comparative evaluation with overview and linear view. In Proc. AVI2004, pp133-140 [5] Allison Woodruff, Andrew Faulring, Ruth Rosenholtz, Julie Morrison and Peter Pirolli, Using Thumbnails to Search the Web, Proc.CHI2001 [6] Igarashi, T. and Hinckley, K. Speed-dependent Automatic Zooming for Browsing Large Documents, Proc. UIST 2000, 139-148 [7] Kopetzky, T. and Mühlhäuser, M. Visual Preview for Link Traversal on the WWW. In Proc. 8th Intl. WWW Conf., May 1999, 447-454 1020