AVKX subtitles customisation project

A deep dive into how the AVKX team explored the customisation of subtitles.


  • Simon Rooney
  • Dima Jarkas
  • Edmund White
  • +2
Video with subtitles on a phone.

In 2018, you might notice some changes to the way subtitles are displayed on BBC content online.

As part of our ongoing work to improve the user experience of our online video players, the AVKX team at the BBC have undertaken a major research and design project to improve how our subtitles work.

This article will take you through the journey of our design process from challenge through to implementation. This includes:

  • How we identified a problem
  • How we engaged with our audience to find out more about their experiences
  • How we used this research data in our design solution

But before we start, what is AVKX?

The Audio Video Key Experience initiative (AVKX for short), was set up four years ago as a sister project to work alongside the Global Experience Language (GEL). Our main aim is to deliver a unified, future-facing audio and video playback experience that connects our audiences with our world-class media content.

The AVKX team are a small group in the BBC User Experience and Design (UX&D) department, challenged with providing a coherent experience for people when they interact with any video, or audio content across the BBC. We work closely with our cross-platform product partners in Media Services & Mobile Platform to design and build a Standard Media Player (SMP) that ensures a consistent, core playback experience across BBC products.

Subtitles have been available on BBC programmes since the early 1980's. They provide a transcript of a video soundtrack, helping deaf and hard-of-hearing viewers to follow programmes. Over 10% of people use subtitles on a daily basis to help with hearing or language barriers. Or in circumstances where the sound is not available or there is other ambient noise.

In recent years subtitles have become more common in online videos on sites such as Facebook, Twitter and Instagram. This is partly in response to the introduction of auto-start videos which have sound switched off as default. Without sound, the easiest way to engage people in video content is through the use of subtitles. So media content producers often bake in subtitles to their online video content as standard, which has consequently introduced new visual trends such as animated graphics, varying sizes and positions, and different colours and styling of letters that help attract attention to draw in viewers. Through this increased use, a new generation have identified advantages to consuming video with subtitles, such as the ability to watch videos quietly on mobile devices without disturbing other people watching the television in the same room, or watch their favourite iPlayer downloads on buses or trains where environmental noise might disrupt the clarity of the audio.

Despite these recent developments, the look and styling of subtitles on BBC programmes has largely remained the same since they were re-formatted for digital TV in the late 1990s. They follow guidelines that were written at a time when viewing was still predominantly on television, when sets were much smaller and in standard definition.

Over recent decades since these guidelines were produced, our televisions have become a lot bigger and wider (from 4:3 ratio to 16:9). The definition has improved hugely with ultra High Definition (HD) content on the horizon. In addition to this we have a myriad of small to mid size Smart devices that our content adapts to responsively.

This leads us on to our problem...

This particular project began as a response to audience feedback suggesting that the size of subtitles are too large on certain devices.

The size of subtitles works as a percentage of the screen size. Each line currently occupies approximately 8% of the screen height. So no matter what size device you use, the size of the subtitles should appear to take up a similar amount of screen space.

However one factor we had not considered until recently was the distance of a device from the viewer. We tend to hold mobile phones close to our faces, which would make that 8% subtitle size seem relatively larger on a mobile than on a TV screen which we sit further away from.

How distance and screen size affects subtitle scaling

This led to some of our more mathematically minded colleagues to hypothesize a recommended font size based on an average viewing distance, and subtended angle of a device from the eye.

Our challenge was first to find out whether this hypothesis was true, and establish a new size recommendation for subtitles that would work for all users and all devices. For this we would need to gather some real data to inform us of average viewing distances for different size devices, as well as preferred subtitle font sizes. We worked with an external agency, Sutherland Labs, to undertake a large piece of research with 40 participants aged 13 - 85, who were all regular subtitle users.

This research happened to fall at the same time as the birth of our new BBC corporate font, BBC Reith, which has been designed for accessibility and optimised for legibility on screens. With changes to subtitles in mind, we were keen to test out how our audience would respond to seeing subtitles displayed in the new font, and what their preferences were between BBC Reith, and the existing default sans-serif system font used in the SMP.

To summarise, we wanted to find out three things.

  1. What subtitle font size do people prefer? And does this size preference change depending on the device they are using?
  2. Which subtitle font do people prefer? BBC Reith Sans, or the default font?
  3. What is the average physical distance that people hold devices such as tablets and mobiles from their eyes?
Researcher measuring the participant’s distance from the screen.

Photo by Sutherland Labs

Engaging with our audience

Research participants engaged with a purpose built prototype video player that allowed them to change the size of subtitles while watching a selection of clips from Homes Under the Hammer. This programme was chosen specifically due to it's lively dialogue, with multiple people speaking. It was also appropriate for all ages, and easy content to follow.

