Drawing the Data Interface

Using pen and paper for designing innovative data visualisation interfaces

Boris Müller
Nov 24 · 10 min read

Data visualisation is one of the most exciting and experimental areas in digital design. Creating complex, meaningful and visually intriguing images is a formidable challenge for every designer. By applying strategies from information design and generative design, it is possible to create data driven visualisations that are both insightful and enticing. The work of designers like Moritz Stefaner, Nadieh Bremer, Kim Albrecht or Stefanie Posavec (and many others) demonstrate the power of design-driven data visualisations.

Project Ukko — Seasonal wind predictions for the energy sector by Moritz Stefaner

An often heard critique of design-driven data visualisations is that the designer places herself or himself between the image and its significance, suggesting that the design influences the way we interpret the data. However, as I have pointed out before, every form of visual representation — even the most boring bar chart — is a manifestation of cultural image production. Data visualisations are always cultural images. There are no “pure” forms of data visualisations, just more common and more uncommon ones. If you look at the history of information visualisation (I highly recommend “The History of Information Graphics” by Sandra Rendgen), you will find an impressive richness and variety of visual representations. Translating data into images has always been a cultural activity, not a technical one. Like it or not — it is impossible to remove design from a visualisation.

Visualisation of crop statistics from 1905 — two pages from “The History of Information Graphics” by Sandra Rendgen

There is, however, one tendency in data-driven visualisations that I find slightly problematic — and that is the general neglect of the interface and the interaction design.

My impression is that there is currently a very strong focus on the visual quality of the visualisation while the interface that controls the visualisation receives much less attention. This is often due to a lack of resources. But it is not something I am entirely happy with.

The user interface of an interactive data visualisation is often realised as a collection of widgets that enable users to manipulate individual indicators or data views. This kind of interface provides a certain amount of control, but it feels like it was slapped on in the last stage of the design process. And even if the widgets are well-designed, they cannot hide the fact that they separate the user from the visualisation. Conceptually, the design of the visual representation and the design of the interaction with the data are often treated as two different questions. And that is a problem.

One of the most fundamental premises of interaction design is the concept of direct manipulation. On a PC, you don’t use a menu to move a file from location A to location B. You grab it, drag it and drop it. You don’t specify the position of a word in a text file, you select it and change it. In an image editor, you pick a tool and draw on the virtual canvas.

The concept of direct manipulation was introduced in the early 1980s with the first graphical user interfaces of the Xerox Star. Essential for it was the deep relationship between an image and its associated actions. As Alan Kay famously pointed out: “Doing with images creates symbols”.

Xerox Star 6085 user interface (Source: “The Xerox ‘Star‘: A Retrospective”)

In a sense, the desktop of the Xerox Star is an interactive information space. It is not very data driven — there are no animated icons and just a little dynamic information. But it makes very clear that the representation of information and manipulation of information happens in the same space! The sum of the desktop elements is not just a representation of a computer system, it is a representation and an interface for the system. The desktop metaphor succeeds in integrating visualisation and interaction.

My impression is that this kind of deep conceptual integration between the visual and the interaction is missing in many data visualisations. Yet I believe that exactly this integration is essential for progress and further developments in our field. As data visualisations become more widespread, we — as designers — have to make the leap from designing visual representations to designing interactive data spaces. A good visualisation should also be a good user interface.

Obviously, there are already visualisations out there that address this subject in innovative and creative ways. I would like to single out the visualisation Coins that was designed and developed by Marian Dörk, Flavio Gortana, Daniela Guhlmann and Franziska von Tenspolde at the UCLAB in Potsdam.

Coins — an interactive visualisation of a numismatic collection.

“Coins” is a collaboration with the Münzkabinett Berlin — one of the largest numismatic collections in the world. The aim of the visualisation was to develop alternative and interactive arrangements of the collection and provide the users with a playful experience while they explore the collection.

In its initial state, the visualisation is just a large unordered heap with thousands of coins. Users can zoom in, select a coin and move it somewhere else. So every coin is a virtual entity that can be manipulated by the user. If you are very patient, you can create a stack of golden coins by yourself.

However, it is also possible to create new visual arrangements based on a number of criteria. Each coin has physical properties like size and material. Furthermore, each coin provides historical context like its minting place. By selecting a property, the coins are organised into separate piles depending on their properties. For example, sorting them by material leads to a visualisation that immediately informs the user about which metals were used for making the coins and how frequently they were used. When a parameter of the layout is changed, all coins gradually rearrange themselves, creating a beautiful transition.

So in a sense, the project is not a visualisation about coins. The coins itself are the visualisation.

This idea — that information and interaction can take place in one conceptual space — was something I wanted to explore further with my students.

The Data Interface Class

In the summer term 2019, I taught a class on the integration of data visualisation and interaction design at my university in Potsdam. The briefing of the students was based on my above observations. The assignment was to create a project that is both visualisation and interface.

An interesting challenge was to find the right tools for the design process. Nowadays, screen designers are in the privileged position of choosing from a number of really good screen design applications such as Sketch, Figma or Adobe XD. The problem with these tools however is that they nudge you towards certain designs. It is fairly easy to create a pixel-perfect design for iOS 13 on iPhone 11 in Sketch — but much harder to come up with a unique design that does not rely on existing patterns.

