DES 3.2 - Prioritise information, 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.

  • Prioritise the most important information:
    • Place important items high in the page (above the 'fold') to minimise the need for scrolling:
      • Screen reader users will also be presented with this information earlier;
    • Put the most important information first in links, titles, phrases:
      • This will emphasise the uniqueness of the item and aid quick comprehension.
  • Enhance content for scanning:
    • Structure using short descriptive headings and sub-headings,
      • Communicate the structure visually e.g. larger to smaller as you go down the levels of subheadings
      • Ensure the developer knows the levels as they should code these using special tags (h1, h2, h3 etc,)
      • Try to avoid skipping levels;
    • Use good chunking and spacing to create 'conceptual units' of related content;
    • 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 like dyslexia;
    • Use bold and italic sparingly:
      • Highlight key words and key phrases
      • Do not bold or italicise whole paragraphs;
    • Avoid fancy fonts:
      • Verdana and Arial are almost universally available, and they are good for online reading;
    • Avoid ALL CAPS, blinking text;
    • Do not use underline for anything other than links.
  • Do not use ascii art:
    • If for this cannot be avoided provide a description of it and a link to bypass it:
      • Otherwise screen reader users will be presented with a jumble of incomprehensible characters.

Poor: All caps, all italics and all underline is hard to read   Poor: a list of comma separated services - difficult to read. Good: services presented in a list making them clearer
Poor: Right align and justified make paragraphs hard to read   Poor: All bold does not highlight the essential, strange fonts are difficult to read
Poor: Avoid ascii art - if used then provide a description and a way to skip over it