[hci] week 11. prorotyping
TRANSCRIPT
![Page 1: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/1.jpg)
Lecture 11
Prototyping
Human Computer Interaction / COG3103, 2015 Fall Class hours : Tue 1-3 pm/Thurs 12-1 pm 10 & 12 November
![Page 2: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/2.jpg)
PROTOTYPING The UX Book/Chapter 11.
Lecture #11 COG_Human Computer Interaction 2
![Page 3: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/3.jpg)
INTRODUCTION
Lecture #11 COG_Human Computer Interaction 3
Figure 11-1 You are here; the chapter on prototyping in the context of the overall Wheel lifecycle template.
![Page 4: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/4.jpg)
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 COG_Human Computer Interaction 4
![Page 5: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/5.jpg)
DEPTH AND BREADTH OF A PROTOTYPE
• Horizontal vs. Vertical Prototypes
Lecture #11 COG_Human Computer Interaction 5
Figure 11-2 Horizontal and vertical prototyping concepts, from Nielsen (1993), with permission.
![Page 6: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/6.jpg)
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 COG_Human Computer Interaction 6
![Page 7: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/7.jpg)
FIDELITY OF PROTOTYPES
• Low-Fidelity Prototypes
• Medium-Fidelity Prototypes
• High-Fidelity Prototypes
Lecture #11 COG_Human Computer Interaction 7
![Page 8: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/8.jpg)
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 COG_Human Computer Interaction 8
![Page 9: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/9.jpg)
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 COG_Human Computer Interaction 9
![Page 10: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/10.jpg)
CHOOSING THE RIGHT BREADTH, DEPTH, LEVEL OF FIDELITY, AND AMOUNT OF INTERACTIVITY
Lecture #11 COG_Human Computer Interaction 10
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
![Page 11: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/11.jpg)
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 COG_Human Computer Interaction 11
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
![Page 12: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/12.jpg)
CHOOSING THE RIGHT BREADTH, DEPTH, LEVEL OF FIDELITY, AND AMOUNT OF INTERACTIVITY
• Summary of the Effects of Breadth, Depth, and Fidelity Factors
Lecture #11 COG_Human Computer Interaction 12
Figure 11-3 Depth, breadth, and fidelity considerations in choosing a type of prototype.
![Page 13: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/13.jpg)
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 COG_Human Computer Interaction 13
![Page 14: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/14.jpg)
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 COG_Human Computer Interaction 14
![Page 15: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/15.jpg)
PAPER PROTOTYPES
Lecture #11 COG_Human Computer Interaction 15
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.
![Page 16: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/16.jpg)
PAPER PROTOTYPES
Lecture #11 COG_Human Computer Interaction 16
Figure 11-6 Underlying paper foundation “screen.”
![Page 17: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/17.jpg)
PAPER PROTOTYPES
Lecture #11 COG_Human Computer Interaction 17
Figure 11-7 Paper cutouts taped to full size plastic for moving parts.
![Page 18: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/18.jpg)
PAPER PROTOTYPES
Lecture #11 COG_Human Computer Interaction 18
Figure 11-8 A “Preferences” dialogue box taped to plastic and aligned in easel.
![Page 19: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/19.jpg)
PAPER PROTOTYPES
Lecture #11 COG_Human Computer Interaction 19
Figure 11-9 Pull-down menu on a tape “hinge.”
![Page 20: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/20.jpg)
PAPER PROTOTYPES
Lecture #11 COG_Human Computer Interaction 20
Figure 11-10 Paper sliding through a slit for scrolling.
![Page 21: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/21.jpg)
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 COG_Human Computer Interaction 21
![Page 22: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/22.jpg)
PAPER PROTOTYPES
Lecture #11 COG_Human Computer Interaction 22
Figure 11-11 Selection highlight on plastic with a long handle.
![Page 23: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/23.jpg)
PAPER PROTOTYPES
Lecture #11 COG_Human Computer Interaction 23
Figure 11-12 Lots of pieces of dialogue as paper cutouts aligned on plastic sheets.
![Page 24: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/24.jpg)
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 COG_Human Computer Interaction 24
![Page 25: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/25.jpg)
PAPER PROTOTYPES
Lecture #11 COG_Human Computer Interaction 25
Figure 11-13 “Not yet implemented” message.
![Page 26: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/26.jpg)
PAPER PROTOTYPES
Lecture #11 COG_Human Computer Interaction 26
Figure 11-14 Data entry on clear plastic overlay sheet.
![Page 27: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/27.jpg)
PAPER PROTOTYPES
Lecture #11 COG_Human Computer Interaction 27
Figure 11-15 Adhesive-backed circles for color coding task threads on prototype pieces.
![Page 28: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/28.jpg)
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 COG_Human Computer Interaction 28
![Page 29: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/29.jpg)
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 COG_Human Computer Interaction 29
![Page 30: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/30.jpg)
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 COG_Human Computer Interaction 30
![Page 31: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/31.jpg)
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 COG_Human Computer Interaction 31
![Page 32: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/32.jpg)
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 COG_Human Computer Interaction 32
![Page 33: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/33.jpg)
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 COG_Human Computer Interaction 33
![Page 34: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/34.jpg)
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.
– Three or more UX targets entered into a blank UX target table on your laptop or on 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 COG_Human Computer Interaction 34
![Page 35: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/35.jpg)
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 COG_Human Computer Interaction 35
![Page 36: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/36.jpg)
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 COG_Human Computer Interaction 36
![Page 37: [HCI] Week 11. Prorotyping](https://reader031.vdocuments.us/reader031/viewer/2022030312/58ee480a1a28ab3a358b4635/html5/thumbnails/37.jpg)
Homework
Lecture #11 COG_Human Computer Interaction 37
Report Kickstarter Questionnaire
Complete Exercise 10-2
1 2
Your Team Blog Post #4 - Quantitative
measures - Qualitative
Measures - Deduct the key
experience features you should test in a formative evaluation.
Your Team Blog Post #5 - Make your own UX Target Table - Example ; Table 10-8 Choosing
UX metrics for UX measures
Submission Due : 11: 59 pm Sun. 15th November
Complete Exercise 11-1
3
Your Team Blog Post #6 - Define research questions - Design IV/DV - Compare with UX target table
in Exercise 10-2