Posts tagged UX
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.
Data Visualization poster – 8 tips for an effective dashboard
12 months ago
It’s been a while since I shared some new content with you. The main reason is because I’ve been extremely busy with client projects and expanding the Intelligence team at The Next View.
A couple of months ago, I gave a presentation at SAP Netherlands during the SAP Forum event. The SAP Forum (previously known as SAP World Tour) is a one-day event on which SAP presents their innovations and latest technology. I hosted a presentation on effective dashboard design and data visualization principles. Until now, I wasn’t aware of the fact that the photographers caught me in the middle of the action during the event 
Normally session attendees receive the presentation but I wanted to give them something extra. Something that would tickle and excite them even far beyond the moment of the actual presentation.
Together with some of my colleagues, we came up with the idea to create a high quality, A1 sized poster containing 8 tips on effective dashboard design. The idea was born. After many pizza sessions, different prototypes and discussions on content (could we copy Stephen Fews quote “no more pies” ?) the poster came to life. The creative brain for the design of the poster is colleague Frodo Jansen, a very talented UX and BI consultant.
At the SAP Forum venue, every attendee of my presentation received a poster and it was a great success. But we didn’t expect that it would go viral after mentioning it on social media like Facebook and Twitter. The result? We had to print over hundreds of extra copies. Customers even started sending pictures of their BI team putting the poster on their office walls or project war-rooms. A great success we never expected to become so big.
After this, I wanted to be able to spread this data visualization poster with my international followers so Frodo and I decided to translate it. Today, the English version of the Data Visualization poster is born.
Drop me a line to receive the poster digitally in high resolution or printed on hiqh quality A1 sized paper.
If you decide to put it on your office wall, I’d love to add a photo of that to my collection so make sure you’ll share it with me.
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.
Does “SAP Design Studio” live up to its name?
48 months ago
Recently, Anita Gibbings (SAP marketing) posted a message on SCN on the success of the SAP Design Studio (ZEN) beta program. It is the first SAP product ever that goes from beta to general available and with this it skips the phases of released to customer and ramp-up. Well then it must be everything we’ve all been hoping for I suppose?
The main reason is the positive customer feedback, she stated. Since SAP Design Studio is the successor of the Web Application Designer and converges with SAP Dashboards in the future, my personal expectations were quite high, as you can read in the comment section of her post.
Personally, I am not that enthusiastic about this new product. I personally don’t think it lives up to its promises, at least not in the version I’ve been able to work with during the beta.
My main two observations are quite simple.
1. From a design perspective the visual customization options are far too limited.
2. It requires too much coding for creating simple interactive features which make it less accessible to a lot of people.
But hey, maybe I’m wrong and I’ve got just the case to test this..
I am under the lucky circumstances of having a very talented UX designer and BI consultant (he doesn’t see himself as a BI consultant #LOL) as a colleague, Frodo Jansen, and he posted some of his KPI visualisation concepts on Twitter recently.
I’ve been working on a generic concept for KPI visualisation with Frodo for a while now and my interest was caught by this new design concept. I liked the use of color contrast and typography. The next thing I thought was how long it would take to make a quick prototype in SAP Dashboard Design / Xcelsius. Well, this took me just about 20 minutes or even less by starting from a blank canvas.
The result is displayed below.
On the left you see Frodo’s Adobe Illustrator design, on the right my quick SAP Dashboard Design concept. I managed to come quite close to what he drew in Adobe. You can see the SWF here and download the XLF here.
Now back to SAP’s article on SAP Design Studio. The article stated:
“With Design Studio, IT will be able to easily create dashboards and BI apps that can handle large data volumes and complexity to provide the business users with a holistic, trusted view of their business – tailored exactly to their requests and your unique business.”
Ok, tailored exactly to their requests? Then a rather simple but sophisticated KPI design like shown above should be no challenge for a product called ‘Design Studio’ I guess? I’m afraid it will be a challenge.
I do hope I’m wrong with my two observations stated above but at this very moment, I don’t think it’s possible at all in the first place to recreate the KPI above in SAP Design Studio and if it is possible, I think it requires a lot of coding and complex customization you don’t want to confront users with.
So can someone please prove me I’m wrong and show me this is possible?
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