Data in Colors

Introduction

When conveying information, people often write memos, papers, or other blocks of text. However, in many industries, text is not enough, especially for industries dealing with tangible products or projects that have many complex, moving parts. In these cases, colors and textures can convey so much more than simply using words or numbers.

At Avvir, we work in the construction tech space and use colors and textures on our 3d digital models. We create building information models that allow construction teams to monitor their projects’ progress and catch mistakes as they happen. Because our business is essentially providing information, being able to succinctly convey data and information at a glance is highly important to providing good service. As such, colors are an important concern for us in our designs.

Why color and visual textures?

One of the ways people use colors and textures is for charts and graphs, for highlighting text (or even bolding and italicizing it), and for maps. Colors and textures allow us to employ a different dimension of conveying information on top of text and numbers, complementing it by conveying more information without using more space, often allowing us to minimize the data-ink ratio. In addition, the ability to visually differentiate is something we innately do. Our ancestors used colors to differentiate the edible from poisonous berries, or to spot predators from afar, or to hide from them. Color and textures are a complementary, succinct, and innate manner of conveying information.

How we use color and visual textures at Avvir

As the design lead at Avvir, I think a lot about color and visual schemes for several features and design projects for our web app. We use color in a variety of ways, depending on feature and user goal, primarily in directing attention, indicating categories, and describing a range of values.

1. Directing Attention

Much like a highlighter on a page or a bright red circle on a map marking “you are here”, color fills and lines draw attention to things that matter or away from those that don’t. Brighter hues and contrasting colors can draw your attention to things of importance, while desaturated dull colors can take it away.

At Avvir, our BIMs use brightly colored fills on elements that people usually want to interact with, i.e., incorrectly built elements, or work in progress, while correctly built elements are an inconspicuous transparent gray. Gold, on the other hand, is our brand color, and also the color that indicates something of interest, whether it be a problem element, a progress bar, a Gantt chart, or call-to-action buttons. This way we link our value-add to our brand color and also train users to pay attention to things they need to look at.

On many of our screens, Avvir Gold, our brand color, indicates something of interest, or information we provide, our value add.

2. Indicate different states of being

The simplest way that color can provide meaning is to group or separate elements by means of shared or different colors. In the same way that a map might show green for grasslands, brown for mountains, and blue for water, assigning different things to different colors can show that the items differ from each other. This is how the human brain works in real life too, using color to differentiate objects from one another.

While it is possible to see the various 3d items’ shapes, with different colors, the same amount of space can convey much more information.

Because of this it is important to make sure visual metaphors from nature are kept or at least don’t interfere with your visual scheme. For example, in a previous iteration of our designs, we represented incorrectly-built building elements with a translucent red fill for the actual element, while the planned (but non-existent) element was a solid red. My hunch upon seeing this was that users would naturally think that between a solid and a translucent version of the same color, the translucent would be the non-existent, planned element whereas the more tangible solid element would be the actual element, not the other way around as our original designs had it. Indeed, users thought just like that. To them, the visual metaphor of solidness meant existing whereas translucent meant something wasn’t there. Because of this, we changed the colors around to reduce the confusion.

LEFT: Our old design showed incorrectly-built building elements with a pair of red elements, solid red for what was actually built, and translucent red for what was planned. Not only was this hard to see, users expected the opposite, i.e. translucent for planned, and solid for actual. RIGHT: our next iteration of the design used solid red for the actual element, with a gold border indicating the planned element. This allowed both items to be seen while also fitting the user’s intuitive expectations.

3. Describing a range of values

Colors also can replace quantitative data, especially if the data applies to a physical area such as a map. Color maps use various shades or hues of color to indicate a range of values that apply to the surface it covers, such as elevation in a topographical map, or saccades in a eye-tracking map.

Color mapping schemes come in three types, sequential, diverging, and qualitative:

1. Sequential color maps feature a color that changes in lightness and/or saturation, and are best used for data that has an order.
2. Diverging color maps feature two colors that change in lightness and/or saturation from a desaturated (usually white) middle color. These are similar to sequential color maps in that there is an order, but have a middle value that is of some importance too, such as optimal habitable temperature.
3. Qualitative color maps use a variety of colors to represent categories of information with no ordering or relationships between them. These were mentioned in the previous segment.

Left to right: sequential color maps, diverging color maps, qualitative color maps. Image from https://matplotlib.org/users/colormaps.html

Maps are a great example of qualitative data displayed in colors on a flat surface. Image from: https://forum.airportceo.com/t/map-biomes/7955

A screengrab from CloudCompare for a potential reference for a topographical map feature. Increasingly saturated colors indicate greater deviation from ideal flatness with red being higher than and blue being lower than ideal.

We are currently designing a feature to show floor unevenness and are exploring the possibility of using a diverging color map to show elevation above and below the planned level of elevation.

Using a color map lets us display elevation data without creating 3D elevation models. Because floor unevenness is often in fractions of inches, creating a model with actual topography like this would require a lot of work for something a user would only see if extremely zoomed in. Hence, a diverging color map on the floor element of the model could be an easy and effective solution to show floor unevenness.

Conclusion

Colors and textures are important in many ways. They allow us to encode information on surfaces using visuals that complement, rather than overwhelm the senses. Through color we can convey information succinctly and draw attention to and away from things. Because of this, color is a very important dimension that designers should explore, especially when dealing with 3D design or large amounts of data.

References:

1. Stone, Maureen C., Color in Information Display Principles, Perception, and Models, 2004, http://www.stonesc.com/signotes/Stone-S2004-text.pdf
2. Matplotlib, Choosing Colormaps, Matplotlib.org, accessed 9/13/18, https://matplotlib.org/users/colormaps.html
3. Hart, John C., 2.3.2.Using Color, Data Visualization Course at the University of Illinois at Urbana-Champaign, Coursera.org, accessed 9/12/18, https://www.coursera.org/lecture/datavisualization/2-3-2-using-color-b1Xe4