Graph visualization UX: How to avoid wrecking your graph visualization

29th October, 2018

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.

If you don’t consider the user experience, you’ll end up with a bad visualization - like this
If you don’t consider the user experience, you’ll end up with a bad visualization – like this

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.

UX v UI?

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.

1. Get the data model right

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:

  1. Nodes – the important entities that your users are likely to care about most
  2. Links (called edges in graph database circles) – the relationships between nodes
  3. Properties – the secondary or descriptive characteristics of nodes and links

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.

An example of a data model
An example of a data model

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.

2. Show users what they need – and no more

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?

Chart 1
Chart 1
Chart 2
Chart 2

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.

3. Remember your cornerstones

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…”:

  • Intuitive – this might sound obvious, but it’s crucial. An intuitive experience is all about trust between an application and its users. If a user trusts the graph visualization to be an accurate representation of their data, their experience will be much more insightful.
  • Consistent – ensuring consistent experience and styling in the application. If double-clicking expands a node in one scenario, you’d expect it to do the same in the others. Don’t forget consistency with other applications in your users’ stack too – KeyLines is unlikely to be the only technology they use each day.
  • Traceable – this one comes back to trust. To trust their graph visualization, the user needs to understand how it was generated. It might be tempting to run filtering, scoring and layouts entirely in the back-end, but showing those processes will reassure your user that their results are accurate and trustworthy. Animation is a great way to do this.
  • Reversible – don’t leave your users in fear of an accidental click trashing an afternoon’s work. KeyLines supports undo/redo actions, so take advantage of them.

4. Don’t overwhelm the user

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:

KeyLines combos allow you to logically group nodes and links, presenting a clearer chart
KeyLines combos allow you to logically group nodes and links, presenting a clearer chart

Allow exploration

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:

A ‘detail on demand’ approach using KeyLines’ combos
A ‘detail on demand’ approach using KeyLines’ combos

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:

An 'explore outwards' approach using KeyLines' combos
An ‘explore outwards’ approach using KeyLines’ combos

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:

Reducing chart clutter by isolating a subset of nodes
Reducing chart clutter by isolating a subset of nodes

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.

5. Choose the right color palette

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:

  • Choose which attribute to represent with color – a node or link might have dozens of properties, but limit your use of color representation to one property so as not to overwhelm the user.
  • Choose a scale – if your chosen property follows a numeric scale, choose a color or two to represent the top and bottom ends of the scale.
  • Limit the number of hues – if the property tied to color is qualitative rather than quantitative, limit the number of groups you want to represent. Around 7 is the maximum number of colors a user can process easily. More than 12 and your users will struggle to differentiate between them.
  • Use an intuitive color scheme – if your chart shows interactions between a blue team and a red team, those colors will automatically make sense to the user.
  • Defer to the experts – there are plenty of tools out there to help you find the perfect color palette to meet your requirements. We’re huge fans of Color Brewer.
  • Find out more

    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.

    Subscribe to our newsletter

    Get occasional data visualization updates, stories and best practice tips by email