Single-Window Integrated Development Environment

Ivan Ruchkin

Advisor: Vladimir Prus2009 - 2011

Lomonosov Moscow State UniversityDepartment of Computational Mathematics and Cybernetics

Computing Systems Laboratory

2

Lomonosov Moscow State University

3

Outline

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

4

IDE interface

5

IDE interface

6

IDE interface

7

IDE interface

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

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.

10

Approach

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

11

Approach

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

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?

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

14

IDE Survey

• Files view

• Symbols view

• Breakpoints

• Tasks

• Build messages

• Frame stack

• Variables

• Program output

Common tool views:

15

Approach

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

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

17

Proposed interface elements

• Breadcrumbs– Navigation– Trees

• In-text widgets– Lists, items mapped to lines

• Extended status bar– Status/summary – Event notifications– Trees/Lists

18

Breadcrumbs

Files View Breadcrumbs for files

19

In-text widgets

Build MessagesView

In-textErrorWidget

20

Extended status bar

Status summary widgets Event history

21

Approach

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

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

23

Build errors

24

Breakpoints

25

Debugging

KDevelop: Original GUI

26

27

KDevelop: Single-Window GUI

28

Approach

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

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

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

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

32

Thank you!

The End

33

Breadcrumbs

1 2 3

34

In-text widgets

1

2

3

35

Extended status bar

1

2

3

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

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

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

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

40

Do not go past this line!

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

43

REMOVE Programmer’s behavior

• Reading code• Writing code• Building• Debugging

Main activities while using tool views: