Join our Mailing List.
Published: March 1999.
Design Patterns for Museum Web SitesFranca Garzotto and Angela Discenza, Politecnico di Milano, Italy
(Alexander et al., 1977), a pattern "... describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice".
Although this definition came from architecture, patterns are now used in many other contexts, including computer-based applications, where they focus on design aspects (Gamma et al., 1996; Appleton, 1997; Schmidt et al., 1996; Bernstein, 1998). Design patterns are ways to record systematically the experience of software designers and to make it reusable: they help designers solve a problem by identifying a similar problem and by adapting its solutions rather than re-starting the definition of the problem solution from scratch (Garzotto et al., 1996; Nanard et al., 1998; Rossi et al., 1997). As such, they represent a way to improve the quality of a software product while reducing the development cost.
In this paper, we focus on design patterns for museum Web sites. Since design patterns are discovered, not invented, our research started from a systematic exploration of a large set of sites chosen from the Best of the Web nomination list of "Museums and the Web '98" conference. We discovered a number of recurring design problems, we factored out some common design contexts and solutions, and expressed them in terms of design patterns. In this paper, we present this experience and we describe a sample of our patterns. We will also outline some statistical results on their frequency and distribution in a sample of the inspected sites.
The definition of a catalogue of design patterns requires the adoption of a reference model for the subject of design. For example, if the design refers to programs, an implementation model must be chosen - usually, it is the object-oriented model (Schwabe et al., 1996; Schwabe & Rossi, 1998); if the design refers to system architectures, a system model must be adopted (suitable for the specific category of systems under consideration - e.g., the Dexter model for hypermedia). A model provides a vocabulary of terms and concepts, which allow to formulate the various constituents of a pattern in an uniform (clear and concise) way.
For the design of WWW hypermedia, we have adopted HDM - the Hypermedia Design Model. We will not describe here the primitives of the HDM language, which is widely known and is extensively reported elsewhere (Garzotto et al., 1993). (We will shortly explain the meaning of the various HDM terms we will use as they appear in the pattern description).
We just mention here one aspect of HDM which may be useful from a methodological and analytical perspective. HDM distinguishes among multiple design dimensions - content, structure, navigation, dynamics, presentation. The content concerns the semantic nature of the information carried on by the application. The structure is the organisation of the application content. The navigation refers to links and browsing mechanisms available to explore the structure. The dynamics defines the run-time behaviour of links and active media, and the operations available to the user to control them. The presentation describes how all the previous features are shown to users, i.e., the visual properties of layout elements. These dimensions help to distinguish among different aspects of a design problem. It should be desirable that each pattern is formulated in such a way that it addresses a single dimension only; unfortunately, design choices are oftentimes interdependent, especially those concerning content, structure, and navigation. Consequently, the same pattern may involve different aspects.(Discenza, 1998).
The design patterns reported in this section mainly concern with the design of groups of Web pages, named "collections" in the HDM terminology. A collection denotes a set of application elements called "collection members". Members can be pages or collections, in turn, which grouped according to some objective or subjective criteria. Collection members very often concern the same category of topics or subtopics (for example, "sculpture works", or "sculpture of a given artist"). In this case, we have taxonomic collections, made of elements which belong to the same "class" (according to come domain oriented classification). In other cases, elements are collected since they are all relevant for some specific situation of use or for user's task (for example, "all the most frequently visited paintings in the museum", or "all the most representative pieces in the museum for a quick overview of its content"). They satisfy some ad-hoc, subjective requirements, not easily expressible in a formal way.
We will first present two basic design patterns for collections - Pure
Guided Tour and Pure Index. We will then introduce a number of variants,
achieved either by refining the problems and solutions expressed by these
basic patterns, or by combining them and their variants.
Pattern Name: Pure Guided Tour (sometime denoted only Guided Tour, for short).
Problem: Given a collection, provide a navigation structure which is easily understandable by users, particularly those who are accessing the collection for the first time, want to explore all its content with no preference on a particular item, and like to be "guided" across the collection contents.
Solution: Identify an order among the collection members, and create links from the first one to the second one, from the second one to the third one and so on, until the last one, and all their inverse links. Create an additional page containing a short introduction to the collection content and purposes; and define a link from this page to the first member of the collection. To improve user understanding of the collection rationale, include here also representative "identifiers" of the members - textual titles and/or visual representatives, such as miniature pictures. Present identifiers in a visual order consistent with the order defined for navigation among members. You may also include in the center any content which can be relevant to understand the collection rationale: "common" information which concern all member pages (e.g., a biographical note about an artist, if the collection is about his works), a short introduction to the collection theme and purposes, some explicit explanation about its scenario of use, and similar.
Discussion: The proposed solution involves structure, navigation,
and content aspects.
Pattern Name: Pure Index.
Problem: Given a collection, provide users with a fast efficient access to each member, and make clear what is the collection intended meaning and which are its members.
Solution: In HDM terms, the solution consists of creating an index. Define an additional page in the collection (named index center - as in a guided tour) which provides a collection overview, by containing at least the identifiers of all members (textual titles and/or visual representatives, such as miniaturised pictures); define links from the center to each member, and vice versa. The center my also include any information which can be relevant for improve user's understanding of the collection rationale (e.g., a short introduction to the collection theme and purposes, some explicit explanation about its scenario of use, or some "common" information which is relevant to all member pages).
Discussion:A pure index is very similar to a pure guided tour
- see the pattern above - but its navigation structure is different. As
in the pure guided tour pattern, the solution involves structure, navigation,
and content aspects. An example of pure index is the collection of all
paintings of a given art period, with the center describing all the painting
titles coupled with artist names, a short introduction to that period and
an explanation about the criteria of painting choice.
There are a number of possible variants to these basic patterns. The
following one, named Hybrid Collection, combines the two basic patterns
Pattern Name: Hybrid Collection.
Variant of: Pure Index, Pure Guided Tour.
Problem: Given a collection, provide a navigation structure which is easily used by various types of users: users who want to scan the collection exhaustively, users who have a "passive" attitude, and users who are interested to subsets of the collection (not known a-priori) or to a specific subject; make clear what is the collection intended meaning and which are its members.
Solution: Define an order among the collection members and create a center page as in a guided tour or an index; define links from the center to the first member and from each member to the next and previous one, as well as links from the center to each member and vice versa.
Discussion: The navigation structure proposed by this pattern
combines index and guided tour navigation. The main advantage of this hybrid
pattern, with respect to the pure guided tour and index, is that it speeds
up the page access within the collection, and allows to achieve a compromise
to satisfy requirements of different type of users, or of different situations
of use, within the same design. Users can choose among different navigation
styles according to their (evolving) needs. For example, users may prefer
to traverse the collection sequentially (in the guided tour style) the
first time they visit it, but may adopt the index style if they visit the
collection again or gain experience about the system. Users may start sequential
navigation and after a while, if they are not satisfied, jump to the center,
inspect the list of members and directly access one of them. Such a need
typically occurs when the collection is significantly long (say, more that
8-10 members), or when moving from page to page becomes frustratingly long
with the delay access time of WWW.
The following patterns are variants of the basic guided tour and index
pattern, and refine their navigation properties. Their are "acceleration
patterns" which introduce features to speed up the user's access to the
collection members, and to reduce the number of page loading from the remote
Pattern Name: Circular Guided Tour.
Variant of: Pure Guided Tour.
Problem: Consider the same problem for the Pure Guided Tour pattern, but also assume that users may need to restart the exploration of the collection again, one or more time, or return to a previously visited element (e.g., since they are studying the collection content).
Solution: Define a basic guided tour and then extend it with
a link from the last member to the first one (or from the last member to
Pattern Name: Accelerated Index.
Variant of: Pure Index.
Problem: Consider the same problem as discussed for the Pure Index pattern, but also assume that from each member user wants to have a fast access to the collection overview (or outline), and to each members, without accessing a different page every time.
Solution: Define a structure very similar to the Pure Index, but i) the center stores only the member identifiers with the corresponding links to each member; and ii) the center is not a separate page but it is visually included in each member of the collection. Such an "embedded" center visually appears as a list of links - or links plus collection members identifiers - and can be arranged in several ways: it can be placed on the top or/and the bottom of the member page or defined as a left-side frame. A combination of these three lay-out solutions can also be provided.
Discussion: This design solution involves structure, navigation,
content, and presentation; it differs from the Pure Index pattern for presentation
aspects, i.e., the way of visually perceiving the center, and from the
absence of real links form the center to the members and vice versa. The
main advantage of the Accelerated Index with respect to the Pure Index
is that it avoids loading the page with the collection center every time
the center content is needed. Since we are talking of Web-based applications,
this is a consistent advantage, because the access to the network is often
slow, and with the Accelerated Index the access to a different member of
the collection requires only one-step (directly towards the sibling member)
instead of two (one-step upwards to the center and then one-step downwards).
The disadvantage of the Accelerated Index is that placing the center within
a member page reduces the screen space available for displaying the content
of the member page. If we compare the various presentation design proposed
in the solution, when a member page is long the second solution - left
side frame - is smarter than the solution in which the center is described
in the page bottom or in the top: it allows users see the center without
scrolling down (if they are placed at the beginning of the page) or up
(if they are at the end of the page). The combination of the three solutions
resolves the described consequences, but introduces redundant mechanisms
Pattern Name: Accelerated Hybrid Collection.
Variant of: Hybrid Index.
Problem: Consider the same problem defined for the Hybrid Collection, but also assume that from each member, users want to have a fast access to the collection overview (or outline) and to each members, without accessing a different page every time.
Solution: Define a structure very similar to the Hybrid Collection, but i) the center stores only the member identifiers with the corresponding links to each member; and ii) the center is not a separate page but it is visually included in each member of the collection. Such an "embedded" center visually appears as a list of links - or links plus collection members identifiers - in a left-side frame.
Discussion: As the Accelerated Index, this design solution involves
structure, navigation, content and presentation, and differs from the Hybrid
Collection for presentation aspects, (i.e., for the way of presenting the
center, and from the absence of real links from the center to the members
and vice versa). Advantages and disadvantages are similar to the ones of
the Accelerated Index. We do not propose here the placement of center links
on bottom and top of the pages since we suggest to include here the links
to the previous and next member (and we want to avoid an access of links
in these areas).
The following pattern concerns navigation within nested collections,
i.e., collections whose member are collections in turn. Nested collections,
very typical of museum Web sites, are ways to express the conceptual organization
of contents in classes and sub-classes (for example, the collection of
all paintings in a museum can be organized by artist, physical allocation,
movement, etc.) according to subjective or objective criteria. Navigation
within nested collections can be inefficient and disorienting, especially
if the depth of nesting is high. The following pattern represent a typical
solution of our inspected Web sites to reduce such problems.
Pattern Name: Top Level Ancestors.
Problem: Improve efficiency of navigation within a deeply nested structure of collections, providing users with easy understandable mechanisms to access alternative branches of a set of nested collections hierarchy.
Solution: Define a link from any element of a nested collection to each member of the first level collection, i.e. to each son page of the root of the hierarchy induced by the nesting structure.
Discussion: Within nested collections, the various styles of navigation within a single collecting, induced by the index and guided tour patterns, are integrated with navigation across collections at different levels. The basic movements is one-step downwards and one-step upwards, i.e., from the center of a collection to the center of the collection at the previous or the next level. Downwards step-by-step navigation can be acceptable when a user needs to explore "horizontally", in a breadth-first style, the various branches of the hierarchy; it can be extremely inefficient when the users proceeds "vertically" (depth-first style): once they get the bottom level and want to access alternative branches in the nested structure, moving upwards step by step can be extremely slow. Most Web sites provide a "go-home" facility which allows users return to the home page, that is usually the center of the top-level index where all the possible top-level branches are listed. A more efficient solution, proposed by this pattern and discovered in many Web sites we have inspected, is make visible and available at any time during the navigation within a nested structure, the list of all top level branches, and to offer the user the possibility of accessing each of them directly. From a topological perspective, in the hierarchical relationship induced by the nesting structure, these elements are, directly or indirectly, the oldest ancestors of any element in the hierarchy - hence the source of the pattern name.
The exploration of each Web museums has been carried out in exhaustive way, visiting all nodes and traversing all links (except to a few complex Web site marked by "*", where we visited a significant portion of the site, omitting some sections).
Table 2 contains information related to the use of indexes. The term "level" denote the level of nesting of a given index in the hierarchy induced by the top-level nested collection (the one rooted at the home page). For example, an index which is not member of any other index has level 0 (this is also called "top-level index"); an index which is member of an index at level 0 has level 1, and so on. The dimension is the number of members of an index. Table 2 reports the dimensions of the indexes at each level where they appear.
Sometime index members are grouped in subgroups; in other terms, this means that the index collection merges members of several collections. In such a case, the dimension is expressed in terms of a sum, where each addendum is the number of elements of a subgroup.
The symbol "/" is used to list the different dimensions of different indexes at the specified level (for example: 3/4/6 means: "at this level, there are three indexes, with 3, 4, and 6 members respectively).
The symbol ">" is used when the dimensions are very variable, so that there are several indexes having an higher number of members with respect to the specified number.
Two main results can be derived from Table 2:
Tables 3, 4, and 5 report some results concerning guided tours and hybrid collections, and highlight that, on the contrary of indexes, guided tours are not employed in every Web site.
Table 3 shows the sites in which pure guided tours or different variants of guided tours occur. The frequency of use of guided tours is 63% of sites have at least one guided tour (pure or variant). The variant Hybrid Collection is used in 45% of sites.
Table 4 concerns pure guided tours only. An analysis of Table 4 shows that only 36% of our inspected sites uses pure guided tours. We have also observed that these are mainly used to browse among pages related to artists or to works in art collections. In one case - Monet Exhibit - two guided tours have a quiz-like interactive behaviour: at any member page, there is a question on the page subject and going-next is allowed only if the user has answered the question correctly.
Table 5 discusses how the Hybrid Collection pattern occurs at the various levels, and presents their dimension.
An analysis of the Tables 4 and 5 shows that the guided tour dimension is very variable; furthermore, it points out that many tours are in a sense incorrect, in that they have only next links, to move forwards, but no previous link: the only way to traverse backwards the sequence of guided tour members is by using the "back" command provided by the browser.
Table 6 reports the frequency of use of the Top Level Ancestors pattern, from which we have derived the following data:
We are planning to continue the work reported in this paper in a number of directions:
Alexander, C. & Ishikawa, S. & Silverstein, M. & Jacobson, M. & Fiksdahl-King, I. & Angel, S. (1977). A Pattern Language. Oxford University Press, New York. (back)
Appleton, B. (1997). Patterns and Software: Essential Concepts and Terminology. http://www.enteract.com/~bradapp/docs/patterns-intro.html. (back)
Bernstein, M. (1998). Patterns of Hypertext. In Proc. of the ACM International Conference on Hypertext '98, ACM Press. (back)
Discenza, A. (1998). Design Patterns for WWW Museum Hypermedia. Technical Report 98.79. Dipartimento di Elettronica e Informazione, Politecnico di Milano. (back)
Gamma, E. & Helm, R. & Johnson, R. & Vlissides, J. (1996). Design Patterns. Elements of Reusable Object-Oriented Software. Addison-Wesley. (back)
Garzotto, F. & Paolini, P. & Schwabe, D. (1993). HDM - A Model Based Approach to Hypermedia Application Design. ACM Transaction On Information Systems, Vol. 11, No. 1, 1993. (back)
Garzotto, F. & Mainetti, L. & Paolini, P. (1996). Information Reuse in Hypermedia Applications. In Proc. of the ACM International Conference on Hypertext '96, ACM Press. (back)
Nanard, M. & Nanard, J. & Kahn, P. (1998). Pushing Reuse in Hypermedia Design: Golden Rules, Design Patterns and Constructive Templates. In Proc. of the ACM International Conference on Hypertext '98, ACM Press. (back)
Rossi, G. & Schwabe, D. & Garrido, A. (1997). Design Reuse in Hypermedia Applications Development. In Proc. of the ACM International Conference on Hypertext '97, ACM Press. (back)
Schmidt, D. C. & Johnson, R. E. & Fayad, M. (1996). Software Patterns. Communications of the ACM, Special Issue on Patterns and Pattern Languages, Vol. 39, No. 10, October 1996. (back)
Schwabe, D. & Rossi, G. (1998). An Object Oriented Approach to Web-Based Application Design. Theory and Practice of Object Systems, 4 (4), J. Wiley. (back)
Schwabe, D. & Rossi, G. & Barbosa, S. (1996). Systematic Hypermedia Design with OOHDM. In Proc. of the ACM International Conference on Hypertext '96, ACM Press. (back)