Annotation and reasoning in networks: Support scientific literature analysis and documentation by digital process visualization.

Intro / TLDR;

We worked with the University of Applied Sciences Potsdam and the narratology department of the University of Hamburg in relation to the 3DH project to develop a new tool for narratological scientists working in textual studies. Instead of just designing around common scientific publishing practices, we had the opportunity to start new—taking an user-centered approach. This enabled us to come up with a new way of dealing with text-based annotation and reasoning which is not at all bound to literature studies.


To start exploring the work methods in the field of narratology studies we ran a workshop at the University of Hamburg. We had a mixed group of students, postgraduates, scientific assistants outline their typical work process on big papers, leaving the specifics on how to do it up to them. This led to a lot of different results ranging from analytical to creative—which was both informative and inspirational to us. Afterwards, we asked them to explain their journeys in front of the group, particularly what they liked about it and where they would wish to improve things.

Discussion in workshop
Our workshop in Hamburg

During the second task, we observed the group annotating and analyzing a short text printed out on paper, using common analogous tools like different pens and markers. We learned that workflows are highly individual and iterative. It stood out that besides the publication of results, the process is an important value in itself and there is an enormous need for the ability to document things digitally and share them with fellow scientists.

A narratological work process drawn on a paper 1
Participants drew their workflow (Task 1, selection)
A narratological work process drawn on a paper 2
A narratological work process drawn on a paper 3

To evaluate our findings we looked into key similarities and differences between the observed workflows and funneled them into different customer journeys. After digging deeper by describing Pains, Gains, and Values for the individual work types, we formed “How might we…” questions, which brought us to the ideation phase.

How might we
  • … enable joint work on a research question?
  • … involve visualization tools in the work process?
  • … enable modular integration of tools for distant and close reading?
  • … create sustainable added value through digital opportunities?
  • … make it possible to distinguish between provable and non-assignable findings?
  • … make the (scientific/historical) context of work visible?
  • … protect the intellectual achievement of individual literary scholars?
  • … convince even more conservative scientists of collaborative work?
  • … display different levels of structure in the primary text’s presentation (macro/microstructures)?
  • … support iterative work?
  • … strengthen the digital “portfolio” of a scientist?
Our “How might we…” questions.

We used Figma to prototype our basic concept including the features we generated in the ideation phase before going back to Hamburg for a focus group test. Testing in this early state was very helpful to identify misconceptions and further needs.

After we had worked the results into the concept we split the team. Anja and Tim continued with Visual Design as Sebastian and I started building a fully functional web prototype to bring user tests to the next level. Having done all preceding work together in workshop sessions we now started to organize our progress by using a digital Kanban board via Asana.

The concept

Our concept’s interface has a basic three column layout: A primary text source (1) on the left, an editorial multimedia fragment space (2) in the center and a result text (3) on the right.

A schematic presentation of the concept’s interface
A basic three column layout outlines the main working process

The work starts on the primary text source where the user can select words, phrases and whole paragraphs that he/she wants to investigate in his/her research and create a new fragment referencing that selection. He/she can also add it to an existing fragment. The reference between text passages and fragments is visualized by a line connecting them.

A fragment represents a new thought that a user wants to record. Fragments can not only have references to the primary text but can also connect to one or multiple other fragments. Therefore the research can be extended and developed while the steps to a conclusion are preserved and visualized. This helps to compare different approaches of working with literary texts, it can be used in teaching common practices to students and it makes it easier to reproduce the proceeding.

Screenshot of wireframe
Wireframe: Select phrase and add a fragment with a reference
Connector’s visual design variants
Design iterations for connectors between primary text and fragments

Fragments are designed to contain different types of content. They can simply hold a short text as a note or work as an annotation or tag that groups multiple passages or fragments together. More complex, they can function as a distant reading tool that receives the referenced words as input and performs an action on them like counting all occurrences in the whole primary text. This introduces the concept of “data flow” between fragments. A fragment has access to all data that exists down the chain of its references. For example, this can be used to create a new fragment that displays the result of two other fragments with distant reading results in one bar chart.

Screenshot of wireframe
Wireframe: Add an existing tag to a selection
Screenshot of wireframe
Wireframe: Analyze word occurrences with distant reading tools

While the creation of fragments is already an artifact of the user’s work by itself, it often is required to have a written text that includes the results of the research. The tool has a dedicated space for this in the right column where existing fragments like important notes or visualizations can be included.

Screenshot of wireframe
Wireframe: Embed visualizations in the Result text

Wireframes and prototypes

We tested some basic workflows in an interactive prototype with static screens.

Open workflows’ prototype

(Figma needs a while to load screens)

In addition, we created a web prototype to test layout and positioning in the fragment space.

Open fragment space web prototype

(Developed and tested exclusively with Google Chrome Version 70)

Next Steps

We’re currently preparing to present our proof of concept at different conferences to gauge more feedback from the community of Digital Humanities and to test our prototype. We would then like to move on with refining the status quo. In addition, we’re planning to continue our work on features we haven’t been able to implement yet—e.g. in-app collaboration and the inclusion of secondary sources.

Project name
Project timeframe
Nov 2017 – Oct 2018
My services
User Research, Workshop, Concept & Wireframes, UX Design

Next project

I worked on making cultural archives more accessible to experts and non-experts alike.

I’m looking forward to hear from you at mail@casparkirsch.de or on LinkedIn / Twitter.