Author Archives: Paul McGarvey

Interactive charts

 An interactive chart allows the user to change what the chart shows by taking an action.  

 Users can interact with a chart by scrolling, hovering, or using:   

  • buttons or tabs 
  • a drop-down menu 
  • an input box 

This does not include charts where the only interactive element is a tooltip. A tooltip displays data values when the user hovers over or selects part of a chart.  

Example of an interactive chart using input box

Baby names in England and Wales

When to use an interactive chart 

Only consider interactive charts where the information that is most important for the user cannot be clearly shown through a non-interactive chart.   

An example of a strong user need for an interactive chart is COVID-19 data at a local level. In this case:  

  • users are likely to be most interested in data about their local authority 
  • there is not a clear way of displaying data for each local authority without interactivity

Disadvantages of interactive charts 

 Interactive charts need the user to make a selection to see information. This may:  

  • make it more difficult for users to get messages  
  • hide the main messages from users 
  • prevent the chart from being useful outside of the ONS website, for example, on social media

They are also more complex and time consuming to produce; there may not always be enough resource to create an interactive chart.    

Instead:   

  • try to use charts that highlight the main points of interest or findings without needing user input  
  • consider using several small charts, known as small multiples, to avoid using too many categories in a single visualisation 

 Your charts do not have to showcase everything in the data. Expert users will be able to download and explore the data. 

Tips for creating an interactive chart  

  • Only include data that will be important to your user.  
  • Do not include all your data just because the interactive format allows it.  
  • Design your chart in a way that helps the user get the most meaningful information, for example, by allowing the user to easily compare certain categories. 
  • Provide context and help the user to navigate the data through annotations and the surrounding text. 
  • Consider starting your visualisation from a view that either shows the main message without needing any interaction, or helps users navigate the chart. 
  • Make sure the design of your interactive chart is consistent with other ONS interactive charts and uses elements from the ONS pattern library. 

What to do when a shorter release is too restrictive

If a dataset or headlines are not sufficient for a release, consider publishing articles alongside the data and headline release. The headline release still needs to work as a standalone product. We should not rely on users using an article to understand the headlines.

If there is a frequent requirement to publish articles alongside a headline release, consider whether a bulletin would be more suitable, bearing in mind the principles behind our products

Alternatives to supporting articles

If the supporting information is targeted at a smaller audience, consider other ways to share it with the right users:

  • users could get in touch to request copies of particularly long or technical information that is not relevant to most users.
  • consider whether a newsletter might be a better way to share important technical information.

Avoid publishing content that is not relevant to your data

Publishing content that is not relevant to a large number of users damages the user experience of the website, because:

  • it makes it harder for users to find content via search
  • which increases the chances of most users ending up on the wrong page
  • which makes users less likely to trust the website and our content
  • it makes the website more difficult and more expensive to maintain 

What to include on a dataset page

There are a small number of editable fields on a dataset page:

Section Content
Title A title is the most impactful way to help users find data. Use Style.ONS guidance to ensure that titles are short, clear and in plain English.
About this dataset A summary of what the dataset includes. Try to include words and phrases that users may search for.
Your download option An automatically generated list of links to the latest release and previous versions of the data.
Important notes and usage information An optional section which appears beneath the downloads list. This content is not very prominent, and an unreliable way to give users information about the data. Use sparingly.
Related  There are a number of different boxes that can be used to link to:

  • Related data
  • Related QMIs
  • Publications that use this data

 

What is a data-only release?

A data-only release is a dataset page that contains a downloadable spreadsheet or a customisable dataset. See the following examples:

If you publish a bulletin or headline release and are thinking about making it data only, you should consider:

  • whether users rely on the supporting content in a bulletin or headline release, and how they will be affected if that ends
  • the implications of users using the data without easy access to caveats, strengths and limitations
  • whether you might need to regularly include information or analysis that helps users understand the data

How a headline release differs from a bulletin

  • Main points are the only commentary provided: there are no additional sections for analysis or reporting
  • Measuring the data is shorter than the bulletin: unless essential, it’s more important that users can easily find a link to the QMI 
  • There is no “Strengths and weaknesses” section: key caveats appear in the main points section, anything else can be found in the QMI
  • The glossary section is optional, and should only be used where important terms cannot be explained in the main points 

There is no minimum length to a bulletin, but if a release includes any analysis, it must also include the mandatory bulletin sections

Structuring a headline release

 

Section Content
Other pages in this release When publishing more than one content page (not datasets) in a release, use this section to link to them
Main points Up to six bullets containing headline figures or trends in the data.
Bullet points can highlight key changes around certainty or methodology changes.
No statistician’s comment
Can include one short warning for essential caveats.
[Name of headline release] data Links to the most relevant datasets referenced in this release.
Measuring the data Should link to more detailed Quality and Methodology Information (QMI) reports, methodology articles, user guides and planned changes.
May also include short updates on important changes, linking to separate pages when there are significant updates.
Related links Links to in-depth analysis or articles on this subject from the ONS.
Can include links to associated bulletins, such as revised or mid-year estimates.
Links to related publications or statistics that users might find useful.
Can include links to publications from other organisations.

 

What is a headline release?

A headline release is a short page, published alongside a dataset. It includes headline findings, alongside essential methodology and caveats for users.

Headline releases should be used when there is: 

  • limited interest or value in the topic area for users and stakeholder
  • no evidence to suggest users are regularly engaging with more than the first 500 words of a full bulletin
  • little to say about the data from one release to the next
  • limited capacity to publish a full bulletin each month

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.

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