Navigating the web presents a struggle between focus and context. After following a number of links, people have difficulty remembering where they’ve been and navigating links they have followed.
WebMap is a browser extension that shows a graphical relationship between web pages, e.g. a small selectable circle for each page, colored links denoting domain or read/unread status.
Other techniques of showing detail at particular nodes while maintaining context include fisheye views (extended with graphics, 3D, hyperbolism, animation, and zooming), using filters, and visualizing 2D layouts.
A Zooming Web Browser
Built on Pad++, which provides an extensive graphical workspace where dynamic objects can be placed at any position and at any scale. Supports panning and zooming.
“Back” button replaced with “Previous” (previously focused page) and “Parent” (the ancestor of the current page).
“Show all” button zooms out such that all pages are visible. A single click on a any page will bring it to focus.
Panning by holding the left mouse button and dragging. Zooming in by holding the middle button. Zooming out by holding the right button. Zooming happens around the mouse cursor.
Pages further (distance = length of shortest path) from the focus page get smaller. Ancestors and descendants visible on the sides.
Clicking on a link brings up a new page, and animates its addition to the tree of pages. If the link points to an already loaded page, then position in tree is unchanged.
Scrollbars given to pages longer than a given size to minimize disruption.
Usability Testing and Results
The Pad++ browser was pitted against Netscape. There were 31 interlinked web pages in the study.
Tasks involved: navigating to specified pages; retrieving and comprehending information about the whole set of pages (e.g. sum of an occurrence); retrieving and integrating information from different pages.
\(n = 32\). \(2\) responses discarded because of a \(\le 50\%\) correctness in responses. \(3\) of \(24\) questions discarded for being too difficult (\(\ge 20\%\) missed them). Only times for correct answers were used in calculating average time.
Results: users took longer to carry out tasks in the Pad++ browser. Attributed to technical problems with Pad++ that made it slower than Netscape.
Users had positive reviews of Pad++, e.g. getting the whole picture; zooming; ease of completing task once they understood the layout. Interestingly, users stuck to what they knew despite being trained on Pad++.
Improvements made to the Pad++ browser: 16-bit X-server instead of an 8-bit one for 2x speed boost; centering the just focused page; high quality system fonts; ability to de-focus a page with a click; thinner pages for more context; fixed cursor bug; updating cursor when hovering over a link.
The second time around, 7 subjects from the Pad++ development team were used, to avoid the case where all prior subjects were regular Netscape users. This time, subjects performed the browser task \(23\%\) faster on average using the Pad++ browser than using Netscape.
Pad++: Zoomable User Interfaces (ZUIs) > 3. An HTML browser. https://www.cs.umd.edu/hcil/pad++/tour/html.html#a11 . Accessed Oct 12, 2021.
The WebBook and the Web Forager: An Information Workspace for the World-Wide Web. Stuart K. Card; George G. Robertson; William York. https://www.academia.edu/download/49926945/The_WebBook_and_the_Web_Forager_video_us20161027-28563-9zoxlw.pdf . 1996.
Safari 15 Release Notes | Apple Developer Documentation. https://developer.apple.com/documentation/safari-release-notes/safari-15-release-notes . Accessed Oct 12, 2021.
Organize your tabs with tab groups in Google Chrome. Edward Jung. https://blog.google/products/chrome/manage-tabs-with-google-chrome/ . May 13, 2020. Accessed Oct 12, 2021.
Group Asynchronous Browsing on the World Wide Web. Wittenburg, Kent; Das, Duco; Hill, Will; Stead, Larry. http://www.w3.org/Conferences/WWW4/Papers/98/ . 1995.