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.
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.
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.
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:
- Sequential color maps feature a color that changes in lightness and/or saturation, and are best used for data that has an order.
- 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.
- 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.
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.
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.
- Stone, Maureen C., Color in Information Display Principles, Perception, and Models, 2004, http://www.stonesc.com/signotes/Stone-S2004-text.pdf
- Matplotlib, Choosing Colormaps, Matplotlib.org, accessed 9/13/18, https://matplotlib.org/users/colormaps.html
- 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