Flash Information Visualization = Great User Experiences

This article was first published by User Interface Engineering in one of their e-mail newsletters. www.uie.com
--------------------------------------------------------------------------------
Giving users access to huge, multidimensional data sets has always been awkward and clumsy, until now. By combining the latest generation of tools, such as Flash, ActiveX, and Java, with the latest research from the little-known field of Information Visualization, we can provide user experiences that dramatically help users achieve their goals.

For instance, how would you design an interface to help find the ideal home in a database with thousands of listings? Until now, many designers opt for HTML, incorporating a mix of drop down lists and a keyword-based search tool to help users narrow down their choices.

HTML handles data clumsily and makes filtering results cumbersome. With keywords, designers have to know what words people will enter, including all the mistyped versions of those words. What if there are too many results? How does a design encourage a user to narrow down the homes, and identify criteria that are important to each specific user? If the results are too few, how does the design let users know what the scope of the database is? And how many times are users willing to recast their search?

Users may struggle to get at a reasonably narrow dataset, and fail to get insight into what the data is telling them. They fail to find a home that best meets their criteria, even though that home may well exist within the database.

It’s a frustrating experience both for the designer and for the user. Fortunately, there’s a little-known group of researchers that have been studying these problems for a long time: their field is called information visualization, and it provides very promising solutions for how to manipulate and display massive amounts of data.

To see examples of how information visualization can help, we need to look no farther than the work of Ben Shneiderman and his fellow researchers at the Human Computer Interaction Lab at University of Maryland. Ben founded HCIL in 1983 and they have done incredible research in this field, including dynamic queries, fisheye menus, and zoomable user interfaces.
For example, dynamic queries allow users to ask “what if” with their data and get an immediate response. It single-handedly resolves most of the problems with traditional database query methods using HTML.

Ben's team developed a technique known as starfields, which formed the basis of a product called Spotfire, which uses dynamic queries as its foundation. If a user were to find the ideal home using Spotfire, the process might go something like this: Beyond number of baths and bedrooms, users may want to decide on a home using sophisticated variables, like how close the house is to where they work, how land value has changed over the past 20 years, and the house's distance from public parks and shopping areas.

A user might start with some portion of that data, seeing it displayed in a two-dimensional space as a scatter plot. Then, much like a slide rule, she could adjust the ranges of several variables by sliding the pointer for the minimum and maximum ranges. Instantly the data would change to reflect her new ranges.

As well, some data could be viewed using size and color. If the user wants to look at homes within 30 miles of work for her and her spouse, homes that are 10-20 miles away might be labeled with a yellow square, with homes more than 20-30 miles away as green squares. Another variable — square footage of the house — might be visualized by the relative size of each square, the biggest homes being the biggest squares.

Eventually, through a process of taking big pictures of specific variables and narrowing the scope, a user might arrive at a small data set of homes that best fit her criteria, evaluation each of those in detail.

What makes the field of information visualization exciting for today's designers is the advent of graphical development tools like Flash, Active X, and Java. These tools can help utilize the latest advances of information visualization. Using them, developers can create interactive applications that deliver instantaneous responses to complex queries of large data sets.

Sophisticated tools that work like Spotfire are still uncommon on the web. But some simple implementations of these concepts are available today. One modest, but effective implementation is the used car section at http://www.cars.com/. It is a simple direct query interface for quickly finding the best used cars. Like Spotfire, it uses sliders to display the cars available according to the customer’s specifications
For example, to narrow the age of a car to just four years old or newer, with a click of the mouse you can slide a marker along the Year bar until it reaches 1997. Instantly, the number of results changes from 102 to 86 cars. No hitting submit and waiting for pages to download. Using the Price bar, you can quickly see that there are no Grand Ams at $14,000, so you slide the minimum price marker to $12,000, and the maximum price marker to $16,000, and by the time you let go of the mouse, the system tells you that there are 33 cars within this range.
There’s a similar implementation at http://www.bluenile.com/ to build your own ring.

We're already seeing designers integrating the world of information visualization into their work. Another research contribution, the hyperbolic tree browser by Ramana Rao at Xerox PARC, is now commercially available. (To see a tree browser in action, check out http://www.inxight.com/.) To see a treemap of stockmarket data visit www.smartmoney.com/marketmap.

We think that the exciting research that Ben Shneiderman, Ramana Rao, and many others have done is finally going to make it mainstream in the next few years. This will dramatically enhance the user experience when dealing with large, complex information spaces. •

Thanks,
Prash