Coding is also problematic. While it is a great way to explore datasets and create convincing representations of data, it is technically challenging and also heavily relies on libraries and frameworks that also nudge the designers and developers in a certain direction.

In the end, the choice for the right tools was very simple: pen and paper. For the first half of the class, the students were only allowed to draw. Designs had to be done and presented on paper.

UX Sketching workshop with Eva-Lotta Lamm

This was not trivial. So in order to enhance our drawing skills, I invited Eva-Lotta Lamm for a UX sketching workshop. The aim of the workshop was to learn tricks and methodologies for sketching user interfaces as well as interactions and animations.

For the mid-term presentation, the students had to prepare a large and detailed drawing that would clearly and beautifully explain their concept. The aim was to produce a drawing of the highest aesthetic quality.

Using just pen and paper for the design process proved to be an excellent experience. During this time we drew a lot of inspiration from designers like Giorgia Lupi and Stefanie Posavec and did a creative workshop with Moritz Stefaner.

Drawing allowed the students to quickly sketch out ideas, but was powerful enough to explore more complicated interactions. Especially the detailed drawings were very interesting. Quick sketches are great for communicating ideas but they have a high degree of ambiguity regarding the implementation. The detailed drawings took a lot of time but it forced the students to be as specific as possible. After the long drawing phase, the switch to screen design applications, animation and coding was surprisingly easy.

The Projects

All resulting projects can be found on our project website. However, I selected three projects that demonstrate three different approaches to the assignment.

Organella — Biodiversity for beginners

A mobile application that invites anyone to discover biodiversity data. By Andrea Biedermann, Diana Gert, Dimitar Ruszev and Paul Roeder

Productively engaging with biodiversity data is complex, requires experience and scientific knowledge. The aim of Organella is to create an experimental user interface that provides a playful, interactive and visual access to the world of the Global Biodiversity Information Facility (GIBF).

The interface of Organella is based on circular data spheres, that can contain different data views. Initially, users see a map that helps them to locate occurrences and groups (occurrences sharing the same geospatial coordinates) in their surrounding. The occurrences found in the map can be pulled and extracted from the base sphere. This interaction forms new entities that can be used to group, organise or analyse occurrences. By dragging manipulators (filters) inside these circles, the user can alter the visual representation and arrangement of the data according to different criteria represented in the GBIF dataset, for instance, taxonomic attributes or time of record. In this way, one can discover relationships among occurrences or correlate geospatial information at a micro-level.

View the full documentation of Organella

Data Resonance Imaging

Exploring the history and collaboration patterns in a shared folder. By Marces William Nitsch, Samuel Weiß and Marius Wies

On a computer, shared folders have become the backbone for collaborative working. A regular file system, however, doesn’t live up to the demands of a productive collaborative space. It is no longer enough to know where a file is located. Users need more contextual information like who was working when on which file. Furthermore, jumping back in the project timeline and reading the communication in the team that is related to specific files is often essential for understanding and modifying the current state of the project.

This problem was the starting point for the Data Resonance Imaging project. The project investigates how a visual representation of file properties and histories as well as an associated group chats can support users in understanding and using the file structure. For this project, a real shared folder on Google Drive was used as a reference.

Data Resonance Imaging creates a visual model of a “project flow”. New files are created, old ones deleted. As the activity shifts from file A to file B, collaboration patterns emerge. With DRI, it is possible to target specific temporal points in the file system history and examine the context of the selected time frame. Keywords and highlights from the group chat provide the users with contextual information. The visual representation of file properties like “activity” (the amount of file operations per time frame) support the understanding of the project flow.

View the full documentation of Data Resonance Imaging

Gitread

A visual and interactive access to a Git repository. By Alvaro Garcia, Nadezda Kuzmina and Yaron Zimmermann

Collaborative software development is a complex process. When a team of developers work on the same project, it is crucial to track all changes in the code and to make all code explorations (“branches”) transparent, and to have a clear and concise file structure.

All this can be technically achieved with established software tools like Git. These tools, however, are not very visual. They provide a great conceptual model for developing software in teams — but they don’t make the relationships and the states of the assets transparent.

The aim of the project Gitread is to create a visual layer for the version control software Git. Gitread represents code files in a clear visual form and shows file calls among the code. The Gitread visualisation reveals network structures and enables deeper and quicker understanding of the code as a whole. Commit history is discoverable on hover and single code lines may be compared and reverted. On demand, more meta data is being displayed among the contributor. Usually, file hierarchies are visualised by directories. In Gitread, path derived hierarchy is represented by a slash “/” and files of the same kind are grouped automatically.

View the full documentation of Gitread


All projects were created in the summer term 2019 at the Interface Design programme of the University of Applied Sciences Potsdam. Many thanks to Eva-Lotta Lamm, Moritz Stefaner and Jonas Parnow for their input and feedback!

Boris Müller

Written by

Professor for Interaction Design at FH Potsdam, co-director of Urban Complexity Lab | http://uclab.fh-potsdam.de | http://esono.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade