1. Prof. James A. Landay University of Washington Autumn 2008 Rapid Prototyping November 10, 2008

2. CSE440 - Autumn 20082 Hall of Fame or Shame?

3. CSE440 - Autumn 20083 Hall of Fame or Shame?

4. CSE440 - Autumn 20084 Hall of Fame or Shame?

5. CSE440 - Autumn 20085 Hall of Shame!

6. Prof. James A. Landay University of Washington Autumn 2008 Rapid Prototyping November 10, 2008

7. CSE440 - Autumn 20087 Outline Review informal prototyping tools Why build hi-fi prototypes? Hi-fi prototyping tools Widgets What prototyping tools lack

8. CSE440 - Autumn 20088 Informal UI Prototyping Tools Denim Suede Outpost Topiary Activity Designer SketchWizard advantages of low-fi paper prototypes + electronic advantages

9. CSE440 - Autumn 20089 Why Build Hi-fi Prototypes? Must test & observe ideas with customers Paper mock-ups don’t go far enough –how would you show a drag operation? –not realistic of how interface will be used Building final app. now is a mistake (?) –changes in the UI can cause huge code changes need to convince programmer & hope they get it right –takes too much time –what did Cooper say it is harder than???? changing a 1000 square foot slab of concrete –drag & drop prototyping tool appropriate but only after we have iterated on design Why is Cooper against prototyping? –sees prototyping as programming (above problems) –advocates paper (which I still consider prototyping)

10. CSE440 - Autumn 200810 Why Use Tools (rather than code)? Faster Easier to incorporate testing changes Multiple UIs for same application Consistent user interfaces Easier to involve variety of specialists Separation of UI code from app. code –easier to change and maintain More reliable –bugs found in the tool are fixed for all applications

11. Prototyping Tools Hypercard Macromedia Director Powerpoint Visio / SmartDraw Adobe Flash Axure CSE440 - Autumn 200811

12. CSE440 - Autumn 200812 Prototyping Tools (historical) HyperCard –for Macintosh – built by Bill Atkinson –metaphor: card transitions on button clicks –comes with widget set –drawing & animation limited Director –still commonly used by designers –intended for multimedia  originally lacked interface widgets or controls –good for non-widget UIs or the “insides” of app –Flash quickly replacing Director for prototyping Both have “scripting” languages

13. CSE440 - Autumn 200813 HyperCard Tool palettes

14. Director CSE440 - Autumn 200814

15. CSE440 - Autumn 200815 Director Cast Basic objects used in interface Mainly multimedia in nature –images, audio, video, etc. –synchronize with cue points

16. CSE440 - Autumn 200816 Director Score Overview of events in time

17. CSE440 - Autumn 200817 Director Behavior Inspector Connect events to actions Drag & drop

18. Powerpoint CSE440 - Autumn 200818 Prototyping Tools (current)

19. Visio CSE440 - Autumn 200819 Prototyping Tools (current)

20. CSE440 - Autumn 200820 Adobe Flash CS3 Pro Prototyping Tools (current)

21. Flash Stage –graphics, videos, buttons, and so on appear during playback. Timeline –when you want the graphics and other elements of your project to appear. –specify the layering order of graphics Library panel –displays a list of the media elements in your Flash document. CSE440 - Autumn 200821 Prototyping Tools (current)

22. Flash ActionScript™ code allows you to add interactivity to the media elements add logic to your applications CSE440 - Autumn 200822 Prototyping Tools (current)

23. Axure CSE440 - Autumn 200823 [Video]

24. CSE440 - Autumn 200824 What is Missing? Support for the “insides” of applications Prototyping Tools

25. What is Missing? Internals Real Background data Recognition Engines Machine Learning quality Speed of response CSE440 - Autumn 200825 Prototyping Tools

26. CSE440 - Autumn 200826 UI Builders Visual Basic –lots of widgets (AKA controls) –simple language –slower than other UI builders MS Visual Studio.NET, JBuilder, PowerBuilder... –widgets sets –easily connect to code via “callbacks” –“commercial” strength languages

27. CSE440 - Autumn 200827 Widgets Buttons (several types) Scroll bars and sliders Pulldown menus

28. CSE440 - Autumn 200828 Widgets (cont.) Palettes Dialog boxes Windows and many more...

29. CSE440 - Autumn 200829 What’s the Difference? Performance –prototyping tools produce slow programs –UI builders depend on underlying language Widgets –prototyping tools may not have complete set –UI builders have widget set common to platform Insides of application –UIBs do little, prototypers offer some support Final product –generally use UI builders, though occasionally see things created in a prototyping tool (multimedia)

30. CSE440 - Autumn 200830 Summary Informal prototyping tools bridge the gap between paper & high-fi tools High-fi UI tools good for testing more developed UI ideas Two styles of tools –“Prototyping” vs. UI builders –what is the difference? Both types generally ignore the “insides” of application  this is research

31. CSE440 - Autumn 200831 Further Reading Prototyping Books –Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces, by Carolyn Snyder, Morgan Kaufmann, 2003Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces Articles –What do Prototypes Prototype? by Houde and HillWhat do Prototypes Prototype? by Houde and Hill – “The Perils of Prototyping” by Alan Cooper,“The Perils of Prototyping” http://www.chi-sa.org.za/Documents/articles/perils.htm Web Sites –UW Center for Design, Use, & Build of Interactive Technology (DUB) Web Site for informal tool downloads, http://dub.washington.edu http://dub.washington.edu –InfoDesign Toolkit, http://www.infodesign.com.auInfoDesign Toolkithttp://www.infodesign.com.au

32. More tools www.dexodesign.com/2008/11/07/review- 16-user-interface-prototyping-tools/www.dexodesign.com/2008/11/07/review- 16-user-interface-prototyping-tools/ balsamiq CSE440 - Autumn 200832