Download presentation
Presentation is loading. Please wait.
Published byJob Perkins Modified over 9 years ago
1
Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Low-fi Prototyping April 24, 2008
2
CSE 490 L - Spring 20082 Interface Hall of Shame or Fame? Web site for Southwest Airlines –real world metaphor –simulates ticket counter
3
April 24, 2008CSE 490 L - Spring 20083 Hall of Shame! Taking the metaphor too far makes common tasks slow/hard to find –Which are these tasks?
4
April 24, 2008CSE 490 L - Spring 20084 Hall of Shame! New site makes common tasks prominent
5
April 24, 2008CSE 490 L - Spring 20085 Misused Metaphors Direct translations –software telephony solution that requires the user to dial a number by clicking on a simulated keypad –software CD player that requires turning volume knob with the mouse how about this button? –black on black cool, but you can’t see it –“click here” shouldn’t be necessary »like a door that has a sign telling you to push
6
Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Low-fi Prototyping April 24, 2008
7
CSE 490 L - Spring 20087 Outline Review design discovery Low-fi prototyping Wizard of Oz technique Informal UI prototyping tools
8
April 24, 2008CSE 490 L - Spring 2008 Design Discovery Review Key factors for web design are knowing ? –humans, tasks, technology, social/organization issues Techniques for knowing your customers –interviews, surveys, observation, task analysis, focus groups, card sorting, analyzing existing sites Design with goals in mind. Typical goals for web design are? –task completion %, task completion time, error rate, use of back button, satisfaction, fun, conversion rate… Tasks should describe, not –what user wants to do, not how to do it Tasks should … –describe a complete job, be very specific (based on facts), real tasks customers have faced… Iterative design is the key to quality. Evaluate w/ ? –informal usability tests and expert reviews 8
9
April 24, 2008CSE 490 L - Spring 20089 Why Do We Prototype? Experiment with alternative designs Get feedback on our design faster –fix problems before code is written –saves money Keep design centered on the customer –must test & observe ideas with customers
10
April 24, 2008CSE 490 L - Spring 200810 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
11
April 24, 2008CSE 490 L - Spring 200811 Low-fi Sketches & Storyboards
12
April 24, 2008CSE 490 L - Spring 200812 Low-fi Sketches & Storyboards Where do storyboards come from? –film & animation Give you a “script” of important events –leave out the details –concentrate on the important interactions
13
April 24, 2008CSE 490 L - Spring 2008 Ink Chat 13
14
April 24, 2008CSE 490 L - Spring 200814 Why Use Low-fi Prototypes? Traditional methods take too long –sketches prototype evaluate iterate Can instead simulate the prototype –sketches evaluate iterate –sketches act as prototypes designer “plays computer” other design team members observe & record Kindergarten implementation skills –allows non-programmers to participate
15
April 24, 2008CSE 490 L - Spring 200815 Hi-fi Prototypes Warp Perceptions of the tester/reviewer –representation communicates “finished” comments focus on color, fonts, & alignment Time –encourage precision specifying details takes more time Creativity –lose track of the big picture
16
April 24, 2008CSE 490 L - Spring 200816 The Basic Materials Large, heavy, white paper (11 x 17) 5x8 in. index cards Post-its Tape, stick glue, correction tape Pens & markers (many colors & sizes) Overhead transparencies Scissors, X-acto knives, etc.
17
from “Prototyping for Tiny Fingers” by Rettig 17
18
April 24, 200818CSE 490 L - Spring 2008
19
ESP April 24, 200819CSE 490 L - Spring 2008
20
April 24, 200820CSE 490 L - Spring 2008
21
April 24, 2008CSE 490 L - Spring 200821 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 pop-up menus already made Use photocopier to make many versions
22
April 24, 2008CSE 490 L - Spring 200822 Constructing the Model
23
April 24, 2008CSE 490 L - Spring 200823 Constructing the Model
24
April 24, 2008CSE 490 L - Spring 200824 Constructing the Model
25
April 24, 2008CSE 490 L - Spring 200825 Constructing the Model
26
April 24, 2008CSE 490 L - Spring 200826 Constructing the Model
27
April 24, 2008CSE 490 L - Spring 200827 Preparing for a Test Select your “customers” –understand background of intended users –use a questionnaire to get the people you need –don’t use friends or family I think existing “customers” are OK (some disagree) Prepare scenarios that are –typical of the product during actual use –make prototype support these (small, yet broad) Practice to avoid “bugs”
28
April 24, 2008CSE 490 L - Spring 200828 Conducting a Test Four testers (minimum) –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 –observers – take notes & recommendations Typical session is 1 hour –preparation, the test, debriefing Read the Snyder chapter on the web page for details on conducting a test
29
April 24, 2008CSE 490 L - Spring 200829 Conducting a Test
30
April 24, 2008CSE 490 L - Spring 200830 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
31
April 24, 2008CSE 490 L - Spring 200831 Advantages of Low-fi Prototyping Takes only a few hours –no expensive equipment needed Can test multiple alternatives –fast iterations number of iterations is tied to final quality Almost all interaction can be faked
32
April 24, 2008CSE 490 L - Spring 200832 Wizard of Oz Technique Faking the interaction. Comes from? –the film “The Wizard of OZ” “the man behind the curtain” Long tradition in computer industry –e.g., prototype of a PC w/ a VAX behind the curtain Much more important for hard to implement features –speech & handwriting recognition
33
April 24, 2008CSE 490 L - Spring 200833 Problems with Low-fi Prototypes “Computer” inherently buggy Slow compared to real app –timings not accurate Hard to implement some functionality –pulldowns, feedback, drag, viz … Won’t look like final product –sometimes hard to recognize widgets End-users can’t use by themselves –not in context of user’s work environment
34
April 24, 2008CSE 490 L - Spring 200834 Informal UI Prototyping Tools Denim Outpost Suede SketchWizard Topiary
35
April 24, 2008CSE 490 L - Spring 200835 Informal UI Prototyping Tools Support advantages of low-fi paper prototypes –brainstorming consider different ideas rapidly do not require specification of details –incomplete designs need not cover all cases, just illustrate important examples Add advantages of electronic tools –evolve easily –support for “design memory” –transition to other electronic tools –allow end-user interaction
36
April 24, 2008CSE 490 L - Spring 200836 Designers’ Outpost: A Tangible Interface for Designing Information Architectures Combines physical & virtual –physical post-its, virtual feedback Supports existing practice –affordances of paper –collaboration –large, persistent representation Adds advantages of e-media –editing, reuse, distribution –hand-off later to other tools
37
April 24, 2008CSE 490 L - Spring 200837
38
April 24, 2008CSE 490 L - Spring 200838 DENIM: Designing Web Sites by Sketching Early-phase navigation & interaction design Integrates multiple views –site map – storyboard – page sketch
39
April 24, 2008CSE 490 L - Spring 200839 Video
40
April 24, 2008CSE 490 L - Spring 200840 Travelshare Low-fi Prototyping & Testing
41
April 24, 2008CSE 490 L - Spring 200841 Summary Low-fi testing allows us to quickly iterate –get feedback from users & change right away Informal prototyping tools bridge the gap between paper & high-fi tools –keep focus on high level structure & interaction and not on visual detail
42
April 24, 2008CSE 490 L - Spring 200842 Homework #4 – Low-fi Prototype Revise the designs you turned in this week –Using feedback on talk sheets and assignment feedback (Sean will return on Friday afternoon – pick up at his office) Revise tasks as necessary based on our comments –Again check presentation grading sheets Iterate on your design together as group –try several ideas Create a paper-computer & practice running it Test with at least 3 participants (not in class or friends)
43
April 24, 2008CSE 490 L - Spring 200843 Further Reading Prototyping Books –Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces, by Carolyn Snyder, Morgan Kaufmann, 2003Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces Articles –“Prototyping for Tiny Fingers” by Marc Rettig, in Communications of the ACM, 1994“Prototyping for Tiny Fingers” –“Using Paper Prototypes to Manage Risk” by Carolyn Snyder, http://world.std.com/~uieweb/paper.htm“Using Paper Prototypes to Manage Risk” –“The Perils of Prototyping” by Alan Cooper,“The Perils of Prototyping” http://www.chi-sa.org.za/Documents/articles/perils.htm Web Sites –dub group, for DENIM & SUEDE downloads, http://dub.washington.edu http://dub.washington.edu –InfoDesign Toolkit, http://www.infodesign.com.auInfoDesign Toolkithttp://www.infodesign.com.au
44
April 24, 2008CSE 490 L - Spring 200844 Next Time Wireframing, Scripting, & Hi-fi Prototyping Using Patterns for Design Reading –Read patterns TBD (check web site)
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.