7 min read

Complete Guide to Dashboard UX Design

It’s no surprise that the modern world is fueled in large part by data, and our ability to collect and present it. This would explain why over the past two decades or so, dashboards have become such a critical part of how we perceive data as a whole. Funnily enough, we had little use for dashboards before the turn of the millennium, owing to a lack of data to be viewed in real-time anyway, making it all the more striking how reliant we are on them today. Of course, how good a dashboard is gets dictated by one of two things, the quality of the data on display, and the quality of the dashboard UX design.

In this article, we’re breaking down the fundamentals of dashboard UX, and how different types of dashboards vary from one another. Furthermore, we’re handing out some of our top tips to help designers ace the dashboard UX design process every time. 

Types of Dashboards

To the uninitiated, the term ‘dashboard’ would evoke large volumes of data, represented mostly in visual mediums, and dashboard UX’s would remain fairly static. However, there is a science to it, with most dashboards falling into one of four categories. Differentiating these is crucial to the dashboard UX design process since they each feature different kinds of use-cases and data types.

Operational Dashboards

Operational dashboards tend to focus on processes and track short-term goals by design. Their metrics tend to be rapidly changing and evolving from day-to-day. The dashboard UX here should be nucleated on actionable data, and how easy or difficult it would be to change it. Onething’s work on Netradyne, in designing a fleet management dashboard, which was operational, focusing on how to optimize the routes, and drivers in a fleet.

operational-dashboards-netradyne
Netradyne’s dashboard focuses on drivers in a fleet and routes

Strategic Dashboards

Strategic dashboards are the most broadly focused of them all. They look at long-term goals, and how they are being achieved with respect to large volumes of metrics, over long periods of time. Generally, the data here is used much more as a benchmark, than as a KPI. Dashboard UX designers should focus on how to neatly represent large volumes of data, in a few metrics. An example is DataPine, which is a financial dashboard, that facilitates strategic thinking in the top management of an organization.

strategic-dashboard
Datapine, a financial dashboard, facilitates strategic thinking through design

Analytical Dashboards

Analytical dashboards are the odd ones out since they are either created by, or for analysts. The data here is either displayed after synthesis from an analyst, or present for analysts to further act on. The goal here is to allow analysts to view as much high-quality data as possible in order to make inferences and observations on the same. In general, dashboard UX designers would want to make the analyst’s job as easy as possible, by featuring plenty of data categories, and analytical tools. Google AdWords is an analytical dashboard, which allows experts and amateurs to make actionable insights regarding their advertisements. 

An analytical dashboard like Google AdWords gives actionable insights

Tactical Dashboards

Tactical dashboards are the most short-sighted of all dashboards, they focus on day-to-day KPI’s, and are normally not actionable, much more focused instead on data collation, and visualization, allowing senior management to keep a track of employee performance in most cases. Dashboard UX designers should focus on letting users get as up close and personal with the data as possible, visualizing even the smallest details and changes in metrics.

UX Tips to Nail the Dashboard Design Process

The process of dashboard UX design is no small task, and there are myriad pitfalls and roadblocks to be encountered on this journey. To help you out, we’ve compiled a list of our best practices, and tricks to ensure that you’re in control of the dashboard, and not the other way around.

Use Layouts to Your Advantage

As countless studies have shown, the top left, and central areas of websites and apps are where the eyes tend to land first. This can be used to your advantage when conducting dashboard UX design, seeing as the most important elements can be placed here, with everything else falling into place accordingly. Furthermore, the bottom right is given the least precedence by users in general, allowing you to nucleate less crucial information in that quadrant. For example, with UnitXPro, an enterprise level dashboard designed by Onething, the top left always describes the data which is being presented, so the user knows exactly what they’re looking at, in any given moment.

use-layouts-to-your-advantage
Dashboard design of UnitXPro describes the data that is being presented

