SIMS 213: User Interface Design & Development Marti Hearst Tues Feb 20, 2001.
-
date post
23-Jan-2016 -
Category
Documents
-
view
216 -
download
0
Transcript of SIMS 213: User Interface Design & Development Marti Hearst Tues Feb 20, 2001.
SIMS 213: User Interface Design &
Development
Marti Hearst
Tues Feb 20, 2001
Slide adapted from James Landay
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 user
Slide adapted from James Landay
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
Paper prototyping
Main idea:– Sketch out prototypes of the interface on paper– Potential users “walk through” task scenarios using the paper
interface– A designer “plays computer”– Change the design on-the-fly if helpful
Widely practiced in industry– Sounds silly at first, but is surpringly effective– Helps people work together on the design
Readings by Rettig, Cooper, Klee, Spool’s group– This discussion primarily follows Rettig’s article
Slide adapted from James Landay
The Materials
Large, heavy, white paper (11 x 17) 5x8 in. index cards Post-it notes Tape, stick glue, correction tape Pens & markers (many colors & sizes)
Transparencies (including colored) Colorforms (toy stores) Scissors, X-acto knives, etc.
Slide adapted from James Landay
Constructing the Model
Set a deadline– don’t think too long - build it!
Draw a window frame on large paper Put different screen regions on cards
– anything that moves, changes, appears/disappears
Ready response for any user action– e.g., have those pull-down menus already made
Use photocopier to make many versions
Slide adapted from James Landay
Preparing for a Test
Select your participants– understand 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”
Slide adapted from James Landay
Conducting a Test
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 is approximately 1 hour– preparation, the test, debriefing
Slide adapted from James Landay
Conducting a Test (cont.)
Greet– get forms filled, assure confidentiality, etc.
Test– facilitator hands written tasks to the user
must be clear & detailed
– facilitator keeps getting “output” from participant “What are you thinking right now?”, “Think aloud”
– observe -> no “a-ha”, laugh, gape, etc.
Slide adapted from James Landay
Conducting a Test (cont.)
Debrief– fill out post-evaluation questionnaire– ask questions about parts you saw problems on– gather impressions– give thanks
Slide adapted from James Landay
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
Potential difficulties
Interfaces with large focus on content– Dynamic or static; both are ill-suited
Use word processor for large sets of text
– For search/database applications Have pre-planned searches (not very realistic) Write up search results on the fly
– Maybe have a printer nearby that can produced typed results Bottom line: can only prototype the main interaction this
way; search needs to be hooked up to really test the search mechanism
Potential difficulties
Interfaces that use animation / dynamic graphics– IUE’s answer: maybe it isn’t all that usable to have
flash– Broader answer:
Only testing the main functionality, not the finer points The interface should also work without the flash
– Use transparencies, etc, for important rollovers.
Slide adapted from James Landay
Advantages of Low-fi Prototyping
Takes only a few hours– no expensive equipment needed
Can test multiple alternatives 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!
Allows designers to work together
Examples
For more detail, see http://www.sims.berkeley.edu/courses/is213/s99/Projects.html
History/Bookmark web browser interface Collection Selection Interface Knowledge Management Interface Airline Reservation interface
Sho, Shamma, von Krogh, Johnstad
Sho, Shamma, von Krogh, Johnstad
Sho, Shamma, von Krogh, Johnstad
Costa, Chopra, Orr, Stetson
Brandt, Falk, McMahon
Brandt, Falk, McMahon
Hernandez, Liang
Designing a content pageUsing low-fi techniques
Combine low-fi paper prototyping and card sorting– Idea from Peter Merholtz
Start with a page with all the features you might want Cut it up into pieces Have people arrange the components
– One set of users sorts into groups, as in card sorting for categories
– Another set of users lays out the information in a way that would work well for them given certain tasks.
Designing a content pageusing low-fi techniques
Additional hints– Have a discard pile to get rid of things
Helps decide what to discard, put toward bottom– Allow additions, reformatting, etc.
(People probably will only rarely add)– Back up the paper with sturdy paper
Aids re-use– Make it easy to draw and change grouping relationships
Put a whiteboard on a table and put pieces of paper on top of that; use whiteboard pens to draw relationships
Use colorforms or felt to make this work on a vertical surface
Slide adapted from James Landay
Wizard of Oz Technique
Faking the interaction. – The term is from the film “The Wizard of OZ”– “the man behind the curtain”
Main idea:– The participant interacts with a computer interface as usual– Instead of the program writing back, a person writes back
pretending to be the computer
Very useful for assessing hard-to-implement features– Speech & handwriting recognition interface design
DENIM
A research effort at UCB intended to combine the best of paper and computers– Allows for free-hand sketching– But also allows for undo, copies, etc.
Has a storyboarding facility– Can help design the interactions for the person
playing computer