Date post: | 20-Dec-2015 |
Category: |
Documents |
View: | 215 times |
Download: | 2 times |
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