Dashboard UI design can be complicated, but there are simple steps to ensure a great user experience.
Designing a dashboard is often complex, especially when the data you're using is nuanced and detailed. However, when done well, dashboards can enable your users to make decisions more quickly and confidently. Use these five key questions to guide your process of dashboard design to ensure that you have the best possible result. I encourage you to approach these questions sequentially, the answers often rely on the earlier questions.
On this page:
Before starting to design your dashboard, narrow the focus to a couple of key intents. Is your dashboard intended to help your users make a decision? If so, what sort's of decisions? Is your dashboard intended to provide updates? If so, why are those updates valuable, and what sorts of information do they need for the updates to be actionable?
Defining the purpose of your dashboard can guide your decisions about what data to include and which visualizations to prioritize visually. By doing this early on, you can help ensure that your final dashboard is effective at communicating whichever information is most important. Effective dashboards often include data that is mutually exclusive but collectively exhaustive. There isn't any redundancy in what is shown, but all key questions can be answered by simply looking at the dashboard.
This flowchart created by the Berkeley Institute for Advanced Media demonstrates how to effectively choose the right type of visualization for your data. Four key categories of information that visualizations can communicate include. Visualizations that focus on the relationship between two points of data highlight connections. Contrastingly, visualizations that focus on comparisons between datasets highlight differences. Composition and distribution-based visualizations layout the data in a way that allows the user to identify trends or correlations. Reference the flowchart below to identify what sort of visualizations would suit your goal and the data you have available to you.
Effective dashboard layout relies on three key principles:
(1) The most important visualizations should take up the most visual space. This means, that whichever 2-4 visualizations are most key to your user should take up the majority of the dashboard space. Less important visualizations should be made smaller, but lower down on the page or simplified to number panels. This ensures that when your users look at your dashboard their immediately drawn to the most important data, and not overwhelmed by having too much competing visual information.
(2) Ineffective dashboard layouts related data is grouped together. In Explo, you can utilize containers to cluster your visualizations - this is especially effective for number panels. Showing related metrics together makes it easier for your user to quickly browse, and compare and consider multiple pieces of information at once.
(3) Interactions that augment the data being shown are kept at the top of the dashboard. Keeping functionality at the top is an established dashboard design pattern, this will be more familiar to your users. One exception is that if you have a filter that only affects some of the visualizations, it might be more clear to group that visualizations that are and are not affected by the filter into two separate groups.
Color is a great way to influence how your customers perceive your data. It's best to avoid the use of green or red unless intentionally associating them with negative and positive things. Additionally, using your brand color as a key part of your palette - especially when highlighting positive metrics can help associate your brand color with a positive impression. Another key part of color use within dashboards choosing a palette that's appropriate for your visualization. Use distinctly different hues for categorically different data - for example, in a pie chart, or a multi-variable scatterplot. Use sequential palettes, in which a color of the same hue goes from light to dark, for data that conveys a variance in quantity - for example, some heat maps, and some stacked bar charts. Lastly, use diverging color palettes going from one hue to another for visualizations that are highlighting values that share a neutral center-point.
IBM's Carbon Design System is a great resource for learning more about visualization color palettes. Additionally, Google's Material UI Design outlines many strong sequential color palettes. Finally, if you're looking for a simple categorical palette - try using Coolors.co to experiment with hues that can work in tandem with your brand color.
Once you've published your dashboard you'll be able to iterate on it over time based on how your users are using it. For example, if your customers rarely interact with particular visualization, it could be better to adjust the way you are presenting the data or remove it from the dashboard entirely. Additionally, if many users are gravitating to using filters similarly it could help you identify a more meaningful default value. In Explo, we can provide you analytics on your customer's dashboard use to help you identify improvements to your dashboard UI.
If you'd like to partner with us to improve your dashboards, reach out at email@example.com! We're always excited to talk about dashboards and visualizations.