A Dashboard Alerts Checklist

Alert

There is a tendency with reporting, and dashboards in particular, to cram as much information on the page as possible. It is a problem that Avinash describes with typical candor:

“This one of the core reasons why most dashboards are “crappy”, i.e. they are data pukes that provide little in terms of context and even less in terms of actionable value.”

In the past, we have offered tools to make data presentation as clear as possible (chart chooser, Excel chart cleaner). Sometimes clean isn’t enough; a more dramatic approach is needed.

One alternative is to shift the focus from the full data to changes in the most critical data points. By pulling out the important exceptions, you can make it easier for your audience to digest what matters and take action.

Stephen Few says in his book Information Dashboard Design:

“The best way to condense a broad spectrum of information to fit onto a dashboard is in the form of summaries and exceptions…given the purpose of a dashboard to help people monitor what’s going on, much of the information it presents is necessary only when something unusual is happening; something that falls outside the realm of normality, into the realm of problems and opportunities. Why make someone wade through hundreds of values when only one or two require attention? We call these critical values exceptions.”

Alerts are one mechanism to turn the focus to the exceptions, outliers and data highlights. Whether embedded in the dashboard or presented separately, alerts can be the extra layer of abstraction that make a dashboard useful. Unfortunately, they are hard to get right. I’ve arrived at four C’s for effective alerts — context, cogency, communication, control. Here’s a checklist to consider as you build alerts into a dashboard or report:


Context: Users need to understand how an alert is defined and how it fits into the larger picture.

  • Are the parameters well defined? An alert is commonly defined by the following factors: metric (e.g. revenue), dimension (e.g. time), delta (e.g month over month change), scope (e.g. Northeast region, Peanut-product line), threshold (e.g. increase or decrease of 10%).
  • Is the timing of the alerts actionable? One client explained to us that fluctuations in many of their metrics make monthly alerts too frequent — it would unnecessarily alarm people when, from their perspective, no significant trend had been established.
  • Is the change statistically significant? This is of particular importance when you are measuring deltas. A doubling of traffic from a referring site doesn’t mean much when it is moving from one to two visitors.

Cogency: An alerting system needs to avoid causing unnecessary alarm while delivering easy-to-understand information that can be acted upon.

  • Can the alerts be described in simple terms that even an executive can understand? Alerts should have a real-world meaning that users are familiar with. If an alert is based on a complex metric, for example, users will be confused as to the implications.
  • Is the alert actionable? In the best cases, alerts should point users to both the drivers of the alert and the actions that can address the situation. This system does neither: ![terror warning system]
  • Are the alerts so granular and/or frequently triggered that users will get alert fatigue? Excessive use of alerts will undermining their credibility. We saw this happen at one client where an IT-designed system threw off alerts like they were going out of style. The application went out of style the next year when users decided it was more distracting than useful. Here’s another example of a system that seems designed to raise blood pressure.

Lit up dashboard (It appears that a 5% increase in brand attribute performance isn’t good enough to get you out of the yellow.)


Communication: Alerts must be designed to effectively capture attention and inform.

  • Is the alert placed in context? Google Finance does a nice job of putting news alerts within the stock chart. Google Finance
  • Is it clear what the user should do next? Give the user a clear path to more information so they can understand the full context of the alert.
  • Does the sophistication of your alerts match the sophistication of your audience? I’ve found that it is better to start with some simple alerts so your audience can begin to learn what they mean and how to react. Over time, these alerts can become more refined and focused to capture complex situations.
  • Does the alert draw the eye without being visually overwhelming or annoying? Here’s a article about how to “reduce visual noise” in dashboards.
  • Is color used appropriately? Red means bad. Yellow is sorta bad. Green means good (but “good” things don’t need to be alerts). It isn’t particularly fair for color blind folks, but these conventions are deeply rooted.
  • Have you found the best mechanism for presenting alerts? Alerts can be sent through e-mail, as SMS message, blasted over the office intercom system, or posted to the wall in the bathroom. What is the most convenient and appropriate medium?

Control: Advanced alert system should give users the ability to customize and manage alerts.

  • Can the user identify the important alerts for them, and avoid the others? As hard as you may try in designing the dashboard or report, you aren’t in the shoes of the users. They will learn what they want to pay attention to and what information is extraneous.
  • Can the user adjust the parameters? With more sophisticated dashboards, you want to give users the ability to adjust parameters to hone in on the exceptions that really require action.
  • Can the user analyze alert frequency and trends? I’ve never seen a system that does this, but having the ability to view and analyze alert history seems critically important to getting a holistic view of performance.

0 comments | Add a comment

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment






Tufte-Style Comparison Chart Generator

