On February 23, 2012 I taught a UIE Virtual Seminar on Dashboard design (you can purchase access to a recording from UIE), but I wanted to do a little writing about Dashboards because I just didn’t have time to cover everything I’d wanted to.

I want to dive in a little bit on Dashboards that allow the user to drill down on information and talk about the controls for drill down and for synchronizing elements in the dashboard. This is something I didn’t have time to cover in my seminar, so think of this as a supplement!

Terminology

When you design these dashboards there are some key things you need to think about, which is what I’m writing about today. To make things easier, let’s agree on a naming scheme for the elements of  a dashboard, using the example below.

A sample Dashboard, dashboard design, elements of a dashboard

A sample Dashboard

Some terminology for dashboards

  • The dashboard is the whole page.
  • The dashboard is made up of elements. Elements are usually represented in rectangular areas and there are lots of names for them: widgets, panels, etc. In many cases the user can add and remove these elements (making it a customizable dashboard), but that doesn’t have to be the case. The example above has three elements: Sales by Region, Sales by Quarter, and Sales by Team Member.
  • And sometimes there are controls, which affect the dashboard. In this case there’s a control for Time Period and the checkbox for interpolating missing data.

 Synchronization Controls

In many of these dashboards the elements might include a control that adjusts what’s shown in that particular element. A very typical control is for time period. In the image below you can see that there’s a control for changing the time period for each of the three charts shown. Two charts use FY2011 and the third is showing data over the last 5 years. The user can change them independently, choosing to show different information in each element.

Changing time period with individual element controls , dashboard design, synchronizing

Changing time period with individual element controls

In the example above, it’s clear that the user might prefer to have the sales trends to show different data, since it’s about larger trends. So a separate control for each element makes sense.

Alternatively, you could offer the user a single control that synchronizes all the elements, so you choose the time period once and the whole Dashboard follows suit. You can see an example of this, below.

Synchronizing time period with controls , dashboard design

Synchronizing time period with a single set of controls

In this particular dashboard, it’s sensible for all the charts to be showing the same time period.

Google Analytics uses a single time period control for all the dashboard elements.

Google Analytics uses a single time period control for all the dashboard elements.

The Google Analytics Dashboard uses a single Time period control (in the upper right corner, above) to affect all the elements on the dashboard.

Which method should you use? It depends on how your dashboard will be used and how users want to examine the data that’s available to them. I generally prefer the second method: one control for the whole dashboard. However, sometimes the dashboard is showing really disparate data and that just won’t work.

Invariably, someone  on the team will suggest that we have controls on the element AND a synchronization control that can override the individual controls, as shown below.

Individual control and synchronized controls on a dashboard at the same time - I'm not a fan

Individual control and synchronized controls on a dashboard at the same time – I’m not a fan

The example above has a control that can synchronize all the time periods in the charts to the same time period, or a choice that allows the user to pick individual time periods for each element. The best of both worlds, right? Right?

This suggestion usually comes from someone on the software engineering team (who have very flexible minds that enjoy working with a lot of complexity). I’m not a fan of this approach: it makes the UI more complex and you run the risk that the user is confused about what time period is being used. Honestly, most would rather live with a simpler, easier to understand design that they need to click more often. Most software engineers, bless their hearts, would usually rather have a more complex design that gives them all available options and maximizes efficiency.

So, when it comes to synchronization I usually pick one approach and avoid doing both.

Element Drill Down

A lot of these dashboards also allow drill down on data, but when you look closely at drill down it can actually mean different things. A drill down can happen within an individual element, or it can be synchronized throughout the elements. Let’s start with drill down on an individual element.

An example of drill down in one element on a dashboard, dashboard design, double click

An example of drill down in one element on a dashboard

When drill down affects one element, the user is, in effect, “unpacking” the information they’ve clicked on, and accessing more details on that number. (By the way, I usually use double click as a drill down gesture on desktop computers. I think single click still means “select” to most desktop applications and a right click / menu gesture for drill down is just too cumbersome.)

Here we replace the contents of the element with the drill down information. One advantage to this approach is that the dashboard has a highly interactive feel where the user clicks and can reveal more information without ever leaving the dashboard. A big disadvantage is that your drill down can’t be any bigger than the element you’re already using.

An example of drill down in place on a dashboard

An example of drill down in place on a dashboard

The trick here is to make sure the user knows how to get back to the original information in the element. Above, on the right, we’re looking at the data for North America. But how do I get back to the worldwide Sales by Region? One of the things I keep running into with “drill down in place” is that users tend to go straight for the browser’s back button, which is usually not what we want. So we need to provide another way to go “back” within an element.

So, some suggestions, shown below:

Options for drilling down in place in a dashboard

Options for drilling down in place in a dashboard

  • Top left: Add a back button to your dashboard element. This is a good method, but of course you can only go back one level at a time. It might take 2 or 3 clicks to get back to the “top”.
  • Top right: Breadcrumbs are nice and clear. They’re my preferred method, but they can consume a lot of horizontal space, which is often at a premium in dashboards. I use tricks like shortening the labels for parents of the current panel to make them fit.
  • Bottom left: A dropdown list can show history is less space, but your users may not recognize the control. And the notion of using a dropdown to traverse up a tree isn’t something that most users “get”.
  • Bottom right: A synchronize control that just resets everything on the dashboard. This is my least favorite solution since it just resets all the elements back to the initial state. I don’t like it because the user may have gone through a lot of effort to get a particular presentation in his dashboard and then with the click of one button, it’s all gone! It’s such a “destructive” action that you almost want to offer an undo!

Whole Dashboard Drill Down

