Patterns in Web Design

Remember UCDE?

Patterns are a concept originally conceived within architecture (Alexander et al, 1977; Alexander, 1979).

'Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution of that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.' (Alexander et al, 1977, p. x).

The same approach applied in architecture can be applied to interface design. Vora (2008, pp. 9-10) proposes the following benefits of the approach:

Proven design solutions and guidance for their use
Improved design process
Reusability and consistent interfaces
A common, shared language
Effective teaching aid and reference tool
Usable web applications

Documenting patterns

(All based on Vora, 2008)

Pattern name: A short title describing the design solution. Pattern names are written in capital letters.
Problem: A brief description of the design problem(s) the pattern solves and accompanying design challenges and trade-offs (referred to as 'forces' by Alexander et al, 1977) faced by user interface designers.
Solution: The core design solution to the problem. This is a brief statement about the solution (i.e. the pattern) accompanied by an example (i.e. a sensitizing image) illustrating the use in a web application.
Why: Rationale for the design solution's effectiveness.
How: A list of best practices describing the application of the solution and possible variations. One or more illustrative examples are included for each variation to demonstrate how the pattern can be applied effectively in a variety of situations.
Related design patterns: Because it is so often the case that several patterns are used together to create a usable design solution, this section identifies related patterns that designers may want to consider either because they are used together or are relevant for the use of the given pattern.

Example patterns

(All from Vora, 2008)

Primary navigation

Problem

The most common functionality and high-level categories (or objects) within web applications need to be readily available and understood by users. Additionally, users should be able to navigate quickly among major sections from anywhere within the web application.

Solution

Offer users a consistent way to navigate to main application functions and place them in a consistent and salient manner on all application pages.

Why

For web applications primary navigation plays a crucial role in facilitating navigation and orientation. It serves as both a table for contents by exposing high-level application functions and an orientation mechanism that lets user know where they are within the application's structure.

How

Place primary navigation either horizontally at the top of the page or vertically running down the page, either on the left or right side. Web applications have typically favoured placing primary navigation horizontally; Adkinson (2002) found that 87% (65 of 73 sites) of e-commerce applications placed the primary navigation horizontally at the top of the page. This is understandable, since placing primary navigation vertically reduces available space. For web applications presenting tabular data with many columns, vertical placement of primary navigation could result in horizontal scrolling or make tabular data appear cluttered.

Placing primary navigation horizontally, however, limits the number of navigation options it can offer users before requiring them to scroll horizontally. To avoid horizontal scrolling, we applications often resort to having a 'more' option (usually depicted as an arrow icon) to allow users to see additional navigation choices; this is similar to toolbars in desktop applications.

Regardless of the placement of primary navigation, it is important that it be positioned consistently and made available throughout the application.

Make primary navigation visually salient
Highlight the selected navigation option
Remove primary navigation for tasks with self-contained navigation
Establish a correct information 'scent' through effective labelling

Related design patterns

Most web applications support hierarchical navigation, requiring both primary navigation and secondary navigation. For deeper navigation hierarchies, consider breadcrumbs to orient users and show them where they are in the application.

Patterns on-line

References

Adkinson, H. (2002) Identifying De-Facto Standards for E-commerce Web Sites, MS Thesis, University of Washington, Seattle.

Alexander, C. (1979) The Timeless Way of Building, Oxford University Press

Alexander, C., Ishikawa, S., Silverstein, M., Jacobson, M. Fiksdahl-King, I. & Angel, S. (1977) A Pattern Language, Oxford University Press