Logo
ScienceStack
Table of Contents
Fetching ...
Sign In

Wandercode: An Interaction Design for Code Recommenders to Reduce Information Overload, Ease Exploration, and Save Screen Space

Austin Z. Henley, David Shepherd, Scott D. Fleming

TL;DR

Wandercode addresses information overload in code-location recommendations by overlaying an interactive graph on the code editor. It introduces a graph-based, mixed-initiative design that overlays within the editor, supports pinning and expansion, and limits initial recommendations to reduce cognitive load. The authors implemented a Java/Atom prototype and conducted a within-subjects study showing faster task completion, lower cognitive load, and higher user satisfaction compared with a list-based control. The work contributes design dimensions for code recommenders and demonstrates a practical, space-efficient approach with potential for field studies and broader adoption.

Abstract

In this paper, we present Wandercode, a novel interaction design for recommender systems that recommend code locations to aid programmers in software development tasks. In particular, our design aims to improve upon prior designs by reducing information overload, by better supporting the exploration of recommendations, and by making more efficient use of screen space. During our design process, we developed a set of design dimensions to aid others in the design of code recommenders. To validate our design, we implemented a prototype of our design as an Atom code editor extension with support for the Java programming language, and conducted an empirical user evaluation comparing our graph-based Wandercode design to a control design representative of prior list-based interaction designs for code recommenders. The results showed that, compared with the control design, Wandercode helped participants complete tasks more quickly, reduced their cognitive load, and was viewed more favorably by participants.

Wandercode: An Interaction Design for Code Recommenders to Reduce Information Overload, Ease Exploration, and Save Screen Space

TL;DR

Wandercode addresses information overload in code-location recommendations by overlaying an interactive graph on the code editor. It introduces a graph-based, mixed-initiative design that overlays within the editor, supports pinning and expansion, and limits initial recommendations to reduce cognitive load. The authors implemented a Java/Atom prototype and conducted a within-subjects study showing faster task completion, lower cognitive load, and higher user satisfaction compared with a list-based control. The work contributes design dimensions for code recommenders and demonstrates a practical, space-efficient approach with potential for field studies and broader adoption.

Abstract

In this paper, we present Wandercode, a novel interaction design for recommender systems that recommend code locations to aid programmers in software development tasks. In particular, our design aims to improve upon prior designs by reducing information overload, by better supporting the exploration of recommendations, and by making more efficient use of screen space. During our design process, we developed a set of design dimensions to aid others in the design of code recommenders. To validate our design, we implemented a prototype of our design as an Atom code editor extension with support for the Java programming language, and conducted an empirical user evaluation comparing our graph-based Wandercode design to a control design representative of prior list-based interaction designs for code recommenders. The results showed that, compared with the control design, Wandercode helped participants complete tasks more quickly, reduced their cognitive load, and was viewed more favorably by participants.
Paper Structure (39 sections, 7 figures, 1 table)

This paper contains 39 sections, 7 figures, 1 table.

Table of Contents

  1. Introduction
  2. Background & Related Work
  3. Contemporary Programming Environments
  4. Recommender Systems for Code Locations
  5. Existing Interaction Designs and Their Drawbacks
  6. Wandercode
  7. Utilize Screen Space More Efficiently
  8. Reduce Information Overload
  9. Better Enable Exploration of Recommendations
  10. Design Dimensions
  11. Parent container and location
  12. Recommendation layout
  13. Window Modality
  14. Contextual information
  15. Relationship information
  16. ...and 24 more sections

Figures (7)

  • Figure 1: The Atom code editor with the (a) project explorer and (b) tabs of open documents. When the programmer moves the text cursor into (c) a method, then (d) Wandercode's graph of recommendations is displayed.
  • Figure 2: Close-up of Wandercode's graph of recommendations. The (a) three recommendations on the left call the (b) currently selected method of code. On the right (d) shows three recommendations that get called by the currently selected method. (c) Two buttons: one to pin the graph, preventing it from updating, and the other to expand the graph, showing more recommendations. Each recommendation shows the method name and class name, and clicking it will navigate to that code location.
  • Figure 3: Close-up of Wandercode's graph of recommendations that has been expanded. Wandercode will display up to 10 recommendations in this mode (i.e., 5 callers and 5 callees) This feature is enabled by clicking the expand button, shown in Fig. \ref{['fig-wandercode-graph']}c, and clicking it again will collapse the graph back.
  • Figure 4: Atom with the control extension displaying a list of recommendations. The list is sorted by top to bottom by relevancy, and each recommendation displays the method name and the class name. The highlighted recommendation is where the mouse is currently hovering.
  • Figure 5: Wandercode users completed tasks significantly faster than control users (smaller bars are better). Whiskers denote standard error.
  • ...and 2 more figures