Illustration by Tracy Dai
When you’re working on a product that holds a lot of information – whether that’s business KPIs, financial data, or any other kind of metrics – your dashboard is like the backbone. It’s one of the first things your users will see.
Because of its importance, your dashboard design needs to be well-thought-out from start to finish. Building dashboards is no easy task, and there’s much more to it than just sketching out your ideas and calling it a day. Designers need to use data-informed decision making every step of the way, keeping the users and the product goals top of mind.
What makes a good dashboard?
Before we get into the steps, it’s important to define what a dashboard is. One of the definitions I like the most comes from the book The Big Book of Dashboards: “A dashboard is a visual display of data used to monitor conditions and/or facilitate understanding.” This definition reminds us how important it is to put yourself in your users’ shoes. It’s up to us, as designers, to understand what data our users might want to see and where to find it. A well-designed dashboard will make this very clear (and easy!) right from the start, helping users make quick business decisions.
To get to this point, you’ll need to think about the following before you even begin the design process.
Consider the purpose and goals
First, think strategically about your product. How do your users interact with it? What information do they typically look for first, and what information is less important? A huge part of a designer’s role is to investigate the real needs of those who will consume the data.
A few specific details to think about are:
- What will be the main purpose of the dashboard?
- On what devices would a user access the dashboard?
- How many times will the same user access the dashboard?
- What actions will a typical user take after viewing the dashboard?
User research will help you find these answers and more.
Choose a dashboard design type
Next, consider the type of dashboard you need, which will call for different features and elements. You can determine your dashboard type by thinking of its purpose:
Analytical – An analytical dashboard has features that allow for a deeper study of the data presented. They usually include longer time periods, as well as drill-down and drill-through functions; they also allow users to download the raw data for further analysis.
Google Analytics is a great example of an analytical dashboard, as it provides long-term views, customization options, and advanced data visualization. Image credit Google.Operational – Operational dashboards focus more on real-time updates. An example would be a customer support team that needs access to customer information and real-time changes, such as recent purchases or updates to registration data.
This example from Jet shows an operational dashboard, featuring real-time data about a specific customer’s orders and credit card information. Image credit Jet.Strategic – Higher-level business executives might need a more strategic dashboard to highlight the metrics that are the most important to them. For example, they might want to see a daily or weekly roll-up of the company’s key performance indicators (KPIs) or objectives and key results (OKRs). This type of dashboard should support display modes on multiple devices so the information can be shown to large groups, like in a lobby area or a section of the office where the sales team sits.
Choose the right charts
With the overall dashboard design in mind, you’ll next need to determine how you’ll visualize the data. The stereotypical enterprise dashboard design – with its bold colors, stunning charts, colorful shadows, and varied microinteractions – doesn’t always apply in the real life of a data analyst who needs to make important decisions while interacting with that interface. Some charts make it easy to distort the underlying data, so it’s important to choose wisely based on the intent and purpose.
Here are some examples:
To show relationships between parties – Scatter diagrams can be useful, but if you need to display a set with more data dimensions, take advantage of bubbles or network diagrams like in the example image below.
To compare data – Classic bars and columns do this job very well. For specific cases where you want to compare multiple parameters simultaneously, radars or polar areas work well.
To highlight time evolution – Line charts get straight to the point. A good practice is to signal time evolution on the horizontal axis. You can also indicate trends by using icons, colors, and simplified versions of the line.
To showcase parts of a whole – Donuts and pie charts are great choices if you need to show how small groups form a larger set but be aware of the number of parts. At a certain point, it’s difficult to distinguish large volumes of content grouped in this way. Some alternatives are treemaps or stacked columns.
Example of a treemap dashboard. Image credit Jamie Fang.To present specific cases – Sometimes it makes sense to use less conventional charts. For example, a lot of the recent pandemic data visualizations have used heatmaps to show geolocated data. Since most dashboards contain tabulated data, you can provide more context to a dashboard by adding cards with extra text or shortcuts to other points in the system.
The Johns Hopkins COVID-19 Dashboard aggregates data from various sources, including the World Health Organization, the U.S. Centers for Disease Control and Prevention, and the European Center for Disease Prevention and Control. Image credit John Hopkins.7 tips to design effective dashboards
According to Edward Tufte, author of The Visual Display of Quantitative Information, excellency and integrity in the display of information are what make up a perfect dashboard. Once you’ve determined your goals, type, and how you’ll visualize the data, keep the following dashboard design principles in mind.
1. Display only what’s necessary
It sounds obvious, but it’s not. The challenge is to find the balance between the data that we can display and the data that we should display on a dashboard. Like Albert Einstein said: “Not everything that can be counted counts and not everything that counts can be counted.” It’s tempting to build every possible card, chart, and filter, but it’s better to err on the side of simplicity. If users want to find more information, make it easy for them to access and dive deeper into the data in another area of your product.
2. Don’t mislead
Charts should tell the truth about a set of data. Therefore, choosing the correct way to display the information is crucial for a good understanding. Be aware of optical distortions and excessive animations that, even with the right data, can lead to a wrong interpretation for inattentive eyes. Even choosing between presenting data on the horizontal or vertical axes can impact how your users read it.
Be careful not to mislead your user; darker shades on a map typically refer to volume concentration, but the map on the left reverses this. Image credit Venngage.3. Reveal the context
A good dashboard layout should also have descriptive titles to help analysts quickly understand the data. Maintain a strong naming and icon convention to reinforce contexts during navigation.
4. Facilitate an in-depth investigation
In many cases, analysts will need to investigate the information further. Make this easier for them by providing options like filters, breadcrumbs, drill-downs, and exporting functions for raw data.
Filters are essential to help users analyze more complex data sets. Image credit Kevin Dukkon.5. Choose colors strategically
As you’re designing your dashboard, remember to also keep basic design psychology principles in mind. Even if the trend for UI design for that year is neon colors, this is not enough reason to transform a dashboard into a nightclub. Be consistent with your palette and pay attention to components like design constraints and accessibility.
6. Enable customization
Your dashboard can be even more useful if your user can customize and personalize it. However, as with anything in UX design, you’ll need to find the balance for your dashboard. Also, customization options shouldn’t affect navigation patterns or visual consistency established throughout the system.
An example of a task manager concept using drag and drop for organizing elements. Image credit: Anton Mikhaltsov.7. Understand the information hierarchy
Dashboards concentrate a lot of information in a small space, so it’s important to establish a clear hierarchical relationship between the elements. You can do this by visually leveling similar sets of information and grouping and subdividing secondary information. The typography, size of elements, card design, borders, and shadows are all crucial to help your users understand the content.
Finalizing your dashboard
Of course, a project like this is only finished after you’ve completed user testing and some iterations. Conduct interviews with those who will actually work with your dashboard daily to understand their real needs, and make sure your final design reflects their goals. With these tips in mind, you’ll have a well-designed, useful dashboard that will help your users make quick business decisions at crucial times.