However, don’t just rest on the studies, instead, conduct your own analysis and research to find what could work best for your dashboard UX design process. While the conventions of UX design remain constant, there are variables to consider, which can be weeded out through more personal research. We’d recommend doing a heatmap analysis on some similar dashboards, prior to designing your own, to find out in further detail how users interact with products such as these. Also, don’t just consider how the user views a dashboard, but also how they flow through it, allowing you to control a certain narrative in your dashboard as well, by carefully laying down elements. 

Leverage the Proximity Principle

The law of proximity, which happens to be one of Gestalt’s 7 principles to visual perception, states that elements that are placed near one another, tend to be perceived as related in some manner. Designers can certainly use this rule to their advantage in dashboard UX design, by placing either directly, or contextually related elements in a dashboard near one another. This can be seen in our work on Disprz, particularly in the ‘learner progress’ dashboard, where more tangible data, such as modules completed, and skills explored are in one row, while those pertaining more to the course, such as average completion rate, and average time to complete, are in the second.

Disprz’s dashboard is one example exhibiting the law of proximity

Generally speaking, this is how designers should aim to organize their dashboard, based purely on elements’ relevance to one another. Not only does this allow designers to establish somewhat of a logical flow, while having to use minimum content, but the users will feel much more comfortable using dashboards that are laid out in this manner since the law of proximity also states comfort and greater understanding when utilized correctly.

Don’t Overload the User

Years and years of cognitive research has led us to a so-called ‘magic number’ which many designers herald as their favorite factoid ever. Officially known as the “Seven, Plus Minus Two” rule, the gist is that users can only store anywhere between five, and nine items at any given time. Naturally, this fact is applicable in any application of user experience design, and dashboard UX design is no different. Having any more than seven or eight elements visible at once will serve to do little more than confuse the user completely. An example of this is the older Apptio management dashboard, which easily had anywhere between 10 and 12 elements on screen at once, and was notoriously a nightmare to work with.

For this reason, show only the most crucial pieces of information to the user, and allow them to completely soak these in before proceeding to subsequent sets of data. While it can be tempting to place lots of information on a dashboard, to give a dense and holistic view of the metrics on display, refrain from exacting this urge on the UX design process, and save your user from being overloaded with large volumes of irrelevant data. This, in turn, will also make your dashboard far more focused and concentrated on it’s main purpose, seeing as the temptation to branch out and provide a lot of fringe-data exists. 

Give Visuals Precedence over Text

As a rule of thumb dashboards should be responsive, interactive, and most of all, visually immersive, all part of the responsibilities of dashboard UX design. We’ve all heard the adage ‘a picture is worth a thousand words’, and in no other discipline does this ring as true as in UX design. First off, in dashboards, we’re dealing with data, and it should come as no surprise that data is easier to read in a visual form, than text. Not only is it easier, but far more efficient to do it in this way, since the human brain processes visual data 60,000 times faster than text. An example of this done poorly is the London City Dashboard, which apart from looking archaic, fills far too much of the screen with text, and not enough visuals. Additionally, the user is given little space to breathe, with the lack of negative space on offer.

Visuals are far more immersive, and truly visually appealing dashboards could find users lost inside their creative representations of data for hours, whereas text-based data would see users getting bored and confused in mere minutes. Lastly visual data allows for easier extrapolation of trends, and inference of relationships, seeing as these things can be far easier discerned by visuals than text as well. Using white space intelligently is also a key, so as to make the dashboard look more airy, and friendly, as opposed to cluttered and claustrophobic.

Conclusion

Over the past decade, dashboards have become one of the most convenient, and widely used methods for users to view all kinds of data and make actionable decisions on them. However, how useful a dashboard is, can only be reflected by how well designed the user experience is, so it goes without saying that poorly designed dashboards get very little traction or use at all. Hopefully, this piece has not only bolstered your understanding of dashboard UX design but equipped you with the tools you need to design one with a cutting-edge user experience. 

Published by Ankur Sarkar

Sr. UX Designer

Ankur Sarkar Sr. UX Designer