Design Process: Design Process: Implement Implement Low Fidelity PrototypingLow Fidelity Prototyping

Christine Robson & Bryan Christine Robson & Bryan TsaoTsao

September 27, 2007September 27, 2007

Sit with your groups!Sit with your groups!

We’ll be doing an in-class We’ll be doing an in-class exerciseexercise

TodayToday

Lo-Fidelity PrototypesLo-Fidelity Prototypes– Paper PrototypesPaper Prototypes– Wizard of OzWizard of Oz– ScreenshottingScreenshotting– Web-basedWeb-based

Card sortingCard sorting

Why do we prototype?Why do we prototype?

Get feedback faster, cheaperGet feedback faster, cheaper Experiment with alternative Experiment with alternative

designsdesigns Fix problems before code is Fix problems before code is

writtenwritten Easier to change or throw awayEasier to change or throw away

Fidelity in PrototypingFidelity in Prototyping

Fidelity refers to the level of Fidelity refers to the level of detaildetail

High fidelityHigh fidelity– Prototypes look like the final productPrototypes look like the final product

Low fidelityLow fidelity– Artists renditions with many details Artists renditions with many details

missingmissing

Low-Fi StoryboardsLow-Fi Storyboards

Where do storyboards come from?Where do storyboards come from?– Film & AnimationFilm & Animation

Give you a “script” of important eventsGive you a “script” of important events– Leave out the detailsLeave out the details– Concentrate on the important interactionsConcentrate on the important interactions

In UI design, the storyboard is non-In UI design, the storyboard is non-linear to support user action choiceslinear to support user action choices

Why Use Low-Fi Why Use Low-Fi PrototypesPrototypes Traditional methods take too longTraditional methods take too long

– Sketches Sketches prototype prototype evaluate evaluate iterateiterate Can simulate the proptotypeCan simulate the proptotype

– Sketches act as prototypeSketches act as prototype Designer “plays computer”Designer “plays computer” Other design team members observe & recordOther design team members observe & record Might sound silly, but is surprisingly effectiveMight sound silly, but is surprisingly effective

Kindergarten implementation skillsKindergarten implementation skills– Allows non-programmers to participateAllows non-programmers to participate

Widely used in industryWidely used in industry

Hi-Fi DisadvantagesHi-Fi Disadvantages

Distort perceptions of the testerDistort perceptions of the tester– Formal representation indicates “finished” Formal representation indicates “finished”

naturenature– People comment on color, fonts, and People comment on color, fonts, and

alignmentalignment Discourages major changesDiscourages major changes

– Testers don’t want to change a “finished” Testers don’t want to change a “finished” designdesign

– Designers don’t want to lose effort put into Designers don’t want to lose effort put into creating the hi-fi designcreating the hi-fi design

Constructing the Constructing the PrototypePrototype Set a deadlineSet a deadline

– Don’t think too long- just build it!Don’t think too long- just build it! Draw a window frame on large paperDraw a window frame on large paper

– Draw at a large size, but use correct aspect ratioDraw at a large size, but use correct aspect ratio Put different screen regions on cardsPut different screen regions on cards

– Anything that moves, changes, appears/disappearsAnything that moves, changes, appears/disappears– Scribble to indicate text if necessaryScribble to indicate text if necessary

Ready response for any user actionReady response for any user action– ie, have those pull-down menus already madeie, have those pull-down menus already made

Use photocopier to make many versionsUse photocopier to make many versions

Tips for Good Paper Tips for Good Paper PrototypesPrototypes Make it larger then lifeMake it larger then life Replace tricky visual feedback Replace tricky visual feedback

with audible descriptionswith audible descriptions– ““Drag & drop, animation, progress Drag & drop, animation, progress

bar”bar” Keep pieces organizedKeep pieces organized

– Use folders & open envelopesUse folders & open envelopes

Wizard of OzWizard of Oz

Research experiment Research experiment – Subjects interact with a “computer system”Subjects interact with a “computer system”– Illusion that the system is autonomousIllusion that the system is autonomous– It’s is actually being operated or partially It’s is actually being operated or partially

