Picture this: You’re in a windowless room, bathed in sterile, fluorescent lighting. A rattling HVAC (Heating, Ventilation, and Cooling) system is pumping in recycled air from above. You’re sitting in front of multiple, large-monitor displays—which may not be positioned ergonomically—studying complex, graphic visualizations for any problems that may reveal themselves. These could be simple nuisances or present potential dangers to human lives. You’re working a long shift today—twelve hours to be exact. While you may get the occasional break, you’re otherwise rooted to your chair. You must try not to miss anything important.
This scenario isn’t fiction. It’s a reality for many employees who work in operational control rooms. While automation and the Industrial Internet of Things (IIOT) have, in many ways, eased the burdens of humans who monitor complex operations, offloading much of the work to artificial intelligence, humans are still a critical part of the process. And, as we all know, humans are not infallible. We grow tired. We begin to daydream. We become distracted.
Champion Advertisement
Continue Reading…
However, tired eyes and threadbare attention spans are not issues that relate solely to workers’ environments. These realities affect everyone, including you. In the US, more than 60 percent of all people suffer from some form of digital eyestrain. Moreover, 83 percent of Americans use multiple devices at once. We’re making our eyes do things they were never intended to do. They simply did not evolve for viewing the vibrant colors and images on back-lit displays with which we bombard them every day. And things are only getting worse. Eye-popping visualizations are fast becoming the norm—whether for monitoring our sleeping habits, tracking our spending accounts, or preparing for the weather outside. Any enterprise that delivers information or diagnostic data to users must now provide stunning dashboards if they want to remain competitive.
However, while these dashboard solutions might sell to boardroom executives, they do not necessarily help users. In fact, in many ways, they may actually harm users. Fortunately, there are some things UX designers can do to help counterbalance the negative effects of prolonged screen time on people both inside and outside their workplaces. Despite the fact that industrial domains are beyond the consciousness of most modern software users and designers alike, UX designers working within this domain have wrestled with the difficult task of mitigating worker inattention and eyestrain for quite some time—and for good reason: many of the workers in industrial domains monitor multibillion-dollar operations that involve dangerous equipment, materials, and processes.
In this column, I’ll present some lessons from the industrial-design environment on the design of data visualizations and dashboards for humans’ cognitive and physical limitations. You can apply these lessons to your design work regardless of your domain or industry.
Understanding Users
Creating an effective, efficient, high-performance data visualization begins with understanding its target users—not the data or the tool that delivers the data. With the advent of dashboard heavyweights such as Tableau, Power BI, and other ready-made visualization solutions, many implementers believe that these solutions commoditize user experience by providing a prepackaged set of widgets and layouts. While these solutions are powerful, configurable, and their intent is to accelerate the development of useful dashboards and visualizations, too many implementers simply assume that they can slap a dashboard atop a data set and call it a day. This is not user-centered design. An effective visualization takes into account the user’s context, physical and cognitive limitations, and motivating behaviors, as well as their goals, painpoints, and many other factors.
Understanding Users’ Environments
Before you start down the path of creating a data visualization, it is important that you gain access to users. As I described in “Choosing Your Battles, Part 2,” this is a non-negotiable requirement and is well worth your time and effort. Is it always feasible? Unfortunately, no. Gaining access to users can be extremely difficult, depending on the user’s domain, a company’s workplace security and intellectual-property policies, your travel budget, and dozens of other factors.
If you find you cannot directly access users, there are alternative courses of action you can take by leveraging constituents within your company or your department. But, if you are fortunate enough to have gained access to users—even if you must conduct your user research remotely—you can better understand their needs by asking them questions such as the following:
What are your goals and what do you do to achieve those goals?
What does bad look like in your world?
What are the most important things you need to understand?
How often do you need to be apprised of relevant information?
Where do you spend most of your time?
Other things you should try to discern are the words with which users characterize their work and what types of real-world mappings complement their mental models. Also, try to find out what other tools they use for productivity that could influence the greater arc of their workflow. No one uses a single software application or Web site in a vacuum.
If you get access to users in their workplace, pay careful attention to their environment: the lighting, the temperature, the distractions, and the noise. Do they work with others, or do they work mostly alone? Do they spend prolonged stretches of time sitting at a desk? Or do they move around often? Do they have Post-it notes stuck to their monitor? Often, what users choose to write down reflects some deficiency in their workflow or their tools that necessitates a manually recorded workaround.
If you must conduct remote meetings with users, ask them to describe their environment to you. But keep in mind the fact that most people unwittingly censor themselves, leaving out crucial details that they might take for granted. For example, users may routinely circumvent a software feature that was intended to help them. Or perhaps they have created a custom workaround that has been in use so long that it is second nature to them. You need to ask why often to get to the heart of their goals and how they go about achieving them.
Accounting for Different Mindsets
The mindsets of the people who use your data visualizations could be varied and nuanced. This might necessitate your creating different views and layouts for different users to facilitate the delivery of meaningful information that is focused and relevant. The busy executive dashing from meeting to meeting, who still wants to stay apprised of production output, likely has a very different mindset from the control-room worker who is monitoring a process and on the lookout for alarms and faults.
However, sometimes a single user might have different mindsets at various times, depending on their contextual goals and job-related tasks. Therefore, it is important to understand how often your target users transition between sets of tasks and why they do it. For example, I have visited some manufacturing customers whose machine operators are highly technical and are empowered to perform certain maintenance tasks on expensive equipment. In contrast, other customers’ operators are under strict orders to call a dedicated maintenance professional in the event an issue occurs. No two customers or companies are alike. Typically, a company’s culture greatly influences the mindsets of their employees. It is impossible to understand these different target users and other nuances of their workplace without gaining direct access to the users themselves.
Therefore, before you attempt to design a solution, be sure to get a sense of the users’ mindset—regardless of whether their role is limited to a subset of responsibilities or they are empowered to take corrective action. Doing so ensures that you are prepared to provide them with the most relevant information possible.
Understanding What Bad Is
What is bad? How does the user know this? As humans’ attention spans continually get stretched to their limits, it is becoming increasingly difficult to notify users of something that truly merits their attention. Users are under constant bombardment, with little red badges and come-hither popups on their phone’s apps, which may or may not deserve their attention. In combination with other sensory cues such as the incessant chirping, buzzing, and vibrating of our devices, it’s a wonder that we’re able to apply meaningful attention to any task.
There have never before been more hurdles to overcome in communicating problems to humans. Thus, it is important to understand the worst-case scenarios. Ask users: What does a bad day look like? What are your greatest fears pertaining to your responsibilities? What are some examples of things that have gone wrong and how did you learn about those things? Moreover, how do your existing tools and solutions help you become aware of problems and potentially correct them? Asking such questions helps you to assign high priority to the most important issues and deprioritize less important issues.
Only once you understand your target users should you begin to think about how to design a solution to meet their needs. When users view your data-visualization user interface, they should feel as if they are receiving a report from a trusted confidant who has the answers to the questions that are perpetually at the top of their mind. Questions such as the following:
How are we doing?
Is anything bad happening?
How long has this been happening?
Is performance improving or getting worse?
Next, I’ll provide some practical tips for designing data visualizations that help users answer these questions, without imposing unnecessary burdens on them.
First, Avoid the Bad
An effective data visualization, such as that shown in Figure 2, is laconic and uses restrained affordances for noncritical information, so errors can clearly enunciate themselves—for example, the red fill at the top of a vertical gauge in the middle of the screen. If the person who designed this visualization would have invested their time in designing colorful gauges and meters first, they would have put themselves in a difficult position when it came time to design for the bad scenarios, which inevitably happen. Unfortunately, focusing on the happy path is all too common, and this results in a user interface’s failing the user at the most critical moments.
Figure 2—Visualization clearly indicates an error condition
Understand what your users care most about and show that information first. For example, in the industrial domain, an AC (Alternating Current) drive contains hundreds of embedded data points. If you were to design a dashboard to give users insights into a drive’s performance, would you show them all of that information? Of course not. The average person can keep only four items in their working memory at once—plus or minus one. This is also a good rule of thumb for determining how much information to show in a data visualization. Try to limit the number of data groupings you display to ensure users can easily comprehend them. If you need to provide more information, leverage a progressive-disclosure technique or provide a link to an entirely different visualization.
Clearly Convey Hierarchy
If more than one view is necessary, providing a clear hierarchy is key. Show a broad view with limited detail at the hierarchy’s top level, then link to views that progressively reveal more specific details as the user navigates deeper into the hierarchy.
But hierarchy is visual, too, so be sure that individual screens clearly communicate what data should draw the user’s attention first, using the inverted-pyramid method. Figure 3 shows a dashboard that is densely packed with similarly afforded content containers. Where should the user look first? What is the most important information on the screen?
Figure 3—A dashboard with insufficient visual hierarchy
In contrast, Figure 4 shows a dashboard that both presents less information and communicates a clear hierarchy. The gauges at the top of the page present the most important information, as indicated by their prominent placement, generous scale, rich fidelity, the color-keyed icons centered within the gauges, and the high-contrast numeric values centered beneath them. However, this type of view would not be effective if all elements on the page shared the same level of visual hierarchy.
Figure 4—Visualization with a clear visual hierarchy
Many modern dashboard solutions are powerful and highly customizable, giving users the ability to manipulate their layout as well as how much information to show. So it is important to educate users about why showing too much information can be counterproductive. If you provide a customizable solution to users, ensure that you implement smart defaults and empty states and provide instructions and helpful tips that help users design their own dashboards and visualizations. Non-designers struggle with hierarchy if they do not receive some level of guidance.
Match the User’s Mental Model
As I described in my article “UX for the Industrial Environment, Part 3,” Piping and Instrument Diagram (P&ID) drawings, similar to that shown in Figure 5, are common in industrial environments. They show the roles and relationships of piping and control vessels in a process flow. Such diagrams are useful as reference materials during the testing of system continuity, as well as the initial build. Unfortunately, many human-machine interface (HMI) designers simply repurpose such schematics when implementing HMI visualizations. Using these complex drawings can be problematic because they match the system model, not the mental model of the user who is monitoring a system. For example, as Figure 6 shows, attempting to recreate a P&ID model for the purpose of an HMI display can lead to information overload.
Always prioritize the user’s needs over the system. When you’re planning the design of a data visualization, be sure that you do not impose an assumed model on users, further taxing their cognitive load. The way users perceive their world might not match your assumptions.
Use Color Sparingly and Consistently
The ISA 101 Human-Machine-Interface (HMI) Design Standards recommend eliminating the use of color except to represent anomalies or abnormal states. So, instead of using vibrant color fills to communicate on or off, consider using dark and light values, which are easier on the eyes. For example, as Figure 7 demonstrates, a best practice for designing industrial HMIs is to use dark gray to show that something is in an off, or stopped, state; a value that is brighter than the visualization’s background—for example, white—to communicate that something is turned on, or running.
Figure 7—Example showing color is not necessary to convey state
Image source: The High Performance HMI Handbook, by Bill Hollifield, Dana Oliver, Ian Nimmo, & Eddie Habibi
Color is not as necessary as you might think. As I described in “UX for the Industrial Environment, Part 1,” color draws the user’s subconscious attention. With every color you add, you risk taxing both users’ eyes and their cognitive load because their brain must work harder to distinguish between the colors. Moreover, because eight percent of all males and one percent of females have color-deficient vision, you risk confusing users if you rely on color alone. If you do use color to differentiate states or conditions, be sure to use redundant coding—for example, pairing the color with a unique shape—and assign a label.
Never use high-saturation or high-intensity colors as a background. As Figure 8 shows, a colorful background can overwhelm users. Even though white and black backgrounds are in common use in many software applications, they contribute to glare issues. If your users work in subpar lighting conditions, stick with light gray backgrounds or use some other neutral color such as beige.
Figure 8—Visualization with a highly saturated background color
Gray values are effective because they reduce glare and luminance-contrast issues. However, this does not mean everything on the screen should be in some shade of gray. Foreground elements such as text labels, symbols, and buttons must be clear and legible. Do not overcorrect and reduce contrast to the point that your user interface fails to meet ISO and ANSI standards and is illegible. A contrast ratio of 3:1 is the minimum level of contrast that is recommended for standard text and vision. However, note that this minimum level may not be sufficient for aging workers or those working in poor lighting conditions, as is common in the industrial environment.
Use Appropriate Fonts
For text labels and descriptions, use Arial or some other proportional, sans-serif font by default. But for numeric data and engineering units, use a monospaced font such as Lucinda Console to make numbers more legible at a glance. For example, in Figure 9, the numeric value on the left uses Arial—a proportional font; that on the right, Lucinda Console, which is a monospaced font. Which numeric value is easier to read?
Figure 9—Proportional font versus monospaced font for numeric data
Show Affordance Responsibly
Do not include bevels or shadows on widgets or groupings of information unless the user can drag or manipulate those elements in some way. Although flat design tends to make visual signifiers more difficult for users to see, causing uncertainty, it is also true that placing unnecessary affordances on the wrong things leads to users’ fatigue. For example, in Figure 10, do the gradients or jagged edges on the burst vessels provide users with any useful information?
Figure 10—Visualization with visual affordance on the wrong things
Moreover, matching users’ perception of their environment doesn’t mean literally matching it. There is no need to mimic the real world unless your software application or Web site relies on simulation or emulation. These are popular capabilities in the industrial domain to help users understand the fit and cost of massive operations before investing heavily in building them. Most data visualizations that provide answers to users’ top-of-mind questions do not require skeuomorphic graphics, capering flames, or glitzy gradients, which are detractors, not accelerators.
Provide Accelerators
A good data visualization takes the user’s context into account and remembers the user’s preferences. Does the user typically view a trend in daily increments or weeks? An effective data visualization should remember the user’s preferred time span and provide other configurable preferences that enable the user to offload menial tasks to the application.
Ease Up on the Fills
Many modern dashboards overuse colorful fills, which increase the density and intensity of the information users need to comprehend. Some alternatives include the following:
Instead of using a radial, donut gauge that relies on a fill to indicate the current value, consider using a directional needle inside a circle with tick marks.
Instead of relying on a vertical gauge that depends on a fill to communicate the current value, provide more precise information by using a simple rectangle with tick marks and a small triangular indicator that aligns with the current value on the rectangle.
Instead of filling the space beneath a trend line with a color or gradient, pair a line with a unique color-keyed symbol to more readily communicate its difference from other trend lines. This lends greater visibility to the trend underlying the grid lines, providing clearer information.
Do More with Less
Current values in isolation do not tell a story. As Figure 11 shows, by relying less on unnecessarily complex visual affordances such as the skeuomorphic tank on the left, the storage tank on the right can convey more useful information. Pairing the vessel’s current value with a historical trend line gives the user a better answer to the question: how are we doing?
Figure 11—A side-by-side comparison of tank widgets
Sometimes no information is better than dated or partial information. For example, if a system is in a fault state and unable to deliver the most current information to a chemical plant manager, showing no data and providing an error message—making it obvious that something is wrong—is preferable to providing old data, which could result in poor decision-making. To communicate missing or inaccurate information, consider doing the following:
Fade out the section or area of the screen that contains the outdated information.
Display an icon with a message in conjunction with the questionable information.
Hide the information altogether and display an error message. This is often preferable in an industrial environment because it provokes the user to take corrective action sooner.
Encourage Action
If users should act in response to the information they see in a data visualization, it is critical to provide contextual actions in close proximity to that information. As I mentioned earlier, some users may be more empowered than others. This could necessitate a more robust sets of tools that facilitates spinoff workflows—for example, sharing an incident with a coworker or taking a snapshot of an anomalous condition.
Cut the Frills
As Figure 12 shows, an effective visualization conveys important information by using as few frills as possible. This simplicity accelerates users’ progress through their tasks because it requires less of their finite cognitive load.
Figure 12—Clean visualization that does not rely on unnecessary frills
It is important to avoid unnecessary embellishments, as tempting as they may be. For example, using text as a decorative element or placing critical information on top of a background image just adds clutter to important information. In Figure 13, does showing the cropped airplane wing cutting through a majestic blue sky offer the user any useful information?
Figure 13—Visualization with an unnecessary background image
Making a user interface beautiful does not necessarily mean adding rich graphics or eye-popping colors. There is beauty in simplicity. Moreover, users do not view a data visualization for the sake of admiring its aesthetics, but to get answers to their top-of-mind questions. Viewing an effective visualization should be like receiving a report from a trusted confidant that clearly answers the users’ questions in a way that does not further burden them.
To design an effective data visualization, you must first understand your target users’ environments, goals, and mindsets, as well as the things they consider to be bad. This understanding helps you to determine visual priorities. Therefore, when you’re designing visualizations, take care not to call attention to unnecessary elements and affordances. Users’ cognitive and physical capacities are likely already maxed out by the complex graphics and intense colors to which they’re exposed every day. Do not add to the growing heap of stunning visualizations that are heavy on frills, but low on useful information. Instead, focus on presenting curated information in a clear hierarchy that matches the user’s mental model. Don’t rely on trappings that depend on vibrant colors or use excessive decoration. These can compete with the information that should draw the user’s attention first.
Even if you do not design for users in an industrial context, you can apply many of the practical techniques and principles I’ve described in this article anywhere, including the domain or industry in which you work.
Director of User Experience at Rockwell Automation
Cleveland, Ohio, USA
Jon has a degree in Visual Communication Design from the University of Dayton, as well as experience in Web development, interaction design, user interface design, user research, and copywriting. He spent eight years at Progressive Insurance, where his design and development skills helped shape the #1 insurance Web site in the country, progressive.com. Jon’s passion for user experience fueled his desire to make it his full-time profession. Jon joined Rockwell Automation in 2013, where he designs software products for some of the most challenging environments in the world. Jon became User Experience Team Lead at Rockwell in 2020, balancing design work with managing a cross-functional team of UX professionals, then became a full-time User Experience Manager in 2021. In 2022, Jon was promoted to Director of User Experience at Rockwell. Read More
