Back to blog

IV, meet UX

infovis.jpg

This is a topic that I’d like to return to once in a while, so here’s getting the ball rolling:

Information visualization is one of those areas in HCI and UX design with great sex appeal and a lot of potential. Here’s the main idea behind IV:

  • Digital media is leading to information overload: most of us are inundated with information on a daily basis and it’s too much to efficiently or reliably filter, prioritize, analyze, or otherwise process cognitively. We need help.
  • Perception is underrated: using visual perception to filter out noise, identify objects, recognize patterns, and orient ourselves spatially is something that we do naturally and, for the most part, in real time!
  • Offload cognition onto perception: map abstract information onto a visual display and you can turn that information into useable (and therefore useful) knowledge media.

Simple, right?

As it turns out, not…really. There are fundamental bandwidth limitations in the visual channel as well. For example, we can’t easily perceive correlations between objects in a field that vary on more than a couple of attributes, making it really tough to effectively visualize multidimensional information. This is sort of a drag since most of the information we work with on a daily basis is multidimensional. Just open any spreadsheet…the number of columns you’re using = the number of dimensions you’re working in. Got more than 3? Ouch.

Not only that, but there are lots of different kinds of information, and some are more IV-friendly than others. Quantifiable data like numbers are pretty flexible–you can graph them, chart them, map them to things like colour intensity…lots of stuff. But how do you plot nominal data like people or flavours of ice-cream? What does Baskin-Robbins’ menu look like in bar-chart form?

The answer to these challenges lies in finding new and innovative ways to explore and manipulate information visualizations. Last week, I attended a lecture by Ben Schniederman, where he demonstrated some of his recent work in IV. He covered a range of techniques, but here are some basic ones:

  • Dynamic queries (UI widgets instead of SQL select statements)
  • Coordinated views (multiple synchronized visualizations on the same data set)
  • Brushing and linking (selecting items in one data set highlights correlating items in another)
  • Panning and zooming

One thing these techniques all have in common is that they’re rapid, incrementalble and reversible. That’s the key to making information visualizations explore-able. Schniederman’s well-known mantra when designing IVs like Spotfire is:

Overview first, zoom and filter, details on demand.

This all sounds pretty technical and academic, but the point that I want to make is that we’re already starting to use these techniques in UX design for the web.

Take—say—price and performance information on the new John Hanock Funds Website. JH manages about 40 or 50 funds, each with a boatload of associated data. How do you make this set easy to understand and explore?

Overview first: funds are grouped by asset allocation which categories are displayed at the top of the list

jh funds example 1

Zooming and filtering: users can filter the list by asset allocation as well as Morningstar rating and style. We don’t zoom, but the crosshair effect lets users more easily hone in on particular attributes, approximating this capability.

jh funds example 2

Details on demand: clicking anywhere takes you to a carefully designed fund overview page.

jhfunds example 3

Still a long way to go, but as mainstream users become more and more familiar with these strategies for exploration, more sophisticated IV techniques become possible and desirable. Ok, maybe that was sort of a self-serving example, but what do you guys think—any other examples out there of advanced techniques for IV creeping into mainstream products?

David Gillis More posts by David Gillis