CP 3 Structure and style to maximise readability and scanning

Make it as easy as possible for people to get an impression of what's on offer and find the specific piece of information quickly.

• Structure using short descriptive headings and sub-headings:
  
  • Always have a main title;
  • Try to avoid skipping levels.
• Provide a short summary - particularly for longer pages:
  • 50 words or fewer directly under the main heading.
• For long pages provide a 'table of contents' at the top of the page;
  • Link each item in the contents list to the sub-heading to which it refers.
• Prioritise the most important information:
  • Place important items high in the page (so that they will appear above the 'fold') to minimise the need for scrolling:
    • Screen readers users will also be presented with this information earlier;
  • Put the most important information first in links, titles and phrases:
    • This will emphasise the uniqueness of the item and aid quick comprehension.
• Enhance content for scanning:
  • Use short paragraphs and sentences;
  • Use lists instead of long, comma, separated sentences;
  • Add relevant tables and diagrams to break up 'walls of text'.
• Style for readability:
  • Left align all body text:
    • Do not right, centre or justify - this makes it hard to read, especially for some people with reading difficulties such as dyslexia;
  • Use bold and italic sparingly:
    • Highlight key words and key phrases,
    • Do not bold or italicise whole paragraphs,
    • NB: the system that you use to publish content should style these using special tags called <strong> (usually bold) and <em> (usually italic);
  • Avoid fancy fonts:
    • Verdana and Arial are almost universally available and they are good for online reading;
  • Avoid ALL CAPS and blinking text;
  • Do not use underline:
    • this should be reserved for links only.
• Be careful with colour:
  • Do not impart information using colour alone:
    • Add another cue to the important information (e.g. text in a bracket - see examples);
  • Avoid red/green combinations (in images and text) as these can be difficult to see by people who are colour blind;
  • If you are selecting background and foreground colour combinations, make sure they have high contrast and can be easily read.

 
 

  

• Previous
• Next