Last week, we shared a rendition of a Tufte graphic using just a few lines of Nodebox code. As our commenters pointed out, Python is great, but it may not be every business analyst's carnal desire to learn a programming language just to generate some nifty graphs. I spent some time to push Chris's Nodebox rendition into a PIL-based Windows tool that can generate the same sort of comparison graph from an Excel file on the fly.

The result is The Comparison Chart Generator 1.0. The installation instructions are relatively simple. Unzip the zip file, and run comparisionchartgenerator.exe.

Alternatively, we have a new excel chart that creates the same effect using only excel functionality. Download the Excel Tufte Line Chart here.

If you are using the Chart Generator, start with some data in an Excel (xls) or Comma Delimited (csv) format. The data for this graph has to be contained within the first sheet starting with cell A1, as in the following picture.

Excel Dialog

Select an input file. There are a couple example files bundled with the download.

Open File Dialog

After selecting a file, you'll be prompted to modify a few of the basic options available for the chart.

Options Dialog

Finally, save the result as a jpeg.

Save File Dialog

Here is the same image found in Tufte's textbook processed using the Comparison Chart Generator. It is generated using the csv example file bundled with the download.

Tufte-esque Chart by Comparison Chart Generator

Those of us who have undergone lasik eye-improvement surgery may still prefer the sharp crisp Nodebox results, but for the rest of us, this image looks pretty good. Let us know if this tool is useful. If there is enough of a positive response, we may consider expanding functionality for other fancy Tufte-esque charts.

If you do prefer Nodebox, I have an updated script here. This pushes the script up to 20 lines of code or so, but the extra 9 lines allow the labels to push themselves apart on their own. If you want to look at the source code for the windows program, you can get it here. I used py2exe to compile it into an executable. The code, however, has not be thoroughly commented or cleaned as of yet, so edit it at your own risk.

16 comments | Show all comments only the last 5 are shown


May 9, 2008
Christian said:

Thank you for this post, it looks great! I love Tufte's work and read your blog frequently in Google Reader.

The output file (.png or .jpg) could be of a much wider use if it was a .wmf file, because this would enable me to change the colour of one line or text and make any additions I like with Illustrator. Is it possible to get a .wmf version? That would be fantastic.


May 9, 2008
Sal said:

Code should be accessible.
Most of the code deals with the GUI interface and with parsing excel/csv files. The actual PIL interaction starts around line 196.

I don't believe that PIL actually supports the wmf format. I am fixing up a presentable version of this sort of graph in Excel to add to the next version of chartchooser (http://chartchooser.juiceanalytics.com/). I'll put up a draft version of that when I have it cleaned up - it should be sufficiently editable to not need Illustrator.


May 13, 2008
Kasper said:

Great tool. One question: Is there a way to change the number of decimals shown? Currently it seems to show just on decimal, whatever the number format in the xls-spreadsheet.


May 14, 2008
Sal said:

As promised, I posted an excel chart of the same graph. You can find the link near the top of the page.


May 15, 2008
Jose Hernandez said:

I have an alternative post on a dynamic Excel bumpchart that combines charts with the cell grid. You can donwload it at http://sites.google.com/a/visual-catalyst.com/info_displays/Home/tufte_example_bumpchart.xls?attredirects=0

This display works for all versions of Excel. I'm working on a how to that describes how you can extend this type of chart.

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment


Add a comment





Real-World Tufte Graphics in 11 Lines of Code

Check out our followup post that describes how we created a downloadable Windows application or an excel spreadsheet you can use to create these graphics.

One of the troubles with Tufte is the frustrating infeasability of his approach to design for real people in business. One of his recommendations is to use Adobe Illustrator.

Adobe Illustrator is a big serious program that can do almost anything on the visual field (other than Photoshop an image). Most of my sparkline work was done in Illustrator. Fortunately all graphic designers and graphic design students have the program and know how to use it, so find a colleague who knows about graphic design.

Raise your hand if you have a graphic design assistant at your beck and call. I thought not.

One of the tools we use for rapid prototyping at Juice is NodeBox.

NodeBox is a Mac OS X application that lets you create 2D visuals (static, animated or interactive) using Python programming code and export them as a PDF or a QuickTime movie. NodeBox is free and well-documented.

All true. But it's more helpful to think of NodeBox as a free Adobe Illustrator that you can program in the world's easiest programming language. Oops, here's the right link.

I wanted to see if we could reproduce the following graph from The Visual Display of Quantitative Information, p 158.

Tufte Current Receipts Graphic

Here's the code. It's 11 lines of code if you exclude entering the data and setting things like fonts and colors.

size(500,700)
font('Palatino'); 
fontsize(12)  
stroke(0.4)  # a medium grey for lines
fill(0.2)    # a slightly darker grey for text  

<h1>data = (label, first, last, label-fudge-factor)</h1>

