A heatmap-based visualization for navigation within large web pages

ABSTRACT

When a web browser is used to read documents which consist of multiple long pages, such as technical documentation, today's browsers only offer inadequate support for users to orient themselves within these pages. Even if a table of contents is present, no information about the size of individual sections is available. Furthermore, when jumping to different parts of a document, there is no way to find sections that have been visited earlier -- the browser's history functionality only works on the level of URLs, not within pages. In this paper, we introduce a tool that increases users' awareness of the organization of long HTML pages and visualizes their own navigation movements within these pages. Our JavaScript prototype uses a simple user interface concept which concentrates on automatic collection of information. It visualizes section sizes in a table of contents which is generated for all pages. Additionally, a heatmap highlights those parts of each page which have been viewed for extended amounts of time. In a user study, our concept is compared to the predominant existing in-page navigation aid, a fixed table of contents at the top of the page.

REFERENCES

• 1: Donald Byrd, A scrollbar-based visualization for document navigation, Proceedings of the fourth ACM conference on Digital libraries, p.122-129, August 11-14, 1999, Berkeley, California, United States [doi>10.1145/313238.313283]
• 2: Andy Cockburn , Carl Gutwin , Jason Alexander, Faster document navigation with space-filling thumbnails, Proceedings of the SIGCHI conference on Human Factors in computing systems, April 22-27, 2006, Montréal, Québec, Canada [doi>10.1145/1124772.1124774]
• 3: Jamey Graham, The reader's helper: a personalized document reading environment, Proceedings of the SIGCHI conference on Human factors in computing systems: the CHI is the limit, p.481-488, May 15-20, 1999, Pittsburgh, Pennsylvania, United States [doi>10.1145/302979.303139]
• 4: Kasper Hornbæk , Erik Frøkjær, Reading patterns and usability in visualizations of electronic documents, ACM Transactions on Computer-Human Interaction (TOCHI), v.10 n.2, p.119-149, June 2003 [doi>10.1145/772047.772050]
• 5: Soichiro Iga , Makoto Shinnishi, SnapShoot: integrating semantic analysis and visualization techniques for web-based note taking system, Proceedings of the 2006 Asia-Pacific Symposium on Information Visualisation, p.161-167, February 01, 2006, Tokyo, Japan
• 6: Bill N. Schilit , Gene Golovchinsky , Morgan N. Price, Beyond paper: supporting active reading with free form digital ink annotations, Proceedings of the SIGCHI conference on Human factors in computing systems, p.249-256, April 18-23, 1998, Los Angeles, California, United States [doi>10.1145/274644.274680]

INDEX TERMS

Primary Classification:
  H. Information Systems
  H.5 INFORMATION INTERFACES AND PRESENTATION (I.7)
      H.5.4 Hypertext/Hypermedia

Additional Classification:
  H. Information Systems
  H.5 INFORMATION INTERFACES AND PRESENTATION (I.7)
      H.5.2 User Interfaces (D.2.2, H.1.2, I.3.6)

Keywords:
WWW, heatmap, history visualization, long web pages, navigation