Stereoscope 2018

Visualizing interpretation and qualitative data in literary studies

Team Prof. Dr. Jan Christoph Meister, Jan-Erik Stange, Rabea Kleymann in collaboration with Christian Laesser

Launch Project Website or demo


Stereoscope is a web-based prototype for visualizing two core processes of literary studies - interpretation of textual meaning and construction of arguments about texts. It was developed in the context of the 3DH research project at Universität Hamburg. In Stereoscope scholars can represent their manually created digital annotations with multiple visualizations to record and convey qualitative statements. Different visual representations of annotation data allow multiple perspectives which, in combination with comments and tags, provide the means to craft scholarly arguments about literary works and make them transparent to readers. I was responsible for the concept, design and development in close collaboration with literary scholars.


Scholarly activities like annotation, comparison and representation form an essential part of interpretative processes in literary studies. Many digital tools incorporate these activities, but do not allow for interpretative and particularly hermeneutic (the oldest form of interpretation) processes to happen in the digital realm. Why is that? In our research we argue that digital literary studies so far have been agnostic of the premises of hermeneutic theory and that in order to enable hermeneutic processes in digital tools, we need to develop tools that respect these premises. Here, data visualization can adopt a key role in that it supports interpretative activities and creates new perspectives beyond the traditional, text based hermeneutic practices.

Co-creation workshop for developing the four principles and their visual application

Four principles

In the course of the research project we developed four principles that help transform traditional data visualization into hermeneutic visualization, while respecting the premises of hermeneutic theory and methodology. Stereoscope is a result of a design process guided by these principles and serves as an example for a possible application of the principles.


The user interface of Stereoscope is separated into three parts that are tightly coupled. The text area on the left side holds the annotated text. Each annotation in the text is represented as a circle on the canvas in the middle. Interacting with circles affects the corresponding annotations in the text and vice versa. Different visualizations can be created on the canvas and saved as individual views on the right-hand side in the views area. Complemented with comments and tags these views can be arranged to form an argumentation.

Vind 2017

Visualization interfaces and user-centered design for complex databases

Team Prof. Boris Müller, Jan-Erik Stange, Katja Dittrich, Johannes Herseni


Digital knowledge management systems have become an essential tool for running large scale institutions and strategic planning. However, most systems lack an adequate software interface that enables users to visualize and directly interact with the data. The VIND research project at the University of Applied Sciences Potsdam applied a user-centered design approach to two data-driven knowledge management systems in use by a government department. The collaboration with the department allowed us to integrate all stakeholders involved in using, managing or developing the systems in the department or within the context of the department into the process. Apart from managing the project I was responsible for the conception and management of the user-centered design process, as well as the development of information architecture and interaction logic.

Discussion of results in co-creation workshop.

Material prepared for co-creation and paper prototype user test.

Qualitative research and co-creation

We kicked the project off by applying classical qualitative research methods well-known in the area of HCI. In this phase we led interviews and observed users with the help of contextual inquiries. We used the data we collected to develop personas and scenarios. Since we wanted a strong involvement of all stakeholders we conducted an early co-creation workshop to present and discuss personas and scenarios with the participants. The result of the workshop was a requirements definition that served as a guideline in the design process. Each design iteration was followed by another co-creation workshop, so we could be sure all stakeholders were on board with our decisions, but also had the chance to bring in their own ideas and discuss alternative solutions. On the department side this led to a strong sense of ownership and control over the whole process.


One of the most important requirements that we documented as a result of the first co-creation process was a modular interface for both systems, so they would easily adapt to varying user needs and profiles for different user types could be pre-configured. Related to this requirement was the need for multiple perspectives on one section of the data, like for example, being able to see the development of several indicators for one region at once. In the final designs for both systems this takes shape in the form of visualization widgets that can be arranged to answer individual needs and are all interconnected with each other. For example, filtering data in one widget immediately shows the effect on the data in the other widgets (in the scientific area of information visualization this is called "Multiple and Coordinated Views").

Prototyping and evaluation

To evaluate our designs we developed two advanced prototypes that covered almost the complete functionality of one system and in the second case the most important functionality. In total, three user tests were conducted during the project to evaluate concept and interface details and finally the system in daily use.

Novel City Maps 2015

A poetic view on the city

Launch Project Website or demo


Literary scholars interested in geographical features of literature usually rely on common generic mapping tools. These tools typically represent geographical coordinates as dots or areas on a map. Obviously, fictional places can't be shown on such maps. But more than that, these types of visualizations can't reveal anything about the relationships between locations as defined by the story. Novel City Maps is an experimental research project I worked on during my time at the Urban Complexity Lab of FH Potsdam that explores new ways of visually representing the construction of fictional and geographical space in literature. The project investigates how such kinds of visualizations might be beneficial to literary scholars as well as regular readers.

Three Berlin Novels

Since Berlin has been subjected to immense changes in the last century, it is an ideal candidate for comparing novels situated in the city. Depending on the time and author very different images of the city were prevalent. While the 1920ies were experienced as a time of political uncertainty and brutality, the modern metropolis also lured its inhabitants with countless promises. Only a couple of years later, the city had changed to a frosty atmosphere of terror during the reign of the National Socialists and prompted quite different motives in novels telling about that time. During the 1980ies, when the city was separated depending on where you lived, people would experience it either as an enclave of outsiders working on their art or music projects leading a slacker life or as citizens of East Berlin being pestered by the Stasi without the blessings of the capitalist world.
For each of these time periods I selected a popular novel representative of that time and turned it into a narrative map.

