Dashboards made w/love
The secret sauce of good dashboards
Imagine you’re the owner of the most advanced car today, and this car has all the features and sensors that technology can provide…
What would the dashboard of this car look like?
Obviously, we can get indications about the speed we’re driving, and obviously, we will have indications about the motor rpm, fuel level, and the distance we drove. But let’s remember that we are the owners of the most advanced car that exists today, so there will be no problem providing parameters about the temperature inside and outside the car, the altitude above sea level, the wind speed, fuel consumption per mile, the weight of the car the passengers and the luggage, the angle and position of the car, the air pressure in any one of the tiers, the G forces we experience while turning, and recommendation for music that suit the driving atmosphere…
All these features are nice to have, but which ones will improve our driving, and which ones will disrupt and distract us from our goal (driving safely from place to place)?
In this article, I will share my secret sauce and some golden rules that need to be addressed when building dashboards for SaaS products.
1. Sort the content — not everything is super important
While getting to know your users, it’s better to document and collect all kinds of data. In every interview and working session, some parameters or metrics might be raised from the discussion. Collect all those fragments of information and spread them on a wall (or your favorite canvas).
Once you collect enough data about your users and their needs it’s important to remember that the dashboard is the gate to the product but it’s not the product itself, Dashboards need to help their users to understand what’s wrong, prioritize their work, and allow an easy way to navigate to the areas requiring attention.
The dashboard doesn’t need to present the entire data repository but high-level information dealing with whatever the dashboard is monitoring, not every piece of information in the product needs to be presented or explained in the dashboard.
Imagine this situation:
You need to buy an elegant jacket, but when you walk into the nearest shop you see that all of the shop’s goods are piled on tables right in front of the doors.
What would you do?… probably ask for assistance from one of the shop workers. Luckily, it’s very easy to find your way at commercial shops, you just get into the shop, take the 1st right to the men’s/women’s department, and in one glance you will see the relevant department (15 seconds max).
Your product should behave the same, therefore it’s ok to ‘hide’ some information, or rely on minimum interaction from the user in order to get it — It’s better than bombarding your user with everything you got.
Try to prioritize the data you are dealing with into 3 groups:
- Super important
- High value
- Nice to have
Use it whenever you need to prioritize what kind of content is more relevant for the users and what content is just nice to have if there is some white space left around somewhere, you’ll need it on the next steps once you will play with the hierarchy and size of each information.
2. What’s your type — different purposes need different tools
There are five main types of dashboards, the differences arise from the persona skills, the type (and the amount) of information presented, and the actions the user can perform. Based on your conversation with your users, try to understand what kind of tools the user needs, what kind of insights it can provide, and what (if any) interactions the user has with it.
Dashboard at glance
Goal: Present a bird’s eye view of the system (on its different parts) in real-time
Main persona: Various
Characteristics: We can relate to this kind of dashboard as a control center, therefore it will contain few parameters and data since it applies to unskilled users and therefore needs to be with a short learning curve.
Operational dashboard
Goal: Monitoring the performance of processes and allowing their users to visually and interactively point to an issue that has to be addressed quickly
Main persona: Since these dashboards are used to track operational procedures, they are most commonly operated by skilled mid-level personnel
Characteristics: The user should be able to filter and perform different activities with the dashboard like slicing the data in different contexts and measuring it over a selected timeframe.
Common mistakes: Operational dashboards allow their user to monitor and analyze different processes so they build or deal with a lot of information. Make sure to place the information and group it according to the user flows — it needs to be super intuitive and easy for the user to access the data he needs.
Strategic dashboard
Goal: A strategic dashboard is a measuring tool that provides the management teams comparative views about their business performance (and goals) from different periods of time and usually will provide forecasts for the future road.
Main persona: Usually management, or analysts
Characteristics: Most strategic dashboards are based on comparing different variants from different groups or timeframes, they need to be interactive and present the goal or target trying to achieve.
Common mistakes: The strategic dashboard can enable the management teams to come up with the right decisions to improve business efficiency and productivity. Make sure to well define your user’s goals and highlight their progress in getting there (managers love showing their progress in their board presentations)
Analytical dashboard
Goal: Analytical dashboard centered on a vast amount of data and provides the user ability to dive into specific and defined segment(s) and explore it in different aggregations and views
Main persona: Analysts
Characteristics: Unlike operational dashboards that focus on real-time, analytical dashboards rely on historical data to identify trends, compare them with several variables and create predictions.
Common mistakes: The analytical dashboard’s focal point is on a specific segment of information (at a given time), most of the user work will be cutting and slicing this segment and comparing it with other segments — make sure the filtering mechanism is easy to work with, and it doesn’t delay the user from his flow.
Tactic dashboard
Goal: Accelerate decision-making and highlight the areas needing attention
Main persona: Usually used by mid-level management
Characteristics: Tactic dashboards need to present the entire business on their specific parts/departments/groups and focus the user on the problematic areas. Heatmaps, topology maps, bubble charts, and other BI components showing the elements inside a group will usually be applied in this kind of dashboard.
Once you understand what your users need, you’re able to finally choose the right framework and type of dashboard to present their data
- At glance: summarized crucial metrics at a given time frame
- Operational: show performance by different metrics of processes
- Strategic: focused on long-term strategies and metrics needed to achieve/improve
- Analytical: contain vast amounts of data that can be cut and presented from different views
- Tactical: present an in-depth analysis of the business to accelerate decision-making and highlight the areas needing attention
3. Define the user flow — it’s all about Hierarchies
Are you familiar with the “five-second rule”? (Not the one about eating food from the floor)
It’s the rule about the ability to find what you need on the screen within 5 seconds — and it’s all about hierarchy.
The rule is simple: the more important the information the more prominent it should be.
When making decisions on what information should go where, you need to base your decisions on the way people read information, and how important this information is. You can create the user journey on the screen by placing the information in different hierarchies and locations on the screens, assuring it catches the user’s attention in the right places and in the right order. The KPIs are usually a good place to start since this is the most interesting area to start diving into the dashboard — this is the summary where you get the context before you dive into the hard stuff.
There are many types of hierarchies and many more different ways to apply them, I’ll try to summarize the common types with examples:
Size hierarchy
Not all data metrics are equal, and some might be needed earlier in the flow — The larger the element the more noticeable it is. The user by nature will start from the larger components to the small ones
Positional hierarchy
The top left corner of the screen will naturally get more attention so try to position the important information from top to bottom and from left to right. Arranging the components in this order assures the user starts the flow from where you intended to.
White space hierarchy
If you want a parameter to grab attention, isolate and surround it with white space and not near (or in-between) other elements.
Color hierarchy
Prominent color can isolate elements and make them bold or arrange them in different contextual groups
It’s harder to focus the users’ attention on the relevant area when all components are in the same hierarchy
When the screen is too overwhelming the attention naturally will go to the less crowded places (the ones with more white and fewer components)
If you have an important parameter that you can’t take the chance that will be missed, here are some hierarchy rules in a nutshell:
- The top left corner of the screen will naturally get more attention so try to position the important information from top to bottom and from left to right.
- If you want a parameter to grab attention, isolate and surround it with white space and not near or in between other elements.
- The larger the element the more noticeable it is.
- Unique color can isolate an element and make it bold
4. less is more — find simple answers to simple questions
When “reading” data visualization, your audience has a limited amount of brainpower to dedicate to the problem. Some of this brainpower will be dedicated to decoding the visualization; any brainpower that is left may then be used to understand the message.
The purpose of a dashboard is to make complex information accessible and easy to digest. Therefore, the interface presenting the data should be clean and straightforward in order to minimize users’ cognitive load and time spent understanding what’s there.
Every word, image, and chart should provide a specific function or benefit to the interface. Remove any unnecessary text or graphics to create a simple layout. Good dashboards provide immediate insights to their users and send them to their tasks with minimum friction.
Both examples below share the same insights, the upper example spreads everything everywhere, while the bottom example highlights the crucial insights and presents the secondary information on demand.
When placing too much information users tend to ignore it (It seems like too much work to understand its structure) and probably will prefer to go somewhere else.
Provide the user with a simple way to find simple answers to simple questions.
5. Find relations and Provide insights (don’t let the user think too much)
Work doesn’t end just by detecting and understanding the metrics and their hierarchies, we must understand the relations between them as well. Most parameters don’t just stand alone but they are derivatives of each other, and it’s important to understand the relations behind them and to present them in a way that will ease users to get the right decisions and actions.
This is a bit of a complicated subject so I’ll try to explain it with a short example:
A retail network manager will tell us that the most important parameter for them is the ‘profit’ of his business. Once we will ask him what he needs to do in order to increase their profit, we will realize that he’s using different parameters that he didn’t necessarily mention before — parameters such as ‘Revenues’ and ‘costs’.
Without these parameters (revenue and cost) the profit parameter has no meaning
Revenue — cost = Profit
After we define the relationships between the different parameters we can provide the proper visualization for each one of them according to their importance and their place in the order of actions. Adding little insights along the way with minimum interference will help the user focus on the flow, and provide him with extra details.
An isolated number gives little context and value, and makes the person think too much — it’s better to add to a certain metric, its compared historical data, or the optimal value.
6. In advance color decisions — (how to provide the right message)
Color choices are incredibly important when it comes to the dashboard. Choosing the right color can ease the user workflow tremendously and create a more appealing UI, but choosing the wrong colors can sometimes end up being more damaging to your overall UX.
Here are some key elements worth considering BEFORE applying colors to the UI
Brand
It’s easy to assume that your brand colors are the ideal choice for dashboard design and data visualization, but it’s not always the case. Think about how and where your brand is reflected in your product but don’t enforce it to your style guide. It’s better to choose a designated place for your brand color that will be reflected at any moment and design the rest of the components with colors that present their message.
Status
Statuses will usually be presented as a traffic light color (red, orange, yellow) or will be presented by color or the lack of it. the user needs to grasp the status at a glimpse — it’s better if they wouldn’t have to work so hard to understand it.
- severity level
- enable/disable
- on/off
- connect/disconnect
Indications
Usually will be colored red or some other prominent color since their goal is to catch the user’s attention and stop their workflow.
- Alerts
- Increase/Decrease
- Messages
- Notifications
When you go wild with color decisions it’s hard to understand the status and the severity
Colors have meaning that is commonly known, they can indicate the user or direct them to the places that need attention — don’t confuse or distract your users with unnecessary colors. It’s better to keep the interface clean with minimum interference in order to provide immediate insights with colors
Wrapping it up
Dashboards often find their way into the marketing department as well. They are much more photogenic and appealing than operation screens or excel spreadsheets. With a little color in the right places, it is possible to focus the users’ attention (and provide information) on the places that require action. Familiar conventions (green — everything is fine, red — everything is awful) will always work to focus the users’ attention, but size and location also determine the hierarchy of the data.
As mentioned before, the dashboard is the gate to the product but it’s not the product itself. It should reflect the bottom lines and statuses of the different aspects of the product, but only the minimum required.
Understanding user needs and building the dashboard are the most enjoyable and challenging steps in building any system or platform, both because of the complexity and the creative freedom. It is advisable to devote enough time and iterations to this page as this is a screen that will be worked by almost all users in the organization and is meant to meet the needs of everyone. The dashboard is one of the screens that represent the platform, so it is worth investing in it and creating a unique and original tool, which beyond its basic functions will also provide marketing value.
