In 2013 — when Superdot was still called YAAY — our studio won a prize in a competition by ARCH+ and the Bauhaus Dessau Foundation to visualize global injustice. We used a data set that the bank UBS has been collecting since the 1970s on the incomes of professional groups and consumer prices in various metropolises around the world. The resulting poster series makes the different incomes visible by means of a specially developed chart type and combines this with storytelling to convey to the audience the exciting stories that lie in the data. Last year we self-initiated a digital version of this project and presented this interactive data story to the public for the first time at the Vienna Design Week. In this article we highlight on the one hand the potential of innovative chart types using the example of the «scissor chart» we developed. On the other hand, we describe our approach chosen in this project to make data in digital space interactively experienceable by means of innovative UX and UI design.
The development of a new chart type — the scissor chart
Even today, Otto Neurath’s vision from the first half of the 20th century is still very relevant, namely to inform a broad public about socially relevant issues based on data and facts, using the medium of data visualization. Although it is pleasing that since then the visualization of numbers has become more and more popular, there is also a drawback. This is because the very common pie charts, bar charts and line charts are used so frequently that they can seem uninteresting to the audience. Precisely because they are used for any topic, they are not able to draw the attention of an audience to the actual topic. To counteract this, we have set ourselves the task of developing new chart types and new forms of data visualization that represent not only the numbers, but also the topic itself.
Thus, since our data story is thematically neither about bars nor about pies, but about income differences, we did not use bar or pie charts. Instead, we developed the scissor chart, based on the german term «Einkommensschere», which is widely used in German-speaking countries and translates as «income scissors». This term is quite similar to the english term «income gap» and describes the phenomenon when the incomes of different occupational groups diverge widely.
Each occupational group shown is represented by its own color and a point on the wage scale. Here, the highest and the lowest of the five incomes define the two peaks of an open scissors. The two points are connected by a line kinked in the middle. This makes the mean value between the two wage extremes visible on the scale. The other three occupational groups are now arranged along this slanted line. It thus becomes visible: How wide is the income gap? What is the general wage level of these five occupational groups? What are the occupations with the highest and lowest incomes? How do the remaining occupations position themselves within the income gap?
Because the common concept of the «Einkommensschere» is represented in the scissor chart, it is intuitively understandable to the audience, even though they are seeing this chart type for the first time. So, compared to conventional charts, an additional learning effect occurs with a topic-related innovative chart type, as the topic and the data can be perceived at the same time.
Data storytelling and data interaction
The goal in digitizing this project was to interactively engage the target audience in the data story. So the task of the digitized version was to introduce the topic of income inequality, explain the chart type, point out different exciting ways to look at the data, and motivate the user to explore the data independently.
Unlike the poster, where all the information is visible at once, in the digital version we take the user step-by-step through the data story. The pace can be decided individually, but the order is predetermined. The data story is structured into ten pages that you can “flip” through. The first three pages use the scissor chart to introduce the topic of wage inequality in cities and at the same time familiarize the reader with how the scissor chart works. This is followed by three pairs of pages, each of which highlights a particularly interesting example from the data on the first page and allows the user to explore the data independently and interactively on the second page based on this example. In each of these three pairs of pages, the complexity of the data increases: First, only individual cities are looked at, then two cities at a time are contrasted for comparison, and finally, in each case, you see the 2018 income gap and the 1988 income gap.
Here you can see the interactive data visualization as screenshots:
The transitions from one page to the next are accompanied by different types of animations. On the one hand, these have the function of drawing the viewer’s attention to certain levels of information and details. On the other hand, the animations also serve to make the overall experience more varied and entertaining. Since every interaction of the user triggers an animation, it is exciting to click and swipe and see what happens. So the interaction is not just about getting information, but also has a playful element.
On the level of data visualization as well as on the level of user interaction and user experience, an innovative, aesthetic and playful approach promotes a stimulated engagement of the target audience with the information. This approach is promising in our time for the following reasons:
- More data is available than ever before due to trends such as digitalization, big data and open data.
- In the face of a proliferation of the post-factual, there is a great social interest in communicating and making facts accessible through data, which for example became very clear during the corona pandemic.
- Without innovative communication strategies, dry numbers have a difficult time in the fast-moving attention economy, which is strongly influenced by images and headlines.
The new Out of Balance poster
To coincide with the release of the digital «Out of Balance App», we have also produced a new poster version with up-to-date figures. The print version is already out of stock, but you can download a PDF version here for free.