Understanding HCI


Why Consistency is important

Users need consistency throughout a design scheme so that they don't have to relearn things, or learn different methods of doing things. In addition, costs are reduced where a small set of templates can be designed for the entire site, rather than designing each section from scratch.

Internal Consistency

Internal consistency in websites is important.

In a recent study (Seeking clarity on consistency) the following elements were identified asbeing important to a users view of consistency.In decreasing order of importance they are:

  • Color - The consistent useof colour across a site is the most important element in maintaining a consistent feel
  • Layout grid/navigation structure - When the search button and the navigation bars are always in the same place across the site they are easier to find and therefore save users' time
  • Background elements and font
  • Logo - surprisingly, perhaps, the logo was the element select least often to denote consistency acrossa website.

Language should also remain consistent- use the same term for the same item or concept across the site. This reinforces the language used to the user (particularly important if the terms and concepts are new to the user) and reduces the likelihood ofconfusion. The tone used should also remain the same throughout - either friendly and warm or professional and more removed but not both. Pick one at the start of a particular project and stick to it.

  1. Use of familiar icons and layouts helps reinforce user learning and confidence
  2. The user should not be expected to learn one method of performing an action in one area of the system and another method of performing the same action in another area of the same, or similar, systems.
  3. There should be a consistent format for menus, messages etc

External Consistency/ Conventions

Websites and multimedia artifacts should also be externally consistent that is they should have elements which behave the same as other sites' elements do.

User Interface Elements

In general apply user interface elements as they were designed to be used. For example a radio button should be used when only one choice of a selection is available to the user, as this is the normal behaviour of this element.

The interface should reinforce any expectations from previous contact with the system or other similar systems.


Navigation, Content, Logo, Breadcrumbs, Search and Promotional Material often appear in the same positions on many sites. In usability tests, users have been confused when the interface elements were in an unusual position.


Links have standard default colours. Usability is highest where these default colours are used.

Exercise - External Consistency

Quickly jot down the positions you would expect to find the following elements on websites.

  • Navigation,
  • Content,
  • Logo,
  • Breadcrumbs,
  • Search
  • Promotional Material (advertisements)

Exercise - Consistency Analysis

Analyse a well known site for the following:

  • Consistency ofterms
  • Consistency of tone
  • Correct & consistent useof user interface elements
  • Consistent layout– internally & externally
    • Logo placement
    • Navigation placement
    • Breadcrumbs placement
    • Content placement
    • Related material and promotions placement
    • Search placement
  • Consistent Visuals
    • Headings
    • Fonts
    • Backgrounds
  • External Consistency
    • Use of (non)standard link colour

Implementation - Style Guides

Style Guides can be used to enable a web or multimedia design & development team to create a consistent interface.This can be particularly difficult (and hence particularly important) when there are many people working on the same project.

Creating a Style Guide

  • Select key members of the team to contribute to the style guide. These individuals should have a range of technical, design and usability expertise
  • These contributors should describe the guidelines and standards for the products and the methods for ensuring consistency across products. This guide should provide the basic templates, style sheets, rules of design and methods for checking that these templates and rules have been adhered to.
  • Each new developer on the project should read the entire style guide document before beginning any work on the system.


  1. On screen information must be short and relevant, but it must still make sense.
  2. Making sense to the design team is not the same as making sense to everyone else.
  3. There should be a minimum keystroke effort.
  4. Requests for input should be relevant.
  5. Output should be easy to understand.
  6. A good interface should appear to be natural, i.e. that it is a good way of performing the task.

Further Reading