operated by a humanoperated by a human Depending on your level of illusion, this can be a Depending on your level of illusion, this can be a

person in another room manipulating the person in another room manipulating the computercomputer

Or a person in front of you physically moving the Or a person in front of you physically moving the paper prototypepaper prototype

The name of the experiment comes The name of the experiment comes from the “man behind the curtain” in from the “man behind the curtain” in The Wonderful Wizard of OzThe Wonderful Wizard of Oz

Preparing for a TestPreparing for a Test

Select your participantsSelect your participants– Understand the background of intended users Understand the background of intended users – Use a questionnaire to get the people you needUse a questionnaire to get the people you need– Don’t use friends or familyDon’t use friends or family

Prepare scenarios that arePrepare scenarios that are– Typical of the product during actual useTypical of the product during actual use– Make prototype support these (small, yet broad)Make prototype support these (small, yet broad)

Practice running the computer to avoid Practice running the computer to avoid “bugs”“bugs”– You will need every menu and dialog for the tasksYou will need every menu and dialog for the tasks– All widgets the user might pressAll widgets the user might press

Don’t forget the help and cancel buttons!Don’t forget the help and cancel buttons!

Conducting a TestConducting a Test

Three or Four testers (preferable)Three or Four testers (preferable)1.1. Greeter: Puts users at ease & gets dataGreeter: Puts users at ease & gets data

2.2. Facilitator: only team member who speaksFacilitator: only team member who speaks– Gives instructions & encourages thoughts, opinionsGives instructions & encourages thoughts, opinions

3.3. Computer: knows application logic & controls Computer: knows application logic & controls itit

– Always simulates the response, w/o explanationAlways simulates the response, w/o explanation

4.4. Observer(s): Take notes & recommendationsObserver(s): Take notes & recommendations Typical session should be about 1 hourTypical session should be about 1 hour

– Preparation, the test, debriefingPreparation, the test, debriefing

Conducting a Test Conducting a Test (cont.)(cont.) GreetGreet

– Get forms filled, assure confidentiality, etc.Get forms filled, assure confidentiality, etc. TestTest

– Facilitarot explains how test will workFacilitarot explains how test will work Preform a simple example taskPreform a simple example task

– Facilitator hands written tasks to the userFacilitator hands written tasks to the user Must be clear and detailedMust be clear and detailed

– Facilitator keeps getting “output” from userFacilitator keeps getting “output” from user ““think aloud”think aloud”

– Observers record what happensObservers record what happens Avoid strong reactions: frowning, laughing, looking impatient, Avoid strong reactions: frowning, laughing, looking impatient,

etc biases the testetc biases the test Designers should not lead participants!Designers should not lead participants!

– Let users figure things out themselves as much as possibleLet users figure things out themselves as much as possible– Only answer questions if user remains stuck for a long timeOnly answer questions if user remains stuck for a long time

Conducting a Test Conducting a Test (cont.)(cont.) DebriefDebrief

– Fill out post-evaluation Fill out post-evaluation questionnairequestionnaire

– Ask questions about parts you saw Ask questions about parts you saw problems onproblems on

– Gather impressionsGather impressions– Give thanks!Give thanks!

Test TipsTest Tips

Rehearse your actionsRehearse your actions– For a complicated UI, make a flowchart which For a complicated UI, make a flowchart which

is hidden from the useris hidden from the user– Make a list of legal words for a speech Make a list of legal words for a speech

interfaceinterface Stay “in role”Stay “in role”

– You are a computer, and have no common You are a computer, and have no common sense or ability to understand spoken Englishsense or ability to understand spoken English

Facilitator can remind user of the rules if Facilitator can remind user of the rules if the user gets stuckthe user gets stuck

Evaluating ResultsEvaluating Results

Sort & Prioritize observationsSort & Prioritize observations– What was important?What was important?– Lots of problems in the same area?Lots of problems in the same area?

Create a written report on Create a written report on findingsfindings– Gives agenda for meeting on design Gives agenda for meeting on design

changeschanges Make changes & iterate !Make changes & iterate !

ExerciseExercise

GoalGoal

Pick one user task that you are Pick one user task that you are planning to enable with your final planning to enable with your final project project

