While it’s true that every set of data is unique, the dashboard—which lets you present all the important, actionable data in a single view—ought to be so easily understood that it’s almost invisible. And, as it turns out, there aren’t as many ways to do that as you might think. Take it from the blogger SeattleDataGuy, who worked for a successful business which sold dashboards and insights to other companies. “We only had four dashboard products,” he says. “That was it, and yet, this company has existed for over a decade.”
Of course, there is a right way and a wrong way to build a data dashboard. And because of that, the design work that goes into creating one needs to follow the limitations of data visualization. Carly Fiorina, former CEO of Hewlett-Packard, once said: “The goal is to turn data into information, and information into insight.” Here are some best practices to make sure that you’re getting your dashboard design down to a science.
1# Know Why The Dashboard Exists
The most important step of designing an effective dashboard is knowing why you’re doing it in the first place. Dashboards are created with a wide range of purposes in mind—some are meant to aid in immediate decision-making, others are intended to track long terms goals. Here are a few examples of how data can be arranged and visualized depending on the specific purpose and user.
Operational Dashboard
Operational dashboards are designed to help users as they complete time-sensitive tasks and often highlight deviations in data while visualizing potential resources.
In this web analytics dashboard, designed by Jan Losert, the operational data that’s emphasized includes a bar graph of daily visitors, real-time users, total site visits, bounce rate, visit duration, top 5 pages, and a social-media breakdown. In just a single view, a user gets an overview of the status quo while being able to glean where changes could be made to improve site traffic.
Strategic Dashboard
A strategic dashboard takes a long view of the data, and is organized around top-line KPIs and benchmarks that can be monitored by everyone from top executives to executive assistants.
Analytical Dashboard
An analytical dashboard is often the domain of a business analyst or an in-house expert. Like a strategic dashboard, this requires a much larger data set, and is intended for long-term thinking. Using insights gleaned from historical data, users are often able to take a look at various future scenarios, testing theories through various models.
This example of Zoho’s Google AdWords dashboard gives you a sense of time (monthly performance) as well as scale: You can click on any point to drill down to further insights about the data.
2# Own the First 200 Milliseconds
There are certain properties of visual perception that all good design is based around, and dashboards are no exception. Preattentive processing, the human experience of taking in the visual environment, can happen even when the mind is barely conscious of what it is doing—in the first 200 to 500 milliseconds of seeing something. The best dashboards play to these particular strengths of human cognition.
The Nielsen Norman Group published a test to see how preattentive processing works. Without much work, you should quickly be able to deduce which line in the following diagram is longest:
Our natural proficiency at determining length is one reason that bar graphs are so effective on a dashboard. We can instinctively grasp the length of each bar in comparison with its neighbors. Other preattentive markers include the area of an item, its angle and 2D position, which is why any kind of 2D graph—including a scatter plot on a linear graph—is a staple of the dashboard, too.
But when it comes to size, 3D representation, and color, things can be a bit trickier for the mind to immediately grasp. For example, we might be able to tell that a large rectangle is bigger than a small one, but how much bigger is difficult to determine. This is why pie charts, radars, and gauges take longer for the mind to process. They all rely on the eye to be able to compare area, as in this example from uplabs, which uses a donut chart in order to distinguish between mobile, laptop, and desktop users.
The relationship between the blue, purple, and green stripes on the donut take a little more time for the human eye to figure out than if they were in a bar graph.
Final note on color: While color is a great way to create distinctions, it’s important to remember that 4.5% of the general population is colorblind. What’s more, it’s not always visually apparent which color might have a higher value than another, so avoid using it in any quantitative capacity. For example, try to stay away from using green to display an increasing number and red to show a decreasing number. It can be a little confusing on first glance.
3# Work within spatial limitations
Getting all operational data into a single view can be a challenge, but working within that constraint can result in brilliant visualizations,and surprisingly intuitive combinations of metrics. Just make sure that while you simplify information and summarize, you’re still providing the necessary insight needed for difficult decision-making. Here are some principles to keep in mind:
- Focus on the warning signs: The data sets that are in healthy ranges are less likely to be monitored around the clock. Instead, stick to what’s newsworthy, then share top-line details about what’s different, and then offer a little background information on the data.
For example, check out this dashboard designed by Filip Justić: beneath each statistic is a green or red number,which puts the newsworthy number in context, by immediately making a distinction between positive or negative numbers. The help icon in the top left-hand corner and the message icon in the top right-hand corner both lead to pop-up windows, where those users who want more information can find it.
- Don’t be afraid of drill-down capabilities: While no good dashboard design would hide important or relevant information, it is important to establish a hierarchy of data, so that users who want further insights can drill-down for them, and those who just want top-line stats can get them too.
There’s an informal guideline,the 3-click rule, that encourages designers to limit interactions. All information should be no more than 3 clicks away. According to the Nielsen Norman Group, the 3-click rule of thumb isn’t actually based on data. Designers should be mindful of not overwhelming a user’s mental processing power—or “cognitive load”—but as long as the information is organized, there’s no need to arbitrarily limit how much a user can drill into specific data.
Ana-Maria Ghinita who works at Infinitec Solutions is in favor of the drill-down approach: “Charts are stacked on top of another, allowing users to zero-in on a specific data point and further inspect it for deeper insights.”
An example of the Infinitec Solutions approach.
4# Personalization, not customization
Personalization and customization are two different sides of the same coin: both help to fulfill a specific user’s needs. Personalization is done by the system, while customization is done by the user. Both have their benefits, but when it comes to the dashboard, personalization is the name of the game.
Customization, which gives users the opportunity to create their preferred interface and information stream, is great in theory, but it can consume lots of time and energy. It also assumes that users fully understand the purpose of the dashboard and the data they’re looking at, which may not always be the case.
It’s better to create a dashboard interface that is personalized to a user’s given role and responsibilities than to give customizable options. As the technologist Taras Bakusevych explains, “Designing more ways to customize is often an excuse to not go into a tedious process of truly finding out what each user role truly needs to see.”
The Nielsen Norman Group highlights a specific type of personalization which would be applicable to dashboard building: Role-based personalization would allow for a given dashboard to cater to a group of users, depending on their needs. In other words, there might be a particular view for someone on the sales team as opposed to on the social media team.
Here’s an example of a personalized view from George Kvasnikov for Travitor, an online learning platform. This course report would be monitored by specific admin to track students’ progress.
5# Think mobile first
As the product director at Google Luke W would say, it’s not just that you should be thinking mobile, you should think “mobile first.” Mobile comes with its own host of design challenges, but if you begin by addressing the constraints of a smaller screen and vertical layout, the rest will follow. Despite the importance of mobile, it’s still a non-traditional interface, with its own set of concerns. Here are some things about mobile design to keep in mind:
- Remember that some people have “fat fingers”: Design for the person who might have the most trouble clicking the right button on the smallest screen.
- Go for high contrast: The more bright and distinct the interface, the easier it will be to see on a small screen.
- Think about light levels: It matters where we might be and what kind of light we might be in. Consider implementing a dark mode, for those who use their phone on the go, day or night.
- Avoid filters: Go for drop-down menus instead.
- The Bottom Menu: Think about the way that people hold their phones and stick to the area of importance based on the property of the screen. Commonly used actions should be on the bottom of the screen. “Small change,” Luke W said in this talk. “But possibly worth it.”
Here’s the mobile dashboard that Jan Losert designed for Tapdaq — which employs the bottom menu for easy navigation, as well as dark mode for easy visualization.
