InterLink: Linking Text with Code and Output in Computational Notebooks

TL;DR

InterLink is a plugin that improves the readability of computational notebooks by visually linking related text, code, and outputs, enhancing user understanding and navigation.

Contribution

The paper introduces InterLink, a novel notebook layout with visual links and interactions that better connect text, code, and outputs, based on user-centered design.

Findings

Users using InterLink were 13.6% more accurate in information retrieval.

InterLink's layout facilitates easier understanding of complex analyses.

The study demonstrates the effectiveness of visual relationship cues in notebooks.

Abstract

Computational notebooks, widely used for ad-hoc analysis and often shared with others, can be difficult to understand because the standard linear layout is not optimized for reading. In particular, related text, code, and outputs may be spread across the UI making it difficult to draw connections. In response, we introduce InterLink, a plugin designed to present the relationships between text, code, and outputs, thereby making notebooks easier to understand. In a formative study, we identify pain points and derive design requirements for identifying and navigating relationships among various pieces of information within notebooks. Based on these requirements, InterLink features a new layout that separates text from code and outputs into two columns. It uses visual links to signal relationships between text and associated code and outputs and offers interactions for navigating related pieces of information. In a user study with 12 participants, those using InterLink were 13.6% more accurate at finding and integrating information from complex analyses in computational notebooks. These results show the potential of notebook layouts that make them easier to understand.