1

Human Computer Interaction

Week 7Prototyping

2

Introduction Prototyping is a design technique where

users can be involved in testing design ideas by using experimental, incomplete designs known as prototypes.

Developing prototypes is an integral part of iterative user-centered design, because it enables designers to try out their ideas with users and to gather feedback.

3

Paper-based Prototyping

Paper-based prototyping produces paper sketches, storyboards and scripts.

Paper-based prototypes are quick, inexpensive, and they provide very valuable insights, but they do not demonstrate functionality.

4

Computer-based Prototyping

Computer-based prototyping provides a version of the system with limited functionality so that users can actually interact with it.

5

Software Prototypes

A software prototype is a system that: Actually works, it is not an idea or a

drawing. May be thrown-away after use, or may

evolve into the final system. May serve many different purpose. Must be built quickly and cheaply. Is an integral part of iterative user-

centered design.

6

Prototyping resolves uncertainty about how well a design suits users’ needs. It helps designers to make decisions by eliciting information from users on: The necessary functionality of the system. Operation sequences. User support needs. Required representation. Look and feel of the interface.

Prototyping Functions

7

Various kinds of prototype have been developed to elicit different kinds of information:

Requirements Animation Rapid (throw-it-away) prototyping Evolutionary Prototyping Incremental Prototyping

Prototyping Methods

8

Requirements Animation

Requirements Animation allows possible requirements to be demonstrated in a software prototype which can then be assessed by users.

9

Aims to collect information on requirements and the adequacy of possible designs.

Recognizes that requirements are likely to be inaccurate when first specified.

The emphasis is on evaluating the prototype before discarding it in favor of some other implementation.

Rapid (throw-it-away) Prototyping

10

Evolutionary Prototyping

Compromise between production and prototyping.

The system can cope with change during and after development.

Helps overcome the traditional gap between specification and implementation.

11

Incremental Prototyping

The system is built incrementally, one section at a time.

Incremental prototyping is based on one overall design.

12

Other Prototyping Techniques (1) A Full Prototype contains complete

functionality with lower performance. A Horizontal Prototype shows the

user interface but has no functionality behind the buttons.

A Vertical Prototype contains all of the high level and low level functionality for a restricted part of a system.

13

Other Prototyping Techniques (2)

High Fidelity Prototyping refers to prototyping through a medium such as video, which resembles as closely as possible the final interface.

Low Fidelity Prototyping involves the use of materials that are further away from the final version and that tend to be cheaper and faster to develop.

14

Other Prototyping Techniques (3) Chauffeured Prototyping involves the user

watching while a team member demonstrates the system.

Wizard of Oz Prototyping. The user interacts with a screen, but instead of a piece of software responding to the user’s requests, a developer is sitting at another screen answering the queries and responding to the real user, without the awareness of the user.

15

Two-phase view of iterative design: First Phase

First Phase: Prototypes are developed to gather different forms of information, and radically different alternatives may be tested in parallel. It ends with a proposal for a single full initial design. Divergent, exploratory and bold stage. Fast Cycle times. Preservation of alternative designs.

16

Two-phase view of iterative design: Second Phase

Second Phase: One solution is then iterated through design, code and test cycles. Any further radical changes are unlikely, as production standards will now be in force, and major changes will be expensive. Convergent fine-tuning stage Slow cycle time. One Design Solution.

17

Prototyping to support design

Prototyping can be useful at different stages of design: For product conceptualization. At the task level. For determining aspects of screen

design.

18

Product Conceptualization In the early stages of system

development, prototyping can be used to gain a better understanding of the kind of product required.

Several different sketch designs can be presented to users and to members of development team for comment and improvement.

Requirements animation is a useful technique to use during the product conceptualization stage.

19

Task Level Prototyping Once the requirements for a system have

been determined, and its functionality is clearer, prototyping can help to establish the suitability of the interface at the task level.

The aim is to ensure that the user can perform the tasks necessary for the job, and to ensure that a task sequence can be completed easily and efficiently.

A Vertical Prototype might be appropriate to be used in testing the task sequence.

20

Screen Design Prototyping concentrates on icons, menus and screen layouts.

Issues to be resolved at this level include the suitability of icons and screen layouts, the use of color, visual and audio effects, the grouping of commands within menus.

Initial ideas can be prototyped using paper-based sketches and drawings.

A true understanding of the effect of these issues requires high fidelity prototyping in the form of a software prototype.

Screen Design Prototyping

21

Prototyping Tools

Prototyping can be achieved with the use of production tools, but this can be infeasible as they are not designed to accommodate the kind of compromises which prototyping needs.

Prototyping tools must compromise on quality in order to produce working systems quickly.

22

Further Reading

Preece, chapter 27