Lecture 6
Prototyping
2015 Winter Internship Seminar @Yonsei HCI Lab Track II : Prototypes and Evaluations Class hours : Wed. 16:30 – 18:00 11th February, 2015
INTRODUCTION
Lecture #6 2015 Winter Internship @Yonsei HCI Lab 3
Figure 11-1 You are here; the chapter on prototyping in the context of the overall Wheel lifecycle template.
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 #6 2015 Winter Internship @Yonsei HCI Lab 4
DEPTH AND BREADTH OF A PROTOTYPE
• Horizontal vs. Vertical Prototypes
Lecture #6 2015 Winter Internship @Yonsei HCI Lab 5
Figure 11-2 Horizontal and vertical prototyping concepts, from Nielsen (1993), with permission.
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 #6 2015 Winter Internship @Yonsei HCI Lab 6
FIDELITY OF PROTOTYPES
• Low-Fidelity Prototypes
• Medium-Fidelity Prototypes
• High-Fidelity Prototypes
Lecture #6 2015 Winter Internship @Yonsei HCI Lab 7
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 #6 2015 Winter Internship @Yonsei HCI Lab 8
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 #6 2015 Winter Internship @Yonsei HCI Lab 9
CHOOSING THE RIGHT BREADTH, DEPTH, LEVEL OF FIDELITY, AND AMOUNT OF INTERACTIVITY
Lecture #6 2015 Winter Internship @Yonsei HCI Lab 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
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 #6 2015 Winter Internship @Yonsei HCI Lab 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
CHOOSING THE RIGHT BREADTH, DEPTH, LEVEL OF FIDELITY, AND AMOUNT OF INTERACTIVITY
• Summary of the Effects of Breadth, Depth, and Fidelity Factors
Lecture #6 2015 Winter Internship @Yonsei HCI Lab 12
Figure 11-3 Depth, breadth, and fidelity considerations in choosing a type of prototype.
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 #6 2015 Winter Internship @Yonsei HCI Lab 13
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 #6 2015 Winter Internship @Yonsei HCI Lab 14
PAPER PROTOTYPES
Lecture #6 2015 Winter Internship @Yonsei HCI Lab 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.
PAPER PROTOTYPES
Lecture #6 2015 Winter Internship @Yonsei HCI Lab 16
Figure 11-6 Underlying paper foundation “screen.”
PAPER PROTOTYPES
Lecture #6 2015 Winter Internship @Yonsei HCI Lab 17
Figure 11-7 Paper cutouts taped to full size plastic for moving parts.
PAPER PROTOTYPES
Lecture #6 2015 Winter Internship @Yonsei HCI Lab 18
Figure 11-8 A “Preferences” dialogue box taped to plastic and aligned in easel.
PAPER PROTOTYPES
Lecture #6 2015 Winter Internship @Yonsei HCI Lab 19
Figure 11-9 Pull-down menu on a tape “hinge.”
PAPER PROTOTYPES
Lecture #6 2015 Winter Internship @Yonsei HCI Lab 20
Figure 11-10 Paper sliding through a slit for scrolling.
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 #6 2015 Winter Internship @Yonsei HCI Lab 21
PAPER PROTOTYPES
Lecture #6 2015 Winter Internship @Yonsei HCI Lab 22
Figure 11-11 Selection highlight on plastic with a long handle.
PAPER PROTOTYPES
Lecture #6 2015 Winter Internship @Yonsei HCI Lab 23
Figure 11-12 Lots of pieces of dialogue as paper cutouts aligned on plastic sheets.
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 #6 2015 Winter Internship @Yonsei HCI Lab 24
PAPER PROTOTYPES
Lecture #6 2015 Winter Internship @Yonsei HCI Lab 25
Figure 11-13 “Not yet implemented” message.
PAPER PROTOTYPES
Lecture #6 2015 Winter Internship @Yonsei HCI Lab 26
Figure 11-14 Data entry on clear plastic overlay sheet.
PAPER PROTOTYPES
Lecture #6 2015 Winter Internship @Yonsei HCI Lab 27
Figure 11-15 Adhesive-backed circles for color coding task threads on prototype pieces.
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 #6 2015 Winter Internship @Yonsei HCI Lab 28
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 #6 2015 Winter Internship @Yonsei HCI Lab 29
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 #6 2015 Winter Internship @Yonsei HCI Lab 30
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 #6 2015 Winter Internship @Yonsei HCI Lab 31
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 #6 2015 Winter Internship @Yonsei HCI Lab 32
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 #6 2015 Winter Internship @Yonsei HCI Lab 33
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 #6 2015 Winter Internship @Yonsei HCI Lab 34