Week 11 Rapid Prototyping


Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Week 11 Rapid Prototyping

  1. 1. Lecture 11 Rapid Prototyping UX Theory / IIT 2014 Spring Class hours : Monday 4 pm – 7 pm 19th May
  2. 2. Exercise 10-2: Creating Benchmark Tasks and UX Targets for Your System • Goal – To gain experience in writing effective benchmark tasks and measurable UX targets. • Activities – We have shown you a rather complete set of examples of benchmark tasks and UX targets for the Ticket Kiosk System. Your job is to do something similar for the system of your choice. – Begin by identifying which work roles and user classes you are targeting in evaluation (brief description is enough). – Write three or more UX table entries (rows), including your choices for each column. Have at least two UX targets based on a benchmark task and at least one based on a questionnaire. – Create and write up a set of about three benchmark tasks to go with the UX targets in the table. • Do NOT make the tasks too easy. • Make tasks increasingly complex. • Include some navigation. • Create tasks that you can later “implement” in your low-fidelity rapid prototype. • The expected average performance time for each task should be no more than about 3 minutes, just to keep it short and simple for you during evaluation. – Include the questionnaire question numbers in the measuring instrument column of the appropriate UX target. Lecture #11 IIT_UX Theory 2
  3. 3. Exercise 10-2: Creating Benchmark Tasks and UX Targets for Your System • Cautions and hints: – Do not spend any time on design in this exercise; there will be time for detailed design in the next exercise. – Do not plan to give users any training. • Deliverables: – Two user benchmark tasks, each on a separate sheet of paper. – If you are doing this exercise in a classroom environment, finish up by reading your benchmark tasks to the class for critique and discussion. • Schedule – Work efficiently and complete in about an hour and a half. Lecture #11 IIT_UX Theory 3
  4. 4. INTRODUCTION Lecture #11 IIT_UX Theory 4 Figure 11-1 You are here; the chapter on prototyping in the context of the overall Wheel lifecycle template.
  5. 5. INTRODUCTION • A Dilemma, and a Solution – how to use prototyping as a hatching oven for partially baked designs within the overall UX lifecycle process. – Universality of prototyping • The idea of prototyping is timeless and universal. – Scandinavian origins : Activity theory and research • emphasized the need to foster early and detailed communication about design and participation in understanding the requirements for that design. Lecture #11 IIT_UX Theory 5
  6. 6. DEPTH AND BREADTH OF A PROTOTYPE • Horizontal vs. Vertical Prototypes Lecture #11 IIT_UX Theory 6 Figure 11-2 Horizontal and vertical prototyping concepts, from Nielsen (1993), with permission.
  7. 7. DEPTH AND BREADTH OF A PROTOTYPE • “T” Prototypes – combines the advantages of both horizontal and vertical • Local Prototypes – We call the small area where horizontal and vertical slices intersect a “local prototype” – used to evaluate design alternatives for particular isolated interaction details, such as the appearance of an icon, wording of a message, or behavior of an individual function. Lecture #11 IIT_UX Theory 7
  8. 8. FIDELITY OF PROTOTYPES • Low-Fidelity Prototypes • Medium-Fidelity Prototypes • High-Fidelity Prototypes Lecture #11 IIT_UX Theory 8
  9. 9. INTERACTIVITY OF PROTOTYPES • Scripted and “Click-Through” Prototypes • A Fully Programmed Prototype • “Wizard of Oz” Prototypes: Pay No Attention to the Man Behind the Curtain • Physical MockUps for Physical Interactivity • Paper-in-device mockup prototype, especially for mobile applications • Animated Prototypes Lecture #11 IIT_UX Theory 9
  10. 10. CHOOSING THE RIGHT BREADTH, DEPTH, LEVEL OF FIDELITY, AND AMOUNT OF INTERACTIVITY • Using the Right Level of Fidelity for the Current Stage of Progress – Choosing your audience and explaining the prototype – A progression of increasing fidelity to match your stage of progress • Using the Right Level of Fidelity for the Design Perspective Being Addressed – Prototyping for the ecological perspective – Prototyping for the interaction perspective – Prototyping for the emotional perspective Lecture #11 IIT_UX Theory 10
  11. 11. CHOOSING THE RIGHT BREADTH, DEPTH, LEVEL OF FIDELITY, AND AMOUNT OF INTERACTIVITY Lecture #11 IIT_UX Theory 11 Ideation and sketching To support exploring ideas, brainstorming, and discussion (so design details are inappropriate) Sketches, fast and disposable mockups, ultralow fidelity Conceptual design To support exploration and creation of conceptual design, the high-level system structure, and the overall interaction metaphor Evolution from hand-drawn paper, computer-printed paper, low-fidelity wireframes, high-fidelity wireframes, to pixel-perfect interactive mockups (to communicate with customer) Intermediate design To support interaction design for tasks and task threads Evolution from paper to wireframes Detailed design Support for deciding navigation details, screen design and layout,including pixel-perfect visual comps complete specification for look and feel of the “skin” Detailed wireframes and/or pixel- perfect interactive mockups Design refinement To support evaluation to refine a chosen design by finding and removing as many UX problems as possible Medium to high fidelity, lots of design detail, possibly a programmed prototype Table 11-1 Summary of the uses for various levels of fidelity and types of prototypes
  12. 12. CHOOSING THE RIGHT BREADTH, DEPTH, LEVEL OF FIDELITY, AND AMOUNT OF INTERACTIVITY • Managing Risk and Cost within Stages of Progress and within Design Perspectives – the appearance, especially the visual aspects of the user interface objects – the behavior, including sequencing and responses to user actions Lecture #11 IIT_UX Theory 12 Low fidelity (e.g., paper) Flexibility; easy to change sequencing, overall behavior Early Almost none Low High fidelity (e.g., computer) Fidelity of Appearance Later Intermediate High Table 11-2 Summary of comparison of low- fidelity and high- fidelity prototypes
  13. 13. CHOOSING THE RIGHT BREADTH, DEPTH, LEVEL OF FIDELITY, AND AMOUNT OF INTERACTIVITY • Summary of the Effects of Breadth, Depth, and Fidelity Factors Lecture #11 IIT_UX Theory 13 Figure 11-3 Depth, breadth, and fidelity considerations in choosing a type of prototype.
  14. 14. PAPER PROTOTYPES • Paper Prototypes for Design Reviews and Demos • Hand-Drawn Paper Prototypes • Computer-Printed Paper Prototypes • Is not paper just a stopgap medium? • Why Not Just Program a Low-Fidelity Prototype? Lecture #11 IIT_UX Theory 14
  15. 15. PAPER PROTOTYPES • How to Make an Effective Paper Prototype – Start by setting a realistic deadline. – Gather a set of paper prototyping materials. – Work fast and do not color within the lines. – Draw on everything you have worked on so far for the design. – Make an easel to register (align) your screen and user interface object sheets of paper and plastic. (Figures 11-4, 11-5) – Make underlying paper foundation “screens.” (Figure 11-6.) – Use paper cutouts taped onto full-size plastic “interaction sheets” for all moving parts. (Figure 11-7, 11-8) – Be creative. (Figure 11-9, 11-10) Lecture #11 IIT_UX Theory 15
  16. 16. PAPER PROTOTYPES Lecture #11 IIT_UX Theory 16 Figure 11-4 Foam-core board paper prototype easel with “stops” to align the interaction sheets. Figure 11-5 Another style of “stops” on a foam-core board paper prototype easel.
  17. 17. PAPER PROTOTYPES Lecture #11 IIT_UX Theory 17 Figure 11-6 Underlying paper foundation “screen.”
  18. 18. PAPER PROTOTYPES Lecture #11 IIT_UX Theory 18 Figure 11-7 Paper cutouts taped to full size plastic for moving parts.
  19. 19. PAPER PROTOTYPES Lecture #11 IIT_UX Theory 19 Figure 11-8 A “Preferences” dialogue box taped to plastic and aligned in easel.
  20. 20. PAPER PROTOTYPES Lecture #11 IIT_UX Theory 20 Figure 11-9 Pull-down menu on a tape “hinge.”
  21. 21. PAPER PROTOTYPES Lecture #11 IIT_UX Theory 21 Figure 11-10 Paper sliding through a slit for scrolling.
  22. 22. PAPER PROTOTYPES – Do not write or mark on plastic interaction sheets. – Make highlights on plastic with “handles” for holding during prototype execution. (Figure 11-11) – Make your interaction sheets highly modular by including only a small amount on each one. – Get modularity by thinking about whatever needs to appear by itself. (Figure 11-12) – Do lots of sketching and storyboarding before making interaction sheets. – Use every stratagem for minimizing work and time. – Reuse at every level. Lecture #11 IIT_UX Theory 22
  23. 23. PAPER PROTOTYPES Lecture #11 IIT_UX Theory 23 Figure 11-11 Selection highlight on plastic with a long handle.
  24. 24. PAPER PROTOTYPES Lecture #11 IIT_UX Theory 24 Figure 11-12 Lots of pieces of dialogue as paper cutouts aligned on plastic sheets.
  25. 25. PAPER PROTOTYPES – Cut corners when it does not hurt things. – Make the prototype support key tasks. – Make a “this feature not yet implemented” message. (Figure 11-13) – Include “decoy” user interface objects. – Accommodate data value entry by users. (Figure 11-14) – Create a way to manage complex task threads. (Figure 11-15) – Pilot test thoroughly. Lecture #11 IIT_UX Theory 25
  26. 26. PAPER PROTOTYPES Lecture #11 IIT_UX Theory 26 Figure 11-13 “Not yet implemented” message.
  27. 27. PAPER PROTOTYPES Lecture #11 IIT_UX Theory 27 Figure 11-14 Data entry on clear plastic overlay sheet.
  28. 28. PAPER PROTOTYPES Lecture #11 IIT_UX Theory 28 Figure 11-15 Adhesive-backed circles for color coding task threads on prototype pieces.
  29. 29. ADVANTAGES OF AND CAUTIONS ABOUT USING PROTOTYPES • Advantages of Prototyping – Offer concrete baseline for communication between users and designers – Provide conversational “prop” to support communication of concepts not easily conveyed verbally – Allow users to “take the design for a spin” (who would buy a car without taking it for a test drive or buy a stereo system without first listening to it?) – Give project visibility and buy-in within customer and developer organizations – Encourage early user participation and involvement – Give impression that design is easy to change because a prototype is obviously not finished – Afford designers immediate observation of user performance and consequences of design decisions – Help sell management an idea for new product – Help affect a paradigm shift from existing system to new system Lecture #11 IIT_UX Theory 29
  30. 30. ADVANTAGES OF AND CAUTIONS ABOUT USING PROTOTYPES • Potential Pitfalls of Prototyping – Get cooperation, buy-in, and understanding – Be honest about limitations and do not overpromise – Do not overwork your prototype Lecture #11 IIT_UX Theory 30
  31. 31. PROTOTYPES IN TRANSITION TO THE PRODUCT • Graduation Day in the Trenches: The Sacred Passing of the Prototype – What happens to the prototype code? – You cannot just keep the prototype – How do you reuse the interaction design of the prototype? – The need for UX and SE collaboration and respect – Do not think the UX team is now done Lecture #11 IIT_UX Theory 31
  32. 32. SOFTWARE TOOLS FOR PROTOTYPING • Desiderata for Prototyping Tools – Fast and effortless changes • Ease on the order of that of paper prototypes: as natural as changing a paper prototype • Tool transparency: Needs so little focus on the software that it does not distract from the design and prototype building • Fast turnaround to executability so there is almost no wait before it can be executed again – Non-programmer ease of prototype definition and use • Non-programmers must be able to define and modify design features – Built-in common behaviors and access to large varieties of other behaviors via a library of plug-ins • Easily include realism of features and behavior commensurate with expectations for modern interaction styles Lecture #11 IIT_UX Theory 32
  33. 33. SOFTWARE TOOLS FOR PROTOTYPING – Supports a wide variety of interaction styles and devices, including various pointing and selecting devices, touchscreens, speech/audio, tactile/haptic, and gesture – Ease of creating and modifying links to various points within the interaction design (e.g., buttons, icons, and menu choices to particular screens) to simulate user navigational behavior – Communication with external procedures and programs (e.g., calls, call-backs, data transfer) to include some functionality and additional application behavior – Capability to import text, graphics, and other media from other sources – Capability to export look and feel components for eventual transition to final product code Lecture #11 IIT_UX Theory 33
  34. 34. Exercise 11-1: Building a Low-Fidelity Paper Prototype for Your System • Goal – To obtain experience with rapid construction of a low-fidelity prototype for early stages of user interaction design and to have a real paper prototype to generate lots of critical incidents later in your evaluation exercise. • Activities – This should be one of your most fun exercises, but it can also be a lot of work. – Following the guidelines for paper prototype construction given in Section 11.6.5, build a paper prototype for your system or product design. – Make sure that the prototype will support at least the benchmark tasks, descriptions for which you wrote in the previous exercise. – Add in some other “decoy” interaction design “features,” widgets, and objects so that the prototype does not look tailored to just your benchmark tasks. Lecture #11 IIT_UX Theory 34
  35. 35. Exercise 11-1: Building a Low-Fidelity Paper Prototype for Your System • Cautions and hints: – It is normal for you to have to do more design work during this exercise, to complete details that were not fully designed in previous exercises. – Remember: You are learning the process, not creating a perfect design or prototype. – Assuming you are doing this as a team: Get everyone on your team involved in drawing, cutting, taping, and so on, not just one or two people. – You will be done much faster if everyone pitches in. – This is not art class so do not worry too much about straight lines, exact details, etc. – Pilot test to be sure it will support your benchmark tasks for evaluation. • Deliverables: – A right smart “executable” paper prototype that will support your benchmark tasks in user experience testing, and your pilot tests passed with flying colors (no monochromatic flying). • Schedule – Just git ‘er done. It could take several hours, but it is essential for all the exercises that follow. Lecture #11 IIT_UX Theory 35
  36. 36. Click-through Prototyping Gadgets Lecture #11 IIT_UX Theory 36 https://popapp.in/ http://www.smashingmagazine.com/2014/03/06/building-clickthrough-prototypes-to-support-participatory-design/