At Naviscent, we have had many clients and Internet users ask us to explain exactly what we mean by a “pattern,” in the context of web interface design. Our best recommendation is, of course, to read the Design of Sites book, which contains a full explanation and numerous examples. However, in this and the next few blog entries, we hope to clarify just what a pattern is and how you make use of them.

Simply put, a pattern describes a problem that you might need to solve, in this case a web design problem, and then provides one or more possible solutions for it. However, the solutions that patterns provide are more conceptual than concrete; they provide ideas that you can use in your own ways, incorporating them into your own personalized designs. At Naviscent, we frequently use the same patterns to design web pages for different clients, but we use the patterns to solve the problems in different ways each time. The pattern does not provide a single solution, or a snippet of code, or a software recommendation. Instead, it offers a strategy for the resolution of the problem. Although we use the same patterns, the results are very different from each other.

You are probably already familiar with many of the design problems described by the patterns in Design of Sites, and some of the solutions, as well. For example, you’ve almost certainly used a sign-in process to log on to a web site, purchased a product using a shopping cart checkout, and clicked an action button. These are all design elements that are familiar to the average web user, and after a few experiences, you become accustomed to them, and expect them to look and behave in a certain way. The patterns that describe these elements present them in the form of problems, such as the following:

• How will users know that they are expected to supply a user name and password to gain access to the site?
• How should the site gather the information needed to complete an e-commerce transaction in a secure and methodical way?
• How will users know what screen elements to click and what the effect will be?

Creating Action Buttons

The pattern begins by stating the problem.

Let’s take for an example of a design pattern a screen element that all Internet users have seen and used many times: three-dimensional action buttons. The purpose of action buttons is to make something happen, such as add a product to the shopping cart. These 3-D buttons solve a common problem that you might not have considered to be a design element, but which web users encounter on sites every day: how do they know what screen elements they can click on? Web designers have traditionally based the design of action buttons on three-dimensional physical buttons that are already familiar to the users and which they already know how to use, like the following.

Figure 2-1

After describing the nature of the problem and providing some background, the pattern proceeds with details on various types of solutions.

Designers typically create the three-dimensional visual illusion of an action button through the use of shading and color. The action button color should differ sufficiently from the page’s background color so that customers can locate it without too much effort. This effect makes the action button stand out, so that it looks as though you can press it. The end result is a 3-D button that attracts more attention to the function than a simple text link can. Therefore, to add to the appeal of your site, and to compel your web visitors to perform a specific action, such as ordering a product, a three-dimensional image is preferable to a flat action button or a text link.

Figure 2-2

The pattern also discusses implementation issues that affect the problem and its solution, such as button placement and size, in this case.

Try to place the action button near the object to which it is associated. Traditionally, the best placement is either above or to the right of the object. This makes the button immediately visible to users without forcing them to scroll through the page looking for it. Here is an example of action button placement in Amazon.com’s quick-flow checkout page. Notice how the buttons are located mostly to the right of each object, and how you instinctively associate them with their functions.

Figure 2-9b

There are two types of action buttons: HTML action buttons, and graphical action buttons. Because HTML buttons are created by the client browser, based on text codes, you have little control over how they appear. An example of a gray 3-D HTML action button appears in the following figure.

Figure 2-3

The next figure uses Amazon.com as an example of a web site using graphical action buttons (Find Gifts and Web Search) on its homepage. Because they are graphics embedded in the page, the designer has full control over the appearance of this type of button. At Naviscent, we typically use graphical buttons when designing an interface, so we can gave each site a unique style that best suits the image the client wants to project.

Figure 2.5

Size is a further consideration for action buttons. You want to make sure that your buttons are not so small that users will overlook them, and no so large that they take up more room on the page than is necessary. Additionally, you might want to consider how using images as action buttons can affect the speed at which the page loads. In terms of file size, graphical buttons should be as small as possible, especially if your pages require a lot of them.

Using Patterns

The types of issues included in this discussion about action buttons are examples of the forces that you should consider when you use design patterns. Forces are the goals and constraints that come into play when you are attempting to solve a particular design problem.

This example includes all of the essential elements of a pattern. Each pattern in Design of Sites includes a discussion of the basic problem, an explanation of the forces that exert themselves on the design and general guidance on how to resolve the problem. Notice, however, that patterns do not include specifics on how to create action buttons. The book is about design in its purest form; it contains no code or specific techniques for creating graphics. It is up to you to decide what method, language, product, or technique you want to use to realize your action buttons. Design of Sites concentrates more on how they should look and how you should situate them on your web pages.

In future blog entries, we will discuss in greater detail how to use patterns and how patterns evolve over time.