single-window integrated development environment
DESCRIPTION
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.TRANSCRIPT
![Page 1: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/1.jpg)
Single-Window Integrated Development Environment
Ivan Ruchkin
Advisor: Vladimir Prus2009 - 2011
Lomonosov Moscow State UniversityDepartment of Computational Mathematics and Cybernetics
Computing Systems Laboratory
![Page 2: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/2.jpg)
2
Lomonosov Moscow State University
![Page 3: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/3.jpg)
3
Outline
• Problem with tool views in IDEs• Approach to lessen the problem• Single-window interface• User evaluation of the interface• Future work
![Page 4: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/4.jpg)
4
IDE interface
![Page 5: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/5.jpg)
5
IDE interface
![Page 6: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/6.jpg)
6
IDE interface
![Page 7: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/7.jpg)
7
IDE interface
![Page 8: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/8.jpg)
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
![Page 9: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/9.jpg)
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.
![Page 10: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/10.jpg)
10
Approach
• Find common tool views• Devise UI elements to replace tool views• Replace tool views with the new elements• Evaluate the new interface
![Page 11: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/11.jpg)
11
Approach
• Find common tool views• Devise UI elements to replace tool views• Replace tool views with the new elements• Evaluate the new interface
![Page 12: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/12.jpg)
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?
![Page 13: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/13.jpg)
13
IDE Survey
• Visual Studio• NetBeans• Eclipse CDT• Code::Blocks• MonoDevelop
• KDevelop
• IntelliJ IDEA• C++ Builder• XCode
C++ context, no plugins, not extensible text editors
![Page 14: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/14.jpg)
14
IDE Survey
• Files view
• Symbols view
• Breakpoints
• Tasks
• Build messages
• Frame stack
• Variables
• Program output
Common tool views:
![Page 15: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/15.jpg)
15
Approach
• Find common tool views• Devise UI elements to replace tool views• Replace tool views with the new elements• Evaluate the new interface
![Page 16: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/16.jpg)
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
![Page 17: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/17.jpg)
17
Proposed interface elements
• Breadcrumbs– Navigation– Trees
• In-text widgets– Lists, items mapped to lines
• Extended status bar– Status/summary – Event notifications– Trees/Lists
![Page 18: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/18.jpg)
18
Breadcrumbs
Files View Breadcrumbs for files
![Page 19: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/19.jpg)
19
In-text widgets
Build MessagesView
In-textErrorWidget
![Page 20: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/20.jpg)
20
Extended status bar
Status summary widgets Event history
![Page 21: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/21.jpg)
21
Approach
• Find common tool views• Devise UI elements to replace tool views• Replace tool views with the new elements• Evaluate the new interface
![Page 22: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/22.jpg)
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
![Page 23: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/23.jpg)
23
Build errors
![Page 24: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/24.jpg)
24
Breakpoints
![Page 25: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/25.jpg)
25
Debugging
![Page 26: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/26.jpg)
KDevelop: Original GUI
26
![Page 27: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/27.jpg)
27
KDevelop: Single-Window GUI
![Page 28: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/28.jpg)
28
Approach
• Find common tool views• Devise UI elements to replace tool views• Replace tool views with the new elements• Evaluate the new interface
![Page 29: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/29.jpg)
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
![Page 30: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/30.jpg)
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
![Page 31: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/31.jpg)
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
![Page 32: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/32.jpg)
32
Thank you!
The End
![Page 33: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/33.jpg)
33
Breadcrumbs
1 2 3
![Page 34: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/34.jpg)
34
In-text widgets
1
2
3
![Page 35: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/35.jpg)
35
Extended status bar
1
2
3
![Page 36: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/36.jpg)
36
Qualitative evaluationU
sabi
lity
prob
lem
s de
tect
ed
Number of users
Jakob Nielsen, Thomas K. Landauer A mathematical model of the finding of usability problems
![Page 37: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/37.jpg)
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
![Page 38: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/38.jpg)
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
![Page 39: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/39.jpg)
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
![Page 40: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/40.jpg)
40
Do not go past this line!
![Page 41: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/41.jpg)
41
![Page 42: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/42.jpg)
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
![Page 43: Single-Window Integrated Development Environment](https://reader035.vdocuments.us/reader035/viewer/2022062705/5565bcafd8b42a48268b4e05/html5/thumbnails/43.jpg)
43
REMOVE Programmer’s behavior
• Reading code• Writing code• Building• Debugging
Main activities while using tool views: