Prototyping JTB April 2004 1
ISDE
PrototypingPreece Chapter 8
Prototyping JTB April 2004 2
Objectives of Lecture
Overview of Prototyping What is prototyping Aims of prototyping Prototyping techniques Prototyping tools
Prototyping JTB April 2004 3
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
Prototyping JTB April 2004 4
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
Prototyping JTB April 2004 5
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
Prototyping JTB April 2004 6
What to prototype?
•Work flow, task design
•Screen layouts and information display
•Difficult, controversial, critical areas
Prototyping JTB April 2004 7
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’
Prototyping JTB April 2004 8
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
Prototyping JTB April 2004 9
Sketching
•Sketching is important to low-fidelity prototyping
•Don’t be inhibited about drawing ability. Practice simple symbols
Prototyping JTB April 2004 10
•Index cards (3 X 5 inches)
•Each card represents one screen
•Often used in website development
Using index cards
Prototyping JTB April 2004 11
‘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
Prototyping JTB April 2004 12
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
Prototyping JTB April 2004 13
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
Prototyping JTB April 2004 14
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 JTB April 2004 15
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 JTB April 2004 16
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
Prototyping JTB April 2004 17
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
Prototyping JTB April 2004 18
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 JTB April 2004 19
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
Prototyping JTB April 2004 20
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
Prototyping JTB April 2004 21
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
Prototyping JTB April 2004 22
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
Prototyping JTB April 2004 23
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
Prototyping JTB April 2004 24
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
Prototyping JTB April 2004 25
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
Prototyping JTB April 2004 26
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
Prototyping JTB April 2004 27
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
Prototyping JTB April 2004 28
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!
Prototyping JTB April 2004 29
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
Prototyping JTB April 2004 30
Using prototypes in conceptual design
•Allow evaluation of emerging ideas
•Low-fidelity prototypes used early on, high-fidelity prototypes used later
Prototyping JTB April 2004 31
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
Prototyping JTB April 2004 32
Physical design: getting concrete•Different kinds of widget (dialog boxes, toolbars, icons, menus etc)
menu designicon designscreen designinformation display
Prototyping JTB April 2004 33
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?
Prototyping JTB April 2004 34
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?
Prototyping JTB April 2004 35
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?
Prototyping JTB April 2004 36
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
Prototyping JTB April 2004 37
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
Prototyping JTB April 2004 38
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
Prototyping JTB April 2004 39
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.
Prototyping JTB April 2004 40
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
Prototyping JTB April 2004 41
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