Design Process: Implement Low Fidelity Prototyping

1
Design Process Implement Low Fidelity
Prototyping

• Christine Robson Bryan Tsao
• September 27, 2007

2
Sit with your groups!

• Well be doing an in-class exercise

3
Today

• Lo-Fidelity Prototypes
• Paper Prototypes
• Wizard of Oz
• Screenshotting
• Web-based
• Card sorting

4
Why do we prototype?

• Get feedback faster, cheaper
• Experiment with alternative designs
• Fix problems before code is written
• Easier to change or throw away

5
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

6
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 non-linear to
  support user action choices

7
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

8
Hi-Fi Disadvantages

• Distort perceptions of the tester
• Formal representation indicates finished nature
• People comment on color, fonts, and alignment
• Discourages major changes
• Testers dont want to change a finished design
• Designers dont want to lose effort put into
  creating the hi-fi design

9
Constructing the Prototype

• Set a deadline
• Dont 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

10
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

11
Wizard of Oz

• Research experiment
• Subjects interact with a computer system
• Illusion that the system is autonomous
• Its 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

12
Preparing for a Test

• Select your participants
• Understand the background of intended users
• Use a questionnaire to get the people you need
• Dont 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
• Dont forget the help and cancel buttons!

13
Conducting a Test

• Three or Four testers (preferable)
• Greeter Puts users at ease gets data
• Facilitator only team member who speaks
• Gives instructions encourages thoughts,
  opinions
• Computer knows application logic controls it
• Always simulates the response, w/o explanation
• Observer(s) Take notes recommendations
• Typical session should be about 1 hour
• Preparation, the test, debriefing

14
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

15
Conducting a Test (cont.)

• Debrief
• Fill out post-evaluation questionnaire
• Ask questions about parts you saw problems on
• Gather impressions
• Give thanks!

16
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

17
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 !

18
Exercise
19
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

20
Exercise

• Brainstorm about the users 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?

21
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

22
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!

23
Screenshotting
24
Start with a Blank Page
25
Use a drawing program to insert items you want
26
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

27
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

28
Card sorting

• Bryan Tsao

29
What is card sorting?
A method by which you can get users to organize
content into user-generated groups.
30
Idiots 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

31
Intuit Accounting portal
32
Demo

• http//www.themindcanvas.com/demos/

33
Nuts Bolts
34
Assignments

• Due Today
• Contextual inquiry (Due Sept. 27)
• Due Thursday Oct 4th
• Project Proposal (see handout)

35
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