Something simple likeSomething simple like– Find friends of mine who are using Find friends of mine who are using

the applicationthe application– Create a new profileCreate a new profile– Change your preferencesChange your preferences

ExerciseExercise

Brainstorm about the user’s goalsBrainstorm about the user’s goals– What do they want to do?What do they want to do?– What information will they needWhat information will they need– What kind of interface supports these What kind of interface supports these

tasks?tasks? Create an initial low fidelity prototypeCreate an initial low fidelity prototype

– Debug the interface with users from Debug the interface with users from another groupanother 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 Drawbacks of Lo-Fi PrototypingPrototyping Evolving the prototype requires Evolving the prototype requires

redrawingredrawing– Can be slowCan be slow– Reprogramming can be slowerReprogramming can be slower

Lack support for “design memory”Lack support for “design memory” Force manual translation to electronic Force manual translation to electronic

formatformat Do not allow real-time end-user Do not allow real-time end-user

interactioninteraction

Down-sides to informal Down-sides to informal designdesign Paying ClientsPaying Clients

– Often see the fidelity of the interface Often see the fidelity of the interface as an indication of development effortas an indication of development effort

– Often hard to involve them as subjectsOften hard to involve them as subjects– Talk to them early and often!Talk to them early and often!– Talk to the same peopleTalk to the same people– Explain the process and set Explain the process and set

expectations up front!expectations up front!

ScreenshottingScreenshotting

Start with a Blank Start with a Blank PagePage

Use a drawing Use a drawing program to insert program to insert items you wantitems you want

Useful TricksUseful Tricks

Print Screen and then cut out elements you likePrint Screen and then cut out elements you like– Windows: Alt-PrtScn captures the active window into Windows: Alt-PrtScn captures the active window into

the clipboardthe clipboard– Mac Control - Command (Apple)-Shift-4 captures the Mac Control - Command (Apple)-Shift-4 captures the

“grabbed” area into the clipboard“grabbed” area into the clipboard– Mac OSX Grab UtilityMac OSX Grab Utility

Open Grab (located in Applications/Utility). Open Grab (located in Applications/Utility).

Use a simple graphics editor like Paint to stitch Use a simple graphics editor like Paint to stitch the images togetherthe images together– Copy & Paste many elements for different looks/feelsCopy & Paste many elements for different looks/feels

Web-BasedWeb-Based

Provides the illusion of interactivityProvides the illusion of interactivity Can employ screenshots to show Can employ screenshots to show

parts of your webpageparts of your webpage Can be used as just a “click-through” Can be used as just a “click-through”

of screenshotsof screenshots Good if you are considering adding Good if you are considering adding

features to an existing websitefeatures to an existing website

Card sortingCard sorting

Bryan TsaoBryan Tsao

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

Idiot’s guide to card Idiot’s guide to card sortingsorting Card sort when you have:Card sort when you have:

– Lots of contentLots of content– Content that could potentially be organized in Content that could potentially be organized in

multiple waysmultiple ways– Problems with navigation/users finding the Problems with navigation/users finding the

correct contentcorrect content Create cards that break down content to Create cards that break down content to

its constituent, generic partsits constituent, generic parts Allow users to organize and name their Allow users to organize and name their

own categoriesown categories

Intuit Accounting Intuit Accounting portalportal

DemoDemo

http://www.themindcanvas.com/dhttp://www.themindcanvas.com/demos/emos/

Nuts & BoltsNuts & Bolts

AssignmentsAssignments

Due Today:Due Today: Contextual inquiry (Due Sept. 27)Contextual inquiry (Due Sept. 27)

Due Thursday Oct 4Due Thursday Oct 4thth

Project Proposal (see handout)Project Proposal (see handout)

Reading for TuesdayReading for Tuesday

Part of your reading assignment for Part of your reading assignment for Tuesday will be emailed to you:Tuesday will be emailed to you:– Understanding Your UsersUnderstanding Your Users

by Kathy Baxterby Kathy Baxter

You need to be on the class mailing list You need to be on the class mailing list to get the documentto get the document

http://groups.google.com/group/cs160-http://groups.google.com/group/cs160-fall07fall07