Design Process: Implement Low Fidelity Prototyping

1. Design Process: Implement Low Fidelity Prototyping Christine Robson & Bryan Tsao September 27, 2007

2. Sit with your groups! We’ll be doing an in-class exercise

3. Today • Lo-Fidelity Prototypes • Paper Prototypes • Wizard of Oz • Screenshotting • Web-based • Card sorting

4. Why do we prototype? • Get feedback faster, cheaper • Experiment with alternative designs • Fix problems before code is written • Easier to change or throw away

5. Fidelity in Prototyping • Fidelity refers to the level of detail • High fidelity • Prototypes look like the final product • Low fidelity • Artists renditions with many details missing

6. Low-Fi Storyboards • Where do storyboards come from? • Film & Animation • Give you a “script” of important events • Leave out the details • Concentrate on the important interactions • In UI design, the storyboard is non-linear to support user action choices

7. Why Use Low-Fi Prototypes • Traditional methods take too long • Sketches  prototype  evaluate iterate • Can simulate the proptotype • Sketches act as prototype • Designer “plays computer” • Other design team members observe & record • Might sound silly, but is surprisingly effective • Kindergarten implementation skills • Allows non-programmers to participate • Widely used in industry

8. Hi-Fi Disadvantages • Distort perceptions of the tester • Formal representation indicates “finished” nature • People comment on color, fonts, and alignment • Discourages major changes • Testers don’t want to change a “finished” design • Designers don’t want to lose effort put into creating the hi-fi design

9. Constructing the Prototype • Set a deadline • Don’t think too long- just build it! • Draw a window frame on large paper • Draw at a large size, but use correct aspect ratio • Put different screen regions on cards • Anything that moves, changes, appears/disappears • Scribble to indicate text if necessary • Ready response for any user action • ie, have those pull-down menus already made • Use photocopier to make many versions

10. Tips for Good Paper Prototypes • Make it larger then life • Replace tricky visual feedback with audible descriptions • “Drag & drop, animation, progress bar” • Keep pieces organized • Use folders & open envelopes

11. Wizard of Oz • Research experiment • Subjects interact with a “computer system” • Illusion that the system is autonomous • It’s is actually being operated or partially operated by a human • Depending on your level of illusion, this can be a person in another room manipulating the computer • Or a person in front of you physically moving the paper prototype • The name of the experiment comes from the “man behind the curtain” in The Wonderful Wizard of Oz

12. Preparing for a Test • Select your participants • Understand the background of intended users • Use a questionnaire to get the people you need • Don’t use friends or family • Prepare scenarios that are • Typical of the product during actual use • Make prototype support these (small, yet broad) • Practice running the computer to avoid “bugs” • You will need every menu and dialog for the tasks • All widgets the user might press • Don’t forget the help and cancel buttons!

13. Conducting a Test • Three or Four testers (preferable) • Greeter: Puts users at ease & gets data • Facilitator: only team member who speaks • Gives instructions & encourages thoughts, opinions • Computer: knows application logic & controls it • Always simulates the response, w/o explanation • Observer(s): Take notes & recommendations • Typical session should be about 1 hour • Preparation, the test, debriefing

14. Conducting a Test (cont.) • Greet • Get forms filled, assure confidentiality, etc. • Test • Facilitarot explains how test will work • Preform a simple example task • Facilitator hands written tasks to the user • Must be clear and detailed • Facilitator keeps getting “output” from user • “think aloud” • Observers record what happens • Avoid strong reactions: frowning, laughing, looking impatient, etc biases the test • Designers should not lead participants! • Let users figure things out themselves as much as possible • Only answer questions if user remains stuck for a long time

15. Conducting a Test (cont.) • Debrief • Fill out post-evaluation questionnaire • Ask questions about parts you saw problems on • Gather impressions • Give thanks!

16. Test Tips • Rehearse your actions • For a complicated UI, make a flowchart which is hidden from the user • Make a list of legal words for a speech interface • Stay “in role” • You are a computer, and have no common sense or ability to understand spoken English • Facilitator can remind user of the rules if the user gets stuck

17. Evaluating Results • Sort & Prioritize observations • What was important? • Lots of problems in the same area? • Create a written report on findings • Gives agenda for meeting on design changes • Make changes & iterate !

18. Exercise

19. Goal • Pick one user task that you are planning to enable with your final project • Something simple like • Find friends of mine who are using the application • Create a new profile • Change your preferences

20. Exercise • Brainstorm about the user’s goals • What do they want to do? • What information will they need • What kind of interface supports these tasks? • Create an initial low fidelity prototype • Debug the interface with users from another group • Does the interface meet your needs? • Is the interface hassle-free? • Is the interface confusing or difficult?

21. Drawbacks of Lo-Fi Prototyping • Evolving the prototype requires redrawing • Can be slow • Reprogramming can be slower • Lack support for “design memory” • Force manual translation to electronic format • Do not allow real-time end-user interaction

22. Down-sides to informal design • Paying Clients • Often see the fidelity of the interface as an indication of development effort • Often hard to involve them as subjects • Talk to them early and often! • Talk to the same people • Explain the process and set expectations up front!

23. Screenshotting

24. Start with a Blank Page

25. Use a drawing program to insert items you want

26. Useful Tricks • Print Screen and then cut out elements you like • Windows: Alt-PrtScn captures the active window into the clipboard • Mac Control - Command (Apple)-Shift-4 captures the “grabbed” area into the clipboard • Mac OSX Grab Utility • Open Grab (located in Applications/Utility). • Use a simple graphics editor like Paint to stitch the images together • Copy & Paste many elements for different looks/feels

27. Web-Based • Provides the illusion of interactivity • Can employ screenshots to show parts of your webpage • Can be used as just a “click-through” of screenshots • Good if you are considering adding features to an existing website

28. Card sorting Bryan Tsao

29. What is card sorting? A method by which you can get users to organize content into user-generated groups.

30. Idiot’s guide to card sorting • Card sort when you have: • Lots of content • Content that could potentially be organized in multiple ways • Problems with navigation/users finding the correct content • Create cards that break down content to its constituent, generic parts • Allow users to organize and name their own categories

31. Intuit Accounting portal

32. Demo • http://www.themindcanvas.com/demos/

33. Nuts & Bolts

34. Assignments Due Today: • Contextual inquiry (Due Sept. 27) Due Thursday Oct 4th • Project Proposal (see handout)

35. Reading for Tuesday • Part of your reading assignment for Tuesday will be emailed to you: • Understanding Your Users by Kathy Baxter • You need to be on the class mailing list to get the document http://groups.google.com/group/cs160-fall07