Zonda Newsfeed: The New Year Starts With Some Momentum
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.
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.
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.
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.
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:
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.
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: