Diagrams are graphics that can help explain information or enhance understanding. They are especially helpful for people who find reading difficult or those who are visual thinkers. Diagrams can include:

  • process maps
  • flowcharts
  • illustrations

A clear text description structured with headings and subheadings is the preferred method to use to explain information and communicate processes. We recommend trying this before using a diagram as it means that:

  • the majority of users can understand the content
  • the content is accessible to more users
  • search engines can read the text and display in search results
  • the content can be easily updated
  • users can zoom and alter the size of text for readability without it becoming pixelated

If you want to help your users visualise a complex process that links off in many directions, the use of a diagram can be considered.

If you are thinking about using a diagram, contact content.design@ons.gov.uk at the earliest opportunity and we can consider the options and advise on the best solution.

Identifying user needs

When you are considering using a diagram, ask yourself what the user need is and whether that can be met solely with clearly written text.

Questions to ask yourself

  • What is the message you would be trying to communicate with a diagram?
  • Would a diagram help the user to understand the subject or would it raise as many questions as it answers?
  • Can the message be communicated as text or a table instead of a diagram? 
  • Are you trying to communicate too much information in one diagram?
  • Will you be updating the content regularly?

Users who access the website via screen readers and other assistive technology often cannot read text shown in an image, so they require the information to be provided as alt text as well as a longer description in the text. By trying to explain the message as succinctly as possible in the text before considering an image, it avoids duplicating content and ensures the website is accessible for everyone.

Consider whether the content will require significant time and resource to update regularly. It is easier to change text than it is a diagram.

If you are unsure whether a diagram would meet your users’ needs, contact content.design@ons.gov.uk for guidance.

Design principles for diagrams

Only PNGs created by the Design team in Digital Publishing will be used on the ONS website. This ensures that all diagrams:

  • are clear and easy to understand
  • follow normal reading direction, from left to right and top to bottom
  • use simple shapes and as few different shapes as possible
  • have a clear starting point
  • do not have overlapping lines
  • do not rely on colour alone to convey meaning

Any diagrams that are landscape in prototype form may need to be redesigned as portrait to fit within the website’s 600-pixel width. Any text displayed on the website will be in a 16-point font size, so use as few words as possible in your diagram.

Our goal is to move towards the more accessible SVG format in the future.

All diagrams should also have accompanying alt text for accessibility.

The following diagram is an example of a draft submitted for publication on the ONS website by an output author.

An example of a draft submitted for publication on the ONS website by an output author.

The following diagram is a new version created by our designers and in line with our design principles. This version includes a clearer font and a simpler design that is easy to understand.

A new version of a diagram created by our designers and in line with our design principles

Process for publishing diagrams

Once you have identified there is user need to use a diagram, email content.design@ons.gov.uk with:

  • the name and date of your release and, if known, the number of the sharepoint tracker
  • the title and the main message of the diagram
  • any links or attachments to prototypes or rough sketches you have in an editable format so that text can be manipulated

We are constantly improving based on research and best practice. Any significant changes to our guidance are available on the Updates page.