Prototyping JTB April 20041 ISDE Prototyping Preece Chapter 8

Prototyping JTB April 2004 1

ISDE

PrototypingPreece Chapter 8


Objectives of Lecture

Overview of Prototyping What is prototyping Aims of prototyping Prototyping techniques Prototyping tools


Overview Prototyping is a well understood and used

technique in engineering where novel products are tested by testing a model prototype prototypes can be “throw away” (e.g., scale

models) or go into commercial use (Concorde!) In software development prototypes can be

paper-based - software-based


What is Prototyping? Essential element in user centred design Is an experimental and partial design Involves users in testing design ideas Typically done very early in the design process Can be used throughout the SDLC Different types of prototyping are appropriate

for different stages of design Product conceptualization – requirements –

task match user acceptance


What is a prototype?

In interaction design it can be (among other things):a series of screen sketchesa storyboard, i.e. a cartoon-like series of scenes a Powerpoint slide showa video simulating the use of a systema lump of wood (e.g. PalmPilot)a cardboard mock-upa piece of software with limited functionality written in the target language or in another language


What to prototype?

•Work flow, task design

•Screen layouts and information display

•Difficult, controversial, critical areas


Low-fidelity Prototyping

•Uses a medium which is unlike the final medium, e.g. paper, cardboard

•Is quick, cheap and easily changed

•Examples:sketches of screens, task sequences, etc‘Post-it’ notesstoryboards‘Wizard-of-Oz’


Storyboards

•Often used with scenarios, bringing more detail, and a chance to role play

•It is a series of sketches showing how a user might progress through a task using the device

•Used early in design


Sketching

•Sketching is important to low-fidelity prototyping

•Don’t be inhibited about drawing ability. Practice simple symbols


•Index cards (3 X 5 inches)

•Each card represents one screen

•Often used in website development

Using index cards


‘Wizard-of-Oz’ prototyping

•The user thinks they are interacting with a computer, but a developer is responding to output rather than the system. •Usually done early in design to understand users’ expectations

>Blurb blurb>Do this>Why?

User


High-fidelity prototyping

•Uses materials that you would expect to be in

the final product.

•Prototype looks more like the final system than a

low-fidelity version.

•For a high-fidelity software prototype common

environments include Macromedia Director, Visual

Basic, and Smalltalk.

•Danger that users think they have a full

system…….see compromises


Aims of Prototyping in Software

The aim of prototyping is to resolve uncertainty about

functional and user requirements operation sequences user support needs required representations “Look and Feel” of the interface appropriateness of the design


General Features of Prototyping

Enables the designer to quickly build or create examples of :-

The data entry form The menu structure and order The dialogue styles Error messages

Should be inexpensive to develop – intention is to discard/modify it

Should not require programming skills


Prototyping (cont) Traditionally users lack the ability to envisage

designs conceptually Alternatively their may be a conceptual

mismatch between the designer and the user This may not manifest itself until very late Users often lack the ability to imagine the

ramifications of design decisions Users are often unable to comment on

technical design documents A prototype provides users with a concrete

representation of the proposed design


Prototyping

Users are therefore more able to :- Confirm change or elaborate upon the specification

Software prototyping is a dynamic simulation

It should reflect the users real task with appropriate task scenarios

Input a customer order given on the telephone

This will provide information on task sequence operations and any difficulties which the user may experience


Paper Based Prototyping

Paper based prototypes These have no functionality but can still be

useful for:- Generating ideas Gaining insights into what the user might want or is

thinking Eg a paper based design of a data entry screen

Storyboards and Snapshots using “film-scripting” techniques to visualise

interactions between users and the system This is very quick and cheap


Software Prototyping A software prototype will be a version of the

proposed system with limited functionality Will differ from the final system in terms of

Size, reliability robustness & completeness

A software prototype is “executable” can be thrown away, or evolve may serve many different purposes should be “quick and dirty” (and cheap!) is an integral part of user-centred design

approaches based on evaluation/modification


Prototyping Techniques

The three major kinds of prototyping are “Throw away” prototyping (a.k.a. “rapid

prototyping”) used exclusively in requirements gathering

Incremental prototyping not actually prototyping at all, but the delivery of

prioritised functions incrementally to a single, overall design

Evolutionary prototyping (a.k.a “Rapid Application Development, RAD)

as for incremental prototyping but with evolving design


Rapid Prototyping

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

Recognises that requirements are likely to be inaccurate when first specified

The emphasis is on evaluating the design before discarding it


Rapid Prototyping -Advantages

Helps the designer to evaluate the design very early in the the design cycle

It is good for addressing the problem of users not knowing or being unable to state their requirements

Provides the opportunity for continued evaluation and refinement of the design

