A heatmap-based visualization for navigation within large web pages

  • Authors:
  • Richard Atterer;Philip Lorenzi

  • Affiliations:
  • University of Munich, Munich, Germany;University of Munich, Munich, Germany

  • Venue:
  • Proceedings of the 5th Nordic conference on Human-computer interaction: building bridges
  • Year:
  • 2008

Quantified Score

Hi-index 0.00

Visualization

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.