“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, 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, 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, Wired, and No Logo 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, Melbourne’s Metlink, and San Francisco’s Bart, 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. 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.
Frequently Asked Questions about Consistency in Web Design
Why is consistency in web design so important?
Consistency in web design is crucial because it creates a predictable and easy-to-understand environment for users. When a website is consistent, users can quickly learn how it works and navigate it more efficiently. This leads to a better user experience, increased engagement, and potentially higher conversion rates. Consistency also helps to build trust and credibility with users, as it shows that the website is professionally designed and maintained.
What are the key elements of consistency in web design?
The key elements of consistency in web design include layout, typography, color scheme, navigation, and imagery. These elements should be consistent across all pages of a website to create a cohesive and unified look and feel. This not only enhances the aesthetic appeal of the website but also improves usability and user experience.
How can I achieve consistency in my web design?
Achieving consistency in web design involves careful planning and execution. Start by creating a style guide that outlines the design elements to be used throughout the website, such as fonts, colors, and image styles. Then, apply these elements consistently across all pages. Also, ensure that the website’s layout and navigation are consistent, making it easy for users to find what they’re looking for.
Can consistency in web design improve SEO?
Yes, consistency in web design can improve SEO. A consistent website is easier for search engines to crawl and index, which can improve its visibility in search results. Consistency also improves user experience, which is a factor that search engines consider when ranking websites.
What is the role of consistency in branding?
Consistency plays a crucial role in branding. A consistent web design helps to reinforce a brand’s identity and makes it more memorable to users. It also helps to build trust and credibility, which are key to establishing a strong brand.
How does consistency affect user experience?
Consistency greatly affects user experience. A consistent web design is easier to navigate and understand, leading to a better user experience. It also helps to build trust and credibility with users, which can increase engagement and conversion rates.
What happens if my web design is not consistent?
If your web design is not consistent, it can lead to confusion and frustration for users. They may struggle to navigate your website or understand how it works, which can lead to a poor user experience and potentially lower conversion rates. It can also harm your brand’s image and credibility.
How can I maintain consistency in my web design as my website grows?
Maintaining consistency in web design as your website grows can be challenging, but it’s achievable with careful planning and management. Regularly review and update your style guide to ensure it reflects any new design elements. Also, regularly audit your website to identify and fix any inconsistencies.
Can too much consistency in web design be a bad thing?
While consistency is generally beneficial in web design, too much of it can potentially be a bad thing. If a website is overly consistent, it can become monotonous and boring for users. It’s important to strike a balance between consistency and variety to keep users engaged and interested.
How does consistency in web design relate to accessibility?
Consistency in web design is closely related to accessibility. A consistent website is easier for all users, including those with disabilities, to navigate and understand. It also helps to ensure that all users have a similar experience, regardless of their abilities or the devices they’re using.
Gerry Gaffney is director of Information & Design. He has a keen interest in 'Do-it-Yourself' usability. He hopes that one day we can connect all the machines to each other and eliminate the middle-man.