Playful Data: 3 Inspiring Interactive Web Sites

When you try to imagine a cool, fun application, I'm betting managing household finances is not what comes to mind. At a cocktail party, you won't win any "cool points" when you announce you're now efficiently tracking your bills and budgeting your expenses.

Yet, when users use the new finance website, Mint.com, they get excited about it. Part of what makes Mint exciting is the site's interactive graphics. We've watched users become absorbed with the various displays, investigating different views of their financial data. Mint has managed to get users to attend to their finances the way teenagers immerse themselves in a video game.

Immersive visualizations are not new ground for us. In a previous article, we discussed how the New York Times' online interactive apps are inspiring designers to make their data more playful. Turns out the NYTimes.com designers aren't the only folks doing that.

The Magic in Comparisons

One of the most compelling parts of using Mint is seeing how you're spending. You can compare one category, such as groceries, with another, such as restaurants. You can compare it over time, such as looking at how gift spending was higher in December than January. You can also compare your spending in a category, such as Gas, to the national average or the average of folks in your hometown.

All this is done with simple pie charts and bar charts. There isn't any sophistication in the graphics (though they are nicely rendered, which seems to help), yet the data is made more "real" because it belongs to the user and is portrayed with an understated elegance.

Users tell us that all this comparing is fun. Partly, it's fun because they're exploring their data. Seeing they saved money in a category by changing their behavior is encouraging. Finding insights in where they could get further savings is exciting.

Another reason it's fun is because of the game-like nature of the application. Mint.com is very responsive, partly because the graphics are so simple -- clicking on a slice of the pie zooms into the spending of that category in just a few seconds. Nice cinematic effects make the transitions smooth and easy to watch. In many applications, cinematic effects can get annoying after the first few times. Yet, Mint's designers have done a great job of keeping them crisp and meaningful.

There is something we can learn about how to design tools that help us explore our own data in a fun and interesting way.

Bringing Hidden Data To The Surface

As they regularly book trips, frequent travelers learn common wisdom and tricks to best make their reservations. For example, they learn that flights usually get more expensive the longer you wait to make your travel arrangements. However, much of this education comes from expensive and inefficient means, such as checking fares frequently to see how they change and unknowingly buying tickets at a premium price.

Travelers who are not aware of these secrets then spend more than they have to. Those who think they have the inside scoop find out that the airlines don't always work in the way they expect, and they miss last minute bargains.

Enter Farecast.com, a web site dedicated to changing the way people buy air travel. Using data stored in the reservation systems, Farecast helps travelers decide if now is the time to buy a ticket.

For example, just now I inquired about buying a ticket from Boston to Vegas at the beginning of April. Farecast looked at the last 33 days of fares for that trip and recommended I wait because they believe, with 86% confidence, the fares will drop or stay the same.

Farecast also tells me what times have the best fares. For example, for the dates I selected, leaving in the afternoon and returning in the early morning is one-third the price of leaving in the morning and returning in the evening.

What's interesting is that Farecast isn't revealing any new or secret data -- everything has been stored in the reservation mainframes for decades, ready for anyone who showed interest. What is new is how Farecast brings this hidden data to the surface, where prospective travelers can use it. It begs the question of how to bring other interesting data that's hidden in our databases out where people can see it.

Exploring Meaningful Relationships

Today's businesses are made of data points. How many units did we sell in the northeast in 2005? What product had the best margin last year? Who currently is our biggest customer?

Each of these questions results in a single interesting answer. However, the most important decisions can't be made from a solo data point. The decision makers need to know the relationships.

The value of relationships is hammered home with Hans Rosling's 2006 TED Conference Presentation. His very entertaining and informative presentation shows what happens when you start to relate data points to each other. (If you haven't seen Rosling's presentation, you should take the time to watch it. As the TED folks say, "You've never seen data presented like this.")

As much fun as it is to watch Hans demonstrate his software, it's even more fun to play with it. Last year, Google made it available at http://www.gapminder.org/world, so anyone can play with the same data.

Using the controls on this clever web-based application, you can compare economic data against health statistics and a variety of other variables. You control the data represented by the X-axis, the Y-axis, the size of the circles, the color of the data points, and even their opacity. A play button lets you watch changes in the data, as time progresses. Clicking on a circle tells you more about the data it represents. You can see worldwide data, or focus on specific geographic regions.

All of this control just invites exploration. As we've played with it, we've found it as inviting as we do when we're exploring a virtual world. Yet, this isn't an imaginary place -- it's our planet and the data we're playing with can give us insights on how we could improve the quality of people's lives.

It would not be hard to see this same style of interaction used to explore other large data sets. The educational benefits are immediately clear. And, it's not a hard struggle to imagine this interface helping companies see how their business decisions produce results. Imagine a factory floor manager spending an afternoon plugging in production, quality, and profit data to see which manufacturing strategies are yielding the best returns.

The technology in Gapminder isn't new -- multi-dimensional analysis tools have been on the market for more than 15 years. However, it's unusual to see it presented in a web-based tool with these public data sets. This can expose a lot more folks to the possibilities and show just how powerful a browser-based application can be.

Exciting Times Ahead

It feels to us that we're just at the beginning of what will likely be a revolution in how we handle large data sets. The applications we're seeing now are just the tip of the iceberg. The real value will be when we see these types of playful data tools in almost every application we touch. For those of us who like to play with our data, we're about to have some real fun.

Want to learn more?

At the Web App Summit 2008, Steve Mulder, Jeremy Keith, Andrew DeVigal, and Steve Duenes will be presenting their experiences with developing highly interactive experiences. Come join us!

 Share this article with a friend/colleague.

Subscribe to UIEtips, our free email newsletter


  • Awesome UX insights delivered to your inbox
  • Access to our incredible content library
  • Podcasts that help to improve your UX skills
  • Learn about our in-depth live events