User dashboards are essential in many businesses - even those that didn’t previously use them are digitalizing more and more. A good dashboard gives professionals an instant overview of everything they need to know, as well as the ability to hone in and clearly visualize key segments of the data.
Because of this, both the user interface (UI) and user experience (UX) are just as important as the data itself. When it comes to key dashboard design principles, it’s vital to ensure a smooth interaction that’s easy to navigate.
What are dashboards?
Dashboards are a graphical user interface that provides information regarding metrics and other key performance indicators. While many might assume this is pure via visual means, this is not the case; dashboards are designed to enable professionals to work as effectively as possible.
While this does include data visualization, it also involves a clear and accessible workflow, as well as a user-centric interface. They are often used in business to assess both historical data and real-time performance for a variety of purposes.
Furthermore, these dashboards come in many different forms and are highly unique to a respective business and its needs.
What are the best dashboard design principles?
Because each dashboard is unique, there is no versatile design that fits every need. As such, there are other key dashboard UX and UI best practices to abide by.
A clear purpose
All dashboards have a purpose and this should be clear at the very first screen. The most frequent data or findings need to be presented first.
For example, a manufacturing company’s engineers will often want real-time information about performance and operational efficiency. This should be clearly visual.
Likewise, other businesses might use dashboards for historical data and, as such, the dashboard should be orientated towards showing data from a larger time-span.
In many organizations, you may also have both needs. For instance, an e-commerce store needs real-time performance but also relies on historical data when for further strategizing. When this is the case, having different user types in the software can help ensure each specific type of user role has a dashboard customized to prioritize these specific needs.
Present the data correctly
The purpose of a dashboard is to present the data as effectively as possible; the goal is to improve the end-users work process by enabling them to filter down to exactly what is needed through the most interpretable means required in that specific context.
Through these design choices, dashboards become tools for increased productivity and heightened insights. Less time manually manipulating data leads to more time taking decisive actions based on the findings. Consequently, these design factors become essential to making any dashboard as effective as possible.
Graphs - Usually the most common, these are typically the easiest for cross-comparing different metrics and can be easily adjusted in terms of scale or filtered data.
Tables - despite not being the most visually impressive, these are essential for individuals that need to compare larger sets of data. Dashboards enable this process by automatically filtering and formatting the raw data as much as possible, leaving workers with the task of comparing and pulling the exact ranges they need.
Maps - on the other hand, if the company’s needs relate to geographical space (such as a taxi company) or specific locations (such as production facilities) overlaying data onto maps might be more useful. It gives a bird’s eye view and, what’s more, it can be filtered to both large (city, country, continent) and small (town, village, individual facilities) scales.
Timelines - these are also highly common, as they allow users to measure one or more metrics with respect to the passing of time. This is ideal for identifying peak trends or activity. However, if this is the case, always use the X-axis, so that time ‘moves’ from left to right. This is what users expect and to go against this would only cause problems.
So, how can you get this right? Before building any dashboard, it’s best to fully understand the business. Look at existing reports, see what metrics are currently being used, how they are being represented and enable a solution that supports these existing processes.
It’s also good to ask what additional information can be provided. A dashboard is an end result of the data pipeline, so the design process should also first understand the data requirements & business goals.
Answer the core questions at a glance
While dashboards can visualize raw information, their main purpose is to answer questions or generate findings. In other words, every user has a number of KPIs that are the most important to them, so let them be the first thing they see.
We just mentioned the different types of data graphs and this plays a key role here. For example, if users are looking to measure performance, overlaying two periods of time (such as month-on-month or year-on-year) in a standard timeline will easily answer the primary concerns (“are we doing better than last time?”). Fintech’s, for example, can use this to show profits, revenue, interest and other factors to compare month-on-month, year-on-year or any other seasonal comparison.
Furthermore, why not take this a step further and provide clear answers, calculated from the available data? Performance can be measured as up or down by various percentages between two periods so, in addition to looking at the data, users can simply glance at the answer. This would be ideal for Medical apps that want to process a patient’s vast data into clear indicators - which areas are getting better and which areas need to be looked into.
In other areas, donuts and bar charts can break down demographic details (for marketing teams, for example, that want to get immediate information in this area), while maps can measure activity geographically. Again, you can add custom findings to the dashboard to save even more time.
This is great for industries, such as HR, that are often interested in demographics and need that essential snap-shot view. An internal HR solution might favor donut charts about gender, age, professional, etc, while an outsourcing dashboard may want to track availability via both region and time.
Visual Hierarchy
On a similar note, a visual hierarchy can ensure the most prominent information stays prominent. By making these graphs larger, the human eye is easily drawn to them.
This is much better than the alternative; if you have numerous, identically-sized graphs on a page, it can be overwhelming. Users want to find the core data and then - and only then - will they typically move into the more specific or niche data.
Because of this, every page or view on your dashboard should feature one, singularly large graph. In some cases, there may be multiples (respective to each role) but not too many.
It also helps to remember that people look from the top to the bottom, and left to right. In other words, putting the most important visual information close to the top-left will help keep it at the top of the visual hierarchy.
Compare, Relate and Filter
In many cases, dashboards are used to find correlations and relations between different factors. A factory, for example, wants to know which criteria improve production.
As such, the best dashboards allow users to compare different data sets as they like. This, of course, is limited to the type of graphs you use. Donuts, pie charts and sunburst charts are great at breaking down a demographic, but they’re not good at showing changes over time (without having to manually move through each interval). For the latter, it’s better to use a linear graph.
Whether it's comparing or contrasting, this should be done on one screen, as moving between different graphs provides a poor experience for the end-user.
Furthermore, you need to provide users with the ability to filter or drill-down. This is entirely dependent on how the data is collected, but a good dashboard UI will always support it. Users should be able to filter by demographic, location, time or any other metric that is being measured - as long as it’s within their remit and user role.
Consistent naming conventions and formatting
Data comes in many forms but, once formatted into the dashboard, it needs to remain consistent. If a singular piece of data has different names in the dashboard, this will only confuse users and, furthermore, any reports generated via this software might be equally confusing.
Is a user in your shop a customer or a client? Are you measuring your production facility’s heat or temperature? Furthermore, what metrics are you using to measure these? Do not convert to new metrics unless you absolutely have to.
This is also important for teams across the business. When one team measures a metric or instructs another team to do so, there should be no confusion regarding what this means. As long as your formatting and naming stay the same, this won’t happen.
Consistency is critical. A singular change can mean individuals don’t regard the data as the same, leading to inaccurate findings or even findings that are ignored. The best way to avoid this, alongside simply ensuring the conventions don’t change, is to look into existing naming conventions within the company - whether through existing reports or existing tools.
If your brand new dashboard UI has different names that company workers are used to, this will cause problems either in or out of the dashboard itself.
Consistent Controls
Likewise, when it comes to designing UI, every card or view should operate more or less the same. Regardless of the graph, your interface and navigation shouldn’t change.
Wherever uses go, they should be able to add or remove metrics, adjust the time frame or compare data with ease. In fact, when it comes to the best dashboard design principles, you should keep your design consistent with the home screen as much as possible.
Don’t introduce new controls or features if they aren’t necessary. But, if you must, make them as intuitive as possible. Put them where people expect to find them, based on the UI patterns already established.
Clear Space - Don’t Overwhelm
While visual graphs beat looking at raw data, too many charts can still hurt the eye. Information needs its own space to be assessed and taken in.
Because of this, the UI design for your dashboard shouldn’t just cram everything into the first screen. Space should be given across all panels or graphs. If everything doesn’t fit on the one screen, that’s okay; it’s better to keep the priorities and move the less important data to another panel, card or view if needed.
Use Color
The best user dashboards are never black and white. Color can be used in numerous ways:
Scale can be used to highlight changing data, whether it's splitting segments or showing the most important metrics from the less important via saturation. This can also be used on heatmaps, using more intense colors for more intense sections.
Green and red are synonymous with good and bad. Show good data (i.e, if performance has gone up by 20%) in green and bad data in red (i.e, if it went down 20%).
When comparing multiple metrics or contrasting different periods, use color to keep each metric distinguishable. If both your metrics are blue, users can forget which is which, even with a legend. Setting dashboards up to assign different colors (based on clear contrast) should be a standard inclusion.
That being said, there is a limit: too much color can also hurt user dashboards. For the most part, stick to a core color palette with high contrast. Let the graphs stand out from the background, not the other way around, and don’t have different colors across different graphs. Other than being visually glaring, this risks giving some graphs more visual weight than others, disrupting the hierarchy. Only save these additional colors for graphs that need to present more information.
Less text
People use dashboards because they want to avoid spreadsheets of large, unformatted and unfiltered data. As such, a text-heavy design may scare some people away. Other than headings, options, and metrics, highly consider if any additional text is necessary.
It may be important, for example, to show actual data tables. Where possible, only show what is necessary and save the complete raw data as a downloadable CSV file. For example, medical apps often need to process large volumes of data, but they are designed to not present this all at once. Such apps enable easy filtering and sorting of particular data for specific needs, such as direct comparisons.
Intuitive & Interactive
The best user dashboard designs anticipate user behavior and are designed to accommodate. Here are a few things to consider:
Filters. If a user adds a filter to one graph, are they likely to apply these filters to other graphs on this section? If so, this behavior can be catered for.
Sliding time scales. If looking at historical data, let users slide in and out of periods to quickly glimpse changes.
Visual drill-downs. Using a map to show data? People will often click on the map to load up the exact same metrics for this specific region. It’s quicker than filtering manually - if the dashboard UI is configured for it.
All information - within reason.
Finally, as far as dashboard design principles go, you don’t always need to provide a dashboard with full information - this might only be reserved for higher roles. If your organization is vast, it may be possible that different dashboards have their own segments, while only higher-level roles have access to the wider data.
This is important because too much information can be overwhelming and workers might be distracted by irrelevant data. In other cases, it just might not be useful for them. If you think about web chat applications, for instance, there’s a big difference between what individual customer specialists see (i.e, their own performance and analytics related to their work) versus the management level view (i.e performance across the company, or split by departments, etc).
Dashboard design examples
As you can see, there are a lot of factors that go into making great dashboard UI and experiences. But what do these dashboard UX best practices look like in action? Here are a few of the best examples out there.
Stripe
This dashboard is a great example of understanding user needs. The home screen doesn’t overload with information but instead focuses on the core details: payments, customers and gross revenue.
Between this and the timeline, Stripe’s customers know exactly what they need to know. Any additional information is underneath (with a visual hierarchy that ensures it isn’t in the way) or elegantly moved to one of the other specific tabs.
At the top, you’ll also discreetly see a number of quick timeframe options, as well as custom dates, to give users full control without being needlessly complex.
Google Analytics (and Google Trends)
If you own a website, you’ve likely used Google Analytics. As far as the design of any one section goes, Google Analytics offers a great way to compare segments side by side.
That said, there are lots of areas for improvement. Google Analytics is very data-heavy, has a very complex menu and uses terminology unique to itself. It’s also designed as a one-role account, giving users access to everything.
For other examples from Google, Google Trends is a nice example of a simple, online dashboard with one singular goal - to compare search volumes for various terms or concepts by region and time.
Facebook Insights
Only available to business owners, Insights is the primary panel for getting an overview of Facebook activity on your company’s profile and posts.
What works fantastically here is the initial view: Facebook offers numerous graphs for the timeframe given (usually a default of the last 7 days). Combined with period-on-period indicators (red for bad, green for good) this gives a great overview of what’s going on. It also combines organic and paid results in one graph, which is great for marketing insights.
As for what could be improved, the rest of the detail becomes very complex and more text-heavy as you scroll down. However, this is because Insights is trying to do everything on one page, as it’s only a section of a larger service. This is why dashboards are best designed as their own standalone service.
The dashboard design process
So, that’s everything you need to know about dashboard UX best practices, but how does the design process for a dashboard work?
Define user roles
Before you can start designing, you first need to know the various roles the dashboard is for. This will let you know how many different accounts you need to design for - the essential system design of the dashboard.
Define goals and requirements
Next, you need to determine the specific goals and needs of each user. By researching their roles in the organization and their existing data needs, you can design individual views for each of them.
This is where certain data types become prioritized for each user, as well as determining how much information each role needs access to. All of these are essential for establishing the visual hierarchy that comes with dashboard UX best practices.
Assess existing data
While it’s not a design aspect per se, it’s worth checking what data is currently available, as this is what you have to design around. If more data is needed, then a more advanced data pipeline is the answer.
This is also the stage to define how data is named and formatted, what metrics are referred to and any other consistency matters.
For now, in regards to the dashboard UI, it’s better to focus on the attainable data. Speaking of which...
Determine how to present data
Determine the best visualizations for each form of data - determine what can and can’t be compared. If it can, make sure it's incompatible formats.
Roles focused on real-time results need real-time data first and foremost. Make this the primary screen.
Analysts and other researches might need historical data, so make timelines the largest visual factor.
For other roles, expand and add the ability to compare, contrast or filter as necessary.
Use visual aids, such as color and pre-calculated conclusions (as well as everything else mentioned earlier) to refine this process.
Evolve and Adapt
Companies always change. As such, the dashboard won’t stay the same forever. Don’t be afraid to make changes based on feedback or expanding needs. If an organization expands, new data will come into the business and the dashboard design needs to account for that.
Likewise, you might need to change roles, or even add new ones, that should integrate with the existing design. To ensure consistency, you should make changes on a global scale. Don’t adopt a new interface or navigation for one specific role if it’s not widely adopted, as this can cause inter-team problems. Similarly, make sure any new changes stick to the established naming conventions and formats.
Remember, a dashboard’s ultimate goal is to improve work processes - not the other way around
