Visual Enhancements for Code Examples to Support the Knowledge Exchange Between Programmers

Software development is an endless problem-solving activity and programmers regularly use online media channels to ask each other for advice. In particular, socially enabled media channels like the question & answer website Stack Overflow changed how programmers communicate and coordinate, and how they produce and consume content on the Web. Nowadays, a vast body of software development knowledge is documented in form of code examples. But acquiring the knowledge by reading code and logically reason about how they work makes non-trivial examples hard to understand. The aim of this work is to develop visual enhancements that support programmers in the knowledge exchange with code examples. Through a design science research approach using interaction design methods visualizations were developed and evaluated that allow programmers to see the execution and simultaneously inspect the state in order to gain a better understanding of how the underlying system of the code example works. Professional programmers participated in a workshop and found the visualizations to be helpful in the comprehension process