1. Midterm Several high 90s Average: 91% = A-

2. Project – Evaluation Plan See doc Exercise: plan for your evaluation now in- class!

3. Review Reflection-in-action: – describes how designers approach design tasks Steps – Framing: defining the problem – Acting: solving the problem or moving closer to solving it – Reflecting: assessing consequences of actions to inform future moves Why reflection-in-action? – Helps you carry out each step of PRICPE

4. Review FrameWire

5. Supporting designers: Prefab – implementing advanced interaction behaviors CS352 Summer 2010

6. UI toolkits Examples? Advantages: – Consistent look and feel – Easy for users to transfer skills – Easier interface development –…–… Disadvantages?

7. Try imagining implementing this w/ standard UI toolkits… The Bubble Cursor http://www.youtube.com/watch?v=JUBXkD_8Ze Q

8. UI toolkits Examples? Advantages: – Consistent look and feel – Easy for users to transfer skills – Easier interface development – …  Disadvantages? – Difficult/Impossible to modify the core behavior of widgets – Impossible for designers to try new UI techniques in rich and realistic context, e.g., bubble cursor for seniors who shop online for grocery

9. Prefab helps solve this problem Basis: – Applications and toolkits ultimately produce pixels on a display – If it is possible to interpret the structure of these pixels (e.g., these three pixels form the upper-left corner of the “Help” button), then behaviors may be implemented independent of UI toolkits Prefab – pixel reverse engineering for advanced behaviors

10. Prefab: A video & paper… http://www.youtube.com/watch?v=lju6IIteg9 Q http://www.youtube.com/watch?v=lju6IIteg9 Q http://www.cs.washington.edu/homes/jfogart y/publications/chi2010-prefab.pdf http://www.cs.washington.edu/homes/jfogart y/publications/chi2010-prefab.pdf

11. How does Prefab work?

12. How does Prefab figure out which region of the bitmap is a button?

13. An example Figure 7: Grossman and Balakrishnan’s Bubble Cursor expands to ensure that the nearest target is selected [3]. Prefab can enable such target-aware pointing techniques as general enhancements across a variety of applications independent of their underlying toolkit implementation.

14. An example Figure 8: We have used Prefab to implement Baudisch et al.’s Phosphor [1] based entirely on an interface’s pixels. Figure 9: We use the image of the thumb from the slider’s prototype to paint the ghosted thumb in the afterglow.

15. In-class activity 20 min to read the “checked” sections of the Prefab paper by Dixon et al. from CHI 2010 Answer the following questions: – What was the problem? – How did they go about solving it? (e.g., what method did they use?) – How did they reflect upon their practice? (e.g., admitting limitations) – What aspects of this paper relate to this course?

16. How to read a paper Three passes: 1.Abstract  Intro  Conclusions What the paper is about? 2.Rest of the sections but only topic sentences. Main arguments but omit the “whys”. E.g., “We built a 900-sqrft dog house” not the why. 3.Read every word, asking yourself “If I were to re- create a system like this, would I have done it differently?” To critique. Advantages, disadvantages, etc.

17. Supporting programmers: Sikuli – faciliating GUI testing CS352 Summer 2010

18. Announcements Eval plan due tonight Present papers: – Tue: Eisenberg et al.’s “Apatite: A New Interface for Exploring APIs” www.cs.cmu.edu/~NatProg/papers/p1331-eisenberg-apatite-CHI.pdf – Tue: Daughtry et al.’s: “API usability: Report on Special Interest Group at CHI” http://john.daughtryhome.com/publications/DAUGHTRY_FAROOQ_MYERS_STYL OS_SEN_2009.pdf Read by Monday: – Section 3 of T. G. Green and Petre M.’s “Usability Analysis of Visual Programming Environments: a ‘cognitive dimensions’ framework” http://homepage.ntlworld.com/greenery/workStuff/Papers/UsabilityVPs.PDF

19. Test Automation = use a program to test a program Types (from Wikipedia): – Code-driven testing The public (usually) interfaces to classes, modules, or libraries are tested with a variety of input arguments to validate that the results that are returned are correct. – Graphical user interface testing A testing framework generates user interface events such as keystrokes and mouse clicks, and observes the changes that result in the user interface, to validate that the observable behavior of the program is correct.

20. A commercial system: Ranorex - UI Test Automation Framework http://www.youtube.com/watch?v=2YIlpsyeh As

21. Sikuli http://groups.csail.mit.edu/uid/projects/sikuli/sikuli-chi2010.pdf Testing a GUI’s visual behavior typically requires human testers to interact with the GUI and to observe whether the expected results of interaction are presented Sikuli - a new approach to GUI testing using computer vision for testers to automate their tasks – Testers can write a visual test script that uses images to specify which GUI components to interact with and what visual feedback to be observed – Testers can also generate visual test scripts by demonstration.

22. Example scripts

23. In-class activity 20 min to read the “checked” sections of the GUI Testing paper by Chang et al. from CHI 2010 Answer the following questions: – What was the problem? – How did they go about solving it? (e.g., what method did they use?) – How did they reflect upon their practice? (e.g., admitting limitations) – What aspects of this paper relate to this course?