Design Process: Implement Low Fidelity Prototyping Christine Robson & Bryan Tsao September 27, 2007
Download
Report
Transcript Design Process: Implement Low Fidelity Prototyping Christine Robson & Bryan Tsao September 27, 2007
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
– Paper Prototypes
– Wizard of Oz
– Screenshotting
– Web-based
Card sorting
Why do we prototype?
Get feedback faster, cheaper
Experiment with alternative designs
Fix problems before code is written
Easier to change or throw away
Fidelity in Prototyping
Fidelity refers to the level of detail
High fidelity
– Prototypes look like the final product
Low fidelity
– Artists renditions with many details
missing
Low-Fi Storyboards
Where do storyboards come from?
– Film & Animation
Give you a “script” of important events
– Leave out the details
– Concentrate on the important interactions
In UI design, the storyboard is nonlinear to support user action choices
Why Use Low-Fi
Prototypes
Traditional methods take too long
– Sketches prototype evaluate iterate
Can simulate the proptotype
– Sketches act as prototype
Designer “plays computer”
Other design team members observe & record
Might sound silly, but is surprisingly effective
Kindergarten implementation skills
– Allows non-programmers to participate
Widely used in industry
Hi-Fi Disadvantages
Distort perceptions of the tester
– Formal representation indicates “finished” nature
– People comment on color, fonts, and alignment
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
– Don’t think too long- just build it!
Draw a window frame on large paper
– Draw at a large size, but use correct aspect ratio
Put different screen regions on cards
– Anything that moves, changes, appears/disappears
– Scribble to indicate text if necessary
Ready response for any user action
– ie, have those pull-down menus already made
Use photocopier to make many versions
Tips for Good Paper
Prototypes
Make it larger then life
Replace tricky visual feedback with
audible descriptions
– “Drag & drop, animation, progress bar”
Keep pieces organized
– Use folders & open envelopes
Wizard of Oz
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
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
Preparing for a Test
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
– Typical of the product during actual use
– Make prototype support these (small, yet broad)
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!
Conducting a Test
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
–
Preparation, the test, debriefing
Conducting a Test (cont.)
Greet
– Get forms filled, assure confidentiality, etc.
Test
– Facilitarot explains how test will work
Preform a simple example task
– Facilitator hands written tasks to the user
Must be clear and detailed
– Facilitator keeps getting “output” from user
“think aloud”
– Observers record what happens
Avoid strong reactions: frowning, laughing, looking impatient, etc
biases the test
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
– Fill out post-evaluation questionnaire
– Ask questions about parts you saw
problems on
– Gather impressions
– Give thanks!
Test Tips
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”
– 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
Evaluating Results
Sort & Prioritize observations
– What was important?
– Lots of problems in the same area?
Create a written report on findings
– Gives agenda for meeting on design
changes
Make changes & iterate !
Exercise
Goal
Pick one user task that you are
planning to enable with your final
project
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
– What do they want to do?
– What information will they need
– What kind of interface supports these tasks?
Create an initial low fidelity prototype
– Debug the interface with users from another
group
Does the interface meet your needs?
Is the interface hassle-free?
Is the interface confusing or difficult?
Drawbacks of Lo-Fi
Prototyping
Evolving the prototype requires redrawing
– Can be slow
– Reprogramming can be slower
Lack support for “design memory”
Force manual translation to electronic
format
Do not allow real-time end-user interaction
Down-sides to informal
design
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
– 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).
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
Can employ screenshots to show parts
of your webpage
Can be used as just a “click-through”
of screenshots
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:
– 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
Allow users to organize and name their own
categories
Intuit Accounting portal
Demo
http://www.themindcanvas.com/demo
s/
Nuts & Bolts
Assignments
Due Today:
Contextual inquiry (Due Sept. 27)
Due Thursday Oct 4th
Project Proposal (see handout)
Reading for Tuesday
Part of your reading assignment for Tuesday
will be emailed to you:
– Understanding Your Users
by Kathy Baxter
You need to be on the class mailing list to
get the document
http://groups.google.com/group/cs160-fall07