Week 11 Prototyping

Lecture 14 & 15

Prototyping

Human Computer Interaction / COG3103, 2014 Fall Class hours : Tue 1-3 pm/Thurs 12-1 pm 11 & 13 November

PROTOTYPING The UX Book/Chapter 11.

Lecture #14 COG_Human Computer Interaction 2

INTRODUCTION


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.


DEPTH AND BREADTH OF A PROTOTYPE

• Horizontal vs. Vertical Prototypes


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.


FIDELITY OF PROTOTYPES

• Low-Fidelity Prototypes

• Medium-Fidelity Prototypes

• High-Fidelity Prototypes


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


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




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


• 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


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


• Summary of the Effects of Breadth, Depth, and Fidelity Factors


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?


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)


PAPER PROTOTYPES


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


Figure 11-6 Underlying paper foundation “screen.”

PAPER PROTOTYPES


Figure 11-7 Paper cutouts taped to full size plastic for moving parts.

PAPER PROTOTYPES


Figure 11-8 A “Preferences” dialogue box taped to plastic and aligned in easel.

PAPER PROTOTYPES


Figure 11-9 Pull-down menu on a tape “hinge.”

PAPER PROTOTYPES


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.


PAPER PROTOTYPES


Figure 11-11 Selection highlight on plastic with a long handle.

PAPER PROTOTYPES


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.


PAPER PROTOTYPES


Figure 11-13 “Not yet implemented” message.

PAPER PROTOTYPES


Figure 11-14 Data entry on clear plastic overlay sheet.

PAPER PROTOTYPES


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


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


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


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


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


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.


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.


INTERACTION SPACES FOR 21ST CENTURY COMPUTING

HCI in the New Millennium/Chapter 12.


Introduciton

• After Desktop Computing

– Information appliances, such as PDAs, computers integrated with cell

phones and small specialized information devices of diverse kinds (see

[Norman]).

– Multi-user information and work environments, which occupy room-sized

or building-sized spaces, making use of large display areas, sound,

environmental control, etc.

– Immersive environments, both head mounted and shared (such as CAVES)

– Deviceless interaction, in which people's normal movements, gestures,

vocalizations, and even physiological parameters are observed and

interpreted by the computer system


Scenario

• Multimodal Interface Scenario

– Jane places her two index fingers on one of the images and slides them

apart and together. As she does, the image expands and shrinks

accordingly. She stops when it is the right size.

– She touches the screen with her index finger, and draws a circle around a

few of the images. The images change appearance to indicate selection.

– She says aloud "Hold for product page."

– The scaled selected images, are now available for later retrieval under

the category "product page."


Scenario

• GUI Scenario

– Jane clicks the mouse over one of the images. The image displays a set of

associated handles. She drags one of the handles until it reflects a new

desired size and lets up. The image is resized.

– Jane drags her mouse along the diagonal of a rectangle that encloses several

images, holding down the left button. When she lets up on the button, the

images within the rectangular area change appearance to indicate selection.

– She uses the mouse to activate the "Hold" menu in the menu bar at the top of

the screen, which contains an item for each of the current categories, and

selects "product page."

– The selected images, in the specified size, are now available for later retrieval

under the category "product page."


ARCHITECTURE MODELS


Figure 1 Elementary input/output architecture

Decoupling Devices from Programs


Figure 2 Conventional input/output architecture

Decoupling Devices from Phenomena


Figure 4 Distributed communication and management

ROBUST DYNAMIC CONFIGURATION AND COMMUNICATION


Figure 4 Distributed communication and management

CONTEXT-BASED INTERPRETATION


Figure 5 Providing interpretive context

RESEARCH ISSUES

• Person-centered interaction

• Dealing efficiently with incomplete and unreliable information

• Variable quality guaranteed response rate

• Multi-person, multi-device, interaction modes

• Standard models


Education

Week 11 Prototyping