''[...] 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 twice [...]''
(Christopher Alexander)
The goal of patterns is to document expert knowledge in a defined structure,
so that even novices to that topic are able to understand the content immediately.
This defined structure captures only essential and general aspects of a design
problem and therefore is an enhancement for the communication between designers.
Although expert designers use patterns implicitly in their work, a written
pattern offers designers a vocabulary to talk about their design problems.
While a single pattern describes a special problem, a pattern language combines several patterns on one topic, e.g. Web Design Patterns. Notably useful are pattern languages that interconnect related patterns (Fig. 2). This is a great enhancement when searching for a specific solution. "A pattern language is nothing more than a precise way of describing someone’s experience […]" (Christopher Alexander)
Pattern Languages are qualified to be presented in a hypertextual way. That implies the opportunity to offer multiple ways of searching for a pattern. Besides in doing so related patterns can be connected easily. The user can jump from one pattern to another that might be interesting for his problem too.
Figure 1: How a connected pattern language forms
The first usage of the patterns approach was in the discipline of architecture. Christopher Alexander had the idea of making a pattern, which permits individuals to identify and communicate their living requirements and necessities. Therefore he thought you must find a way to describe the solution to a recurring problem in such a way, that it is understandable by everyone. His way of describing a pattern is known these days as the Alexandrian Form. Interestingly his approach never really became that accepted in the field of architecture, but nevertheless many other fields adapted it. Another very important branch in the usage of patterns is object-orientated programming. In 1987, Kent, Beck and Cunningham dealt with the idea of using patterns for the simplification of recurring programming problems. But not until 1994, when the book “Design Patterns – Elements of Reusable Object-Orientated Software” by the so-called Gang of Four (consisting of Erich Gamma, Richard Helm, Ralph Johnson and John Vlissides) was published, the pattern approach found many supporters. Nowadays many diverse fields like interaction design, web design and even fields like E-Learning adapt the pattern approach.
Figure 2: Development of the publishing of books about patterns (modified after [KoWi07])
Used Patterns for this Website
For the exemplary implementation the pattern collection [DuLaHo2002] is used,
as it offers a great amount of patterns and has very detailed descriptions. The successive patterns are
formed by this structure:
Pattern Group: Pattern Name (Reference Number)
Quotation from the Problem Statement in the book.
Descriptive text why the pattern is used.
Site Genres: Grassroots Information Sites (A6)
"This is the kind of site where people post information on their own hobbies, interests and
political causes. Visitors to a site like this will look for information in many ways, and
the site needs to accommodate these various styles."
As the website provides information on the topic of Web Design Patterns and a collection of
links, the most appropriate site genre would be a "Grassroots Information Sites".
There are no additional functions like forums, only information is presented.
The topics are divided in several parts, e.g. Patterns and Links and so on.
Designing Effective Page Layouts: Fixed-Width Screen Size (15)
"Customer's browser size affect the amount of text they can
see on the screen. When people make their browser's too large,
each line of text becomes too long to read comfortably."
On the website many long texts can be found. Therefore, it is
important to make the readability as good as possible. To avoid too
long lines a fixed-width size is defined as 675 Pixels in the Cascading
Stylesheet.
Making Navigation Easy: Tab Rows (K3)
"Site needs to let customers navigate through categories of content and give
them feedback on where they are. But to make tab rows work well requires
including specific details in the visual."
As the website has no complex structure with many subordinate categories, a
tab navigation was chosen because of its clearness. The user can see all the
topics of the website at once and so has access to the different categories.
As described in "The Design of Sites" it is necessary to "Clearly Identify the
Active Tab" easily. Colors are used to help the user identify the active topic.
If a tab is active its color is the same as
the background color of the content. Inactive tabs are more in the background
with a dark gray color. If the user moves his mouse over an inactive tab it
is highlighted with a white background color.
Making Navigation Easy: Action Buttons (K4)
"Text hyperlinks are good for moving from one page to another, but they are not
quite right for representing actions that do something important, such as
authorizing and purchase or submitting a message to a message board."
As the website uses a contact form for user feedback, we need some kind of
button to submit the form, as well as one for resetting the input. To adjust
the buttons to the design of the website, the usual HTML action buttons are
replaced with an adapted CSS Button.
Making Navigation Easy: Embedded Links (K7)
"Sometimes visitors want to delve deeper into a certain subject that appears
in the text, or they need an explanation but don't want to go searching for it.
Links off to the side or at the end of the text may lack the context necessary
for readers to understand how they relate to specific portions of the content."
As the texts presented on the website contain several interesting topics,
it is helpful to provide embedded links to delve the user's interests. For
example there are links to several books mentioned in the text. They are
referred to on e.g. Amazon or GoogleBooks to allow the user to learn more
about the authors of the book, its content and so on.
[KoWi07]
Kohls; Windbrake.
Entwurfsmuster für interaktive Grafiken.
In M. Merkt, K. Mayrberger, R. Schulmeister, A. Sommer, & I. van den Berk (Hrsg.)
Studieren neu erfinden - Hochschule neu denken.
Reihe Medien in der Wissenschaft (S. 412). Waxmann: München, 2007.
[DuLaHo2002]
Van Duyne, Douglas; Landay, James; Hong, Jason.
The Design of Sites – Patterns, principles and processes for crafting a
customer-centered web experience.
Addison-Wesley Longman, Amsterdam, 2002.