Drawing the Data Interface
A look at using pen and paper to design innovative data visualization interfaces
Data visualization 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 visualizations that are both insightful and enticing. The work of designers like Moritz Stefaner, Nadieh Bremer, Kim Albrecht, and Stefanie Posavec (and many others) demonstrate the power of design-driven data visualizations.
A common critique of design-driven data visualizations is that the designer places themself 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 visualizations are always cultural images. There are no “pure” forms of data visualizations, just more common and less common ones. If you look at the history of information visualization (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 visualization.
There is, however, one tendency in data-driven visualizations 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 visualization while the interface that controls the visualization 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 visualization is often realized 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 visualization. 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.”
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 it 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 visualization and interaction.
My impression is that this kind of deep conceptual integration between the visual and the interaction is missing in many data visualizations. Yet I believe that exactly this integration is essential for progress and further developments in our field. As data visualizations become more widespread, we as designers have to make the leap from designing visual representations to designing interactive data spaces. A good visualization should also entail a good user interface.
Obviously, there are already visualizations out there that address this subject in innovative and creative ways. I would like to single out the visualization Coins that was designed and developed by Marian Dörk, Flavio Gortana, Daniela Guhlmann, and Franziska von Tenspolde at the UCLAB in Potsdam.
Coins is a collaboration with the Münzkabinett Berlin, one of the largest numismatic collections in the world. The aim of the visualization was to develop alternative and interactive arrangements of the collection and provide users with a playful experience while they explore it.
In its initial state, the visualization 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 an entire stack of golden coins.
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, and each provides historical context like its minting place. When you select a property, the coins are organized into separate piles depending on their properties. For example, sorting them by material leads to a visualization 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 visualization about coins. The coins are the visualization. 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 2019 summer term, I taught a class on the integration of data visualization 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 visualization 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 toward certain designs. It is fairly easy to create a pixel-perfect design for iOS 13 on iPhone 11 in Sketch, but it’s 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 of 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.
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 it was powerful enough to explore more complicated interactions. The detailed drawings in particular 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.
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 and 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 (GBIF).
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 surroundings. 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, organize, or analyze 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 communications among 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 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) supports the understanding of the project flow.
View the full documentation of Data Resonance Imaging.
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 visualization 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 metadata is being displayed among the contributors. Usually, file hierarchies are visualized 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 2019 summer term at the Interface Design program of the University of Applied Sciences Potsdam. Many thanks to Eva-Lotta Lamm, Moritz Stefaner, and Jonas Parnow for their input and feedback!