Design Tidbits

back Tidbits Overview

Tools for Design and Visualization

Simplification

Interaction Design

Screen Design

Hierarchies

Visual Design

Design Process

Web, Web Applications, Web Design

Performance

Miscellany

 

 

Appendix: Fighting (with) Hierarchies – Presentation Techniques II

By Gerd Waloszek, SAP AG, SAP User Experience

WebToc | Box Notations | Hyperbolic Browser

See standard presentation techniques

This page shows examples of new presentation techniques for hierarchies. Some one them are already available as commercial products.

 

WebToc

Applications

  • Displays the contents of a web site, classified by type of information

Authors

  • David Nation, Ben Shneiderman, a.o. (University of Maryland, HCIL)

Links

Remarks

  • Participated in the browser competition

WebToc

 

Box Notations

Treemap

Treemap

Purpose

  • Treemap is a hierarchy-viewing object that displays up to thousands of elements at once showing multiple attributes. By recursively partitioning an element's rectangle among its children, a treemap presents the "big picture" of a hierarchy giving users X-ray vision into their mountains of data. Zooming, enter/leave notification, select actions, and much more are supported.

Applications

  • Display of large tree structures in WinSurfer (Windows) or TreeViz (Macintosh) as found in Web sites

Authors

  • Ben Shneiderman, a.o. (MIT)

Links

TreeViz

TreeViz

Basis

Applications

  • Displaying the contents of a web site or directory structure, classified by type of information (Macintosh version)
  • See also: WinSurfer (Windows version)

Authors

  • Ben Shneiderman, a.o. (University of Maryland, HCIL)

Links

WinSurfer

WinSurfer

Basis

Applications

  • Displaying the contents of a web site or directory structure, classified by type of information
  • See also: TreeViz (Macintosh version)

Authors

  • Ben Shneiderman, a.o. (University of Maryland, HCIL)

Links

Remarks

  • Participated in the browser competition

 

Hyperbolic Browser

An older version of the hyperbolic browser

An older implementation of the hyperbolic browser, marketed by InXight

Figure 1: An older version of the hyperbolic browser

Figure 2: An older implementation of the hyperbolic browser, marketed by InXight

Current implementation of the hyperbolic browser

Figure 3: Current implementation of the hyperbolic browser, marketed by InXight and called star tree; click image for larger view

Purpose

  • Focus+Context technique for displaying large tree structures. The current node is displayed enlarged while peripheral nodes are displayed smaller but still provide the context for the current node. A geometric transformation into the hyperbolic plane and then into a circle is used for this purpose.

Applications

  • Display of large tree structures, such as directory trees, web site structures etc.

Commercial Marketing

  • Now marketed by InXight, a Xerox offspring

Authors

  • Lamping, J., Rao R. & Pirolli, P. (1995). A focus+context technique based on hyperbolic geometry for visualizing large hierarchies. Proc. ACM CHI '95 Conference, 401-408.
  • Rao, R. & Card, S.K.(1994). The table lens: Merging graphical and symbolic representations in an interactive focus+context visualization of tabular information. Proc. ACM CHI '94 Conference, 318-322.

Links

Remarks

  • Participated in the browser competition (winner)

 

top top