BP : The best and worst of graphics

BP manages to get its formats right and wrong in the same story.

click to view

The feature

BP Magazine is held within the News and Insights section of BP.com, but is linked from the left menu on every page. It has a variety of stories on a wide range of subjects, and is keen to illustrate them as vividly as possible.

Earlier this year it carried  a story headed ‘The tech revolution producing greener power’. This fills a long page and has several photos. The first image, however, is a colourful and elaborate infographic showing how different activities and businesses link up: about 30 squares or hexagons are used to show the connections, with text in each of them. The text is readable on a large screen, but on a normal laptop it is tricky and on a mobile phone, impossible.

Further down the page is a bar chart showing how demand for different types of fuel have grown and will grow over the decades. It uses colour-coding and, by mousing over each column, it is possible to see the figures behind the chart. It is readable on screens of all sizes. The numbers are drawn from BP’s own Statistical Review of World Energy, which is linked.

The takeaway

This page shows how careful even the most experienced web team needs to be with images and formats. Infographics were originally designed to be used as posters to stick on walls. They  can be brilliant for that, but rarely work well on a screen. Sometimes the shape is the problem: long and thin posters do not work on a short and wide screen. That is not the issue here - it is simply that the text is too small. As mobile usage continues to grow,  it is ever more important to make sure that your information is readable by everyone; this image fails that test. A shame because it contains much excellent material, which could surely be neatly presented on an interactive graphic?

The chart, by contrast, is just dandy. It fits neatly on any screen, is not too busy, and uses simple interactivity to add detail. It also draws on BP’s own data, and  is used to publicise its statistical tool. All perfect. Why the contrast?

First published 18 July, 2019
< Back to Tips