Best Practices for Dashboard Design with BusinessObjects Design Studio-ASUG Webcast Part 1
SAP Mentor / ASUG Volunteer Ingo Hilgefort gave this ASUG webcast last month. Below are my notes.
Part 1 How organize dashboard, usage of colors, space, topics and the second half covers performance
Figure 1: Source: ASUG
Does it matter if numbers are accurate in a dashboard?
Figure 2: Source: ASUG
Many have heard of Stephen Few; some have heard of Hichert
Figure 2 is Stephen Few’s definition of a dashboard – achieve a clear objective, a single screen; you shouldn’t have to scroll
In a recent publication – “ an effective dashboard has nothing to do with meters, gauges, traffic lights …but a science of how you should communicate data”
Figure 3: Source: ASUG
A dashboard is a visual display; you should compare something you do in Design Studio with something you do in Crystal Reports. They serve different purposes. It should fit on a single screen and be instantly accessible. The expectation from the user is to happen instantly on desktop or mobile device.
You should be sure about objective before building the dashboard.
You should use space in an efficient way.
Figure 4: Source: ASUG
Another important part is consistency
Corporate fonts, corporate colors, where do you want to display navigation elements, where would alerts
Design Studio offers ability to create templates – define them once and save them as a template
You have the option to use style sheets
Use colors with meaning; if build a column to chart – the Coke colors (not blue for Pepsi)
Figure 5: Source: ASUG
Figure 5 shows 12 different charts; what is consistent in the ones highlighted in the frame?
The color is softer with the ones in the frame, how labels have been used using a clear visual consistency
Figure 6: Source: ASUG
Figure 6 shows bad design choices
It was one of the sample dashboards that SAP used a long time ago
On the right it shows the gauges, with yellow as an alert color, and people use it
Bookings and daily balance are in yellow in the middle
In the top left – customer satisfaction is in yellow
Now the color has lost its meaning
Figure 7: Source: ASUG
You want to avoid where everything looks the same. You want to highlight important information – use colors, alert show up red
The size of the visual appeal is different – the font size changes
Banner blindness – if you go to Internet, will see banner on web site. As humans we avoid banners – we avoid.
Figure 8: Source: ASUG
Figure 8 shows good dashboard design, with panels clearly marked but not overwhelming – no thick frames around the numbers with 6 sets of information and good use of colors
Red is only used for highlighting and alerting
The gauge is different in size and the numbers different in size
The exclamation mark is used to catch the user’s attention
Figure 9: Source: ASUG
People try to squeeze information into a single page – does the information belong together. Use data that belongs together such as revenue and cost.
If information does not belong with each other you can use tabs / pagebooks in Design Studio. The approach of single screen still works but use one page talk about revenue and another page cover procurement.
Figure 10: Source: ASUG
Dashboard has sales, with numbers for October, complete year, daily sales and on the left see a list of products
Fragmentation has broken down – the user cannot compare products
Separation of information has broken down; cannot compare different products
What purpose does the dashboard fulfill?
How does it compare with products being sold?
Consider how much split the data of the dashboard
Chart suggestions – a thought starter explains what kind of information you are trying to achieve and helps select the right choice of chart.
Any information on a time series should go on a horizontal axis
If compare non-time series it goes on a vertical axis. Following this will help people perceive items quicker.
Figure 11: Source: ASUG
3-D charts are popular but if you look at Figure 11, the color doesn’t help consume information, the colors are bright and distraction. There is no need for a 3-D view
How are we doing? You want to compare actual and budget but you can’t do it because they are not right next to each other
Figure 12: Source: ASUG
Figure 12 compares actual and budget, next to each other
Is the user interested in comparing them? On the right shows the percentage of where at with actual versus budget.
Figure 13: Source: ASUG
Figure 13 discusses use of textual information
Does textual information help? It can help communicate the data – on the right see a dashboard of how many calls a consultant did, compared with the team.
The band 11 to 20 – number of calls shown is 12 instead of the band reach.
Figure 14: Source: ASUG
Edward Tufte writes books and one of them is the data-ink ratio. He says you should not waste ink on the dashboard if ink is not used to communicate information.
Figure 15: Source: ASUG
Figure 15 shows a practical example of data-ink ratio
On the left you have gridline, on the bottom with a frame with bold fonts. You can remove the grid lines and the font bold lines to communicate the same information on the right which will be communicated quicker.
Figure 16: Source: ASUG
The dashboard should fit on a single screen. With mobile BI you do not want have your user going up and down and left and right
Measures need context – instead of revenue/cost it might be easier to communicate profit or margin
All charts should come with scales and labels – this is basic but many have this missing
You want to place data on a identical scale
Use colors in a meaningful way – an example could be white, black and a shade of grey
Figure 17: Source: ASUG
Figure 17 covers the bad design choices – in 1 there is an element in the chart not shown
Number 2, the bubble chart has too many colors and as humans cannot remember the colors
Number 3 (bottom middle) looks like a shrinking dimensional tower to top without meaning
Number 5 has no scale so not sure of the values
Number 6 has an incomplete legend.
Figure 18: Source: ASUG
Figure 18 shows a good example, with little use of colors.
The only real color you see is red, used as an alert to highlight numbers
Looking at 7 sets of different information there are no boxes; it uses the white space efficiently
The top right has a help option; you want a help option in your dashboard.