Introduction
What is a dashboard really for? At its essence, a dashboard should be designed to immediately convey effective information to its users. It should provide the user with insight and knowledge in order for them to answer questions, allowing them to make data driven decisions.
This blog article looks at some of the best practices for effective and efficient dashboard design, ensuring that your users get real value from your work.
We’ll go through a rather typical design scenario, look at how this has been approached using best practice design principles and begin to understand how and why these have been implemented.
The Task
We have been asked to produce a dashboard for the Senior Management team of a large clothing company, Clothing & Co. (disclaimer: this is a fictional company, created solely for this use case). The Senior Management team will sporadically check this dashboard to intentionally look for Key Performance Indicators (KPIs) and snapshots of the business’ performance; it should be noted that they will not be diving deep into the data or performing their own investigations. We have been given this list of requirements.
The users want to see:
Sales Amount & Gross Profit by Vice President
Sales Amount & Gross Profit Over Time
Sales Amount this Month (Month selected)
Quantity Sold this Month (Month selected)
Gross Profit this Month (Month selected)
The users want to filter by:
Date
Salesperson Hierarchy
Product Attributes
The Solution
The dashboard below has been produced using orders, products and salesperson dummy data. This has been developed using QlikView, but the majority of these principal translate to all BI tools.
The 3 C's - Keep it Clean, Clear and Consistent
The 3 C’s are broad yet effective principles which can be applied to any dashboard design. When you first open up a dashboard, you want to gain immediate insight. In this case, the users that we are specifically designing the dashboard for, the senior management team, do not have time to get stuck into the data in the same way that an analyst would.
Make sure your dashboard layout is: clean, clear and consistent. This will not only be a much more effective use of time, but it will allow users to gain significant insight and provide real value.
1. Clean
Having a view of everything at once sounds like what you’d want to achieve, to give a full comprehensive view of your data. Right? Well, not always. Less is more when it comes to dashboards.
If the users are faced with a disorganised cluster of different charts and text items, this can be very difficult to interpret effectively.
Using a white background, crisp fonts, a handful of distinct colours and sharp edges will give your dashboard a clean, modern feel and will help emphasis the insights you are trying to present.
The distinct colours will really stand out against a plain white background and using sharp edges will reinforce your layout. It is best to only use a few different colours to avoid your dashboard looking messy. If you’re struggling to know what colours to use, it is usually best to align your dashboard with the company branding.
2. Clear
To gain real insight, it needs to be very clear as to what the dashboard is actually trying to show you - even from a glance; this will be the case for the one that we’re designing for. It is very easy for a dashboard to miscommunicate information or for a user to incorrectly interpret it and act upon a false insight.
Labelling charts, KPIs and filters is advisable, especially if you believe they could be mistaken for another attribute. Keeping your dashboard clean as discussed above gives the user a clearer view, reducing the opportunity for misinterpretation.
Providing context to data enables you to understand what you are actually looking at, allowing the user to determine whether what you’re looking at is good or bad. A way you can do this is by adding something to indicate a trend or a target.
3. Consistent
Keeping a consistent layout means the user will have some idea as to where to look for certain information. If you maintain a particular layout throughout your dashboards and tabs, this will give you structure in design and the user familiarity in viewing, allowing them to efficiently find what they’re looking for.
Keeping a consistent style throughout your dashboard: colour scheme, fonts, sharp edges and layout gives the dashboard more cohesion, making the whole application feel a bit more professional.
How and why have these principles been applied?
The dashboard produced has been split into four main sections:
Top Pane
Side Pane
KPIs
Key Charts
What is contained within these sections of the dashboard may vary, as this depends on user requirements or requests. As long as your design complies with the 3 C’s, then you’ll be fine.
All of your users will be familiar with this common layout style (see below) as it mirrors the layout of many online shopping websites. Content and/or items are generally placed in the middle with a variety of filters and navigation tools located towards the top and left. Utilising this familiarity equals a more pleasant user experience.
Top Pane
DIVIDER
A distinct thin line across the top of the dashboard frames the data, the content we’re really interested in. A boundary is clearly defined between whatever sits in the top pane and the insights below. I have used a bright blue in this case, aligning with the Keyrus Data branding.
LOGO
Including a logo helps users identify the purpose and ownership of the dashboard. This doesn’t have to be a company logo, it could be replaced to suit for a particular team or project. Branding your dashboard will help promote the good work you’re doing.
FILTERS
Some developers like to locate all of their filters on the left side of the dashboard, leaving the top pane for navigation buttons or even empty. Others like to use the top pane only for filters, not including a side pane, leaving more room for charts and content. Both approaches are valid and as long as you are able to fulfil all requirements, provide all content and include all features while abiding by the 3 C’s, then you’re on the right track. It is down to your judgement and the user’s preference.
Personally, I like to have dimension filters in the side pane and date filters across the top. Date filters are one of the most regularly used and are likely to be required throughout the application. It is best to order these filters left to right as this is how the user will prioritize them upon viewing.
Side Pane
BACKGROUND
To better frame the central pane (KPIs & Charts), give your side pane a light, neutral background. Items are going to be placed on top of this background so using a light grey colour ensures the user’s eye is not drawn it.
NAVIGATION BUTTONS
This blog is focusing on the dashboard tab of your application, but it may have additional tabs, maybe for reports or more detailed analysis. Rather than using the default QlikView Tab Row, you can customize your own. Creating a text object and adding an activate sheet action rather than using a button object gives more freedom in design.
It is best to use a bolder colour to indicate the active tab, making it clear what is being viewed.
Dashboard Tab View:
CURRENT SELECTIONS
This incredibly useful object shows the selections the user has made and what filters are currently being applied to the data. This makes it explicitly clear what the dashboard is really telling you and what insights can be gained. In this case, we are only looking at data from 2014 and products groups: Casual, Dressy and Formal.
Rather than having a white space in the background of the current selections box, the Keyrus logo has been used. This reinforces the dashboard branding and doesn’t leave an empty white space when no selections have been made.
FILTERS
Having filters down the left-hand side of the page is very common, a user will know to look for filters here as this is where they would look if they were shopping online. For instance, some examples of filters would be choosing: size, style or price range of clothing.
When you want to include multiple filters on a page, it is best to use a QlikView multi box object. This gives the user a dropdown option; also, if the user starts typing, the dashboard will begin to search for that field. Multi box object equivalents are also available in most BI tools.
Using multi boxes makes it easier to order, arrange and group your filters, making for a cleaner dashboard.
SEARCH BAR
Again, users will be comfortable with a search bar object. If you are working with large amounts of data, it may be best to ensure that the search box only uses the most relevant or important fields. It is best practice to remove key fields or duplicate fields from the available search options.
KPIs
SIZING
The headline metric, the rounded sales figure should be the largest and boldest as this is what the user’s eye should be drawn to. It is important that the title, period and exact amount are explicit to provide clarity and avoid miscommunicating the KPI.
CONTEXT
KPIs are good at quickly getting information across, but what does that information really mean? Adding context -> gives data meaning -> provides greater insight.
The Context Metric shows the previous month trend; we can see that sales figures are down 35.46% on last month, immediately highlighting that this month wasn’t as good as last month.
COLOURING
The headline metric is in black, again to make it stand out. Shades of grey have been used for the title, period and exact amount to further emphasis the headline and context metrics.
Blue and orange have been used to indicate positive and negative values respectively instead of green and red. Blue and orange should be opted for whilst creating a dashboard over green and red -not only are the colours a little less sharp, but also, 8% of men and 0.5% of women are colour blind to red and green. This is potentially a large part of your audience which you would not be catering to using red and green.
Please visit the link below for more information on colour blindness:
Key Charts
NUMBER
Less is more. You only want to include a couple of key charts on your dashboard page, so make sure that you really focus on what information you want to get across. In our scenario, we only have two requirements which should be shown as charts.
ASK QUESTIONS
Chart titles are at their best when they are able to get the point across, therefore they should be used as concisely and accurately as possible. By asking a question in your chart title, it is easy to express exactly what the chart title is showing and should reflect the question that the user is asking of the data.
The chart itself should effectively answer this question!
For instance, in this chart above, it shows sales and profit by vice president. It is most definitely an accurate title, yet I can’t help but feel that it is quite boring. So, our next best option is to turn this into a question - asking who had the highest sales gets the user more engaged. This chart has been tailored to answer this question, as it’s sorted in descending order of sales and profit amount.
APPROPRIATE CHARTS
Your choice of chart should be driven by the questions that you are asking of the data.
Are you comparing values?
Finding the composition of something?
Showing correlation?
Discovering a trend?
Different charts lend themselves to different questions.
If we refer back to the chart above, it is a horizontal bar chart. It’s being used to compare not only the Sales and Profit secured by each Vice President, but also comparing the vice presidents against each other. We wanted to answer who was performing best by sorting them in descending order, effectively ranking them.
Contrary to this, the chart below shows a trend, comparing growth in sales and profit for 2014. Line charts should be your go-to when identifying a pattern or trend, especially over time/date.
ADD CONTEXT
Information always means more with context. Referring back to the chart above, I have added a reference line, showing the monthly sales target. This instantly highlights good and bad performing months for the sales metric.
Conclusion
Hopefully this blog article has explained how and why these best practice design principles are in fact considered best practice. With this newfound knowledge, you will be able to apply these yourself.
Here are some takeaways that you should consider when building a dashboard:
You should find out what questions the user is asking of the data to help aid in your development of a dashboard. At the end of the day it is the user who is, well, using the dashboard.
You should make sure that they really get value out of it. The way you do this, aside from applying the principles within the blog, is to find out what they value.
Work as closely as possible with your users to really understand what they need and how you can deliver it.
Be creative!
The practices in the blog should act as on outline for dashboard design, but you’re the one designing it, so own it and put your own flavour on it. But most importantly, have fun and enjoy creating something worthwhile!
Comments