Jun 13, 2019

Zonda

Designing Zonda For The Colorblind

To give you a peek into our design process, we’ll highlight our efforts to update the Zonda iPad app to modern accessibility practices. For this post, we’ll talk about designing data visualizations for the colorblind.Working to understand and have empathy for people who have different experiences than we do creates a more usable experience for all users.

designing-zonda-for-colorblind-blog-hero

Zonda empowers our users with analytical research and comprehensive data for the housing market. The app displays real-time data with reports, charts and graphs. Our company values speak to bringing clarity, and we believe that means clarity for everyone. But that clarity doesn’t come only through the data, but also through how that data displays. Interpreting data in a chart that relies on color to distinguish information is often an exercise in frustration for someone who is colorblind.

 

What is colorblindness?

No, being colorblind doesn’t mean you see in black and white. But what does it mean? If you are colorblind, then you relate to the world differently than others who aren’t affected.

Colorblindness affects approximately 1 in 12 men, and 1 in 200 women. That’s about 300 million of the world’s population who perceive the world around us differently than we expect. They find activities and tasks which most of us take for granted to be difficult and frustrating. Distinguishing between red and green stoplights, for example, or shipping for clothing.

Drag slider to compare normal vision on left with deuteranopia (red-green colorblindness) on right.

  • Being colorblind does not mean that one cannot see any color, except in extremely rare cases.
  • Colorblindness is a color vision deficiency, where the affected person can see things as clearly as others, but is unable to fully perceive red, green, or blue light.
  • The most common form of colorblindness, for example, is deuteranopia, also known as red-green colorblindness. It causes an inability to perceive red and green hues.
  • The strength of a colorblindness impairment can range from a weakened perception of hues to being completely unable to see the color hues.

Having a color impairment also means that understanding charts, graphs, and other data visualizations can be quite challenging. Consider the following image showing an example chart, where a color scheme that we would consider easily-distinguishable becomes virtually unusable for someone affected by deuteranopia.

Drag slider to compare normal vision on left with deuteranopia on right.

Designing For Perception

Solving for the challenging often leads to more simplicity and elegance. When our team designs with the colorblind in mind, we improve the product for everyone. To facilitate this, we work with tools that help us simulate colorblindness. A few we have found helpful:

  • Color Oracle simulates colorblindness across an entire screen, and allows you to quickly switch between the more common deficiencies.
  • Viz Palette allows you to preview your color palettes in a data visualization context, and provides colorblind simulation tools
  • ColorBox builds color palettes that solve for accessibility issues
  • Stark is a plugin for Sketch or Adobe XD that checks contrast on your designs and provides colorblindness comparisons

We have also added processes to our design workflows that include color impairment tests. Experiencing these impairments often causes us to have to rethink our direction and find ways to simplify. Accommodating limitations shouldn’t mean having to increase the complexity of the product.

To illustrate some of the complexities of designing an accessible application, we’ll highlight a recent project. In Zonda, you can draw a freeform area on a map to plot out pricing information for projects, closings, and listings. Here is a design composition of the existing price positioning graph in Zonda.

Drag slider to compare normal vision with deuteranopia colorblindness.

As you can see, this works fairly well, but the red and orange colors threaten to become a bit problematic for more densely-populated graphs. We knew that we could improve the graph’s design.

A current improvement we are developing is the expansion of the pricing graphs to accommodate more projects. To distinguish the additional data on the positioning graph required the addition of another distinct icon shape and another color. We used the opportunity to also improve the existing chart design to provide better distinction across the various forms of colorblindness.

On the price graph, projects with a sold out status are represented by a dashed line. However, in a densely populated graph, it can become confusing which shapes relate to which lines. To improve clarity, we added a “hollow” version of each icon shape which will be paired with the dotted line style to show Sold Out projects. Accommodating color impairments sometimes means moving to solutions that don’t use color, but shape, texture, and patterns.

The images on this post demonstrate a fictitious design mockup of our project price graph with the updated color palette and icons. First, we show the normal view, then demonstrations of the three most prevalent forms of colorblindness.

Drag slider to compare normal vision with deuteranopia colorblindness.

There was quite a bit of work to ensure that the colors and icon forms are easily distinguishable from each other across the spectrum. This can be challenging, especially when working within the constraints of a brand’s color palette, but well worth the effort. As you can see, the design refinements improve the distinction of data, even with more data categories on the screen.

Of course, there are other forms of colorblindness to take into account. In the following example, you can see protanopia (red deficiency) on the left and tritanopia (blue deficiency) on the right. As you can see, the updated design works well for these color impairments as well.


Drag slider to see the pricing graph with simulated protanopia (left) and tritanopia (right).

We believe giving importance to these design details increases the clarity of the data for everyone, and makes for a better user experience and a better product. Our design team is committed to increasing the accessibility of Zonda, and will continue to work to improve clarity for everyone with every design improvement.

We would love to hear your feedback! Let us know if there are other accessibility issues in the app you may have run into, and what needs you’d like addressed.

Contact us to improve the clarity for everyone.

For more information on colorblindness and to find resources to learn and improve your organization’s impact and empathy for those affected, visit our favorite resources on the topic:

Featured Writers

We cover topics around housing, policy, markets, and technology.

David Dickerson

Senior Product Designer

David Dickerson

Senior Product Designer


Recommended Posts

Services Information Request

You’re on your way to meeting our team! We’ll be in touch soon to help push your business forward.
By clicking this button, you agree to our
Terms & Privacy Policy

Tech Services Sign Up

You’re on your way to meeting our team! We’ll be in touch soon to help push your business forward.
By clicking this button, you agree to our
Terms & Privacy Policy

Zonda Information Request

You’re on your way to meeting our team! We’ll be in touch soon to help push your business forward.
By clicking this button, you agree to our
Terms & Privacy Policy

Newsletter Sign Up

Get housing market updates, new blog posts and event alerts. We'll keep you up to date with the latest news.
By clicking this button, you agree to our
Terms & Privacy Policy

Learn More About Our Products & Services

You’re on your way to meeting our team! We’ll be in touch soon to help push your business forward.
By clicking this button, you agree to our
Terms & Privacy Policy