Presentation is loading. Please wait.

Presentation is loading. Please wait.

Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Low-fi Prototyping April 24, 2008.

Similar presentations


Presentation on theme: "Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Low-fi Prototyping April 24, 2008."— Presentation transcript:

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)


Download ppt "Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Low-fi Prototyping April 24, 2008."

Similar presentations


Ads by Google