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

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

Today Lo-Fidelity Prototypes Lo-Fidelity Prototypes –Paper Prototypes –Wizard of Oz –Screenshotting –Web-based Card sorting Card sorting

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

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

Low-Fi Storyboards Where do storyboards come from? Where do storyboards come from? –Film & Animation Give you a “script” of important events 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 In UI design, the storyboard is non- linear to support user action choices

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

Hi-Fi Disadvantages Distort perceptions of the tester Distort perceptions of the tester –Formal representation indicates “finished” nature –People comment on color, fonts, and alignment Discourages major changes 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

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

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

Wizard of Oz Research experiment 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 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 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 The name of the experiment comes from the “man behind the curtain” in The Wonderful Wizard of Oz

Preparing for a Test Select your participants 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 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” 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! Don’t forget the help and cancel buttons!

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

Conducting a Test (cont.) Greet Greet –Get forms filled, assure confidentiality, etc. Test Test –Facilitarot explains how test will work Preform a simple example task Preform a simple example task –Facilitator hands written tasks to the user Must be clear and detailed Must be clear and detailed –Facilitator keeps getting “output” from user “think aloud” “think aloud” –Observers record what happens Avoid strong reactions: frowning, laughing, looking impatient, etc biases the test Avoid strong reactions: frowning, laughing, looking impatient, etc biases the test Designers should not lead participants! 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

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

Test Tips Rehearse your actions 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” 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 Facilitator can remind user of the rules if the user gets stuck

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

Exercise

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

Exercise Brainstorm about the user’s goals 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 Create an initial low fidelity prototype –Debug the interface with users from another group Does the interface meet your needs? Does the interface meet your needs? Is the interface hassle-free? Is the interface hassle-free? Is the interface confusing or difficult? Is the interface confusing or difficult?

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

Down-sides to informal design Paying Clients 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!

Screenshotting

Start with a Blank Page

Use a drawing program to insert items you want

Useful Tricks Print Screen and then cut out elements you like 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). Open Grab (located in Applications/Utility). Use a simple graphics editor like Paint to stitch the images together Use a simple graphics editor like Paint to stitch the images together –Copy & Paste many elements for different looks/feels

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

Card sorting Bryan Tsao

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

Idiot’s guide to card sorting Card sort when you have: 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 Create cards that break down content to its constituent, generic parts Allow users to organize and name their own categories Allow users to organize and name their own categories

Intuit Accounting portal

Demo os/ os/ os/ os/

Nuts & Bolts

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

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