By: Gerry Gaffney

February 25th, 2005

Reader Rating: 8.5

"A foolish consistency", according to Ralph Waldo Emerson, "is the bugbear of small minds".

Many developers would agree wholeheartedly with that sentiment -- particularly if they've had "consistency" forced upon them by over-zealous usability people.

Users Need Consistency

There is little doubt that consistency is important for users. Consistency makes sites easier to use, because visitors don't have to learn new tricks as they move around.

Sites should be internally consistent: standards and conventions should be established and applied throughout all the content. For example, a user who encounters the "Search" at the top right on one page will have problems if it's arbitrarily moved to different locations on other pages of the site.

Sites also need to be externally consistent, that is, consistent with general practice. Users will tend to apply rules they've learned elsewhere, even if those rules don't actually apply to the current site. They bring to your site their own experience and expectations. If you ignore that, you risk causing confusion and alienation.

Consistency Makes Sense

Consistency makes business sense. It allows you to develop a small set of templates for pages and other design elements, and apply them throughout the site. It makes writing, publishing and maintenance easier, and supports the implementation of XML, CSS and other technologies that rely on structured content.

While some developers consider consistency to be a straitjacket, it also has many benefits. It removes the need to make the same decision time and again (will our field labels be left-aligned or right-aligned?), and it enables the use of templates and pre-defined snippets of code.

Aspects of Consistency

Consistency applies to many elements within a Website. Let's consider some of them, understand why they matter, and learn how we can be consistent in applying them.

Language

Is a "twin overhead cam" the same as a "double overhead camshaft"? My motor mechanic knows, but I don't. The use of multiple terms for the same thing is a significant cause of confusion. You can minimize this confusion by using only approved terms.

For example, if you're selling telephones, you may choose "mobile phone" and use it in preference to synonyms like "cell phone", "mobile" or "handset". Of, course users should still be able to search by any of these terms – and, ideally, even by misspellings of them. A product index for a telco, for example, should list "mobile phones", "handsets" and "cell phones".

You should also have a consistent "voice". Don't switch from warm-and-friendly on one page to legalistic and threatening on another. If you refer to the user as "you" in one section of the site, avoid using terms like "My email" on another.

Being consistent in your use of language is very difficult without an editorial overview of your content. As a minimum, identify one individual who is responsible for reviewing all your site content prior to publication.

Consistent language will make your site appear simpler and more authoritative.

UI Elements

There is often a tendency to do clever things with user interface elements -- frequently, with the best intentions -- that cause problems. For example, some sites execute an action when a user selects an option button (or radio button). This behavior can be very confusing if it is unexpected. Saving a single click at the expense of consistent behavior is probably not a good strategy.

The most basic requirement for consistency in UI elements is to apply them as they are originally defined. For example:

• Option buttons (radio buttons) only for mutually-exclusive items, so that the user can choose only one option
• Check boxes if the user can choose one or more options

Avoid applying unnecessary graphical treatment that can confuse the user, making them user of the type of UI element they are using. Option buttons should be round, check boxes square. Editable fields should have white backgrounds; non-editable fields should be grey.

As an example, consider the Google "advanced search" page [1], which contains text fields, push-buttons, drop-downs, option buttons, links and various other elements, all of which are clearly discernible for what they are.

Contrast this with the Flash version of the Mont Blanc Website [2], where a novel user interface, while visually attractive, stylish and on-brand, is comparatively difficult to use and navigate.

Layout

If your Website was the first in the world, you could be entirely free in the way that you laid out your pages. You might decide that primary navigation should be on the right of the screen, secondary navigation on the bottom, and content on the top left.

However, existing general practice constrains what you can do. Of course you can still choose an unusual layout, but in doing so, you risk confusing your users, whose general experience on the Internet leads them to expect certain conventions.

For example, the company logo should appear at the top left of the page. HSBC [3], Wired [4], and No Logo [5] are all very different organizations with very different Websites, but each places the logo (with associated homepage link) at the top left. Some other well-established conventions are:

• Navigation on the top or left (or both)
• Breadcrumbs (if used) below the primary navigation
• Content in the centre of the page
• Related material and promotions on the right
• Search on the top right (although there are many exceptions to this)

When choosing layout options for your site, spend an hour touring similar sites and get a feel for the general practice. Move away from this general practice only if you have solid reasons for doing so.

People have a strong memory for location, and your designs can leverage this characteristic by reserving particular locations for screen elements (navigation, search, login, content) and applying them consistently. In usability tests, we've seen users become totally lost by navigational elements that appear to be the same, but have actually changed -- the users simply don't register the change and can't find the content or features they want.

Functions

Another aspect of consistency focuses on the functions that your Website supports. For example, a public transport Website might be expected to offer timetables, fare information, and a trip planner. A quick review of such sites -- Berlin's BVG [6], Melbourne's Metlink [7], and San Francisco's Bart [8], for example -- will reveal that the trip planner, or a link to it, can be expected to appear on the home page.

Similarly, a cinema Website may be expected to offer a ticket-booking system. If your site cannot provide this expected functionality (for budgetary reasons, for example), you should at least provide information on equivalent functions (such as a phone number for bookings).

Visual Treatment

Visual treatment is frequently the area in which developers will have most freedom of movement. However, once you've chosen a visual language, it's important that you stick to it. As the user moves through your site, the visual treatment provides reassurance that they are still in the same place, and gives an overall impression of professionalism and reliability.

Visual treatment applies not only to the obvious elements like logos and navigation, but also to content elements, fonts and backgrounds. The use of CSS can help ensure the consistency of these elements.

For an example of a consistent visual treatment and layout, see the Red Hat Website [9]. A relatively small number of strongly identified elements provide for the consistent presentation of content throughout the site. Primary navigation is immediately apparent (and reinforces the branding). Secondary and subsidiary navigation is immediately identifiable. Columns are applied consistently and rationally (single column for dense copy; two-column or three-column layout for overview pages with multiple links). All tables use the same layout, colors and fonts.

Consistency can be your Friend

Consistency can be something that you can use to your advantage, rather than a straitjacket that constricts you unnecessarily. It can help minimize your development and maintenance costs, free you from having to be concerned about relatively trivial design issues, and provide an enhanced user experience for your customers.

[1] http://www.google.com/advanced_search?hl=en
[2] http://www.montblanc.com/index.php?version=flash
[3] http://www.hsbc.com
[4] http://www.wired.com
[5] http://www.nologo.org
[6] http://www.bvg.de/e_index.html
[7] http://www.metlinkmelbourne.com.au/
[8] http://www.bart.gov/index.asp
[9] http://www.redhat.com