11 UX Design Rules for Clearer Dashboard Design
Designing great looking dashboards is why I decided data was the field for me. Business analyst to data analyst to business data scientist – the title doesn’t matter. The creativity that tools like Tableau give me to put what I learn into someone else’s hands is pure fun.
But sometimes what I’d build would hit, and sometimes I’d get a lot of questions like what I built wasn’t intuitive. No worries! I’ll learn from those questions, right? Sure!
Much of the time I don’t have another analyst to bounce ideas off, so that’s all I really had to go on. Improve with each iteration. That’s still good advice – improve 1% each time. Except I discovered a whole field for accounting for how users interact with software and the behavioral psychology around it. They have rules to help developers foundationally build a smooth interface for users that they call laws.
Well, dashboards are just an interface of a software developed by an analyst instead of a software developer. And we’re pretty predictable as humans. So are most of our users. Incorporating UX into Dashboard Design seems like an obvious overlap!
I wish I could find it, but I saw a tweet that said something to the effect of, “Users expect your website to look like other websites.” When they don’t, there is a mental disconnect, & the ‘different’ site isn’t liked. That circled in my brain a bit, so I bought the book The Laws of UX by …. He has a snapshot of each law on his site, too.
So these are the Laws of UI and UX that I have brought into my work. I am not an expert in software development, but when I apply what I know to dashboard design, I create subjectively good-looking dashboards that are intuitive for my customers.
Overview
What is UI & UX?
It seems that people tend to throw around the terms UI & UX interchangeably, but they are not the same.
- UI stands for User Interface, and the focus when used is specifically the design & interactivity of what’s created.
- UX stands for User Experience, and the focus broadens to the overall experience a user has which includes UI.
Dashboard Design + UX
I like to start with User Experience when I think about any output I’ll create including a dashboard. The goal is to create easy, relevant, and all-around pleasant experiences for our customers. If you go far down the rabbit hole of UX, a full customer journey is framed out from start to finish.
I don’t have the luxury of time many times when building a dashboard, and it’s not a norm for those outside of spaces where we’re building for external customers. So I don’t build out a customer journey & get buy-in leading up to a creation. But I do have a series of questions I like to ask leading up to anything I build. I need to know all the details around the audience for the report, dashboard, or analysis. Read about those questions here.
If you’ve spent any time studying marketing, you know you are trying to sell to your target audience. So knowing what their pain points are and what they expect are key to getting your message to that perfect target audience to buy your thing. Customers of your dashboards are your target audience.
- Where would they expect the data to come from?
- What filters will they need?
- How much training will they need when you share the dashboard?
Building with your dashboard customers in mind will give you a few bullet points to consider for UX.
Dashboard Design + UI
All the elements that make up a dashboard visually + interaction is UI, and that’s what we’re used to doing. Choosing colors, deciding to keep or remove lines, fonts, whether to provide a button for navigation, all of this adds up to the interface for customers and translates to dashboard design.
If you’ve spent any time building dashboards in Excel, Tableau, Power BI, or any other visualization tool, you may have a style you lean on already. Or maybe you leave the default color schemes. Either way, the laws I’ll share will add to your tool kit to help build intuitive but still good-looking dashboards. This will be even more helpful if you don’t find building dashboards all that intuitive!
The Rules
1. Law of Aesthetics
If your dashboard looks quality, it’ll be seen as truly better & quality. Even if it isn’t better, the package something comes in makes you feel like it is.
This gives me so much joy because it justifies the effort we put into building an end product that looks good! You don’t have to spend excessive time making your dashboard design look good, though. My freshly made-up rule-of-2 will help:
- Be consistent with fonts, font sizes & colors.
- White space is your friend. Don’t clutter the view. 1-2 points (not graphs) per page is my rule of thumb whether it’s a dashboard or presentation. So, a graph for overall turnaround time & a breakdown of turnaround time by department is still 1 point. This tells the status & the detail of what’s driving it.
2. 60-30-10 Rule
This one is a rule vs a law, & it’s likely because it isn’t tied to a specific psychology theory. Regardless, this one is about how much color you should use.
- 60: one neutral color should make up 60% of the color palette
- 30: one complimentary color should make up 30%
- 10: one accent color should make up the remaining 10%
I’ve seen plenty of dashboards with way more than 3 colors. You might not be able to get around that if you’re shading for 6 teams, but your clutter will look instantly more cluttered with too much color. If there is a way to group so that each team is the same color except for the team not meeting target or an outlier, that kind of color grouping might be a better solution.
But you know your audience best!
3. Jakob’s Law
Users prefer your site to work the same as sites they already know. <Laws of UX> This is the law that sent me into this research. Switch out sites with dashboard here, but if your customers are used to Excel, they tend to like & use Excel.
You can certainly switch to a new tool if it brings a benefit or 2 to their world. Although they’ll expect that what they ask of you in Excel should also be possible in your new tool. That preference lingers even with a successful move to the new tool.
Another way I use this in dashboard design is branding dashboards. Sometimes it is a personal brand, but I consider it a win if I can get a team to adopt a branding. Titles, colors, fonts, filter areas in a similar location and more.
4. The Law of Proximity
Objects close to each other are perceived as related. <aka Laws of UX> This makes sense because I generally see filters grouped together on dashboards & related charts are grouped. Also keep this in mind when you think of the inverse – objects not grouped are unrelated.
If you need to display something that isn’t directly related, building in extra space will visually show that they are not necessarily related.
To approximate more relatedness, you can also box elements together with a shape. This blends in some of the theory in Law of Common Region that says that a “clearly defined boundary” gives the grouping perception, too. The Law of Proximity doesn’t require a boundary for that perception, but they’re so closely related.
5. The Law of Similarity
Objects similar in shape, size, and color are perceived as related. I did mention keeping consistent fonts & colors for aesthetics but carrying this down to the grouped elements takes this a step further. Plus, shape. For example, I’m building a dashboard for a customer now where there is some repetition in metrics. I’m using 2 large text numbers side-by-side with a horizontal bar chart below that is equal in width to the large text numbers. I’m also surrounding the batch of metrics so that they are distinct. Yet, they are similar, so they will be next to each other. Here’s a mock-up of what I’ve started.
6. The Law of Continuity
Our minds prefer a continuous line over a broken one. This sounds like a conversation about a literal line, but this can also be used in the context of smooth transitions to other pages within your dashboard.
- Is it obvious how to navigate or why your customer would want to?
- Does the next page have a similar look & feel with consistent use of titling, colors, fonts, and shapes?
7. The Law of Figure-Ground
We perceive something as being in the foreground by simply standing out from its background. In dashboard design, this can be as simple as folded or using contrasting colors. If there is a step you want your audience to take or a highlight you want them to take away after seeing your dashboard, give call-out the accent color & use some of your 10% (from the 60-30-10 rule).
8. The Doherty Threshold
Users expect to wait <400 milliseconds when they interact with their computer. <Laws of UX> When I read this, I wanted to throw the book away. How can I do that with large datasets? Dashboard performance is not fun, and some things are in our control as analysts. Some things aren’t.
In a top Fortune company role, I had to ask users to skip Mondays at the start of a month altogether. Tableau Server was just not equipped to handle the traffic, and in a company that size, there was NOTHING I could do but preach patience & keep my dashboards light.
It took me time, but I overcame my initial objection of the Doherty Threshold & frame it differently. If a tool is new to my customers, they tend to develop speed expectations based on what they’re introduced to. While I don’t generally measure it, that becomes their unspoken baseline expectation. If they start feeling like things have gotten sluggish, their impatience starts to increase.
Generally, there is some grace with intermittent issues with speed, though. We’re all used to network hiccups, and we’ll simply revisit a site later.
9. Serial Position Effect
Your users will most likely remember what happens at the start & last of an experience. <Laws of UX> I don’t see that as much from users when the initially interact with a dashboard in a session, but you know when their final interaction is bad. You likely get an instant message that may become a fire drill.
In general, we all work towards 100% accuracy & 100% functionality, but when things happen, it’s top of mind for the customers impacted. And don’t let that be near review time… Which ties into the Zeigarnik Effect that states that, “People remember uncompleted or interrupted tasks better than completed tasks.”
10. Tesler’s Law
You cannot remove ALL complexity. <Laws of UX> There just isn’t a world where I can toss my customers a dashboard & assume they’ll intuitively know what they’re looking at, know how to interact the way I designed it, and not come to me with obvious questions.
That’s naïve. However, I do see a lot of dashboards where analysts wanted to get creative and provide a new chart type. I love the creative part of my work, too, so I get it! But you add to the complexity. Our customers expect similarity, so when we introduce new or novel, you’re introducing complexity. It could be worth it to show new insights, but there is a trade-off.
Data is easy to data people. Data is not easy for who we do our work for.
11. Hick’s Law
The number of choices you give and complexity within those choices increases the time it takes to make a decision. <Laws of UX> This is the hardest law for me to wrestle with. As someone in the weeds, I value the information that comes from it. Plus, when I think of dashboard design and my history of customers, they want it all if you ask them. I aim to provide a comprehensive solution that will minimize the number of requests I’ll get to changes.
But the reality of what they need is not “everything.” A customer that feels like they need to review all 5 pages available to them in a dashboard likely took too long & some over-thinking came into play. I challenge you (and myself) to strip the needs to true needs. If you’ve built some influence, even if everything including the kitchen sink was requested, you likely have some flexibility to act as a partner & roll out a stripped-down option to meet needs without adding to unnecessary overwhelm. Giving tools for ACTION is where the magic of our role is found.