Making a ticketing system accessible for colorblind users — a UX case study

ATG (The Ambassador Theatre Group) is known to be one of the largest ticketing vendors in the U.K. that offers tickets for large performances such as The Lion King musical and the Harry Potter series. Although ATG offers tickets for these big shows and has made it available for a wide range of audiences, their online booking experience was not created to be inclusive for all types of people.

In this case study, I want to address certain problems that have aroused this proposal and offer solutions on how we can improve accessibility for people with color blindness using the ATG booking experience as an example.

Disclaimer: I am not a colorblind expert. This case study was initiated for learning purposes. It is simply to go over the basic knowledge of different types of color blindness, what designers should be considering during the design process, and as well as raising awareness for designers to design for accessibility. All images are simulated only. Color Vision Deficiency varies by individual.

Colorblind 101

Examples of what standard color vision people see vs color blind people

Before getting into the problems of ATG’s booking system, let’s cover a basic understanding about color blindness. Color blindness is having the difficulty of distinguishing certain colors. It is known as Color Vision Deficiency and varies by individual. Below are some common types of color blindness.

Protanomaly is having the reduced ability to see red light. Protans (people who have Protanomaly) have difficulty distinguishing the difference between blue and green colors, as well as red and green colors.

An example of what people with Protanomaly color blindness see

Deuteranomaly is a reduced sensitivity to green light which is the most common type of colorblindness (Red-Green weak).

An example of what people with Deuteranomaly color blindness see

Tritanomaly is a reduced ability to see blue light, which is extremely rare (Blue-Yellow weak). This type causes confusion between blue versus green and red from purple.

An example of what people with Tritanomaly color blindness see

Lastly, Achromatopsia is complete color blindness where a person can only see black, white and gray shades in between.

An example of what people with Achromatopsia color blindness see

Identify the problems

Now that you’ve seen and learned some basic knowledge about color blindness above, let’s take a look at ATG’s booking screen for the Lion King musical below.

A screenshot of what ATG’s seat booking of Disney’s The Lion King

Problem #1: Using colors as a price filtering

A gif image showing ATG’s price filtering system

While colors have often been helpful in distinguishing and identifying elements and interactive stages, this is not a cure-all solution.

On the seat selection screen, the only filtering option available is the pricing categorized by color.

As I selected different pricing options, the colors of the non-selected seats became dimmed down in a lower opacity gray. However, the change is so subtle that, even with standard color vision like myself, I had a hard time filtering through all these different seats. Thus, that begs me to ask, so then what about our colorblind users?

ATG’s booking screen in color blind’s vision

Depending on the type of Color Vision Deficiency, one may have a stronger sense of a specific color than another person with color blindness.

However, coercing them to select their desired seats between these color options creates a tantalizing customer experience. It’s like playing a color matching game.

ATG’s booking screen in color blind’s vision

In some rare cases such as having Achromatopsia, the total absence of color vision, ordering tickets using ATG will guarantee to exasperate you. It’s like playing the lottery!

Problem #2: Which seat am i selecting? One or all?

Let’s play a game called, “Which seat did I just select?” Can you guess?

Stimulation of what color blind vision see when selecting a seat

Here it is! The tiny red dot on Stall AA Seat 33.

Stimulation of what standard color vision see when selecting a seat

Using another color dot as a selected state doesn’t work well here either. Red-green is one of the top combinations of colors to avoid when designing for accessibility. This is because the most common color blindness is Deuteranomaly, a red-green Color Vision Deficiency. This is not only confusing for those with color blindness but it is also extremely confusing for those without any form of Color Vision Deficiency. Using too many colors not only promotes confusion but creates a strong sense of being overwhelmed during the deciding process among hundreds of seats.

Let’s fix it

Instead of using a combination of colors and prices as seat availability, I simplified them to just two colors that represent “Available” and “Not available”. By merging these color options together and treating them equally as “Available”, it causes less confusion for those with both color blindness and those with standard color vision.

Instead of displaying all the pricing options from £35 to £95 in the increment of £5, using a flexible pricing scale works much better in this case. It gives people the flexibility to sort to any price they want without being tied to a certain price point. It also allows the user to select a middle price range that fits their need. For example, if I need a ticket within a budget of £50 to £90, I can easily sort to that by using the pricing scale. In addition, if an event has a ticket price that goes beyond £95, the site doesn’t have to introduce more colors to accommodate multiple ticket price points.

As you have seen in problem #2, when you select a seat, the dot turns to another color: red. This color indication doesn’t work so well in this sea of other colors.

To highlight your recent selected purchase and make it more apparent, a checkmark would serve better as a solution to this problem. It does not matter what type of color blindness one may have. Using a different shape to represent the selected ticket is always a stronger solution than just a color change.

Since ATG placed the stall information on the left far corner, selecting the right stall will be a challenge for those with both color blindness as well as those with no color vision deficiency. I also added a hover over state for each seat so that the user will always know exactly what seat they are selecting and the price of it.

Many disable users rely on a keyboard for website navigation. For that reason, I’ve added the keyboard accessibility function to this ticket selection. To navigate around, the user can “tab” to switch between seats as well as seeing the hover state above it. To select the seat, they can simply hit “enter”.

One of the things I have noticed on the ATG site is that they neither offer nor have the option to select accessible seating tickets. As one of the biggest ticket vendors in the U.K., I personally think this is unacceptable. Therefore, I am adding this into my own version to create a better user experience for those with a disability.

Final version

✓ Flexibility in price sorting

✓ Know which stalls, seat # and price before selecting

✓ Know which seat(s) you have selected clearly

✓ Show accessibility seating

✓ Support colorblind users

✓ Keyboard accessibility for disable users

✓ Enhance the booking experience for those with both color blindness and standard color vision

Takeaway

Designing for accessibility may be a challenge for companies or some businesses; but while it may prove to be more difficult to create a design that accommodates everyone, it is not “impossible”. As a designer, I feel that we have the ability and the responsibility to help change how we design for accessibility.

As the year 2020 approaches, our websites, mobile apps or any other web applications should be designed with accessibility in mind. Resourcing our design skills while keeping accessibility in mind is what we should remember in order to design with empathy, as this is one of our greatest facets. Great UIUX is not just about how beautiful an interface looks or how well it functions anymore. It should also be measured by how well it functions for everyone in our growingly inclusive world. Now that is powerful UIUX.

When we design for accessibility, we design with empathy.

/ Color blindness research done using sources: enchroma.com, color-blindness.com and colorblindnessawareness.org /