Design, prototyping and
construction
Prototyping and construction
• What is a prototype?
• Why prototype?
• Different kinds of prototyping
– low fidelity
– high fidelity
• Construction
What is a prototype?
• In other design fields a prototype is a
small-scale model:
– a mini car
– a mini building or town
What is a prototype?
• In interaction design it can be
– a series of screen sketches
– a storyboard
• cartoon-like series of scenes
– a PowerPoint slide show
– a video simulating the use of a system
– a cardboard mock-up(full-sized scale model of a
structure)
– a piece of software with limited functionality
• written in the target language or in another language
Why prototype?
• Evaluation and Feedback
Prototypes are a useful aid when discussing ideas with
stakeholders; they are a communication device among
team members, and are an effective way to test out ideas for
yourself.
• Validation of design ideas
• Encourages reflection in design
– very important aspect of design
• Choosing between alternatives
Low-fidelity Prototyping
• simple medium
– e.g. paper, cardboard, Pen
– often different from the final medium
• flexible
– changes quick, cheap and easy
• examples
– sketches of screens, task sequences, etc
– storyboards
Low-fidelity Prototyping
Website example
Storyboards
• often used with scenarios
– more detail
– chance to role play
• series of sketches
– shows how a user might progress through a task
using the device
• used early in design
– cheap and simple
– validation of design ideas
– feedback from stakeholders
Story Board
Activity
• Produce a storyboard that depicts
how to fill a car with gas (petrol).
Sketching
• important to low-fidelity prototyping
• drawing skills are not critical
– symbols to indicate tasks, activities, objects
– flowcharts for time-related issues
– block diagrams for functional components
• computer support
– some drawing and brainstorming programs
have functions that help with sketching
– may make things more complicated than
necessary
Index Cards
• small cards (3 X 5 inches)
– usually lined
• each card represents one screen
– multiple screens can be shown easily on a table
or the wall
• thread or lines can indicate relationships
between screens
– sequence
– hyperlinks
• often used in website
development
High-fidelity prototyping
• choice of materials and methods
– similar or identical to the ones in the final product
• looks more like the final system
– appearance, not functionality
• common development environments
– Macromedia Director, Visual Basic, Smalltalk,
– Web development tools, MS Visio.
• misled user expectations
– users may think they have a full system
Conceptual Design
• Transformation of user requirements
or needs into a conceptual model
• Stepwise refinement
– iterate, iterate, iterate
• Consideration of alternatives
– prototyping helps
Definition ‘Conceptual Design’
“A description of the proposed system
in terms of a set of integrated ideas
and concepts about what it should do,
behave and look like, that will be
understandable by the users in the
manner intended”
Summary
• Different kinds of prototyping are used for
different purposes and at different stages
• Prototypes answer questions
• Construction: the final product must be
engineered appropriately