A dashboard is only as effective as its design – and that can mean the difference between users excitedly embracing your product or ignoring it altogether. Great dashboards lead to richer user experiences and significant return on investment (ROI), while poorly designed dashboards distract users, suppress adoption, and can even tarnish your project or brand.
So how can you create an attractive dashboard that people will actually want to use?
Here we outline the four fundamentals of dashboard design: content, layout, color, and fonts. By manipulating each of these levers, you’ll affect how users interact with your dashboards to understand information and take action.
Keep it relevant. Simplify content and reduce visual elements to only the most critical pieces. If you’re designing a dashboard for a sales team, for example, don’t include visualizations on marketing campaign channels. Placing sales and marketing metrics on the same page will only confuse users and won’t provide the data correlations they need to make the best decisions.
Avoid overdesigning. Anything that’s not data in a table or visualization should be just visible enough to perform its role—but no more than that. Colors and shapes shouldn’t distract, but help you absorb and digest information, so stay away from distracting visual effects like background gradients, shadows, and 3D elements.
Use iconography. Content isn’t limited to text and charts. You also have to think about icons and how they associate with user interaction. Including icons will help people quickly discern which action to take—making for a more efficient user experience.
Group related data together. Once you know what information your users need, group related data next to each other. Tier your visualizations by size and position to highlight the most important pieces of information.
Adhere to uniform sizing. Keeping the sizes of similar elements consistent will reduce distractions by clearly identifying dashboard features. This also helps make the design process less iterative. Group several types of visualizations on the same screen to show different aspects of the dataset you’re considering.
Leverage contrast. Choosing the wrong colors is the first mistake most people make in dashboard design. Good use of color starts with leveraging contrast because it makes your message clear.
Keep in mind that similar colors may be difficult to distinguish from one another. Start by choosing two colors that go together well. You can easily find these “complementary colors” using a color wheel (a popular resource for designers).
Use color sparingly. Color should only be used in a dashboard to serve a particular communication goal. For instance, when you’re highlighting something.
To be on the safe side, always use six or fewer colors in visualizations. Use any more, and it becomes difficult for users to see the differences. Use natural colors to display most of your information and reserve bright or dark colors to highlight outliers or important calls to action.
Whether you have one color or different colors on a table or graph, make sure the background color is consistent. You can use a resource like the Adobe Kuler Color Wheel to create color schemes and browse color combinations.
Remember this: As long as you can answer the question, “What purpose does this color serve, and will it serve it effectively?” then your use of color is entirely appropriate.
Pay attention to meaning. Be cognizant of the colors you choose and the associations they carry. Take, for example, red and green: When North Americans look at these colors, we are already making a comparison in some way by linking red with “bad” and green with “good.” Another example is red and blue – many cultures may associate red with “hot” and blue with “cold.”
Use different colors only when you want to communicate differences in meaning. If you’re showing two different colors on a chart, they should always represent something different and meaningful.
Don’t be afraid to incorporate black and white into your dashboards. Many times, these colors work extremely well together, especially when you need to accentuate certain dashboard design elements.
Test for color blindness. Another reason not to overdo color is to accommodate colorblind users. Roughly one in 20 people have a color vision deficiency. The world looks different to these people; for instance, they often find it hard to tell red and green items apart.
For your colorblind users, we suggest using a color blindness checker or simulator on your dashboard. One option is Color Brewer, which allows you to choose color schemes using pre-selected color sets that have been tested for color blindness and contrast. Another resource is Vischeck, which will simulate colorblind vision when you run your own image files or webpages through it.
Stick to one font. In dashboard design, the general rule is to use a single font type and no more than three sizes in that type.
Your goal is to create a visual hierarchy with all the content displayed in your dashboard. You can emphasize font copy by either bolding it or adding an accent color. But remember, if everything is bold, nothing is. You should mix regular and bold fonts for visual effects.
So, what font do you use? Serif fonts are best for body text because the tail makes the text easier to read. Sans-serif fonts are designed for short blocks of text, such as headlines, because readers pay close attention to them.
Think about typography. While font is how you set your text, typography is how the font looks when you’re done. In other words, typography refers to adding emphasis and color to both the text and background. Let’s look at the basics of typography and how they apply to dashboard design.