Prototyping
Prototyping
• What is a prototype?
• A limited representation of a design that allows users to interact with it and to
explore its suitability Allows stakeholders to interact with the envisioned product,
gain some experience of using and explore imagined uses Production of an
intermediary product to be used as a basis for testing Aim is to save on time and
money Aim is to have something that can be tested with real users
• Different kinds of prototyping
- Low fidelity
- High fidelity
• Compromises in prototyping
- Vertical
- Horizontal
• Final product needs to be engineered
2
3
What is a prototype?
In other design fields a prototype is a small-scale
model:
• a miniature car
• a miniature building or town
• the examples here come
from a 3D printer
4
What is a prototype?
In interaction design it can be (among other things):
• a series of screen sketches
• a storyboard, i.e. a cartoon-like series of scenes
• a Powerpoint slide show
• a video simulating the use of a system
• a lump of wood (e.g. PalmPilot)
• a cardboard mock-up
• a piece of software with limited functionality written in the
target language or in another language 5
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’ notes
• storyboards
• ‘Wizard-of-Oz’
6
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
7
Generate storyboard from scenario
Sketching
• Sketching is
important to low-
fidelity
prototyping
• Don’t be inhibited
about drawing
ability. Practice
simple symbols
Card-based prototypes
• Index cards (3 X 5 inches)
• Each card represents
one screen or part of screen
• Often used in website
development
‘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
• Ex: Aardvark startup
User
>Blurb blurb
>Do this
>Why?
11
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
• High-fidelity prototypes can be developed by integrating
existing hardware and software components
• Danger that users think they have a complete
system…….see compromises
12
Low Vs High Fidelity prototypes
13
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
14
Is there a suitable metaphor?
• Interface metaphors combine familiar knowledge with new
knowledge in a way that will help the user understand the
product.
• Conceptualizing what we are doing, e.g. surfing the web
• A conceptual model instantiated at the interface, e.g. the desktop
metaphor
• Visualizing an operation, e.g. an icon of a shopping cart for
placing items into
15
Explore the user’s experience (UX)
• Use personas, card-based prototypes or stickies to model
the user experience
• Visual representation called:
• design map
• customer/user journey map
• experience map
• Two common representations
• wheel
• timeline
Generate card-based prototype from use case
An experience map drawn as a wheel
An experience map drawn as a timeline
GUI Prototyping Tools
• Pencil Project :
• http://pencil.evolus.vn/
• supports Linux, Mac OS X and Windows.
• A Firefox add-on is also available
• Free
• Smartdraw
• https://www.smartdraw.com/
• $200
20
Construction: physical computing
• Build and code prototypes using electronics
• Toolkits available include
• Arduino
• Senseboard
• MaKey MaKey
• Software Development Kits
• programming tools and components to develop for a specific platform, e.g. iOS
• Includes: IDE, documentation, drivers, sample code, application programming
interfaces (APIs)
• Makes development much easier
• Microsoft’s Kinect SDK has been used in research
• Designed for use by wide range of people
