Understanding the Effects of Code Presentation
Total Page：16
File Type：pdf, Size：1020Kb
Understanding the Effects of Code Presentation Jason T. Jacques Per Ola Kristensson Department of Engineering University of Cambridge, UK fjtj21,[email protected] Abstract 2. Background The majority of software is still written using text-based Understanding and improving the process of reading text on programming languages. With today’s large, high-resolution a display is not a problem unique to software developers. Op- color displays, developers have devised their own “folk de- timizing the presentation of symbols on displays is essential sign” methodologies to exploit these advances. As software to maximize accuracy and minimize discomfort. Early work becomes more and more critical to everyday life, support- by Radl [10] investigated how green, white and yellow phos- ing developers in rapidly producing and revising code accu- phors used in contemporary VDUs (visual display units) af- rately should be a priority. We consider how layout, type- fected transcription error rates. The author concludes that faces, anti-aliasing, syntax highlighting, and semantic high- around the optimal wavelength of 555 nm, brightness and lighting might impact developer efficiency and accuracy. contrast take over as the significant determinant of accuracy. Radl also notes that color preference “seems to be caused Keywords software visualization, syntax highlighting, pro- mainly by psychological factors rather than by physiologi- gramming cal mechanisms” [10]. The limitations of early display technologies lead to in- 1. Introduction terest in typesetting computer code to improve readability. Modern display technology offers practically unlimited pre- Baecker and Marcus [2] demonstrated their visual C com- sentation opportunities. Developers may have access to mul- piler, leveraging the higher resolutions offered by laser print- tiple large, bright displays with resolutions that may exceed ing. Their tool systematically applies typographic styles and human visual acuity [1]. Despite this flexibility, software de- annotations to source code to improve both the aesthetics velopers, and some academics [3], have been resistant to and usefulness of the source code. Expecting the output to significant change in programming environments. Program- be duplicated, the authors ensured that gray values used for ming is still largely a text-based activity. highlighting would maintain the integrity of the text after Within this text-based environment, one way to provide multiple generations of photocopying. additional support to programmers is to use secondary nota- Shneiderman [13] describes his vision for a model pro- tion. Secondary notation does not change the formal mean- gramming environment, which includes much of the func- ing of the code but allows additional context to be layered tionality depended on by developers today, such as syn- into the code [5]. Examples of secondary notation in source tax highlighting, code folding, macros, and version control. code editors include syntax highlighting, and indentation. Shneiderman [13] presents his model environment without Developers can benefit from decreased cognitive load while formal validation as a foundation to stimulate future work reading, writing, and rewriting code [14]. Programmers have and discussion of human factors in software development. embraced this facility to add additional meaning to their With the increased flexibility of modern computing, aug- work [2] by including comments, using indentation styles, menting and enhancing the systematic presentation of text and applying syntax highlighting. in the editor offers further opportunities to improve develop- ers’ reading and comprehension of code [13]. By using both controlled studies and non-invasive capture of real-world de- veloper practice [15], usage patterns can be discerned to dis- cover and develop targeted enhancements. We believe such improvements have the potential to increase development speed and reduce errors in the resulting software. Copyright is held by the author/owner(s). This paper was published in the proceedings of the Workshop on Evaluation and Usability of Programming Languages and Tools (PLATEAU) at the ACM SPLASH Conference. October, 2015. Pittsburgh, Pennsylva- nia, USA. 3. Hypotheses ability to change the typeface. The selection of appropriate typefaces is much discussed in the online developer commu- A variety of advances have been made in the presentation of 3,4,5 onscreen code. However, much current practices lacks val- nity . Among developers monospace seems to be a fore- gone conclusion, with idealized requirements often omitting idation. This is highlighted by the numerous opinions and 3,4 anecdotes we describe in this section. Websites and blogs, to specify this explicitly . Even when developers consider proportional fonts, this is often quickly dismissed as a non and the editors themselves, are a modern “folk design” re- 6 source. What is now needed is verification and formaliza- standard presentation . tion of this untested corpus of potential improvements. The Microsoft Small Basic, a programming environment following considers the impact of a variety of these non- aimed at beginners [11], elects to use both monospace text invasive changes to the editor environment on the developer. for executable code and a proportional italicized font for comments. This alternative presentation of the documentary 3.1 Layout and Indentation parts of the code aids in the visual segmentation and offers an interesting alternative to the monospace monoculture. The use of indentation (tabs or spaces to visualize scope) While many editors limit the editor window to just one and layout (other intentional positioning, such as grouping of typeface, most offer additional differentiation options us- statements to infer related meaning) to enhance or add addi- ing bold, italicized, and underlined variants. The use of al- tional meaning to code is common among developers. Lein- ternative fonts for certain syntax suggest the increased sig- baugh [6] points out the duplicate effort by programmers to nificance of these elements [13] and can impart additional maintain appropriate visual style with indentation and accu- meaning to the following code. rately represent the actual or preferred scope of code. De- H3 Different typefaces aid developers in segmenting code spite this maintenance effort, Miara et al. [7] demonstrate into component parts, such as program instructions and support for using limited indentation to aid comprehension, comments. with larger indentation reducing or eliminating the benefit. H4 Varying the font, such as using boldface or italic, Layout can also be used to suggest association or dis- assists developers in tokenization of the syntax. association between groups of program statements. Green and Petre [5] suggest these “paragraphs” (visual grouping 3.3 Anti-aliasing of code to inply an association) and the use of “rhyme” (repetitive code structures to highlight intentional or unin- Reading on a display is a different experience than reading tentional differences) aid in understanding code. For devel- on paper. While computers display a rigid grid of pixels at a opers, however, the final layout and indentation are part of fixed resolution, the printed word is smooth, and sharply ren- the creation process, and can be a very personal matter, en- dered. This differing presentation can affect reading speed. gendering strong feelings1,2. Experiments by Gould [4] show that much of the perfor- Others have taken these informal practices and attempted mance loss caused by reading from a screen, can be negated to improve upon and automate them. The investigation of by having it more closely resemble paper-based renderings, “folk design” by Baecker and Marcus provided a starting including the use of anti-aliasing. Anti-aliasing allows the point for their own work on their visual C compiler [2]. Sim- jagged, stair-stepping seen in computer graphics and text to ilarly, the book format paradigm by Oman and Cook [9] uses be smoothed out using intermediate coloration in some ad- tools to automatically apply indentation and layout changes jacent pixels. to the source code. Focusing on practical access to the code, The use of anti-aliasing of text has been controver- their work extends the layout by adding a preface, table of sial among developers with some describing the effect as 6 7 contents, and other typographic features. These changes aim “muddy” and “extremely fatiguing” , even for typefaces to provide identifying and organizational cues to the pro- specifically designed for use with anti-aliasing. This may be grammer. impacted by developer inclinations to use small point sizes H1 Limited, consistent indentation assists developer to maximize the amount of text shown. As text becomes comprehension. smaller a larger proportion of the rendered character is com- H2 Grouping and ordering of program statements can 3 assist developers in identifying patterns and errors. T. Lowing, Monospace/Fixed Width Programmer’s Fonts http://www. lowing.org/fonts/ 3.2 Typefaces and Fonts 4 J. Atwood, Programming Fonts, 2004, http://blog.codinghorror.com/ progamming-fonts/ To read code, the typeface used to render it must be legi- 5 D. Benjamin, Top 10 Programming Fonts, 2009, http://hivelogic.com/ ble. Even basic editors, such as Windows Notepad, offer the articles/top-10-programming-fonts 6 R. Strahl, Clear Type this is supposed to be better?, 2005, 1 J. Zawinski, Tabs versus Spaces, 2000, http://www.jwz.org/doc/tabs-vs- http://weblog.west-wind.com/posts/2005/Jul/25/Clear-Type-this-is-