Understanding Code

1. Understanding Code • David A. Mellis Advisors Neil Churcher Yaniv Steiner Interaction Design Institute Ivrea – 21 April 2005 – Exam 1

2. Overview • Redesign of a debugger: software tool for observing, annotating, and analyzing the behavior of software.

3. Agenda • context • problems today • visual metaphors • design goals • scenario from last review • interface specification • prototype for testing • impact • next steps

4. Agenda • context • problems today • visual metaphors • design goals • scenario from last review • interface specification • prototype for testing • impact • next steps

5. Context • What we consider a simple program today is much more complex to build. It sucks up programmer’s mental processing power. They need better tools.

6. What it’s not: a tool for non-programmers Pablo, a visual programming environment (MIT Media Lab).

7. Agenda • context • problems today • visual metaphors • design goals • scenario from last review • interface specification • prototype for testing • impact • next steps

8. Frustrations today • I can’t keep it all in my head. • I can’t tell what connects to what. • I’m getting lost in the details. • I can’t see what’s happening. • I don’t know where in the code to look. • I don’t know what will happen if I change this. • Gathered from extended interviews with 2 professional programmers (mid-20’s) and informal conversation with others.

9. Agenda • context • problems today • visual metaphors • design goals • scenario from last review • interface specification • prototype for testing • impact • next steps

10. Today: freezing time in snapshots

11. Need: continuous timeline

12. Today: abstract instructions, separated data

13. Need: concrete operation

14. Today: only see static structure

15. Need: dynamic structure

16. Need: connections

17. Agenda • context • problems today • visual metaphors • design goals • scenario from last review • interface specification • prototype for testing • impact • next steps

18. a b c Knowledge in the world vs. in your head • Tangible variables • Tangible time

19. Tangible connections

20. Supporting tasks • Debugging: focused goal, observing details

21. Maintenance: overall understanding, which parts do what

22. Complexity: details and flows across components

23. Agenda • context • problems today • visual metaphors • design goals • scenario from last review • interface specification • prototype for testing • impact • next steps

33. Agenda • context • problems today • visual metaphors • design goals • scenario from last review • interface specification • prototype for testing • impact • next steps

34. Overview Files Code Timeline

35. Program files and dependencies “Children” “Parents”

36. Timeline of program execution (“trace”) Hierarchical time Clock time

37. Overview

38. Live function: code operating on data Complex value Array value Numerical value

39. Live function: unreached code

40. Live function: loops

41. Live function hyperlinks Returns to calling function

42. Flagging incorrect values

43. Overview

44. Flags in the program timeline

45. Search: file, function, variable

46. Variable traces

47. Programmer feedback • Early draft of wireframes. • Reviewed by 7 professional programmers. • Approval of general approach and structure. • Requests for specific features. • Many of which have been incorporated.

48. Agenda • context • problems today • visual metaphors • design goals • scenario from last review • interface specification • prototype for testing • impact • next steps

49. Agenda • context • problems today • visual metaphors • design goals • scenario from last review • interface specification • prototype for testing • impact • next steps

50. Impact • More productive programmers. • Better and more complex software.