A report on Single-Window IDE work carried out at Moscow State University. The presentation was given at the Institute for Software Research, Carnegie Mellon University.

1. Lomonosov Moscow State University
Department of Computational Mathematics and Cybernetics
Computing Systems Laboratory
Single-Window
Integrated Development Environment
Ivan Ruchkin
Advisor: Vladimir Prus
2009 - 2011

2. Lomonosov Moscow State University
2

3. Outline
• Problem with tool views in IDEs
• Approach to lessen the problem
• Single-window interface
• User evaluation of the interface
• Future work
3

4. IDE interface
4

5. IDE interface
5

6. IDE interface
6

7. IDE interface
7

8. Tool views: problem
Tool Views:
• Standard IDE GUI element
• Likely way to implement a plugin
Problem:
• Compete with code editor for screen space
and/or
• Require explicit switching on/off
8

9. Tool views: problem
Evidence that the problem exists:
• Dave Springgay. Using Perspectives in the
Eclipse UI. 2001.
• Matt Stephens. 10 Things NetBeans Must Do to
Survive. 2003.
• Mark Szymczyk. Reducing XCode’s Window
Clutter. 2007.
• Mik Kersten. Mylyn 3.0: Code at the Speed of
Thought. 2008.
9

10. Approach
• Find common tool views
• Devise UI elements to replace tool views
• Replace tool views with the new elements
• Evaluate the new interface
10

11. Approach
• Find common tool views
• Devise UI elements to replace tool views
• Replace tool views with the new elements
• Evaluate the new interface
11

12. IDE Survey
• What tool views are available?
• What are the common functionalities provided?
• How are tool views organized in IDE interface?
• How are tool views used by programmers?
12

13. IDE Survey
C++ context, no plugins, not extensible text editors
• Visual Studio • KDevelop
• NetBeans • IntelliJ IDEA
• Eclipse CDT • C++ Builder
• Code::Blocks • XCode
• MonoDevelop
13

14. IDE Survey
Common tool views:
• Files view • Build messages
• Symbols view • Frame stack
• Breakpoints • Variables
• Tasks • Program output
14

15. Approach
• Find common tool views
• Devise UI elements to replace tool views
• Replace tool views with the new elements
• Evaluate the new interface
15

16. Patterns in tool views
• Navigation
• Mapping to code lines
• Status/summary
• Trees/lists of entities
• Event notifications
• …
Idea: extract functions of tool views to reduce their
number
16

17. Proposed interface elements
• Breadcrumbs
– Navigation
– Trees
• In-text widgets
– Lists, items mapped to lines
• Extended status bar
– Status/summary
– Event notifications
– Trees/Lists
17

18. Breadcrumbs
Files View Breadcrumbs for files
18

19. In-text widgets
Build
Messages
View
In-text
Error
Widget
19

20. Extended status bar
Status summary widgets Event history
20

21. Approach
• Find common tool views
• Devise UI elements to replace tool views
• Replace tool views with the new elements
• Evaluate the new interface
21

22. Design process
• Initially had
– Interface design heuristics
• Assumed and described
– Tool view model
– Programmers’ behavior with tool views
• Finally
– Analyzed options for each common tool view
– Replaced tool views with our elements
• Got
– Single-Window Interface
22

23. Build errors
23

24. Breakpoints
24

25. Debugging
25

26. KDevelop: Original GUI
26

27. KDevelop: Single-Window GUI
27

28. Approach
• Find common tool views
• Devise UI elements to replace tool views
• Replace tool views with the new elements
• Evaluate the new interface
28

29. Lightweight evaluation: setup
• Goal – search for usability problems and
possible improvements
• Input data – one program [2 KLOC] with
3 compile-time and 2 runtime errors
• Task – compile the program and fix runtime
errors
29

30. Lightweight evaluation: results
• Interface was tested on 7 users
• All users completed the task with the single-
window interface
• 11 improvements to the interface found
• Conclusion: our approach is applicable to
mitigate the problem of tool views
30

31. Future Work
• Conduct exploratory study on tool views problem
• Build precise model of programmers’ behavior
• Explore other tool views (plugins)
– Tool views with plaintext output
• Implement suggested improvements
• Conduct comparative quantitative study
31

32. The End
Thank you!
32

33. Breadcrumbs
1 2 3
33

34. In-text widgets
1
2
3
34

35. Extended status bar
1
2
3
35

36. Qualitative evaluation
Jakob Nielsen, Thomas K. Landauer
A mathematical model of the finding of usability problems
Usability problems detected
Number of users
36

37. Quantitative Evaluation
Jeff Sauro, Erika Kindlund
A Method to Standardize Usability Metrics
Into a Single Score
• Qualitative test requires 6-8 participants
• Quantitative test requires at least 2 groups
with at least 10 in each
37

38. Implementation
• Prototype of Single-Window IDE
• KDevelop – [relatively] simple IDE in K
Desktop Environment (KDE)
• Kate – reusable text editor in KDE; used in
KDevelop
38

39. Deliverables
• Set of common tool views and main
activities of their usage
• Single-Window interface design
• Implementation based on KDevelop
• Lightweight user study of the interface
39

40. Do not go past this line!
40

41. 41

42. REMOVE Outline
• Survey IDEs; describe tool views and their
usage activities
• Design an interface that would minimize
switching between tool views
• Implement the designed interface
• Test the implementation on users
42

43. REMOVE Programmer’s
behavior
Main activities while using tool views:
• Reading code
• Writing code
• Building
• Debugging
43