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

/wp-content/uploads/2015/07/1fig_739922.jpg

Figure 1: Source: ASUG

Does it matter if numbers are accurate in a dashboard?

/wp-content/uploads/2015/07/2fig_739923.jpg

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”

/wp-content/uploads/2015/07/3fig_739924.jpg

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.

/wp-content/uploads/2015/07/4fig_739925.jpg

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)

/wp-content/uploads/2015/07/5fig_739926.jpg

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

/wp-content/uploads/2015/07/6fig_739927.jpg

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

/wp-content/uploads/2015/07/7fig_739928.jpg

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.

/wp-content/uploads/2015/07/8fig_739930.jpg

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

/wp-content/uploads/2015/07/9fig_739931.jpg

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.

/wp-content/uploads/2015/07/10fig_739932.jpg

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.

/wp-content/uploads/2015/07/11fig_739933.jpg

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

/wp-content/uploads/2015/07/12fig_739934.jpg

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.

/wp-content/uploads/2015/07/13fig_739935.jpg

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.

/wp-content/uploads/2015/07/14fig_739936.jpg

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.

/wp-content/uploads/2015/07/15fig_739937.jpg

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.

/wp-content/uploads/2015/07/16fig_739938.jpg

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

/wp-content/uploads/2015/07/17fig_739939.jpg

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.

/wp-content/uploads/2015/07/18fig_739940.jpg

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.

Training

SAP BusinessObjects Design Studio Training – Basic and Advanced

Announcing ASUG SAP TechEd Pre-Conference Sessions – Open for Registration

Reference

Design Idea #1 : Application Usability in Mobile Devices

CSS Tips & Tricks: Sliding Panel Transition in SAP Design Studio

Upcoming ASUG Webcast/Events

Customer Success Story – Chamberlain

ASUG BusinessObjects Design Studio Sessions at #SABOUC in Austin

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

  1. Raghavendra A

    Hi Tammy,

    Thanks for providing great information. I have already worked some of the design studio Dashboard, we are looking forward to work on more dashboards on different products.
    I need your assistance to make them as good.

    Raghavendra

    (0) 

Leave a Reply