15 years ago, Dave Gray founded XPLANE, a visual communications company that has been pumping out beautiful graphical explanations for all sorts of clients, products and services ever since.

His presentation at CanUX kept up the theme of drawing and sketching, but flipped the emphasis: while the other presentations were about communicating design ideas visually, this one was about designing visual ideas for communication. In other words, it was about designing for visual literacy.

Dave’s passion is for explaining complicated stuff in ways that leverage perception, invite collaboration, and spark the imagination. He suggested that although people can generally “read” visual artifacts, most cannot “write.” After a brief primer on the visual alphabet (check out symbols.com for more info), he took the group through a few exercises developed at XPLANE for stoking creative process. The basic premise was that everyone can learn how to draw.

What’s next for Dave Gray? We chatted a bit about his desire to advocate for visual literacy in academic and professional communities. Pretty cool stuff. Check out these links here and here for a sense of where he’s going with this stuff.
 
The idea of visual literacy is one that I’ve been really keen to explore over the last couple years—first from an applied linguistics perspective at school, then from a practitioners perspective as an illustrator and now an interaction designer. It’s a really interesting topic, and I’d highly recommend the book Reading Images as a great starting point for anyone interested.

You can also check out a paper and presentation I gave on the topic of vis lit and web-based graphic design back in grad school…sort of geeky though, so be forewarned!

Each word is scaled in proportion to how many times it was said in the speech.

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

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.

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

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?