1. University of Washington HCDE 418 Prototyping 2 HCDE 418 Autumn 2009

2. University of Washington HCDE 418 Agenda  Announcements  5 minutes  P4 Debrief  5 minutes  Course Eval Debrief  10 minutes  Prototyping Demos  20 minutes  Break  10 minutes  Prototyping Demos  40 minutes  Debrief & Next Class  5 minutes

3. University of Washington HCDE 418 Announcements  Your questions, comments, issues, appreciations? Upcoming work  Read: Iachello, et al., 2006., Norman, 2004., Buxton, pp. 276-307 (next week)  A2: Storyboarding  Due Today at 5:00 P.M.  P5: Prototypes  Due Tuesday and Thursday next week  3 sketches  1.5 discussion board posts

4. University of Washington HCDE 418 P5 Due Dates  Tuesday, Nov. 17 th  Microsoft UX Team  Foot Soldiers  Thursday, Nov. 19 th  Team Cool Horse  CHI 2010  Winter Olympics Voting  2 day Extension Policy

5. University of Washington HCDE 418 Announcements  Sketch Theme this week:  Transportation  e.g., walking, biking, cars, busses, trains, airplanes  P4 Grades completed  Discussion board mid-term grades  >=8 posts = 40 points  6 posts = 30 points  4 posts = 20 points  Will update at end of quarter

6. University of Washington HCDE 418 P4 Debrief

7. University of Washington HCDE 418 Course Eval Debrief  Thanks!  Good:  Website  Lecture presentation/organization  Learning activities/assignments reasonable size  Groups  Assignment descriptions/expectations  Class exercises

8. University of Washington HCDE 418 Course Eval Debrief  Need to improve  Sketching assignment more thematic  Go-Post – encourage more frequent participation  Encourage more in-class participation

9. University of Washington HCDE 418 Lecture 20 minutes

10. University of Washington HCDE 418 Practical Prototyping Tools  Creating Hi-Fi, semi-functional prototypes with minimal effort  PowerPoint Prototyping  UX-Specific Tools  Axure, Balsamiq  Photoshop + HTML/Dreamweaver  Visual Studio

11. University of Washington HCDE 418 PowerPoint  Advantages:  Almost everyone has it  Ubiquitous format  Fast and easy to use  Can use hyperlinks to simulate interaction  Disadvantages:  Must be used at a computer  e.g., difficult to do mobile-based interactions  Somewhat limited functionality  Cannot be reused for final implementation

12. University of Washington HCDE 418 Example Prototypes  http://www.boxesandarrows.com/files/banda /interactive/SamplePrototype.ppt http://www.boxesandarrows.com/files/banda /interactive/SamplePrototype.ppt  http://courses.washington.edu/info360/examples/po werpoint-prototype-example.ppt http://courses.washington.edu/info360/examples/po werpoint-prototype-example.ppt

13. University of Washington HCDE 418 More Info: Tutorial  http://www.boxesandarrows.com/view/intera ctive http://www.boxesandarrows.com/view/intera ctive

14. University of Washington HCDE 418 BREAK Class will resume in minute(s) 109876543210

15. University of Washington HCDE 418 Lecture 40 minutes

16. University of Washington HCDE 418 Axure  About  A commercially available wireframes maker/prototyping tool  Free license for students!  http://www.axure.com/ (Windows only (sorry  )) http://www.axure.com/  Contains good documentation and tutorials  Advantages  Great for websites  Can transition from wireframe->Prototype->Functional system

17. University of Washington HCDE 418 Axure Demo

18. University of Washington HCDE 418 Balsamiq  Another commercially available prototyping tool  Free trial  Advantages  Quick and dirty  Can make lo-fi appearing prototypes

19. University of Washington HCDE 418 Balsamiq video  http://www.balsamiq.com/products/mockups http://www.balsamiq.com/products/mockups

20. University of Washington HCDE 418 Photoshop  Advantages  Can look & feel like real thing  Disadvantages  Needs use of HTML for real interactions

21. University of Washington HCDE 418 Photoshop Demo  Download iPhone template:  http://www.teehanlax.com/blog/?p=1628 http://www.teehanlax.com/blog/?p=1628  Android Template:  http://chrisbrummel.com/google-android-gui-psd  More free PS widgets:  http://www.greepit.com/2009/03/25-free-psd- resources-for-designers/ http://www.greepit.com/2009/03/25-free-psd- resources-for-designers/  To do screen shots: alt+print screen button  Captures the current window

22. University of Washington HCDE 418 Visual Studio  Advantages:  Fast to put together windows interfaces  Can evolve into a fully functional prototype  Disadvantages:  Requires programming knowledge to start creating interactivity

23. University of Washington HCDE 418 Visual Studio Demo

24. University of Washington HCDE 418 More Resources  Overviews of rapid prototyping tools:  http://www.adaptivepath.com/blog/2009/03/24/ rapid-prototyping-tools/ http://www.adaptivepath.com/blog/2009/03/24/ rapid-prototyping-tools/

25. University of Washington HCDE 418 Next Class Topics  Thursday, Nov. 12th  Experiments & Field Studies  Reading Assignment for Week 7  Iachello, et al., 2006., Norman, 2004., Buxton, pp. 276-307  P5 due next week