Ensure consistency of display - general advice
Why this is important
The need to preserve consistency as far as possible throughout the design of a web or multimedia resource is essential for accessibility and usability purposes. A design that preserves consistency in screen location of objects such as navigation bars, colours and terminology will improve usability by helping to reduce the cognitive load placed on users.
This will be particularly of benefit to people who, for reasons of specific learning difficulty, short term memory loss or attention deficit, may otherwise have trouble understanding or remembering how to use the resource. Consistent design also helps people who cannot see the interface, or have difficulty visually scanning the screen for the information or options they require.
General Principles
Be consistent in what your end users expect! This should include consistency in:
- Screen layout: make sure as far as possible that objects such as text, navigation bars or buttons are in the same place on each screen, and in the same order. Icons, if used, should be used consistently throughout - and ideally should be consistent with real world objects and concepts.
- Visual design: use colours and text styles consistently. Colour can be used to relate pages or screens of a particular section of the site - and distinguish them from other sections; but avoid screens or pages that vary wildly in visual style.
- Terminology used: be consistent in names given to concepts and objects discussed by the resource - choose one and stick to it throughout; also be consistent when referring to pages or areas of the resource. Text on navigation features should be consistent with the page or screen to which they link.
The advice here is not necessarily to make every page or screen look exactly the same. Deliberate changes in design can be very important in showing differences in the role or functionality of a particular page or screen. For example there is no harm in ensuring that the design of the Home page or introductory screen distinguishes it from all other pages or screens. But avoid unnecessary deviations from a common look and feel that might result in user uncertainty or confusion.
Before you continue
The advice on this page helps you avoid introducing a specific accessibility barrier, but it's not a magic formula. To avoid attempting to follow a technical solution that is not appropriate to the resource and its intended purpose, you need to know the context in which the multimedia resource is being used:
- The purpose or aim of the multimedia resource in question, and whether it is being used to supplement another resource in the learning environment, or whether its use is required by students.
- The target audience, their knowledge and expectations, and the type of browsing and assistive technology that they may be using.
- Whether the information and experiences provided by the multimedia technology are already available in an equivalent, alternative form.
For more background on this approach, see our Guide to the use of multimedia in accessible e-learning.
Technique Details
Using templates wherever possible during design provides an excellent way of ensuring consistency. Cascading Style Sheets (CSS) also offer a great way of maintaining consistency of visual design for web pages, by preserving style information relating to text fonts, sizes and colours, page backgrounds and layout of content in one style sheet. With each page referring to that style sheet, a consistent look and feel can be applied across the board. Importantly too, if you want to change any aspect of the site's appearance - make the necessary change to the style sheet, and the change is automatically applied to every page that refers to the style sheet.
Example 1 shows a screenshot of a website with an inconsistent, confusing layout across its various pages. Layout changes from page to page, the appearance of the main page heading varies from page to page, and the appearance and position of the main navigation feature also changes.

Example 1: Inconsistency in page design.
Example 2 shows a screenshot of a CD-Rom with consistent provision of navigation bar at the bottom of each page.

Example 2: Consistency in page design.
Testing
One the one hand, you can look at each screen or page and compare for consistency - if you can, print off hard copy of each screen or page, compare them and decide whether inconsistencies add to understanding or not. But only by testing your resource with other people will you discover whether any inconsistency in design has an adverse impact on usability and accessibility.
Related Sites
- Interaction Design (Asktog.com)
- Leading user interface design expert Bruce Tognazzini on Interaction Design, including interface consistency.
- The Web Style Guide on Page Consistency (Web Style Guide)
- The Web Style Guide's chapter on consistency and page design.
- Type Consistency (Web Style Guide)
- The Web Style Guide's chapter on typography and consistency of design.
Related Resources
How To
Challenges to Learning
- Memory and recall difficulties
- Attention and concentration difficulties
- Motor and/or manual dexterity difficulties
- Visual difficulties
Case Studies
- John - a former student, who has Ushers Syndrome
- Liz - a PhD student, who is deafblind
- Léonie - Accessibility consultant and part-time degree student, who is blind
- Annalu - Computer Science lecturer, who has Cerebal Palsy
- Natasha - part time MSc student and Project Manager, who has dyslexia
- Accessible PowerPoint for developing student understanding of economics
- Somali Health Programmes CD ROM
- Creating an Accessible Flash Game for the RNIB
- Creating simple multimedia using Video, Microsoft Word and PowerPoint
- Designing a dyslexia-friendly multimedia drawing package for architecture students