cs298: hci design clinics paper prototyping 03/01/10 berkel ey university of california
TRANSCRIPT
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 money
Experiment with alternative designs
Fix problems before code is written
Keep the design centered on the userDesign
Prototype
Evaluate
Fidelity in PrototypingFidelity refers to the level of detailHigh fidelity?
Prototypes look like the final product
Low fidelity?
Artists renditions with many details missing
Hi-Fi DisadvantagesDistort perceptions of the testerFormal representation indicates “finished” naturePeople comment on color, fonts, and alignment
Discourages 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 ratio
Put different screen regions on cardsAnything that moves, changes, appears/disappearsUse greeking to indicate text if necessary
Ready response for any user actione.g., Have those pull-down menus already made
Use 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.
TestFacilitator explains how test will workPerforms a simple task
Facilitator hands written tasks to the userMust be clear & detailed
Facilitator 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 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/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 practices
2) Review ideas from video brainstorm
3) Create use scenario in words
4) 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 order
Hold 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)
Your Turn…Form teams (2-4 students)
You have 1 hour to create a stop-motion animated video prototype
Show&Tell at 5:45pm