Single element drill down will just replace one element with new information on a drill down. Whole dashboard drill down will replace the entire dashboard with new information on drill down. Often this “new information” is another dashboard (which is what we’ll talk about here), but it could also go to a report or even other areas of the product to reveal further information about that particular element.

You’ve got two choices for how to handle a drill down for a single element:

  • Drill down and replace the current window
  • Drill down in a new window

Let’s look at each of these in more detail.

Drill down to replace the current window

In this drill down, the entire Dashboard goes away and is replaced by another screen, which contains the contents of the drill down. The big advantage here is that the information you show on drill down can be much more complex and detailed than would have fit in your original dashboard element.

Drill down in a dashboard replacing the entire page with a new page

Drill down in a dashboard replacing the entire page with a new page

The obvious disadvantage is that you’ve left the dashboard and lost all the information that was there. If you dashboard takes a few seconds to load, that means that going back will be a performance hit and a wait for your users, which they may find frustrating.

Unlike drill down in place, it’s obvious to the user how he gets back – he can use the back button or the application’s navigation (such as the tabs or menubar) to return to the Dashboard. The drill down screen could also offer its own back button or breadcrumbs, as shown in the example above. The dashboard on the right has breadcrumbs that read “Worldwide Sales > Regional Sales”.

Drill down in a new window

Here we actually open a new window. One advantage is that we don’t have to worry about how the user will get back to the original dashboard element, since all he has to do is to close the window.

Just as with replacing the current window, your drill down can be much larger and more complex than the original dashboard element, but in addition opening a new browser window would allow your users to see both the original dashboard and the drill down side by side – something that only this approach offers. The original dashboard is still open and doesn’t need to be reloaded, if the user wants to return to it.

Dashboard Drill down is shown in a new browser window

Dashboard Drill down is shown in a new browser window

This is my preferred approach. Some folks complain about opening multiple windows. But desktop applications use windows all the time to keep the user oriented and allow the user to keep key information around. Web applications generally seem to be more hesitant about opening new windows, partly because we don’t have great window management in web applications. I think over time we’ll see better window management in web applications and the idea of opening new windows will catch on more.

Synchronized Whole Dashboard Drill Down

This one can be a little tricky to grasp, but if you spend  a lot of time with Dashboards, you’ll soon learn about synchronized drill down. The idea behind synchronized drill down is that a click in any one element will affect the content of all the elements in the dashboard. This means that the user is effectively using one element to act as a filter on all the other elements, showing only a segment of all the available data. I’ll walk you through an example so you can see it, but you can also try this out by running any of the Qlikview Demos

We start with a dashboard for financial asset management. You can see on the left that I’m about to click on “Balanced Fund”, under “Fund Type”

Qlikview dashboard demo, synchronized dashboards (step 1)

Qlikview dashboard demo, synchronized dashboards (step 1)

After I click on Balanced Fund, all the elements in the dashboard will update and show ONLY information for Balanced Funds, as shown below:

Qlikview dashboard demo, synchronized dashboards (step 2)

Qlikview dashboard demo, synchronized dashboards (step 2)

You can see various cues on the dashboard that show:

  • Current selections are highlighted in green – so you can see Balanced Fund has been highlighted.
  • Other selections that do not overlap with the current selection are shown with a gray background (so, for example, Bond Fund doesn’t overlap with Balanced Fund and also there are no Balanced Funds that are in the Asia Pacific investment region).
  • There’s also a box in the upper left corner of the dashboard that’s labeled Current Selections.

Let’s take  closer look at Current Selections:

Qlikview dashboard demo, synchronized dashboards - current selection

Qlikview dashboard demo, synchronized dashboards – current selection

The current selections box is, essentially, a “bread box” which shows all of the current filters that are in use. The little icon that looks like a piece of chalk is an eraser and will clear the filter (I would have gone with a different icon, but whatever). The little menu icon will open a list of other choices for “Fund”.

Now, I’m going to go back to the dashboard and click on “United States”, and we see the updated dashboard, below:

Qlikview dashboard demo, synchronized dashboards (step 3)

Qlikview dashboard demo, synchronized dashboards (step 3)

Now we’re looking at Balanced Funds in the United States. Notice both are highlighted in green and the Current Selections box has updated. Finally, I will click on  the investor “PKA” and we’ll see a further update:

Qlikview dashboard demo, synchronized dashboards (step 4)

Qlikview dashboard demo, synchronized dashboards (step 4)

There’s a lot of careful work here to make sure that the user can see which filters are currently in use, and selectively turn them off and on. Many synchronized dashboards also provide users with ways to bookmark the dashboard, saving certain states so that they can visit them again when they want to, without having to do all the clicking. So if you’re going to build a synchronized dashboard you need to think hard about navigation within the dashboard.

What do I think of synchronized dashboards, overall?

They’re interesting. They demo beautifully – people get very excited about them when they see them in action. They’re highly interactive and thus very pleasing to drive. But, as a tool for exploring data they have some serious limitations. I find that all synchronized dashboards will, after a few clicks, end up with very simplistic charts and tables, as we see above. We have a pie chart with 1 slice and 3 bar charts each with one bar. That’s because each click is a filter. So these dashboards can be really useful for digging down and isolating information, but they’re not that great if you’re trying to add more information through drill down.

Let me explain: In the example we saw earlier (shown again below), the drill down is showing completely different information. It does reveal the underlying data of the original number, but it also includes a different set of graphs and charts, tables and information that further illuminate the data. The synchronized dashboard doesn’t make it possible to do that, since the same elements are always shown, with increasing filters.

This dashboard drill down can show completely separate data

This dashboard drill down can show completely separate data

That’s all for now – I hope you found this useful.