Increases the chance of getting a well designed system acceptable to the users with the required functionality and ease of use


Rapid Prototyping – Disadvantages

Can consume a lot of resources – users analysts programmers. Therefore can be costly as well as time consuming

The continued process of design evaluate redesign may mean that the design phase of the cycle is considerably increased

May be a long time before get a working system Reluctance to ‘throw away’ or discard the

prototype Users expectations/wishes may be unrealistic

May not be technically or economically feasible


Incremental Prototyping

Final product is built as separate components one at a time

There is one overall design for the system It is partitioned into independent and smaller

components Final product is released as a series of

products Eg General student details data module – the

students assessment profile module


Incremental Prototyping - Advantages

Allows large systems to be installed in phases

Helps to avoid the delays between specification and implementation

Core system features are provided early Users are not overwhelmed with a

complex level of functionality in one go Suitability and appropriateness of key

requirements can be checked Less essential features can be added later


Incremental Prototyping – Disadvantages

Need to have an overall view of requirements Suitable development software must be used –

not just high level prototyping software Long development timescale before full

functionality is obtained This may be incompatible with management

business goals Eg Need to get to market before a

competitor Urgent requirements for a complete solution


Evolutionary prototyping – RAD

As for incremental prototyping Additions and amendments are made following

evaluation and the system is regenerated in its amended form

In this case the prototype evolves into the final system


Evolutionary prototyping – Advantages

The system can cope with change during and after implementation

Again helps to overcome the gap between specification and implementation

Users get some functionality quickly


Evolutionary prototyping -Disadvantages

Can lead to a long development timescale

May have limited functionality which may not be apparent to the user

May believe that they have the final complete system and may therefore be unimpressed!


Other Prototyping Techniques

Full prototype full functionality, lower performance than

production software Horizontal prototype

displays “breadth” of functionality, no lower level detail “back end” support Eg. Database link

Vertical prototype full functionality and performance of a

“slice” or small part of the system


Using prototypes in conceptual design

•Allow evaluation of emerging ideas

•Low-fidelity prototypes used early on, high-fidelity prototypes used later


Physical design: getting concrete

•Considers more concrete, detailed issues of designing the interface•Iteration between physical and conceptual design•Guidelines for physical design

Nielsen’s heuristicsShneiderman’s eight golden rulesStyles guides: commercial, corporate

decide ‘look and feel’ for youwidgets prescribed, e.g. icons, toolbar


Physical design: getting concrete•Different kinds of widget (dialog boxes, toolbars, icons, menus etc)

menu designicon designscreen designinformation display


Menu design

•How long is the menu to be?

•In what order will the items appear?

•How is the menu to be structured, e.g. when to use sub-menus, dialog boxes?

•What categories will be used to group menu items?


Icon design•Good icon design is difficult

•Meaning of icons is cultural and context sensitive•Some tips:

always draw on existing traditions or standardsconcrete objects or things are easier to represent than actions

•From clip art, what do these mean to you?


Screen design

Two aspects:•How to split across screens

moving around within and between screenshow much interaction per screen?serial or workbench style?

•Individual screen designwhite space: balance between enough information/interaction and claritygrouping items together: separation with boxes? lines? colors?


Screen design: splitting functions across screens

•Task analysis as a starting point

•Each screen contains a single simple step?

•Frustration if too many simple screens

•Keep information available: multiple screens open at once


Screen design: individual screen design

•Draw user attention to salient point, e.g. colour, motion, boxing•Animation is very powerful but can be distracting•Good organization helps: grouping, physical proximity•Trade off between sparse population and overcrowding


Information display

•Relevant information available at all times

•Different types of information imply different kinds of display

•Consistency between paper display and screen data entry


Software prototyping tools

Facades and Requirements Animators e.g., Demo II interfaces demonstrated through “slide shows” useful only for throw away prototyping

Screen generators e.g., Protogen GUIs built rapidly by “screen-painting” then hooked

into application code RAD tools

e.g., Visual Basic, Delphi can be used for building full apps.


Compromises in prototyping

•All prototypes involve compromises•For software-based prototyping maybe there is a slow response? sketchy icons? limited functionality? •Two common types of compromise

• ‘horizontal’: provide a wide range of functions, but with little detail• ‘vertical’: provide a lot of detail for only a few functions

•Compromises in prototypes mustn’t be ignored. Product needs engineering


Summary

•Different kinds of prototyping are used for different purposes and at different stages•Prototypes answer questions, so prototype appropriately

•Conceptual design (the first step of design)

•Physical design: e.g. menus, icons, screen design, information display•Prototypes and scenarios are used throughout design

Documents

Prototyping JTB April 20041 ISDE Prototyping Preece Chapter 8