A Zooming Web Browser

Dated Nov 5, 1996; last modified on Wed, 13 Oct 2021

A Zooming Web Browser. Bederson, Benjamin B.; Hollan, James D.; Stewart, Jason; Rogers, David; Vick, David; Ring, Laura; Grose, Eric; Forsythe, Chris. Multimedia Computing and Networking, 1996. Vol. 2667. https://www.osti.gov/servlets/purl/454001 . https://www.connectedpapers.com/main/05064f81c4a6352889d2057214e75bb729f39c2f/Zooming-Web-browser/list .

Interesting because these were the early days of the web, back when Netscape was king. The web could have evolved in different ways. Why didn’t the zooming browser catch on?

Problem Context

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.

The related approaches are interesting because they never went mainstream. That said, browsers are still trying to solve the focus vs. context problem, e.g. tab groups in 2020-21: .

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.

Xerox Parc’s WebBook is a 3D browser that allows multiple pages to be viewed simultaneously and supports collections of pages in books that replace bookmark files.

is a highly-cited, (\(n = 650 \)), discussion on the WebBook. Seems like a substantial deviation from vanilla bookmarks, but for some reason, was not adopted in mainstream browsers.

Bookmarks from multiple individuals can be visualized using multitrees, which are convenient for displaying a collection of hierarchies sharing parts of the underlying data.

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

contains archived images of the Pad++ 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.

It’d be helpful if there was a link though. Not sure if the “tree” aspect is strict such that cycles are not allowed.

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.

The initial \(n = 32 \) cohort had 90% students and 10% professionals (so was \(n = 30 \)?). Are they comparable to developers of Pad++, who might be used to shouldering a greater cognitive burden in their daily work?

I wish they had results from a cohort similar to the initial \(32\).

References

  1. Pad++: Zoomable User Interfaces (ZUIs) > 3. An HTML browser. https://www.cs.umd.edu/hcil/pad++/tour/html.html#a11 . Accessed Oct 12, 2021.
  2. 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.
  3. Safari 15 Release Notes | Apple Developer Documentation. https://developer.apple.com/documentation/safari-release-notes/safari-15-release-notes . Accessed Oct 12, 2021.
  4. 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.
  5. 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.