Two Basic Hypertext Presentation Models

by Jakob Nielsen on July 1, 1995

Summary: Card sharks vs. holy scrollers: the two main ways of presenting interlinked information.


Sidebar to Jakob Nielsen's column on browser navigation features.

The hypertext world has classically distinguished between two fundamentally different ways of presenting hypertext nodes on the screen: scrolling and cards. Throughout the history of hypertext, designers of hypertext systems have argued about the relative merits of these two contrasting approaches. The proponents of the scrolling model are sometimes called the holy scrollers and the proponents of the card model are called the card sharks. Here are examples of documents I have authored myself in these two models, using pre-WWW hypertext systems.

Scrolling Model

Screendump from hypertext document in Guide
Typical scrolling hypertext (done in the Guide system).
Bold-faced words are replacement links that cause the text to expand in place ("stretchtext").
Italicized words are traditional hypertext links to other nodes, and underlined words activate pop-ups.

One major approach is the scrolling (or windowing) model in which a node may be contain more information than can be seen at any one time. The user moves linearly in the node by scrolling its window up or down. The benefit of this model is that a node may contain as much information as is needed to explain whatever concept it is supposed to cover. Also, one-dimensional navigation is particularly easy to conceptualize and comprehend, and it is easy for users to discover and understand their current location within the larger file (just look at the thumb in the scrollbar!).

Card Model

Screendump from hypertext document in HyperCard
Typical hypertext design using the card model (done in HyperCard).
Note the many navigational features (arrows etc.) to move between cards.
Also note the use of overview diagrams with checkmarks as footprints on the map.
The upper right corner records a "readwear" indication of time spent at each node.

The other fundamental approach to hypertext is the card (or frame) model in which a node has a fixed size and layout, all of which is displayed at once. This model limits the amount of information that can be contained in any given node, and the user has to move to another node to see more. The benefit of the card model is that the author can exercise more control over the appearance of the information and that whatever has been designed to be a node is in fact seen as a unit with everything visible.

Note added December 1996: The card model is particularly suited for WebTV and other cases where information needs to be presented on a known, fixed-size monitor. Specifically regarding TV user interfaces, it should be noted that scrolling is particularly unpleasant because of the low quality of the display and the limitations of the remote control.

References

For more information about the first design, see
Nielsen, J., and Lyngbaek, U. (1990). Two field studies of hypermedia usability. In McAleese, R., and Green, C. (Eds.), Hypertext: State of the Art, Ablex, 64-72. (Paper presented at Hypertext'2 Conf., York, United Kingdom, 29-30 June 1989).

For considerable additional detail about the second design, see:
Nielsen, J. (1990). The art of navigating through hypertext. Communications of the ACM 33, 3 (March), 296-310.


Share this article: Twitter | LinkedIn | Google+ | Email