Posts tagged User Experience
There’s only room for one Y-axis
21 month ago
Today, I was scanning multiple websites to get my daily portion of data visualization vitamins. Whilst doing this, I came up across the following graph.
At first sight, I thought I saw a clear correlation between the Internet Explorer Market Share and the number of Murders in the US. When the amount of murders got less, the IEX Market Share seemed to crash. Wow.. how is that possible?
Let’s take a closer look and find out what’s going on with this graph. After a quick examination, I came up with the following:
This graph has two Y-axes.
Mmm.. interesting. How should I read this graph? Mmm… I’ll find out soon enough. I guess..
The Y-axis for the bars doesn’t start at zero
One of the basic principles for designing a bar chart is that the Y-axis starts at zero. Since we can really easy see the difference in size/length of two or multiple bars almost without even thinking (preattentive processing), we’d better show the whole bar and not only a part of it. If we want to show the whole bar, we need to start the Y-axis at zero, at all times.
Confusing title and legend
There’s going on a lot with the title and legend. The title of this graph is named “Internet Explorer vs Murder Rate”. The legend which explains which color represents which data serie, is positioned below the graph. That’s not logical in the first place. It should be more convenient to place it above the graph. That’s a first observation.
Another thing regarding the legend, is that the order of the data series in the title and legend are swapped. The title begins with Internet Explorer and the legend with Murders in US. Why should we do that?
To continue, one of the most confusing things is that the description of the data series in the title and legend are different. The title states “Internet Explorer vs Murder Rate” while the legend states “Murders in US and Internet Explorer Market Share”. Both a rate and a market share can be expressed in percentages so which data serie belongs to which Y axis? You tell me please.
A simple redesign of the legend problem could like as follows.
The (self explaining) legend is incorporated in the title of the graph. This has multiple advantages:
- We only state the data series descriptions once.
- We start reading from top to bottom and after we’ve read the title we immediately know which color belongs to which data serie.
- We know which Y axis belongs to which data serie since we added a tiny bit of extra information to the data serie description. We now included the units of measure in the title.
- We don’t need a separate legend.
Back to the double Y-axis issue
At first, my main goal of writing this blog was to illustrate the possible impact of messing around with multiple Y-axes into a single chart. Whilst writing this blog, I found out a lot more was wrong with this graph and I couldn’t keep myself from not explaining some of them. I’m convinced that if I’d dig even further into this simple graph, I could come up with more imperfections but the main goal wasn’t redesigning this graph, but illustrating the risk of using two Y-axes. Back to this issue.
I’ve drawn a couple of examples of different Y-axis scales to show how the message of the simple graph can be completely different when taking a quick look.
Examine the following examples and find out what your first impression would be..
Example 1
Without looking to much at the Y-axis scales, the story this graph tells is that when the amount of murders decreases with by only the slightest bit, that the market share of IEX crashes completely. Wow.. what a story.
Example 2
Again, without looking to much at the Y-axis scales, this graph tells a different story. For every US murder case, Internet Explorer relatively looses the same amount of market share.
Example 3
Less murders or not, IEX will definitely loose tremendous market share.
Example 4
For this example, I used a redesign of the graph. What story is this graph telling?
Less murders or not, IEX will definitely not loose market share.
Give it a try
I spent about 15 minutes in SAP Dashboards building an interactive demo in which you can play around with the Y-axis scales. This way you can find out what the impact can be of having messy scale ranges next to having two Y-axes in a single graph.
How to create a loading screen for SAP Dashboards
45 months ago
I can imagine you don’t all have the privilege of having a large HANA instance in your SAP wonderland. Because of this, you might have to wait a couple of seconds every now and then before your reports and dashboards pop up. Time to throw in some magic.
With this tutorial, I’ll show how you can make the waiting in SAP Dashboards / Xcelsius a little bit more exciting than just having to look at the default SAP Dashboards hourglass load indicator.
What are we going to do?
We’ll build an easy loading screen, which will pop-up whenever the dashboard is busy retrieving data.
Step 1: Setting up the connection properties
Navigate to the data manager and open the ‘Usage’ tab of the connection you want to activate the loading screen for.
In the ‘Load Status’ section of this tab, there are a couple of fields displayed. Normally, you might activate the ‘Enable Load Cursor’ checkbox, which will result in showing the good old hourglass.
If you want to advance things, you might use the ‘Loading Message’ and ‘Idle Message’ texts, which you can bind to a cell through the ‘Insert In’ option. After you binded to a cell, you can have a label component to display the text. This looks better than the hourglass but is still not really what we’re aiming for.
Step 2: Changing the ‘Load Status’ properties
Change the text in ‘Loading Message’ into ’1′ and the ‘Idle Message’ text into ’0′. We’ll use this text as a dynamic visibility parameter, to show and hide our loading screen.
What have we done? Basically, if a connection is retrieving data, the value 1 will be placed into the cell defined under ‘Insert In’. When the data is retrieved and the connection turns idle, the 1 will be replaced by a 0.
It could look something like below.
Step 3: Configure the loading screen
In the demo XLF, I’ve included a very simple but nice loading screen, including a small animation (SWF file). This SWF file is displayed by using the ‘Image component’.
This simple screen, consists of just a small amount of objects which doesn’t affect performance in any way worth mentioning. The most easy trick, is to use a canvas container component to include the separate objects of the loading screen.
Now navigate to the properties of the canvas container and open the dynamic visability properties. Bind the ‘Status’ cell to the cell selected for ‘Insert In’ in step 2 of this tutorial. Set the key to, for example, 0.
This property will ensure that the loading screen will only be displayed if cell A:1 of your worksheet has value 1. The value 1 is inserted on refreshing data.
Step 4: Enjoy the waiting
If you fire up your dashboard and a connection is being refreshed, the load screen will popup. It might look like displayed below.
Click the image for the live SWF demo.
You can download the source xlf file here.
Conclusion
The main goal of adding a better looking loading screen with a more dominant presence, is to improve the overall user experience. The user is being informed in a clear manner, that data is being loaded. If you’d like, you could make specific texts for specific sets of connections. You could also display the average waiting time. The possibilities are almost endless.
I often put a semi transparent topping on the rest of the dashboard when a ‘dialog’ like the load indicator is active. Take a look at the example below (the text is Dutch).
I’ve used a black rectangle with a certain level of transparency. This makes it clear to the user that something is going on. This may prevent mouse clicking frustration without seeing charts being refreshed.
I hope you learned something by reading this post.
Update 12/14/12: My colleague Ralph Knoops came up with a handy site with free load indicator animations. You can also download the sample FLA files from that site and change them according to your own preference.
SAP Dashboards SP05: first impressions on mobile HTML5 functionality
396 months ago
Today SAP Dashboards Service Pack 05 is released on the SAP SCN marketplace. Of course I downloaded it right away.
The first thing I noticed on SCN is that it is a real Service Pack, not a full installation. So you can install it quite fast.
I installed it on Windows 7 and when you do this, the first time you start xcelsius.exe, you might receive an error message (C++ runtime error). Just right-click the xcelsius.exe file and select “run as administrator”. You only have to do this the first time. I encountered this issue before and already wrote a short blog about it in the past.
Object browser enhancement
SAP added a search box to the object browser pane. For me, this is great since I often have dashboards with lots of objects.
For example, when you enter “actual”, all objects with that name will be shown.
This (simple) feature has been on my personal wish list for quite a while now so I’m glad this feature has made it into this SP05 release.
Mobile compatibility panel
Of course, the main new features are to be found in the mobile and HTML5 support topic. One of the new features in this area is the whole new ‘Mobile compatibility panel’. This panel is new, next to the existing panels (components, query browser, object browser).
If you have an existing dashboard model and you open the mobile compatibility panel, all object names are shown, including a icon to tell if they are supported for mobile export.
In my (quite simple) dashboard example, the print button and sparkline object aren’t supported. This results in not displaying the objects in the dashboard in preview mode. The print functionality is integrated into the SAP BI mobile app so you might not need a separate print button anymore.
You can see in my example above, that the object names contain a number behind the name label. This means there is an error or a warning. In this case, the warnings apply on custom colour and theme settings of the used objects. Only one theme is supported for now, the Nova theme.
Next to this, you can see that there is a general comment, which suggests to change the canvas size to the optimal iPad screen resolution.
Previewing
The preview button has also changed. It now has two mobile related options. Fit to screen and orginal size.
After you select one of the available options, a iPad case surrounded dashboard will be shown, including the ability to test the interactivity of your dashboard model. Here comes some magic.
Since your navigating the dashboard with your fingers, and not a mouse, it can be tricky to see what line you are watching. SAP added a extra feature, which makes it able to easily analyse the data on mobile devices by showing a ‘mouse-over’ help screen showing relevant info.
Saving to platform
The options for saving your dashboard have also changed. You now have the option to save your dashboard as a flash file, as a mobile file, or both.
One of the SAP developers even put a little ‘easter egg’ or real mistake into this SP05 version. He probably was a Borat fan. See the menu option for ‘Save to platform as > Dashborads object for desktop only’.
iOS optimized font types
If you navigate the properties of the objects, you’ll also notice that some new font types are added, specifically for mobile use.
Support of most used components
I’ve made a little test dashboard with a subset of the components I personally use the most in dashboard projects.
In the design mode, this looks as follows.
If we now check the mobile compatibility panel, we’ll see some errors and warnings.
Note that the spreadsheet table, connection refresh button and horizontal bullet chart aren’t supported. Furthermore, there are some specific warnings regarding the combo box settings. It doesn’t support the number of labels displayed, six in my case.
If we preview it in mobile, you’ll get the following result.
Some results:
- The bullet chart has disappeared
- The alert functionality in the combination chart is removed
- The design of the buttons has changed
- There was a warning on the amount of labels of the combo box, but they are all selectable
- The refresh connections button has disappeared
- The spreadsheet table has disappeared
I’ve also tested some basic dynamic visibility functionality by using a toggle button to change the visibility of a graph and this worked.
Other general test results:
- The value component is not supported
- The area chart component is not supported
- The list builder component is not supported
- Mouse over interaction for buttons and graphs aren’t supported
- HTML formatting for text boxes is not supported
- Animated entry effects for objects aren’t supported
In general, quite a large set of components is supported in this first release. SAP announced that more components will be supported in the near future. Most of the unsupported components or properties are not critical.
Check the updated help section of SAP Dashboards to see all details on what is and what isn’t supported.
Support for data connections
All connections using the data manager are not supported.
For example, the BICS SAP Netweaver BW connection type through the ‘data manager’ is not supported for mobile. For SAP BW, only SAP BW connections using the query browser are supported. This means you’ll need to re-build all your connections through the query browser. This can result in quite some rework.
If you open the data manager, it states “These connections are not supported on mobile devices”. This means you’ll always have to use the query browser instead of the data manager if you want to use mobile dashboards.
Performance
I’ve tested the performance by opening existing SP02 dashboards in SP05 and the results are disappointing in some test cases. The time to open a dashboard is around 5x as long as in SP02 and starting a published dashboard also takes about 5x as long. I encountered the same performance issues while testing SP04 (FP3) in the past versus SP02.
Since performance is one of the core factors for user acceptance, this can be quite an issue. I hope to hear from you if you encounter the same performance issues. In the past, I’ve already logged SAP support calls for the bad performance in SP04 (FP3) but SAP couldn’t reproduce the performance issues.
What are your experiences?
Important update: The performance issues only exist when using custom themes. If you use default themes like Nova, performance is not different from other SP versions.
Prerequisites for use on iOS devices like iPad and iPhone
There are some important technical prerequisites for being able to view mobile dashboards on for example iPhone and iPad.
1. SAP BI 4.0 enterprise platform with SP05
You’ll need 4.0 SP05 for using mobile dashboards.
2. BI Mobile server installed on your enterprise platform
The BI Mobile server handles the synchronization between your mobile device and BO enterprise platform. It checks which BI content (Webi reports, Crystal reports, Xcelsius dashboards and in the future SAP Design Studio (ZEN) documents) is made available for mobile use. Next to this, it passes the parameters set in the opened BI report/dashboard and communicates this with the Enterprise platform and returns the data.
3. SAP Dashboard Design SP05
The SP05 version includes the new mobile panel, compatibility checks and publish to mobile modes.
4. The iOS app SAP BusinessObjects Mobile for iOS version 4.4 (planned release is December 15th 2012)
You’ll need the app for viewing the dashboards on a mobile device since the app includes the HTML5 wrapper.
The overall architecture looks as follows:
First conclusions
I’ve tested this new SP05 version for about two hours now and I must say I’m quite positive about the first results. Of course I’m waiting for the release of the iOS app SAP BI Mobile 4.4 so that I can actually deploy to a mobile device but up till then, this looks positive.
The main concern is rework for existing ‘data manager’ connections.
SAP does show they’re still investing in this existing dashboard product and finally some real innovation and enhancement is in place. If you look at the current state of SAP Design Studio, I think Xcelsius still is the best dashboard solution in SAP’s portfolio for the upcoming years.
Update 11/27/12:
A smart guy called Joseph Warbington discovered a way to test your dashboard in HTML5 and get the HTML5 ‘source’ files without publishing to the platform. He uses the temp folder of Xcelsius. Very smart 
Check this page to find out how to do this.
Update 12/5/12:
The SAP BusinessObjects 4.4 mobile app will be released on December 15th 2012.
SAP press release: click here
Update 12/18/12:
This blog post has made it into a official SAP note on SAP Dashboards SP05. That’s funny .
SAP Dashboards: Visually supporting KPI score comparison
06 months ago
In this blog post, I want to share a simple feature for SAP Dashboards to visually support the ability to compare multiple KPI’s with each other.
Imagine that you have multiple KPI’s you’d like to analyze. In the example below, I’ve displayed three simple deviation graphs (0 = target; above 0 is ok; below 0 is not ok) that display KPI info. It can be interesting to analyze if there is a relation between the scores of the three KPI’s in a specific month.
In the graph design below, It is quite difficult to compare the values. If you scan from the top graph to the two graphs below, you’ll easily loose track of the right column.
This has multiple reasons:
- The title of the individual KPI graphs is placed above the graph, instead of left of it. While comparing a bar in the top graph with the graphs below, you’ll have to ‘cross’ the title of the graph below. This distracts the reading process.
- Every graph has it’s own X-axis including category labels for the month.
- The distance between the three graphs is quite large.
- The black Y-axis distracts while analyzing (non-data pixels)
- Etcetera..
Now how can we easily support the process of comparing the KPI values for a specific month? I’ve made a simple demo dashboard to reduce the issue. In the following example, I’ve used five KPI’s.
To see this in action in a demo SWF file, click here. You can download the source XLF file here.
In this example, you can easily compare the bars of the graphs because the selected month is put into ‘focus’ by marking it with a grey area. I’ve used a simple combination of dynamic visability and drill functionality. From a design perspective, I’ve eliminated some of the graph elements like the Y-axis, the X-axis labels, KPI titles (could be placed on the left) etcetera.
This is just a quick showcase / prototype of the technical functionality.
Let me know what you think of this.
Final note: This dashboard was developed using SAP Dashboards 4.0 SP04 Feature Pack 3
Sound enabled SAP Dashboard model
312 months ago
Intro
Fridays always are the days on which a funny moment can pop up. This also was the case at one of my customers where I’m hired for my SAP BusinessObjects BI expertise. Since the EURO2012 soccer championship is near and every department has their own ‘betting’ poules, I suggested that it might be fun to build a funny EURO2012 dashboard in SAP Dashboard Design to show which colleagues were doing great and which weren’t. This was the beginning of something really funny.
I came up with the idea of a dashboard showing the match schedule, ranking of colleagues for the poule, but also some funny elements like a live twitter feed and sound board. The sound board would offer the possibility to show a picture and play some funny quotes from colleagues. I’m sure you can come up with some quotes from your own buddies.The idea was received as very cool, but now I just had to think how to build it. It took me quite some experimenting and thinking, but in the end the solution was quite simple.
Sound in a meaningful way
Of course the EURO2012 dashboard is a funny application of sound in a dashboard but from a User Experience design perspective, there can be very useful applications of sound in dashboards. What about a voice over for the most important functionalities? Or a played sound alert, in addition to a color code alert, if something really critical is going on? Or perhaps for users that suffer from colour blindness or have trouble seeing things in general. I’m convinced that there are scenario’s in which sound can be useful. Of course, your design should be sound independent but it can add extra value.
The challenge
The biggest challenge was how to integrate music files, for example MP3, inside my SWF file. Of course I could integrate my dashboard in a HTML site which exists out of multiple containers. For example one container for the dashboard and one for the sound play controls etc. But I wanted to integrate the whole functionality in a single dashboard.
So I wanted to record voice (MP3) and integrate it in my SWF file or activate it from within my SWF file. At first sight I was thinking about using a URL button or connection to trigger the sound files. But quite fast I realized that it would probably be possible to convert MP3 to SWF. Than all I had to do is import the SWF object inside my dashboard using the SWF loader or Image component.
That should work right?
How to do this?
Step 1: Find a tool to convert audio (e.g. MP3) to SWF
I searched Google and the Hoo Technologies converter. It’s plain simple and does exactly what I wanted to do. It even has a ‘record’ function from which you can directly record and convert your soundbites. The limitation is that in the trial version it only converts the first 60% of your sound clip. The simple solution of course, is to add some emptiness in the last part of your sound clip.
After the conversion, multiple files are created, including .WAV files. The only file you need is the .SWF file. The sound is included in this file.
Step 2: Create a dashboard and import the SWF sound files
Just create a dashboard model or open an existing and add the image component. This component supports SWF files (not xcelsius) and creates a nice play control object. After it’s imported, you can preview and test the result.
Concluding bits
Perhaps you expected the solution would be more complex but like many times, the most time is consumed by figuring out what’s the best way to realize this. The play control button starts playing as soon as the dashboard is loaded. This might be not what you’re looking for.
I noticed that if you include the SWF file in a dynamic visibility enabled canvas container, the play control object will start playing only when the object is visible. This means you could make a button that controls the visibility of the player component (which could be made 100% transparent) and with that the exact starting moment for the sound.
There is a test XLF and SWF available for download.
I wish you good luck with the implementation of this cool feature. If you come up with some interesting designs or applications (funny is also interesting) please share them with me.
That’s all for now folks!
Recent Comments