CS298: HCI Design ClinicsPaper Prototyping 03/01/10

Berkeley

U N I V E R S I T Y O F C A L I F O R N I A

Topics

1. Intro to Paper Prototyping

2. Testing with Paper Prototypes

3. From Paper to Video Prototypes

Paper Prototyping

Why Do We Prototype?Get feedback on our design faster

Saves moneyExperiment with alternative designsFix problems before code is writtenKeep the design centered on the user

DesignPrototype

Evaluate

Fidelity in PrototypingFidelity refers to the level of detailHigh fidelity?

Prototypes look like the final productLow fidelity?

Artists renditions with many details missing

Hi-Fi DisadvantagesDistort perceptions of the testerFormal representation indicates “finished” naturePeople comment on color, fonts, and alignmentDiscourages major changesTesters don’t want to change a “finished” designDesigners don’t want to lose effort put into creating hi-fi design

Materials Large, heavy, white paper (11 x 17)5x8 in. index cardsPost-it notesTape, stick glue, correction tapePens & markers (colors & sizes)Transparencies (including colored)Colorforms (toy stores)Scissors, X-acto knives, etc.

Interface Elements

Nielsen/Norman VideoI showed 10 minutes from the Nielsen Norman Group’s Paper Prototyping: A How-To Training Videohttp://www.nngroup.com/reports/prototyping/

Constructing the PrototypeSet a deadlineDon’t think too long - build it!Draw a window frame on large paperDraw at a large size, but use correct aspect ratioPut different screen regions on cardsAnything that moves, changes, appears/disappearsUse greeking to indicate text if necessaryReady response for any user actione.g., Have those pull-down menus already madeUse photocopier to make many versions

Paper Prototype Testing

SIMS 213 Project: Telebears redesign

User “Computer”

Observer(or video camera)

InterfaceInterface elements

Conducting a TestThree or Four testers (preferable)Greeter - Puts users at ease & gets dataFacilitator - only team member who speaks

Gives instructions & encourages thoughts, opinionsComputer - knows application logic & controls it

Always simulates the response, w/o explanationObserver(s) - Take notes & recommendations

Typical session should be approximately 1 hourPreparation, the test, debriefing

Conducting a Test (cont.)Greet

Get forms filled, assure confidentiality, etc.Test

Facilitator explains how test will workPerforms a simple taskFacilitator hands written tasks to the userMust be clear & detailedFacilitator keeps getting “output” from participant“What are you thinking right now?”, “Think aloud”Observers record what happensAvoid strong reactions:, frowning, laughing, impatience – biases the test

Designers should not lead participantsLet users figure things out themselves as much as possibleOnly answer questions if user remains stuck for a long time

Conducting a Test (cont.)DebriefFill out post-evaluation questionnaireAsk questions about parts you saw problems onGather impressionsGive thanks

Preparing for a TestSelect your participantsUnderstand background of intended usersUse a questionnaire to get the people you needDon’t use friends or family

Prepare scenarios that areTypical of the product during actual useMake prototype support these (small, yet broad)

Practice running the computer to avoid “bugs”You need every menu and dialog for the tasksAll widgets the user might pressRemember “help” and “cancel” buttons

WOZ is different from pre-built/canned functionality

TipsRehearse your actions Make a flowchart which is hidden from the userMake list of legal words for a speech interfaceStay “in role”You are a computer, and have no common sense, or ability to understand spoken English.

Facilitator can remind user of the rules/think-aloud approach if the user gets stuck

Advantages of Low-Fi PrototypingTakes only a few hoursNo expensive equipment needed

Can test multiple alternatives Fast iterationsNumber of iterations is tied to final quality

Can change the design as you test If users are trying to use the interface in a way you didn’t design it – go with what they think! Adapt!

Especially useful for hard to implement featuresSpeech and handwriting recognition

Drawbacks of Lo-Fi PrototypingEvolving the prototype requires redrawingCan be slow (but reprogramming usually slower)

Lack support for “design memory”

Force manual translation to electronic format

Do not allow real-time end-user interaction

SummaryInformal prototypes allow you to design (and test!) before writing code.

Rapid evolution and elimination of many problems happens in this phase.

Paper+ink is the traditional tool

Video Prototyping

Forms of Video PrototypesBuild on paper prototypes Use existing software & images of real settingsNarration optional (but required for your assignment!)

Explain events while others move images/illustrate interaction

With good storyboards, should be able to create video prototype in 1 hour

CSE440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 24

CSE440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 25

Creating a Video Prototype1) Review field data about users & work practices2) Review ideas from video brainstorm3) Create use scenario in words4) Develop storyboard of each action/event with

annotations explaining the scene. Put each element on a card.

5) Shoot a video clip for each storyboard card Avoid editing in the camera – just shoot in storyboard orderHold last frame of a section/shot for 1s

6) Use title cards to separate clips (keep it onscreen for 3s)if you make an error, rewind to last title card & reshoot

Andy Hou and Kevin Chiu: Univ. of Washington

Cluster

CSE440 - Autumn 2008 User Interface Design, Prototyping, and Evaluation 27

Tips & TricksAdd structure to better explain context

begin with a titlefollow with an “establishing shot”create series of closeup & mid-range shots, interspersed with title

cardsplace a final card with credits at the end

Use colored paper title cards -- aids edit/search of video

Stop-motion lets images appear & disappear based on interaction

e.g., illustrate pop-up menu by recording clip of user pressing button, pause camera, add menu, restart camera

Be careful about taking video out of the original design setting for ethical reasons (context matters)

http://www.samanimation.com/index.php?option=com_seyret&Itemid=6&task=videodirectlink&id=689

Your Turn…Form teams (2-4 students)

You have 1 hour to create a stop-motion animated video prototype

Show&Tell at 5:45pm