data = [ ('Sweden', 46.9, 57.4, 0., 0.),
         ('Netherlands', 44.0, 55.8, .3, 0.),
         ('Norway', 43.5, 52.2, 0., 0.),
         ('Britain', 40.7, 39.0, 0., 0.),
         ('France', 39.0, 43.4, 0., 0.6),
         ('Germany', 37.5, 42.9, 0., -0.4),
         ('Belgium', 35.2, 43.2, 0., 0.),
         ('Canada', 35.2, 35.8, .8, 0.4),
         ('Finland', 34.9, 38.2, -0.5, 0.),
         ('Italy', 30.4, 35.7, 0.3, -0.3),
         ('United States', 30.3, 32.5, -0.3, 0.),
         ('Greece', 26.8, 30.6, 0.4, 0.),
         ('Switzerland', 26.5, 33.2, -0.2, 0.1),
         ('Spain', 22.5, 27.1, 0., 0.3),
         ('Japan', 20.7, 26.6, 0., 0.), ]

text("Current Receipts of Goverment as a Percentage of "
      "Gross Domestic Product, 1970 and 1979", 20, 70, width=215)
text("1970", WIDTH*.28, HEIGHT*0.03)
text("1979", WIDTH*.68, HEIGHT*0.03)

def ypos(val):
    # calculate a vertical position by scaling between 10% and 90% 
    # of the height of the image
    return HEIGHT * (0.9 - 0.8 * (val - minval) / (maxval - minval))

<h1>find the minimum and maximum values in the range</h1>

alldata = [d[1] for d in data] + [d[2] for d in data]
minval, maxval = min(alldata), max(alldata)

for label, start, end, startfudge, endfudge in data:
    align(RIGHT)
    text(label, 0, ypos(start+startfudge)+4, width=0.25*WIDTH)
    text("%0.1f" % start, 0.25*WIDTH, ypos(start+startfudge)+4, width=0.07*WIDTH)
    align(LEFT)
    text(label, WIDTH*.75, ypos(end+endfudge)+4)
    text("%0.1f" % end, 0.68*WIDTH, ypos(end+endfudge)+4, width=0.07*WIDTH)
    line(WIDTH*.33, ypos(start), WIDTH*.67, ypos(end))

Here's what the result looks like.

Tufte Current Receipts Graphic with NodeBox

We have some great followups to this planned for next week. We'll reimplement this code with the Python Imaging Library which will open things up for Windows users. We have some great plans for mashing these graphics up with our just released Google Analytics API.

Check out our followup post that describes how we created a downloadable Windows application you can use to create these graphics.

18 comments | Show all comments only the last 5 are shown


May 13, 2008
Sal said:

Whoa - nice find Mike. I have it running on Ubuntu 8.04, and will definitely use this in server-side applications.

I think I found the bug with the font setup in the Nodebox Qt code. If you open up /try-qt/nodebox/graphics/qt.py and go to line 884, and change 'return f.exactMatch()' to 'return f', the font feature works again. You can even download the Palatino font and point to it with the full path.


May 16, 2008
Pradeep Gowda said:

I've implemented a in-browser vresion of this graphic using Javascript and processing.js library.

http://pradeepgowda.com/programming/tuft-graphics-processingjs.html


May 16, 2008
Jonno said:

I'm a statistican and have had similar frustrations with implementing interpretable graphs. A common tool I would use for this is R - a free statistical programming language with excellent graphing capabilities. The code would be about the same length as Node box (at a guess).

http://www.r-project.org/


May 16, 2008
Chris Gemignani said:

Who's up for a multi-language infographics shootout?


May 18, 2008
Tim said:

That's cool !

I was wondering if there was a way to generate these graphics through command line ? that way we could embed this in web application and get the graphics generated dynamically

