Until pretty recently, hardly anyone could visualize connections in data. Early graph visualization tools were inflexible and bafflingly complex, and limited graph insight to a tiny audience.
At Cambridge Intelligence we wanted to reinvent graph visualization to make it work for everyone, so we built the KeyLines SDK. As a toolkit, KeyLines allows developers to custom-build graph visualization applications for their specific data, their users and the questions they’re trying to answer. It puts the power of graph visualization into the hands of those who need it.
But with great power comes great responsibility. Even with the best toolkit, it’s possible to build something that’s… not so great.
The good news is that there are a few simple tips that you can follow to build a beautiful, useful and intuitive graph visualization. We’ll explore a few of them in this blog post.
Before we move on to best practice, it’s worth clarifying what we mean by UX and UI. They’re the same thing, right? Not quite.
User experience (UX) design focuses on understanding and delivering what users want. The aim is to make them feel good about working with your graph visualization application.
User interface (UI) design is an essential component of UX. It focuses on intuitive interactions and beautiful styling.
If you want users to have a great overall experience, you need to do both. For example, UX research can identify the need to work with massive datastores without impacting on performance. UI design can make sure it’s easy to visualize and analyze those datastores to gain insight. Design an application that looks great but performs poorly, or performs well but looks ugly, and your users aren’t happy.
When we talk about designing a graph visualization, it’s easy to skip over the fundamental foundation of your application: the data model. Taking time to get this right will help users understand their KeyLines charts and make later design decisions much more straightforward.
Graph data modeling is a huge topic, but comes down to breaking your data model into three fundamental building blocks:
Getting the data model right means speaking to your users and finding out what insight they need to extract from the data. Once you understand their priorities, you can design the model to match.
At this stage, don’t worry too much about overcomplicating the model – it’s generally easier to remove elements than retrospectively add them in. The next step will help us clear up the users view.
Once we have decided on a data model, the next step is to define the visual model – i.e. what we actually present in the KeyLines chart. Again, at this stage we need to turn to our users. Ask them what questions they’re trying to answer, and define a visual model that makes those answers as explicit as possible. Let’s see an example.
Both these screenshots present the same data using the same data model (nodes are credit cards and vendors, links are transactions, and the transaction amount is a property on the link). Review them both and try to answer a simple question: which account (they’re nodes numbered from 49-58) made the most transactions in the time frame shown?
Sorry, a trick question. But it shows how some smart visual modeling decisions can really simplify complex data and help your users find answers. (The answer was account #56, by the way).
KeyLines has a number of visual styles you can harness in your application, like node sizing and styling, link weighting, labels, glyphs, font icons, and so on. Use them wisely and separating your data insight from the data noise will be much faster and simpler.
The design decisions you make will depend entirely on your own scenario (data, users, their questions – a recurring theme, if you haven’t noticed already) but there are four cornerstones you should keep coming back to.
With each decision, ask yourself: “Is this experience…”:
KeyLines is taking graph visualization beyond its traditional user base of security and fraud analysts. As its reach grows we need to remember that, for some, this kind of visualization is entirely new – potentially even scary. Decluttering the chart is a great way to remove some of that apprehension, and KeyLines offers plenty of options.
Show the big picture
If you have a particularly complex dataset, showing a clutter-free overview can be a great way to avoid data overload. KeyLines’ combos do this really well – grouping nodes based on your own logic:
Once the user has gained an overall view of the data, they’ll probably want to start digging into the detail. You can decide how that interaction works, but remember your cornerstones: make it intuitive, consistent, traceable and reversible:
Or, instead of digging down, you might find it easier to explore outwards – i.e. load a small number of nodes, and encourage users to expand outwards to reveal the network incrementally:
Let the user slice and dice
The last decluttering technique we’ll cover is allowing the user to isolate and investigate a particular portion of the data. In this example, we’ve combined social network analysis, layouts and node ghosting to show dependencies in an IT network:
It’s a simple but effective way to focus the user away from potential clutter, and drill into the parts of the network they need to understand.
Although this is the last tip in this blog post, it shouldn’t be an afterthought in your visualization design process.
A well thought-out color palette can transform your graph visualization, highlighting insight and making the whole chart easier to use. We’ve written a blog post on color theory and how it applies to graph visualization, but here’s the TL;DR version:
If you follow these five tips, you should be well on your way to building an attractive, insightful and user-friendly application. The KeyLines SDK is also full of documentation and examples to help you build the best graph visualization possible (request a free trial here) and our support and customer success teams are always happy to give advice and guidance.