A confusing tram trip in Cracow – How humans read information.

It was several years ago. I was in Cracow and, I made an appointment with my friends in a nice vegetarian restaurant. I took with me my nine-year-old daughter. To get there we took a tram. My daughter was very excited about the event and, as a typical child her age, the minute we entered the tram, she started asking where we were getting off.

Fortunately, we sat down just next to an information board, where all the tram stops were displayed. So, I told her stop’s name, pointed to the board, explained to her how it works and proposed counting the stops on her own. I didn’t pay too much attention to it because Cracow is my hometown, and I knew it wasn’t far.

What a surprise it was to hear: “Mom, we’re on the 12th stop”. Knowing it cannot be right (the right number was 3rd), I asked her to count them again, but the response was the same. This situation repeated a few times till eventually she exploded and yelled at me. I swiftly considered the hypothesis that she must have been swapped in the hospital (obviously my own child would be smart enough to correctly count to 5!) and rejected it. Finally, I looked at the information board, and everything became clear. 

The culprit of this confusion was interpretation of the information board with tram stops. You see, western civilization uses the left-to-right reading pattern, so this reading order seems natural to us[1]. Linguistic and reading patterns affect reasoning of time and space, as well as relations between these two dimensions. My daughter made a subconscious assumption that the tram stops on the board were displayed in the “normal” order. Her assumption was totally right.

However, it displayed stops according to tram moving direction (right to left) but not with alignment of left to right perception of time (unexpecting design choice). Even though it consisted of a direction arrow, names of stops, and a moving ball pointing to the current stop, my daughter’s brain was still searching for the familiar left-to-right pattern.

And that is why her answer was 12^th (count from the left side the stop marked with yellow circle!, but the start of the trip is on the right side)

---

This story is a great example how people consume information embedded in the time and how they expect it to be displayed. It’s worth remembering that, in our culture, information is read from left to right and from top to bottom. When we work on reports, dashboards or any data visuals, the human brain uses built-in patterns, helping to store information and save energy. Following this simple rule significantly improves the user experience. 

Check out my other posts about importance of the time orientation in data visualization:

• another interesting case study
• simple rules to present categorical data and time

[1]https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3322406/

Advertisement

How to speed up information decoding by simple data visualization tricks – the story of one chart.

How many times have you struggled to quickly understand what a chart is presenting? It is something that I often experience in media when reading articles or watch some statistics on TV. Sometimes is extremely hard for me to make sense of what I see, just because I am not the subject matter expert and those data at a glance do not seem familiar. And let face it, I am a data person. What must feel ordinary people, who do not work with data on a daily basis and are not highly data literate?

This post is inspired by data visualisations in the article that I have read recently about the employment situation in the UK. You can find the link to the paper at the bottom of the post.

We are going to focus on three easy to introduce improvements to make any chart more readable, impactful, and thoughtful:

• Additional Axis labelling
• Annotation
• Preattentive Attributes                

As an example, we will improve the below chart that presents changes over years of staff availability index.

Additional Axis Labelling

I am not familiar with the staff availability index. From the title and footer of the chart, I understand that the higher, the better. However, that information could be served on the plate. Based on my experience, I can see an easy fix for such a case that speed up the cognitive work of my brain. Most of the time, when some charts are presented, they present some changes over time or comparisons between two or more phenomena. 

In this case, adding small arrows to the Y-axis and additional words describing axis directions give much more sense to the chart and improve the audience experience. Now the chart presents not only changes over time but informs the expected direction of change.

Annotation

There is a common myth that “Data speaks for itself”. No data can speak because it does not have a tongue. The responsibility of proper understanding of the message lies on the messenger side.  Another quick win is adding more text to the chart itself. Additional description or insight help people to process information more effectively and, thanks to visual presentation, make it easier to remember. 

I have added a sentence from the article next to the point that I have wanted to emphasise. The rich text pays attention to the audience eyes, and the soft grey line directs to the specific point on the chart.

Preattentive attributes

Each object on Earth has properties like shape, colour, size, position. This is what we notice without using conscious effort, and because we do not involve too much conscious effort, we must take advantage of it to decoding information faster. Thanks to them, we can guide the audience eyes through our data visualisation and point them exactly where we want.

Introducing a small red dot is a true game-changer for presenting information on the below chart. We can get this effect by taking off the line chart colour and add to the chart another object with a different shape (circle), size (the circle is significantly thicker than the line), and by adding contrasting colour (the red one). At the final stage, let us analyse our eyes movement. First of all, our eyes start looking at the chart with the title (that is why do not forget about titles! Never!). Then they go straight to the red dot. Just next to the red dot is an insight that explains that point.  Next, they track the line chart and finally look at additional Y-axis labelling. Now, our brain, after collecting all this information, can process them and make sense of those data.

I would recommend those three easy to remember and use tricks to uplift any data visualisation that will improve your audience experience.

The link to the article:

https://www.theguardian.com/business/2021/jul/08/uk-employers-struggle-with-worst-labour-shortage-since-1997?CMP=Share_AndroidApp_Other

Time orientation

Time orientation is crucial for the modern world to understand events and draw the correct conclusions.

The pre-industrial culture had not been so tided to time, and most often people perceived time in cycles as day-cycle or season-cycle. However, industrialization forced on us to create precise time systems and changed circularity to the linear phenomenon.

Currently, the majority of people live within time, and this time has for most of us one orientation from left to right and can not be reversible. It is one of human heuristics – mental shortcut, which helps us understand the world.

The example

Data visualizations best practices tell us to display time on the x-axis with left-right orientation (most of the culture except, e.g. Middle Eastern) and do not play with it especially when charts are going to be short displayed. In the end of August in Polish Public TV, a chart for unemployment rates was presented (see image below) with all possible misleading characteristics. I can not tell if it was intentional or not and politics are not the topic of this post, but let’s have a closer look at how this chart is designed and why it is designed wrong.

I have mentioned above that the human mind craves for mental shortcuts.  A quite possible scenario, in this case, can be that receiver reads only the first label for first bar from the left side on the x-axis and understands and remembers that on x-axis there are months of 2020 start from July (Lipiec 2020). The automated interpretation would be that two next bars represent data for two upcoming months, so August 2020 and September 2020. Of course, someone can raise a question in here “We don’t have data for September yet”, but my question is what a level of general data literacy and competency within society is? I am going even further and asking is it ethical to show data visualization for short time without a proper explanation of the graph? But it is a topic for another post. Going back to our example, the conclusion which can be seen is that the unemployment rate has decreased. Where is totally opposite.

However, let’s put ourselves in devil’s advocate shoes and consider, can we approach creatively presenting timeline or not? As I mentioned above, human eyes are used to interpret the timeline from left to right side. Due to that, it is good to keep that order. Sometimes we have a temptation to change it because for example, we would like to compare year over year change and we use last year data as a benchmark. However, that way of presenting data will not be intuitive for receivers. We must be very careful, when we are dealing with data associated with time.

How to fix it?

So how we can fix this visualisation?

First of all, let’s break years into two separate columns and give the time a proper order. Adding columns with years, we clearly indicate that we are dealing in here with two different time stamps. A title or a subtitle itself can help us emphasise that we are presenting a comparison between time points(July 2019 to July – June 2020), so don’t hesitate to include it. Also, I decluttered visualisation by removing background colour and 3d effects, which helps receivers focus only on data. To highlight the most current bar, I changed colour to orange.

All those changes enabled to present data story professionally and properly. Apart from all aesthetic aspects, data visualisation designers need to remember about ethics. The same as in other professions, data visualisation designers have their code of conduct.