Identifying user needs

Before deciding to use a diagram, identify the user need. Consider if the user need can be met solely by 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 repeat what is already in the text? 
  • Can the message be communicated as text or a table instead of a diagram? 

If you have too much information to communicate, a diagram is unlikely to be useful to users. If you can describe the diagram in a short paragraph, use text instead.

When not to use a diagram

  • When your diagram raises as many questions as it answers. 
  • When there is too much text in the diagram – this can be difficult to read or scale for different devices. 
  • When the diagram is so complicated that it requires significant time and resource to create; the more straightforward it is, the more useful your diagram will be.
  • If the information could be organised as a table – this is a more accessible format.
  • If your content is updated 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 the design team at ons.design@ons.gov.uk for guidance.

When diagrams meet the user need

Diagrams will meet user needs if they:

  • show a process or relationship without needing further explanation in text or footnotes
  • communicate information in a more succinct and direct way that can replace several paragraphs of dense text
  • can be understood by someone not familiar with the subject matter

Include alt-text for those unable to view the diagram.

Design principles for diagrams

Diagrams must be clear and easy to understand. Try to make your diagram:

  • follow normal reading direction, from left to right and top to bottom
  • use simple shapes and as few different shapes as possible
  • make the starting point in process and flow charts clear
  • avoid having lines in process and flow charts overlap
  • not rely on colour alone to convey meaning; use only one colour unless there is a specific need

Be aware that 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 will be displayed on the website will be in a 16-point font size, so use as few words as possible in your diagram.

Before
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.

After
The following diagram is a new version created by our designers and in line with our design principles

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

Format

Only PNGs created by the Design team in Digital Publishing will be used on the ONS website.

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

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

Use this email template for your submission.

Hello,

We have identified a user need to include [a diagram/XX diagrams] in our release. Please provide the following details so these can be created by the ONS design team.

Sharepoint tracker number (or name and date of publication if not yet known):

Title and main message of each diagram:

Sharepoint link to prototype or rough sketch (or add as attachment):

Many thanks,