Dashboards are often the backbone of a good web app as they can be used to present large amounts of data in a condensed and visual form. In general, the more complex the app is, the more it can benefit from a well-structured, clear dashboard that helps users understand at a glance what the system and the underlying data is doing. We all use dashboards in our day-to-day lives, from the dashboard in our cars to the display on the thermostat that controls our air conditioner. In this case, I prefer to focus on the web ones.
So, how can we, as designers and developers, make sure that our web app dashboard is efficient?
1. Focus clearly on what the most important piece of data is and how it should be interpreted.
In general, the “trick” with data is that there are many ways to interpret it. In some cases, we want to highlight a certain comparison between two datasets, and answer questions such as: “How many people are browsing my app now?” or “How many people read my latest newsletter?” Other times it is answering the question “Is my business/app doing well?” Our job is to make the answers to these questions blatantly obvious.
So, ask yourself: what is the one question the data needs to answer first and foremost? Then go ahead and design the dashboard in a way that supports it, without distorting the data itself.
2. Don’t Just Display Raw Data
Another issue related to the previous point is that the dashboard shouldn’t just display raw data on a first look. It’s important to have the data there, yes, but not front and center.
Systems are great at spitting out a number like “today the system status is 5” by default. They work with numbers and returning a value is easy. But a good dashboard doesn’t rely on the user doing all the calculations and comparisons required to get to the meaning or interpretation of the data stored. For example, is the change good or bad on a range? Is that data better or worse than last week’s figures? A user want their data to provide a meaning or comparison.
Providing interpreted summaries such as an overall health score or percentage is much more useful because it carries meaning for humans, too. Even though it might be obvious to everyone working in the industry what that “5” means, it is still good to support it with a colour or a symbol that reinforces the “is this in a good or bad range?” type of message.
3. Make Alternative Views and the Raw Data Available for Advanced Users
This point seems to contradict the previous one, but it is equally important. Alternative, more “advanced” or “breakdown” views are great for the power users. They too need to have access to the data, and they often need it packaged and interpreted in different ways. While the CEO is only interested in “is the app getting enough visits?”, the marketer might need to know the gender and age of those people too, so that they can market to them more efficiently. Doing user research upfront and catering to the needs of most users makes our app all the more friendly.
But of course, since budgets aren’t typically infinite, we often can’t support every single need in a large organisation and code the system to interpret the data in every single possible way. This is where the raw data comes in. The raw data should always be available somewhere for those advanced users who need it. It shouldn’t be displayed at first glance, but it should be available on click or as a downloadable spreadsheet for those who need to interpret it in additional ways.
4. Be Careful with Grouping
When designing a dashboard, it is especially important to keep in mind the so called “principles of grouping”. The human mind takes certain “shortcuts” when interpreting information. One of these shortcuts is: “objects in close proximity to each other are related”. As such, it is important to be careful when placing graphs and labels in close proximity to each other because they might be interpreted as related.
The same goes for similarity. Even if shapes are different, if their colour is the same, two objects, or in our case, dashboard elements, will likely be perceived as similar.
Continuity, another of these principles, is a tricky one because it is often not obvious. When looking at visual information, when sufficient data is present, our brain is likely to “fill it in” to make it into a whole, recognisable shape. When designing, we need to ensure that this only happens when we intend it.
There is a lot more to the principles of grouping and Gestalt theory that applies to design, but it is outside the scope of this post. If you’d like to read more, this wikipedia article is a good start.
5. No Unnecessary Visual Clutter
Especially for those in visual/UX design, it is easy to fall into the trap of including visual elements just to make the dashboard look better on first glance. Unfortunately, this isn’t recommended because it can distract from the data itself. When looking at a dashboard, people are looking for meaning - every drawing, diagram, colour, or shape on that screen should carry or support some sort of meaning related to the data. It is not the place to “jazz it up with the branding colours” or “add some imagery to set the mood”. Yes, those are important too, but they are better employed elsewhere, such as on the marketing page.
Summary
This concludes my “top 5” list of things to keep in mind when designing dashboards. There’s a lot more to it, of course, as dashboards are one of the hardest elements to design because they need to simplify complex data. But these five tips are a healthy start and I am confident that following these tips can help anyone designing dashboards.
