Introduction
A visualisation is created by translating data of any form into pictures, something that's becoming more and more commonplace within website and application interface design. Being bombarded by information and having access to silos of information has inspired many to translate this vast amount of information into visualisations that help us make sense of it.
Creating an Effective Visualisation
We often see fancy-looking visualisations on magazines, websites, TV and other media outlets, but why is it that some of them make sense and some of them don't? The answer is simple... designing a good visualisation is the same as designing a useful product. A fancy looking product doesn't mean that it's useful and usable. This theory applies to visualisations we see today.
Have a look and play around with the following examples and ask yourself if what you see makes sense to you:
Most of us are usually attracted to the aesthetics of visualisations as they tend to produce a 'wow' effect by having colourful images and complex-looking connections of information. Some animated and/or interactive versions further amaze people as they allow people to manipulate complex information within a matter of few seconds.
However, not all visualisations are useful and usable. Some visualisations out there are what Ben Fry (author of Visualizing Data) refers to as YAHSVPOQUFOTI (yet another highly-stylized visualization piece of questionable utility found on the Internet).
Usability Guidelines for Visualisations
In general, good visualisations should:
Be Intuitive
Being intuitive is especially important for interactive visualisation tools. There's nothing worse than having a great visualisation with hidden functionalities. If people don't understand your visualisation because it wasn't obvious that by dragging the bar you get to see how X changes over time, then all that effort put into building the beauty has been wasted.
Help Viewers Make Sense of Complex Information
The power of visualisations lies in their ability to display complex information on a single visual canvas. This is sometimes difficult if there's a lot to show on one screen. Some visualisations overcome this by allowing users to manipulate information to reduce the amount of information being shown on screen at once.
For example, on Facebook's interactive Friend Wheel, hovering over a specific friend's name shows you the connections between that particular person and everyone else on your friends' list. This allows you to easily see how person X is connected to your friends at a glance (especially if you have 399 friends). The alternative could be having a giant tangled mass of web in the static version of Friend Wheel, where colourful lines zig-zag around the place producing only a 'wow' effect.
Use an Appropriate Mental Model
People have certain mental models when it comes to understanding the world so this is very important in the design of visualisations. A good visualisation needs to match the way users conceptualise a specific topic.
For example, the tag cloud uses a good mental model of big equals more, where a word with a bigger font size indicates its high number of occurrences within a particular text. More complex topics might require understanding how the target audience conceptualises a specific topic. For example, the way air traffic controllers understand air traffic might have implications on the design of a visualisation that depicts air traffic flow.
Follow General Usability Guidelines
As most visualisations are viewed on a computer screen, standard website usability guidelines naturally apply to visualisations. A few especially important ones pertaining to visualisations include having:
- Good colour contrast
- Readable font size
- Clear titles
- Instructions (never make your users guess what you're trying to say or show)
- Good zooming and panning options
- Clear feedback
Allow Viewers to Gain Insight from the Visualisation
Does the visualisation show something that exceeds a normal person's cognitive capacities? Does it result in what Robert Spence refers to as the 'Ah ha' reaction (where viewers may exclaim 'Ah ha - now I understand')? Even better, does it help viewers draw new conclusions based on what they see? This outcome can be seen as a combination of the above criteria.
Conclusion
The design of visualisations is more than their aesthetic qualities. Good visualisations should be usable and useful to help viewers make sense of information or gain insight from manipulating information. The guidelines above are crucial to user-centered design and how information is being presented on interactive websites and products.
VisualComplexity and FlowingData are great sites showcasing more visualisations.
This article was written by Yeevon Ooi, a consultant at the user experience consultancy, Webcredible. Yeevon's passionate about improving the user experience of websites and is responsible for implementing a variety of user experience projects including eye tracking and user interface design.
History
- 12th August, 2010: Initial post
Submit an article or tip
