What visual cues can convey the sense of direction?

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?

Tags: