Code Bubbles: Rethinking the User Interface Paradigm of Integrated Development Environments Andrew Bragdon1, Steven P
Total Page:16
File Type:pdf, Size:1020Kb
Code Bubbles: Rethinking the User Interface Paradigm of Integrated Development Environments Andrew Bragdon1, Steven P. Reiss1, Robert Zeleznik1, Suman Karumuri1, William Cheung1, Joshua Kaplan1, Christopher Coleman1, Ferdi Adeputra1, Joseph J. LaViola Jr.2 1Brown University 2University of Central Florida Department of Computer Science School of EECS {acb, spr, bcz, suman, jak2, wcheung, cjc3, [email protected] fadeputr}@cs.brown.edu ABSTRACT tons, etc. Perhaps as a result, programmers may spend on average Today’s integrated development environments (IDEs) are ham- 35% of their time in IDEs actively navigating among working set pered by their dependence on files and file-based editing. We fragments [2], since they can only easily see one or two fragments propose a novel user interface that is based on collections of at a time. lightweight editable fragments, called bubbles, which when In this paper, we argue in favor of a new approach, where the IDE grouped together form concurrently visible working sets. In this shows multiple editable fragments simultaneously, letting the user paper we describe the design of a prototype IDE user interface for see and work with complete working sets. The result reduces na- Java based on working sets. A quantitative evaluation shows that vigations and supports new higher-level interactions over and developers could expect to view a sizeable number of functions within the working set. concurrently with relatively few UI operations. A qualitative user Our approach is founded on the metaphor of a bubble – a fully evaluation with 23 professional developers indicates a high level editable and interactive view of a fragment such as a function, of excitement, interest, and potential benefits and uses. method documentation, or debugging display. Bubbles, in contrast Categories and Subject Descriptors to windows, have minimal border decoration, avoid clipping their contents by using automatic code reflow and elision, and do not D.2.6 [Software Engineering]: Programming Environments – overlap but instead push each other out of the way. Bubbles exist integrated environments. in a large virtual space where a cluster of bubbles comprises a General Terms concurrently visible working set. Human Factors In [4] we developed the bubble metaphor (recapped in Section 5) Keywords and associated interaction primitives as part of an iterative design Integrated development environments, concurrent views, working and testing process. A further quantitative evaluation showed that set, source code, bubbles, navigation, debugging, human factors. users were able to perform complex code understanding tasks significantly more efficiently when using bubbles than when using 1. INTRODUCTION Eclipse due to reduced navigation. Programmers spend between 60-90% of their time reading and In this paper, we extend the bubble metaphor to build a prototype navigating code and other data sources [1]. Programmers form working set-based user interface for an IDE and constituent tools. working sets of one or more fragments corresponding to places of The goal of this paper is to explore and understand the merits, interest [2]; with larger code bases, these fragments are scattered usability considerations, and potential uses of this novel user in- across multiple methods in multiple classes. Viewing these frag- terface paradigm at the IDE system level. Since the problem space ments concurrently is likely to be beneficial, as it has been shown addressed by contemporary IDEs is large, we chose a handful of that concurrent views should be used for tasks in which visual core areas to be: high-impact and broadly applicable to the majori- comparisons must be made between parts that have greater com- ty of developers; to represent a sizeable part of the most common- plexity than can be held in limited working memory [3]. ly used functionality; and based on our formative evaluations in Because contemporary integrated development environments developing the metaphor [4] as an initial starting point, including: (IDEs) are file-based it is difficult to create and maintain a view in Reading, editing and navigating source code which multiple fragments are visible simultaneously. This re- Tagging and discovering related functions quires the programmer to manually and repeatedly perform nu- Interruption recovery and multitasking merous interactions to place, resize, scroll, and reflow a different file window for each fragment. Instead, IDEs are optimized for Breakpoint debugging (single-threaded) switching among different views using tabs, forward/back but- Sharing and explaining information Although this list is by no means exhaustive, we feel this focus is Permission to make digital or hard copies of all or part of this work for sufficiently broad to shed light on the merit, usability issues, and personal or classroom use is granted without fee provided that copies are potential uses of a working set-based IDE user interface. not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy The contributions of this paper are threefold: otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. The design of a novel IDE user interface, and associated ICSE '10, May 2-8, 2010, Cape Town, South Africa development tools, based on working sets of bubbles that has Copyright © 2010 ACM 978-1-60558-719-6/10/05 ... $10.00 the potential to improve a broad range of development tasks 455 Figure 1. The Code Bubbles IDE. See section 2 below, Scenario, and section 6 below, IDE User Interface, below. Resolution: 1920x1200 (space reserved for taskbar). A quantitative analysis of the applicability and scalability of next to the bubble – any overlapped bubbles are automatically Code Bubbles for sizeable open-source projects repositioned to avoid overlap. The bubble stack shows the lines of A pilot evaluation with 23 professional developers indicating code containing the references. Jane can hover over these lines to a very high level of excitement and interest, pointing to po- preview their containing methods or click on them to expand in- tential improvements, and motivating future work line (1-G). When she finds the one she wants, she dismisses the rest of the stack while leaving the bubble of interest. 2. SCENARIO Here we describe a usage scenario of the system as a whole. A Jane instinctively moves related bubbles near each other to gain narrated video scenario is available online1. Screenshots of the an overview of the code structure. The automatic layout manager Code Bubbles IDE interface are shown in Figures 1 and 2; note ensures that any bubbles obscured are automatically moved to that the screenshots are intended to disclose a wide array of fea- eliminate overlap. Moving the bubbles together implicitly creates tures and so do not directly match the scenario narrative. groups, indicated by an automatically assigned colored halo (1-E) that surrounds the contained bubbles. Jane can enter a name for Jane is planning to change the image uploading feature of a large any group by typing into its empty title box; in this case, she de- content management system written in Java to supplement the cides to name her group of bubbles “Image sizing and measur- existing manual image resizing feature with support for automatic ing,” both to help her remember the purpose of these bubbles resizing. The image uploading feature is complex, spanning do- now, and to be able find it in the future, if needed. zens of functions across twelve classes. Jane, who is not that fa- miliar with the large code base, wants to avoid being confused by Just then, her coworker Jim stops by, interrupting her with a ques- reading code unrelated to the change. tion about a feature she had written months ago within the same content management project. She doesn't want to disrupt the Jane knows that the image upload begins at a specific event hand- layout of her current working set so she looks for an open area in ler, so she clicks to bring up the popup search box (Figure 1-N) the workspace bar at the top of the display (1-A), which shows a and types several substrings which filter the list of classes and bird’s eye view of the entire workspace, and clicks to jump to an methods (1-O). She only has to type a few characters to isolate unused area. She combines popup searching for methods by name and then open the method she wants as a code bubble (1-K). She with clicking on method calls to quickly create a panorama of the right-clicks on method calls within the bubble to open the called code related to Jim’s question. She zooms in, making it easier for functions in separate bubbles (1-L) that group together, but do not Jim to read the code over her shoulder, and points out the code overlap; each calling relationship is automatically represented structure. Jim is confused by one point, so she places a note bub- with a connecting arrow (1-M). Within seconds, Jane has opened ble (1-D) next to the methods and types some items for him to a working set of 6 method bubbles related to image resizing. look up later. When they are done, Jane uses the share feature to Interested in a particular variable, she executes Find All Refer- e-mail Jim the working set of bubbles as an XML attachment that ences on a variable within a bubble to create a bubble stack (1-F) he can later open in his own Code Bubbles instance. 1 http://www.cs.brown.edu/people/acb/videos/codebubbles.mov 456 Jane then clicks on her previous working set in the workspace bar Bubbles make use of code elision and code reflow. Most modern (1-B) to return to her previous task.