Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Lomonosov Moscow State University  Department of Computational Mathematics and Cybernetics               Computing Systems...
Lomonosov Moscow State University                                    2
Outline•   Problem with tool views in IDEs•   Approach to lessen the problem•   Single-window interface•   User evaluation...
IDE interface                4
IDE interface                5
IDE interface                6
IDE interface                7
Tool views: problemTool Views:• Standard IDE GUI element• Likely way to implement a pluginProblem:• Compete with code edit...
Tool views: problemEvidence that the problem exists:• Dave Springgay. Using Perspectives in the Eclipse UI. 2001.• Matt St...
Approach•   Find common tool views•   Devise UI elements to replace tool views•   Replace tool views with the new elements...
Approach•   Find common tool views•   Devise UI elements to replace tool views•   Replace tool views with the new elements...
IDE Survey•   What tool views are available?•   What are the common functionalities provided?•   How are tool views organi...
IDE SurveyC++ context, no plugins, not extensible text editors•   Visual Studio         •   KDevelop•   NetBeans          ...
IDE SurveyCommon tool views:• Files view         • Build messages• Symbols view       • Frame stack• Breakpoints        • ...
Approach•   Find common tool views•   Devise UI elements to replace tool views•   Replace tool views with the new elements...
Patterns in tool views• Navigation• Mapping to code lines• Status/summary• Trees/lists of entities• Event notifications• …...
Proposed interface elements• Breadcrumbs  – Navigation  – Trees• In-text widgets  – Lists, items mapped to lines• Extended...
Breadcrumbs   Files View   Breadcrumbs for files                                        18
In-text widgetsBuildMessagesViewIn-textErrorWidget                     19
Extended status bar  Status summary widgets   Event history                                           20
Approach•   Find common tool views•   Devise UI elements to replace tool views•   Replace tool views with the new elements...
Design process• Initially had   – Interface design heuristics• Assumed and described   – Tool view model   – Programmers’ ...
Build errors               23
Breakpoints              24
Debugging            25
KDevelop: Original GUI                         26
KDevelop: Single-Window GUI                              27
Approach•   Find common tool views•   Devise UI elements to replace tool views•   Replace tool views with the new elements...
Lightweight evaluation: setup• Goal – search for usability problems and  possible improvements• Input data – one program [...
Lightweight evaluation: results• Interface was tested on 7 users• All users completed the task with the single-  window in...
Future Work• Conduct exploratory study on tool views problem• Build precise model of programmers’ behavior• Explore other ...
The End      Thank you!                   32
Breadcrumbs  1           2   3                      33
In-text widgets123                  34
Extended status bar123                      35
Qualitative evaluation          Jakob Nielsen, Thomas K. Landauer  A mathematical model of the finding of usability proble...
Quantitative Evaluation           Jeff Sauro, Erika Kindlund  A Method to Standardize Usability Metrics               Into...
Implementation• Prototype of Single-Window IDE• KDevelop – [relatively] simple IDE in K  Desktop Environment (KDE)• Kate –...
Deliverables• Set of common tool views and main  activities of their usage• Single-Window interface design• Implementation...
Do not go past this line!                            40
41
REMOVE Outline• Survey IDEs; describe tool views and their  usage activities• Design an interface that would minimize  swi...
REMOVE Programmer’sbehaviorMain activities while using tool views:  •   Reading code  •   Writing code  •   Building  •   ...
Upcoming SlideShare
Loading in …5
×

Single-Window Integrated Development Environment

621 views

Published on

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.

Published in: Technology
  • Be the first to comment

Single-Window Integrated Development Environment

  1. 1. Lomonosov Moscow State University Department of Computational Mathematics and Cybernetics Computing Systems Laboratory Single-WindowIntegrated Development Environment Ivan Ruchkin Advisor: Vladimir Prus 2009 - 2011
  2. 2. Lomonosov Moscow State University 2
  3. 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. 4. IDE interface 4
  5. 5. IDE interface 5
  6. 6. IDE interface 6
  7. 7. IDE interface 7
  8. 8. Tool views: problemTool Views:• Standard IDE GUI element• Likely way to implement a pluginProblem:• Compete with code editor for screen space and/or• Require explicit switching on/off 8
  9. 9. Tool views: problemEvidence 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. 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. 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. 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. 13. IDE SurveyC++ context, no plugins, not extensible text editors• Visual Studio • KDevelop• NetBeans • IntelliJ IDEA• Eclipse CDT • C++ Builder• Code::Blocks • XCode• MonoDevelop 13
  14. 14. IDE SurveyCommon tool views:• Files view • Build messages• Symbols view • Frame stack• Breakpoints • Variables• Tasks • Program output 14
  15. 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. 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 theirnumber 16
  17. 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. 18. Breadcrumbs Files View Breadcrumbs for files 18
  19. 19. In-text widgetsBuildMessagesViewIn-textErrorWidget 19
  20. 20. Extended status bar Status summary widgets Event history 20
  21. 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. 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. 23. Build errors 23
  24. 24. Breakpoints 24
  25. 25. Debugging 25
  26. 26. KDevelop: Original GUI 26
  27. 27. KDevelop: Single-Window GUI 27
  28. 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. 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. 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. 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. 32. The End Thank you! 32
  33. 33. Breadcrumbs 1 2 3 33
  34. 34. In-text widgets123 34
  35. 35. Extended status bar123 35
  36. 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. 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. 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. 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. 40. Do not go past this line! 40
  41. 41. 41
  42. 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. 43. REMOVE Programmer’sbehaviorMain activities while using tool views: • Reading code • Writing code • Building • Debugging 43

×