
<p>When it comes to <a href="https://www.sisense.com/blog/top-5-things-to-consider-when-creating-an-analytics-dashboard/">creating dashboards</a>, it can be easy to focus so much on the data that design is overlooked.</p>



<p>As a UX Designer here at Sisense, I know the importance of taking things other than the data into account to make sure your users see an instant impact. This isn’t an easy task, though. With so many options for color, style, and layout it may be hard to tell what exactly will make an impression. That’s why I’ve compiled some of my go-to rules for <a href="https://www.sisense.com/blog/4-design-principles-creating-better-dashboards/">designing widgets</a> so you can make the dashboards that tell a story to your users.</p>



<p>Let’s start with some general tips.</p>



<p><strong>Be consistent</strong></p>



<p>If your dashboard has multiple widgets of the same type, try designing them in the same way. For example, if you have a row of four indicators you should be consistent with your choice of color and where you place them in your dashboard. Let’s say you make all four indicators blue and place them in a row on the right-hand side. If, after one time using the dashboard, your user knows all indicators are blue and on the right, their eye will return to the same place automatically the next time they need information from those widgets.</p>



<p>Consistency goes beyond just widget style, though. You should make sure to keep your color scheme the same throughout your dashboard. Doing this makes your dashboard feel more unified and look more professional, which subconsciously can make your users trust the information they’re seeing more.</p>



<div class="wp-block-image"><figure class="aligncenter"><a class="fancybox image" href="https://www.sisense.com/webinars/telling-story-data-dashboard-design-guidelines/"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/Telling_a_Story_Through_Data_yellow-1-770x250.png" alt=""/></a></figure></div>



<p><strong>Use the right colors</strong></p>



<p>Try to connect your data to the right color. Sometimes, the more obvious the better. For example, if you have a pie chart showing the number of vegetables consumed in Illinois, you should use red for tomatoes, green for cucumbers, and orange for carrots.</p>



<p>You can also draw focus to a specific set of values with color. In the example below, you can see that the green puts an emphasis on employees who are above the average <a href="https://www.sisense.com/kpi-library/retail-ecommerce-kpis/revenue-per-employee/">revenue per sales person</a>. This puts a positive spin on the chart but if you wanted to highlight those who are below the average, you could make those bars red and the rest grey.</p>



<div class="wp-block-image"><figure class="aligncenter"><a class="fancybox image" href="https://cdn.sisense.com/wp-content/uploads/Image-One.png"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/Image-One-770x509.png" alt="Dashboard design"/></a></figure></div>



<h2 class="wp-block-heading">Our customers’ top five widgets</h2>



<p>Now that we’ve got some basic design tips out of the way, let’s take a deep dive into some specific widgets. We’ll focus the rest of this post on the top five widgets our customers use the most (based on usage data, of course).</p>



<p><strong>1. Pivot table</strong></p>



<p><a href="https://www.sisense.com/blog/charts-vs-tables-choosing-the-right-visualization/">Pivot tables</a> may seem hopeless when it comes to design but there are actually a couple of ways you can improve them. First, you can try using alternating colors per row. This will help your users track an entire row at a time with their eyes. Plus, it helps to separate one row from another. You can also try highlighting a specific value in the table with one color. In the example below “Total Revenue” is highlighted in orange, which helps highlight the most important information in the pivot table.</p>



<div class="wp-block-image"><figure class="aligncenter"><a class="fancybox image" href="https://cdn.sisense.com/wp-content/uploads/Image-Two.png"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/Image-Two-770x546.png" alt="Dashboard design"/></a></figure></div>



<p><strong>2. Indicator</strong></p>



<p>Indicators are great at visualizing KPIs and single, important values. However, in order for people to understand what they’re looking at it’s important to give them sufficient context. To do this, use a big, noticeable title above the indicator. I personally like to use a numeric indicator with a super simple numeric style and make sure to keep the number big.</p>



<p>I mentioned this already, but it’s also important to choose one color for all indicators. This will create a unified row of indicators and not confuse users when they scan the dashboard with their eyes. One exception to the rule? If you have a long dashboard that includes multiple sections with indicators in each, you can use color themes to distinguish one from another.</p>



<p>Let’s not forget the good old gauge indicator, either. They are a great way to indicate progress toward a set goal. You can customize the look by adding ticks, labels, and contextual titles.</p>



<div class="wp-block-image"><figure class="alignleft"><a class="fancybox image" href="https://cdn.sisense.com/wp-content/uploads/Image-Three.png"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/Image-Three-370x296.png" alt="Dashboard design"/></a></figure></div>



<figure class="wp-block-image"><a class="fancybox image" href="https://cdn.sisense.com/wp-content/uploads/Image-Four.png"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/Image-Four-370x287.png" alt="Dashboard design"/></a></figure>



<p><strong>3. Bar chart</strong></p>



<p>Bar charts are used for comparing values and items. They’re just like column charts, just with their axes reversed &#8211; values on the X-axis and categories on the vertical Y-axis. In bar charts, I recommend using the Y-axis grid line in order to help the user’s eye follow where a given bar ends.</p>



<p>You can also use a color range to help indicate values. However, be careful when selecting colors! If you want to use value labels on each bar make sure to choose a bright color for the bar so your users can easily read the dark labels.</p>



<div class="wp-block-image"><figure class="aligncenter"><a class="fancybox image" href="https://cdn.sisense.com/wp-content/uploads/Image-Five.png"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/Image-Five-770x472.png" alt="Dashboard design"/></a></figure></div>



<p><strong>4. Pie chart</strong></p>



<p>Pie charts are used to display the breakdown of a complete item into various parts. However, the more slices of the pie chart you have, the harder a pie chart is to read. In order to make reading easier, you may want to put a label next to each slice. You should be careful though &#8211; if you have a lot of slices, the labels will start to prioritize and some will disappear. In cases like this, it’s probably best to disable the label and just use a legend.</p>



<p>Personally, I prefer a <a href="https://www.sisense.com/blog/infographic-everything-ever-wanted-know-donut-charts/">donut chart</a> to a pie chart because I think they’re easier to read. Why? Well, when you look at a pie chart, the eye is naturally drawn directly to the middle of the pie and then makes its way around to the values and labels. With a donut chart, the eye is immediately drawn to the numbers and the labels. It’s crazy what removing the center of a pie chart can do!</p>



<div class="wp-block-image"><figure class="alignleft"><a class="fancybox image" href="https://cdn.sisense.com/wp-content/uploads/Image-Six.png"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/Image-Six-370x290.png" alt="dashboard design"/></a></figure></div>



<div class="wp-block-image"><figure class="alignright"><a class="fancybox image" href="https://cdn.sisense.com/wp-content/uploads/Image-Seven.png"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/Image-Seven-370x295.png" alt="dashboard design"/></a></figure></div>



<p><strong>5. Line chart</strong></p>



<p>Line charts let you easily visualize trends as well as fast changes in data that can be shown by spikes or peaks. Line charts are a staple of any dashboard but there are some pitfalls, design-wise, that you should try to avoid.</p>



<p>Line charts can become very confusing if you’re using a lot of datasets. In order to make them less confusing, it’s important to use a different color for each line and to make sure that you use thin lines. Make sure you also include a legend for easy comprehension.</p>



<p>On top of that, I think it’s important to always use Y-axis grid lines, especially if you have a lot of points along the axis. You can also use data point markers to make the chart easier to understand. However, you should be careful using data point markers if your chart has a lot of lines as it can end up looking messy.</p>



<div class="wp-block-image"><figure class="aligncenter"><a class="fancybox image" href="https://cdn.sisense.com/wp-content/uploads/Image-Eight.png"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/Image-Eight-770x537.png" alt="dashboard design"/></a></figure></div>



<h2 class="wp-block-heading">Data and design</h2>



<p>Making sure dashboards provide users what they need in an easily digestible way is equal parts data and design. But, don’t worry if you don’t have a designers eye! Easily the most important thing you can do is speak to your users. See how they use their dashboards, what they like, what they don’t like, and what would make their experience smoother. If you do that and combine user feedback with some of the tips above you’ll be in great shape to provide instant impact.</p>



<div class="wp-block-image"><figure class="aligncenter"><a class="fancybox image" href="https://www.sisense.com/webinars/telling-story-data-dashboard-design-guidelines/"><img decoding="async" src="https://cdn.sisense.com/wp-content/uploads/Telling_a_Story_Through_Data_white-1-770x250.png" alt="Dashboard Design"/></a></figure></div>


How to Design Widgets for Instant Impact

BI Best Practices

Visualizations

LinkedIn

Twitter

GitHub

curve-image-unique-image-unique

curve

3-dark-2-image-unique-image-unique

3 DARK 2

Get the latest in analytics right in your inbox.

Article