IoT — Cool gray is a great background color for data visualization
Finding the right grays for dashboards
Defining colors for screen layouts that work well for the Internet of Things can be a complex task. The Predix Design System is a visualization platform with simple background elements that set the stage for colorful data visualization. The designer needs humility to accept diverse environmental use cases. Some GE users work inside dark control-rooms and others on a bright railroad yard with harsh lighting conditions. For the design team, this means that we have to support lights-on and lights-off experiences and everything in between. Our users work in our apps for eight hours or more a day, so our designs must have an elegant appeal that truly delights our users. The designs must be as attractive as consumer apps — “If not better!” said Ken Skistimas, Design Director of the Predix Design System, in this presentation about Consistency and Flexibility of Design Systems. In other words, apps for the IoT have to be even easier to use than consumer apps: easier to scan, navigate, and complete tasks.
A systematic approach to ensure adoption by the community
The apps must accomplish this while enabling interactive data visualizations from power plant dashboards to detailed single-asset data screens. This requires language that is modular, expandable, and obvious. The initial design choices need to be systematic and understandable — achieving repeatable results to empower the vast community of GE designers and developers. Everyone can contribute. To ensure adoption and future growth of our component library, our modular approach allows for design and code contributions from teams across the company.
How colorful can grays be?
For the 2015 MVP release of the Predix Design System, we used a set of 10 cool grays. Our hypothesis was that the choice of too many grays would be confusing and not support our systematic approach. Additionally, this early gray palette was created using artistic intuition, and the result looked great at face value. We thought: a great palette, time to celebrate! However, looking back, it is obvious that the background grays appear relatively bland and colorless when applied to the layouts.
Later, when we visualized the MVP grays in the graph shown below, we noticed that the set was missing certain steps that could be useful when composing layouts. That graph also explained why the saturation expression was not evenly distributed. In other words, some grays looked more blue than others. We learned that dark grays seemed to require more of the blue to appear saturated.
MVP gray palette
The graphic below shows blue saturation over brightness percentage
20 steps of grays
Our new approach was to reverse the creation process. We first projected the saturation onto a graph and then deducted the gray values from the actual graph. This visual approach helped us create a rational, well-spaced palette. Additionally, we decided to double the steps to twenty. It’s not that much more work to manage 20 over 10 grays. Having 20 grays to choose from increased design flexibility significantly when we later applied the grays to the dark and light themes. To have a sufficient amount of steps in the lighter area of the set, we added $gray2 — unscientifically squeezed between two regular steps as shown below.
The linear function works best
According to our experiments, a linear function works best. The straight line creates a visually even saturated palette. However, if we stick strictly to that line, some lighter colors change sides and appear too saturated. That becomes visible especially on devices with higher contrast settings like large TVs where certain colors may appear more blue than gray. We adjusted the respective colors to work well with those screens and on small, low-contrast monitors.
Nomenclature choices do not have to be driven by dilemma
Let’s talk about nomenclature. A designer might consider this a boring topic, but when done wrong, nomenclature can get pretty exciting. Those who consume color names range from UX designers to developers to product managers and a lot of other folks who are generally oblivious to colors (especially grays). That means the label has to be clear, easy to remember, and easy to write and communicate.
We decided to give the grays numbers for several reasons. In a legacy version of the system, we worked with descriptive labels like “Dark Gray,” “Darkest Gray,” and “Dark Darkest Gray,” etc. This approach is not only confusing, but also doesn’t scale to 20 items. Our goal was to use the same label in code as in general conversations. We are not using a leading zero because we will rarely sort the colors by name. Underscores seemed superfluous, and would have to be typed extra in code every time a color is defined. We declined using upper case letters because CSS is agnostic to upper and lower cases. Additional branding keys like “GE” or “PX” were quickly dismissed.
They are frame, background and separators. The UI is toned down to set the stage for interactivity and data visualization.
Establishing a light and a dark theme in layouts
Now that we have a rich vocabulary of contrasting grays, we can create sophisticated compositions.
Light: white, $gray1 and $gray2
Dark: $gray16, $gray17, $gray18
Nav: $gray19 — almost black!
Determining foundational text colors
For the MVP, black text was the obvious choice to achieve the most accessible contrast in an information display. Surprisingly, we learned that maximum contrast is not desirable for our use cases. Our research shows that high contrast causes users to complain about eye fatigue. Our users work with our apps for eight hours or more. As a result, maximum contrast does not equal maximum user friendliness and guaranteed accessibility. Contrast needs to be carefully balanced.
Key-Value Pairs are a very common element for the Industrial Internet. To create a clear information hierarchy, we offer a primary and a secondary gray to establish clear visual hierarchy for each theme. We use primary for the actual information and secondary for the accompanying label. The light theme primary gray is $gray15 and the secondary gray is $gray10. The dark theme primary gray is $gray5 and the secondary gray is also $gray10. Evidently, $gray10 works the same for both themes. Coincidence or systematic genius?
Interactive elements: hue 200˚ is everpresent
Our main gray framework and interactive elements are built around a hue of 200˚. The actionable blue pulls the user forward and indicates primary actions in text links and Call-to-Action buttons. Items colored select green indicate the current selection in tabs and lists. The actionable and select colors are intended to perform well in both the light and the dark theme. These palettes have to stand out by the intensity of their color and at the same time be dark enough for white text to be perfectly highly legible.
We intentionally distinguish interaction and visualization colors so that they can co-exist without ambiguity about which blue represents information and which blue is a call for action.
Recording HSB colors in HEX
We were tricked by Adobe Illustrator’s color management and the mathematical required rounding of HEX colors and other inconsistencies. As summarized in the Adobe Forum, RGB, HEX, and HSB colors don’t exist in a clean 1:1 relationship. We defined the colors in HSB and recorded them in HEX format. The results might be slightly rounded but they are still reasonably presentable to a user not equipped with an eyedropper.
Companion colors to create interactive fluidity
The interactive states need companion colors to create a fluid, interactive appearance. These companion colors relate to the basic color and promote the desired feel for users when they react to hover and pressed actions. The “…-light” colors are created for the background of selected text fields.
Component samples — colors in action
Summary and outlook
In summary, defining a color framework for screen layouts is not difficult. A rational approach and a limiting the options can help provide structured results.
The modular background elements set the stage. They are populated by crisp typography, clearly interactive elements, and outstanding interactive data visualization. Combining these ingredients creates the basic framework for every screen’s design in GE’s Predix Design System.
Related links
Color Usage Guidelines — Predix Design System Team
How to use colors to manage big data — Elise Blanchard
Balancing Consistency and Flexibility in Design Systems — Kenneth Skistimas