The three Berlin novels selected for this project: Berlin Alexanderplatz, Alone in Berlin and Berlin Blues.


The concept is based on the common notion in digital humanities and linguistics that with a high probability words occurring in textual proximity to each other might have a contentual connection. In a process of semiautomatic textual analysis I have extracted all mentioned places in three novels from these three very different times and transformed them into network datasets.


Change between locations in a story is often (though not always) connected to movement of characters. Sometimes the movement from place to place is rather abrupt, reminding one of the disorienting feeling of getting into a subway train at some place in the city and getting out at another without having a notion of the distance in between. I used this metaphor of transit maps to emphasize the sudden change of locations and the connection of places that are not related by geography but rather by the story. Each novel is represented with this new kind of narrative map as well as with a traditional geographical map.


Novel City Maps was well-received, especially by the general public interested in Berlin and/or living in the city. The project was featured in a four minute feature on public sector broadcaster RBB. Before the project website was launched and accessible to the broader public, it has been exhibited at two exhibitions in Berlin and in Baltimore.

A visitor of the group exhibition "Streams and Traces" in Berlin interacting with the visualization.

SaSER 2014

Visualization tools to help security experts monitor large computer networks

Team Prof. Reto Wettach, Johannes Landstorfer, Kim Albrecht, Sebastian Rauer

Prototype for detecting brute force attacks in network log files


Attacks on computer networks are getting increasingly complex, while the amount of data to be analyzed is steadily growing. This circumstance requires new techniques of monitoring network data. As a partner of the large EU project Eureka-SaSER the Interaction Design Lab of University of Applied Sciences Potsdam was investigating the potential of information visualization to support security experts’ tasks when monitoring complex computer networks. The aim of this process, based on the idea of »research through design«, was to establish guiding principles for the development of such visualizations. I was responsible for the conception, design and development of network security visualizations and accompanied the participative user-centered design process.

Participative design process

In a participative user-centered design process with network security experts we defined requirements for visualizations to use them as guiding principles for the development of several example visualization prototypes. These were discussed and evaluated with security experts and the results of these evaluations were used to iteratively refine our guiding principles.

Prototype for visualizing portscans and network scans


Concepts for our designs focused on three individual attack scenarios: Brute force attacks, port scans and amplification attacks. While the scenario on brute force attacks was directed towards individual network log files, the other two scenarios were concerned with netflow data. All visualization prototypes combined a general overview with a drill-down view, either by combining these in one visualization or by allowing a fast and seamless movement between these visualizations. In addition to this, various types of interactions with the data (selecting, filtering, zooming) offer a multitude of perspectives on the data increasing the chance to spot anomalies in the data.

Prototype for visualizing amplification attacks


The findings of the research project were published in two papers and presented on a well-renowned conference for information visualization in Paris (IEEE Vis '14).

Polizei Brandenburg 2012

Redesign of online communication portal

Team Prof. Dr. Frank Heidmann, Sebastian Meier


In 2011, the Interaction Design Lab was commissioned to guide the state police of Brandenburg through the redesign process of their online communication portal. The project started with initial usability studies of the existing portal, continued with an analysis of their target audiences and resulted in the redesign of the corporate design – including an overhaul of the logo, typography and color palette. All efforts were integrated in the final redesign of the overall web portal. My role included the development of the information architecture, the navigational concept and the screen design for the website.

Landing page and subpage »Vorbeugen & Schützen«


The new portal provides citizen with more convenient ways of getting in touch with the police. From getting a permit for a demonstration to reporting your stolen bike or car, all interaction and communication needs can be met with one unified interface. The new website is accessible from mobile devices, tablets as well as desktop devices, providing citizens with all the information they need, wherever and whenever they need them.

one.million.dots 2011

Visual exploration of library catalogs (Master thesis)


Digital library catalogs (OPACs – Online Public Access Catalogs) have been around since the 1980ies. Many usability issues that were present at the time can often still be witnessed in today's catalogs. However, there is an awareness for the need to design user-friendly interfaces and these issues are addressed in an increasing number of cases. In my master thesis, I was more interested in the question of how well these interfaces are oriented at actual needs and goals of researchers. Studying typical search behavior scholars exhibit I came to the conclusion that OPACs in their existing form do not answer the needs of scholars sufficiently and information visualization could help achieve a user experience more adequate to the scholarly search process.


My research had shown that librarians have a lot of data at one's disposal, but this data, e.g., classification systems and keywords, is predominantly used by the librarians themselves for organizational purposes. The relationships described by this data, however, can be considered a real treasure that, when visualized, offers the chance to visually explore the collection in various ways, thus creating a rich user experience. The library catalogue one.million.dots uses hierarchical classification data to create a treemap that serves as the foundation for the visualization. Search results and artifacts that are connected to the results via keywords, tags etc. are displayed as an additional layer on the treemap.