Each participant was asked to choose their preferred subtitle size while viewing the programme on at least two different devices, with eight devices being tested in total, including mobile, tablets, computers and televisions. For each device they looked at subtitles in the two font variations, and they were also asked to choose their preferred font. The order in which we presented default font sizes, and the font style was rotated and balanced across each session to avoid any inadvertent bias.

Researcher and participant during testing.

Photo by Sutherland Labs

What did we learn?

We were pleased to learn that there was a strong preference for BBC Reith Sans as a subtitle font. This performed well across all of the devices with people noting the friendlier curved letterforms, and wider letter spacing as favourable attributes of the design.

When it came to a preference for subtitle size, the data was not so clear and defined. For many of the mid range devices (large phones, tablets, laptops) the preferences were spread across several font sizes, and an overall recommendation could not be made.

From this we drew the conclusion that one size will not fit all for our subtitle users.

In order to deliver a great user experience, we have decided to implement a new feature in our media players that will allow the user to customise their subtitle size on each device that they use.

The UX design process

The next step in the design process was to decide upon a set of font sizes for subtitles. If we were to increase the size beyond what the subtitler planned for, unintended line breaks would appear at strange places in the subtitle text, making it more difficult to read. So our largest option would be the 8% we currently author to, but reducing the size is possible. However some further data analysis was required to find the most suitable size options based on the increments used in the testing.

The data from the research was passed back to our mathematically minded colleagues who did some additional number crunching, injecting the 'missing viewing distance' data into the pre-research hypothesis. They were able to validate their calculations and to formulate an algorithm to define a default size recommended for each device, along with a set of 5 size variations. This can be seen in this table, which lists the type of devices we used, and the subtitle sizes (which are the percentage of screen height).

Subtitle size recommendations across devices

However, an obstacle we face when working on responsive video players for websites is identifying what type of device a person is using. For example we can't easily differentiate between a small mobile and a large mobile because reliable information about the actual size of the screen is hard to get. But we can define a set of breakpoint sizes, so that our designs can flex responsively, based on the video player size in pixels. We took the 5 most used sizes across all the recommendations, and set three responsive breakpoints. Each breakpoint was assigned a default size that best represented the types of device within the breakpoint sizes.

Subtitle size recommendations across breakpoints

With the sizes decided upon, we designed a pop-up menu that sits inside the new subtitles button. This menu offers five different sizes for subtitles, and a button to switch the subtitles on and off.

We took this new utility into a second round of user testing to test out a few new features we had tweaked from our existing design patterns. One feature is the removal of the 'X' close icon. The second was the introduction of an automated 'on' switch that activates when you hit the subtitles icon. This allows us to retain the simple 'one' click operation appreciated in the previous iteration.

Both these new features tested well, and the new utility was met with a lot of praise from our test participants who were all regular subtitles users.

The new pop-up subtitles menu on different BBC websites.

What's Next?

In spring 2018 the new subtitles sizing feature will appear in the responsive web iteration of the BBC's SMP for all products that have subtitles enabled. Later in the year, BBC Reith Sans will become the BBC's default subtitle font of choice. Eventually the sizing feature will also be released in the native mobile version of the SMP.

We will be monitoring and reviewing the size tool usage data to inform future iterations of the design, and we aim to collect more qualitative data exploring subtitle usage amongst more focused groups, such as our younger audience. Through our two rounds of subtitle user research we have gathered lots of anecdotal insights around peoples experiences of subtitles. Further customisation of subtitles is something we are keen to explore. This could include the ability to change colour palettes and font style.

We are also in the process of innovating new ways for our Editorial and Design teams to generate dynamic and accessible subtitling, and narrative titling for online News videos.

Currently, titles appear on News videos as 'burnt in' graphics. Text on video is becoming a more popular format as it responds to a user need to consume video without sound.

However, providing 'burnt in' graphics without audio also has implications on accessibility. Burnt in titles are not accessible to screen readers - software that reads out information on screens for blind or partially sighted users - they are easily obscured by the player UI overlay, are often not displayed with sufficient colour contrast and they do not scale dynamically.

The AVKX team, working with Systems + Service Design, Media Services and News are looking at an Object-based titling solution which involves using an SMP plug-in to render the titles from TTML (Timed Text Markup Language), an industry standard subtitling format. This would allow us to maintain the branded treatment of narrative text and distinguish between different titling styles without sacrificing screen reader accessibility.

In the future, we hope that this will also help editorial teams make edits more easily, along with the capability to reversion videos for different languages and brands.

Further Reading

An insight into how subtitles are made at the BBC

BBC subtitles guidelines