Code Bubbles

Overview

Developers spend significant time reading and navigating code fragments spread across multiple locations. The file-based nature of contemporary IDEs makes it prohibitively difficult to create and maintain a simultaneous view of such fragments. Code Bubbles proposes a user interface metaphor for code understanding and maintenance based on collections of lightweight, editable fragments called bubbles, which form concurrently visible working sets.

The essential goal is to make it easier for developers to see many fragments of code, or other information, at once without having to navigate back and forth. Each fragment is shown in a bubble.

Authorship

Developed at Brown University by Andrew Bragdon, Robert Zeleznik, Steven P. Reiss, Suman Karumuri, William Cheung, Joshua Kaplan, Christopher Coleman, and Ferdi Adeputra, with Joseph J. LaViola Jr.

Published twice in 2010. "Code Bubbles: A Working Set-based Interface for Code Understanding and Maintenance," CHI 2010, Atlanta, pages 2503 to 2512. And "Code Bubbles: Rethinking the User Interface Paradigm of Integrated Development Environments," ICSE 2010, Cape Town. A research demonstration appeared at ICSE 2010 volume 2, pages 293 to 296.

The problem

The premise is stated plainly in the ICSE paper: today's integrated development environments are hampered by their dependence on files and file-based editing.

The file is a storage unit that became a display unit. Code that belongs together conceptually, a function and the three functions it calls, is stored in whatever files the language and the project structure put it in, and the editor shows one file at a time. Understanding a call chain therefore requires moving back and forth between locations, and each move discards the previous view.

The papers cite supporting studies on this: how Java developers actually use Eclipse, how effectively developers investigate source code, and path exploration during code navigation.

The interface

A bubble holds a single fragment, typically a function, and is editable in place. Bubbles sit on a continuous two-dimensional surface rather than in windows.

The mechanics described in the paper: a bubble is opened via a pop-up search box; opening the definition of something inside a bubble creates another bubble beside it, and related bubbles are automatically grouped; a large working set can include a bubble stack of references; an overview appears in the panning bar; and hovering gives a preview.

Two design decisions distinguish it from earlier fragment-based systems. A tiling assistant prevents fragments from overlapping, and code reflows automatically to fit the bubble.

Precedents

The authors are explicit about their lineage. Working with program fragments rather than files was explored in Reiss's own Desert environment, and appears in IBM's VisualAge and CMU's Sheets hypercode editor, all loosely based on non-file-based languages such as Xerox's Smalltalk and Lisp.

Their claim is that none of those systems provided either a tiling assistant to avoid fragment overlap or a continuous desktop, and that these omissions, together with choices such as not reflowing code automatically, limited their usability.

Results

The CHI paper reports that bubbles significantly improved code understanding time while reducing navigation interactions compared with a widely used IDE, across two controlled tasks.

The ICSE quantitative evaluation found developers could expect to view a sizeable number of functions concurrently with relatively few UI operations, and a qualitative evaluation with 23 professional developers reported a high level of excitement, interest, and perceived benefit.

Afterwards

Microsoft built the paradigm into a shipping product. Debugger Canvas, reported at ICSE 2012 by Robert DeLine, Bragdon, Kael Rowan, Jens Jacobsen, and Reiss, documented industrial experience with the code bubbles approach. It shipped as a Visual Studio 2010 Ultimate Power Tool and was later discontinued.

Reiss continued the work at Brown, publishing on plugging in and into code bubbles in 2012, integrating S6 code search with it in 2013, and demonstrating visualisations of code bubbles the same year.

Relevance

The interesting part of Code Bubbles is what it treats as the unit of work. A file is a unit convenient for a filesystem. A working set is a unit convenient for a person holding a problem in their head, and the two coincide only by accident.

That distinction generalises well beyond code. Most software presents information in the units the storage layer uses, and expects the person to reassemble their own unit by navigating. Each navigation costs the working memory the person had accumulated, which is the cost Code Bubbles measured and removed.

The related question is why it did not become the default despite measured improvements and enthusiastic evaluations. The answer is the same one Underkoffler gave about g-speak: an interface paradigm that requires everyone to relearn how they work faces a switching cost that no per-task improvement easily covers.

Related Reading

• Douglas Engelbart
• Mother of All Demos
• User experience design
• The Design of Everyday Things
• Designing Interfaces: Patterns for Effective Interaction Design
• Frictional Surfaces
• Information Anxiety 2
• Envisioning Information
• The Visual Display of Quantitative Information
• Everything Is Miscellaneous: The Power of the New Digital Disorder
• Minority Report
• Mirror Worlds: or the Day Software Puts the Universe in a Shoebox...How It Will Happen and What It Will Mean
• Computer Lib
• Architectural Intelligence
• Equipotential Space: Freedom in Architecture

External Links

• Code Bubbles project site, Brown University
• CHI 2010 paper, full text PDF