Improving the graphics workflow and experience by creating a simple tool that enables journalists to annotate and re-version images as scalable vector graphics.
Graphics play a vital part in conveying complex information in an easy-to-understand format.
And the BBC broadcasts in more than 40 languages. Recreating shared content for key global events in each of these languages involves a lot of time and effort.
In a high-paced news environment, it is not always feasible or desirable to dedicate a graphic designer to straightforward tasks, such as adding a simple circle to an image or changing the text in a graphic from one language to another. Requests for such tasks compete with (and often lose out to) complex and higher profile commissions, meaning that stories that may benefit from graphics do not have them.
The team set out to test the hypothesis that by supporting scalable formats such as Scalable Vector Graphics (SVGs) and equipping journalists to create basic designs, we can ease day-to-day graphics workflows.
We identified image annotation as a small enough test case which could give us
- a prototype with basic design components
- SVG output, to test end-to-end scalable delivery
- an opportunity to explore better practices with metadata
We built the tool as a ReactJS component. It allows a background image to be imported, and enables simple annotations to be added on top of the background image.
The resulting annotated content is compatible with the BBC’s digital authoring system. Alternatively, the output can be exported as a flat image in a choice of image formats, including PNG, JPG, etc.
Working with the BBC’s design department, we agreed on a limited set of styling options that align with the BBC News style guide.
The tool allows journalists to easily add simple annotations to SVGs and publish them in articles, without requiring any specific design training or skills.
It enables journalists to add annotations to highlight or identify key components
- without having to use a licensed third party tool
- in World Service languages and fonts
- as defined by BBC style guidelines
- which can be saved as .svg files, as well as other raster image formats
- involving metadata for screen readers and search engines
The tool is not intended for more complex use cases, such as infographics with a hierarchy of design components.
The optimal experience
It was important not to create an additional workload for editorial teams, and so the tool was designed to exist within the BBC’s digital authoring system, which is used for article creation. Copying the image block in the system, we added a new block called SVGs. We expanded the options to "Edit", with additional features to add shapes, labels, or text to an image.
In this way, journalists are able to annotate images in the same environment they use to edit the rest of the article. They can preview the article along with the SVG in the same process.
Screen readers are not able to read text that is part of rasterised images — words are a collection of pixels, rather than machine readable letters. We should therefore avoid having text placed in images, as it creates accessibility barriers for users of screen readers. Images should always be supported by metadata in the form of “alternative text”.
With this tool, by publishing the SVGs to the articles, the text elements are no longer merged with the image, but sit as elements on top of the image backgrounds, and are still "readable". This offers the opportunity to explore whether we are able to create more accessible images and graphics.
We are sharing this tool with a small set of users to obtain feedback about usefulness, efficiency and potential. The next steps involve exploring animated SVGs and standardising metadata creation and use.
- The tool is available internally for user testing
- We also built a stand-alone version of the tool, that operates outside of the BBC’s content management system