In a series of tests, participants were exposed to visualizations that show how items are transferred to various recipients.

The purpose of the image is to answer the following questions:

  1. what item goes to which receiver?
  2. for what purpose is the item sent to the receiver?
  3. in what amounts, relative to others, are the items transferred?
  4. what is the most transferred item?
  5. who receives most of the items?

The interface provides the information in tabular form, where users can search and sort the entries. However, it can get difficult when tables have many rows.

The receivers are companies, but they cannot necessarily be recognized as such; some names could be obscure players, unlike "Microsoft" or "Sony" that most would identify easily.

The visualizations are Sankey diagrams, meant to give a quick estimate about the data set. Here are some examples of what participants saw:

Mapping fruits to companies

As above, but with the addition of an intermediate point - the purpose of transfer:

Mapping fruits to companies, via purpose

As above, but with the use of colour as a second way to differentiate item types:

As above, but with unique colours per item type

My observations show that interpreting the image was easier when you have just the item type and the receiver, but the presence of the intermediate point would puzzle some participants.

In the tests some participants would use their finger to trace it, e.g., in the last image they'd touch the bottom entry and say "Tamarillos are given for the purpose of selling in cinemas, to the company Bolton" or "Tamarillos are given to Bolton to sell in cinemas". These are correct interpretations, and I am looking for a way to nudge others towards tracing the curves with their finger, or following them visually.

  1. What visual cues could be leveraged, to convey the idea that the diagrams are read left to right, by following a curve?
  2. What other interpretation hints can aid users?

What was tried so far:

  • Above the diagram there were bullet-points expressing key hints, like "diagrams are read left to right", "flows are grouped by purpose". However, some still struggled.
  • After a participant's suggestion, a short (40s) instruction video animation was made to explain it. The link to the video was added to the UI, and in subsequent tests multiple participants clicked it and watched the video, and found it helpful.

However, both these methods add more content (text, or take time to watch the video). Perhaps there are some "passive" approaches - textures, gradients? Subtle animations?


Show them, similar to a process step thru.

Most people don't read, so rather than explicit text, join each step with an arrow.

Here's an example below. You may need to emphasize more, but putting it at the top of the chart shows the left to right flow:

enter image description here

You could also label the first and last columns with a subheader, and to answer the question 'who receives the most?' you can show totals for the company:

enter image description here

You can also test with an option for all totals, so they can see the numbers. It may increase the noise, but give clarity by being explicit:

enter image description here

Another example is to make a 'pointer' like element at the right tied to the end labels, so users can still assess volume by the end height of the joining elements (the fruits): enter image description here

  1. Why not add arrows? Perhaps notch each item on the left-hand side of each "flow" and add a point to each item on the right-hand side. (The Wikipedia article on Sankey diagrams even demonstrates it: https://en.wikipedia.org/wiki/Sankey_diagram#/media/File:Sankeysteam.png) For example:

    Shaped arrows

    Or occasionally overlay little arrows over each flow:

    Overlaid arrows

    (The above image is a very quick mockup and isn't a well-implemented example of what I have in mind.)

  2. If you can have animations, you alternatively/additionally could have a cyclic animation that shows flowing motion from left to right.

  • Thanks for your input, I tinkered for a while to see how it would work out. (a) The animation is effective, but also overwhelming - many things moving at once=too much action. I am inclined to go with "animation on hover" as a compromise. (b) Tapered arrows are a nice nudge, but there is a side-effect: the arrow tails on the left can be perceived as white triangular bullet-points (Gestalt principle of closure), which might cause more confusion. The sample diagram on the wiki only has one arrow, so this effect does not occur. – ralien May 20 at 11:19
  • Coming back to the animation - it seems that it has great potential, and it is a matter of how exactly the arrows are animated (e.g., texture, pattern, gradient, etc.). Some options are subtle nudges, whereas others produce chaos in the picture (imagine a Rube Goldberg machine full of intertwined tubes). If you have specific ideas or rules of thumb to follow, please share them. – ralien May 20 at 11:24
  • Regarding the tapered arrows, you could have one arrow tail for each of oranges, plums, apples, tamarillo if the points at which the flows split are shifted further to the right. Adding a bit of separation with the vertical lines along the left-hand side (or removing the lines entirely) also might help with the closure concern. – jamesdlin May 20 at 15:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.