note: looks like comments in your code got converted to html (# -> h1)

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment


Add a comment





Keyword Trends in Google Analytics With Greasemonkey

After the warm reception for the first version of our Enhanced Google Analytics, we decided to add some new functionality. (Nothing like a few kinds words to get keep us in the giving mood.) The first script created a couple new tables in the Google Analytics interface that highlight recent changes in referral visits. It uses Greasemonkey, an add-on for Firefox that allows a user to insert javascript directly into a webpage.

Our update gives you even more ability to understand the data in Google Analytics:

  • At the suggestion of Avinash Kaushik, the new script works for keyword data, helping you see how organic search traffic is changing. An increase in a keyword may indicate a general change in user interests and/or improved performance on search results.
  • My coworker Pete Skomoroch also suggested that I add the ability to see declines in referrals and new keyword searches.
  • With the help of Paul Irish, the script is now better able to interface with the date widget on the Google Analytics site.

(Click the above button for a simulation.)

Keyword Growth Keyword Decline

When you click the button, your browser will download some historical data behind the scenes, and display a nice summary of the best and worst performing keywords/referring domains.

Installation Instructions:
Firefox 2.0+
Greasemonkey
googleanalyticsdownloade.user.js

If you don't already have Firefox, install it. Install Greasemonkey, and do the required Firefox restart. You should see a handsome monkey peeking at you from the bottom right hand corner of your browser. Open the script file in your firefox browser, and Greasemonkey should give you an option to install the script.

Afterwards, log into Google Analytics, and navigate to your Referring Sources or Keywords Tab. Click the button.

Configuring the script:

We spent some time trying to find convenient default settings here at Juice Analytics, so the script should work straight out of the box. Some users, however, may find it convenient to alter some of these configurations. To do so, in Firefox, go to Tools=>Greasemonkey=>Manage User Scripts..., select Google Analytics Downloader, and then click Edit in the lower left corner of the window. This should open up the script file in a text editor. If your computer does not have a default text editor configured, you may have to choose one. 'c:\windows\notepad' is a good bet for Windows machines.

This is what you should see:

Code Blurb

The bracket labeled 'keywords?' controls defaults for the Keywords page, and correspondingly, 'referring_sources?' controls the Referring Sources page.

To change the settings, simply change the corresponding variable to your preferred default. Make sure to refresh your Google Analytics webpage if you have it open so the new settings are loaded.

Now for the nitty gritty configuration details:

  • display_limit: This controls the maximum entries that each table will contain. This may be useful for large sprawling sites.
  • growth_tolerance: This is the percentage growth parameter. Changing it to .10, for example, will catch everything that has grown by 10% as opposed to the default 50% and 20% respectively.
  • minimum_number_elements: This is a significance benchmark that can be used to limit what is displayed upon the screen. By default, only keywords with at least 10 elements are displayed upon the screen. Referring Sites does not have a minimum by default, but one can be set if desired.
  • limit: Limit is more of an internal parameter that determines how many entries should be downloaded from Google in order to get the results that are visible here on the page. Lower the limit to increase speed. If the limit is set to a very high number, you will get the largest result set, but you will have to sit around for a while for the results to load. Since the results are downloaded ordered by volume, raising the limit from the default numbers will not actually give more significant results. You will simply get -more- of the smaller results, such as keywords with only 1 hit.
  • look_back: This is a very important parameter. The script uses the date displayed upon your Google Analytics page to determine the full range that you want to consider in your results, but 'look_back' determines how many of those days are used for the significance test. So, say the range you have displayed in Google is March 23 - April 22, and your look_back is 7 days. The script will compare the average referrals for a given keyword from April 16-22 to the average from March 23-April 15, and will return the keyword only if the recent average is 20% higher than the rest of the time period. Thus, if you want to increase the total range of the data, change the dates on the actual webpage. Change 'look_back' only if you want to change the period of significance.

Happy analyzing!

5 comments


April 23, 2008
Avinash Kaushik said:

Sal: Thanks so much for this enhancement to the first script, given all the attention on Search I think this is absolutely super valuable. I am on a recommendation overdrive on this (I have a two slides on Juice in my official presentations! :).

Thank you again, this is excellent.

-Avinash.


April 30, 2008
SM said:

Thanks for pulling these scripts together, very useful.


May 5, 2008
Patrick H. said:

This is great, thanks a lot for posting it. Very good addition to GA.


May 6, 2008
James said:

Why didn't google analytics do this months ago?
This is great!

I wear many hats at my company. As entertaining as it may be, I don't have the time to play in excel.

Thank you!


May 12, 2008
Brian said:

Great work guys! This is killer!

New to the blog, but you've won a reader. ;)

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment


Add a comment





Enhancing Google Analytics Using Greasemonkey

There is a new post with updates to the script. Find it here.

My boss Zach has a problem. Every four hours the craving strikes him. No matter where he is, he pulls out his shiny Macbook Pro and navigates to Juice's Google Analytics site. He pulls up the list of referrers to our site and meticulously searches for new domains. He has an freakish ability to pick out IP addresses that have never linked to us before. Even so, there had to be a better way.

I wondered whether Greasemonkey might be able to help. Greasemonkey is an extension for Firefox that allows users to install custom javascript when you visit a specific website. These scripts can add a delete button for Gmail, automatically display lyrics to your YouTube music video, or do pretty much anything else you would want to enhance the functionality of a website.

After poking around the subtleties of the Google Analytics interface, I came up with a little script that can identify the new referrals that Zach so desperately craves. When navigating to the "Referring Sites" section of Google Analytics, the script add the following button to the interface.

Google Analytics Button

Pushing the button downloads all the referrer data for the date displayed in the Google Analytics range, as well as a similar set of data for the range up to but not including the last three days. The difference between the two data sources is used to calculate all of the results. The specific number of days can be changed by editing t