Youview High Contrast

Accessibility mode for the partially sighted

Brief

Create an accessible version of the YouView UI, taking into account various sight-related disabilities to make the platform easy to use by all. Partly powered by the BBC, there are strict guidlines that have to be adhert too to ensure support from the BBC Trust

Client

YouView TV Ltd

Project Date

2018-2020

Role

Product Designer

Current YouView guide
High contrast YouView guide

Desiging for multiple screens

The goal of the YouView High Contrast Mode was to enable users with a wide range of visual issues to be able to use the YouView product at the same level as people with no visual problems. As the BBC was a founding member of the YouView product, it is essential that the company followed the BBC Trust guidelines for accessibility. With this in mind, the approach to acceptance criteria for the YouView High Contrast mode was much higher than it would be at other companies. My experience working on the accessibility mode of the previous YouView UI made me a prime candidate to lead the project and I took it on with the goal of making a great user experience.

User Research

We took the initial research from previous accessibility work as a starting point for this new project. In the previous YouView design, the team worked very closely with partially sighted users for a constant stream of feedback and we continued this process we moved towards the next phase of the user interface. As a team, we were also in constant communication with two of the UK’s biggest disability charities the RNIB and SCOPE to give us an insight into the challenges that people with disabilities face in day to day life.

A big part of our research came in the way of using a toolkit from the University of Cambridge which allowed the product design team to simulate mild vision loss. This toolkit consisted of glasses which replicated acuity and contrast loss. These glasses could then be stacked up on top of each other to analyse how different level of eyesight issues will affect the ability to see and interact with the product

We also spent time conducting competitive research in both the TV industry and wider, trying to get a sense of where the competition put their focus on helping disabled customers. By looking at rivals we could see where the gap in the market stood and how we could use our expertise to create a bespoke experience that solved the brief and created the best solutions

University of Cambridge Inclusive dedsign toolkit

Digital Process

One of the main challenges in creating a UI based around accessibility is the need to remove any gradient that could obscure text. This was reported by both charities as the main reason why partially sighted users will struggle with the experience. With this in mind we had to explore how to approach the design in regard to this, comparing the removal of the gradient with the idea of shifting it further on the screen Comparing different concepts for the tile asset Another challenge was the highlight state for the sections of the UI. After User Research and testing it led to having a few ideas, most of which consisted of a solid highlight state. These versions were then presented to both charities and a number of the user-base with eyesight issues. Feedback taught us that solid bright highlight states were actually worse for the user as it caused a bleeding halo-like effect which did not increase visibility at all and rendered nearby text completely unreadable.

YouView accessibility details

Concepts

We wanted to present two concepts that worked to solve the original brief. Using the evidence and information we gathered from our user-research as well as our deep look at the competition we presented two different concepts to stakeholders. Both had gone through vigorous prototyping and testing in the team and we were looking for final feedback before we took the project into our agile backlog.

The feedback we received from our concepts shaped the final stages of design and altered some of our directions as we moved into development. We were given the green light to progress with the black version of the UI and started to create assets and specifications for the developers

Subtle design touches

As we took the design to its later stages we wanted to ensure that the YouView UI kept its delightful little touches that made it such an attractive design in the first place for customers.

I ensured that these touches remained even when the user wanted the High Contrast option turned on.

Solutions

The final high contrast version incorporated the client feedback and we made adjustments to the highlight state to increase the contrast levels of text. Shown below is a range of the final visual design implemented by our development team, as well as a way to compare the high contrast UI with the standard version.

YouView high contrast settings
YouView high contrast main menu
YouView high contrast apps
YouView high contrast  recordings
YouView high contrast search
YouView high contrast guide

Industry feedback

“A big advantage of making the accessibility features available for all, allowed those who did not think of themselves as disabled to enable the functionality without any fuss”

Steve Tyler,
Head of Innovation and Development at the Royal National Institute of Blind

"I think the high contrast option is worth its weight in gold and will be upgrading"

Customer with Aniridia

"The YouView high contrast display, regarded by the RNIB as one of the best available on the market”"

OFCOM

"In terms of accessibility, (this box) has the potential to be a cut above the rest"

User testing after implementation