Chapter 12

DESIGN, PROTOTYPING and

CONSTRUCTION
 Overview
• Prototyping
• Conceptual design
• Concrete design
• Generating prototypes
• Construction

www.id-book.com 2
 Designing with or for People?
• Is stakeholder engagement one-way?
• Co-design
▪ Emphasizes creativity and mutual learning
▪ Often multidisciplinary
• Participatory design (Scandinavian version)
▪ Stakeholders are design partners
▪ Co-operative prototyping is important
• Community-based design
▪ Scale in terms of numbers and diversity
www.id-book.com 3
 Prototyping
• What is a prototype?
• Why prototype?
• Different kinds of prototyping
▪ Low fidelity
▪ High fidelity
• Compromises in prototyping
▪ Vertical
▪ Horizontal
• Final product needs to be engineered
www.id-book.com 4
 What is a prototype?
• One manifestation of a design that
allows stakeholders to interact with it
• In other design fields, a prototype is a
small-scale model:
▪ A miniature car
▪ A miniature building or town

Source: PalmPilot wooden model

© Mark Richards

www.id-book.com 5
 3D Printing Examples

Examples of 3D printing: (a) model jet engine, (b) Synapse Dress by Anouk Wipprecht: embedded with
sensors, the wearer can control the dress’s lighting pattern, and (c) custom-made climbing shoes based on a
scan of the wearer’s feet
Source: (a) Catiav5ftw / MakerBot Industries, LLC / CC BY-NC 4.0, www.thingiverse.com/thing:392115.
Licensed under CC-BY-3.0, (b) ANOUK WIPPRECHTSYNAPSE DRESS created for Intel in 2014,
www.niccolocasas.com/ SYNAPSE-DRESS, and (c) Photo Credits: ATHOS
www.id-book.com 6
 What is a prototype in
interaction design?
Among other things an interaction design prototype can be:
• A series of screen sketches
• A storyboard, for example, a cartoon-like series of scenes
• A PowerPoint slide show
• A video simulating the use of a system
• A lump of wood (for instance, the PalmPilot)
• A loosely connected set of electronic elements
• An animation of product use
• A piece of software with limited functionality written in the
target language or in another language

www.id-book.com 7
Example interaction design prototype

A paper-based prototype of a
handheld device to support an autistic
child
Used courtesy of Sigil Khwaja 8
www.id-book.com
 Why prototype?
• Evaluation and feedback are central to interaction
design
• Stakeholders can see, hold, and interact with a
prototype more easily than a document or a drawing
• Team members can communicate effectively
• Ideas can be tested out
• Prototyping encourages reflection: an important
aspect of design
• Prototypes answer questions and support designers
in choosing between alternatives

www.id-book.com 9
 Low-fidelity Prototyping
• Uses a medium which is unlike the final
medium, for example, paper or cardboard
• Is simple, quick, cheap & easily changed
• Examples:
▪ Sketches of screens and task sequences
▪ Index cards or sticky notes
▪ Storyboards
▪ Wizard-of-Oz

www.id-book.com 10
 Storyboards
• A series of sketches showing how
someone might progress through a task
using the product
• Often used with scenarios, bringing in
more detail and a chance to role play

www.id-book.com 11
Example storyboard

www.id-book.com 12
 Sketching
• Low-fidelity prototyping often relies on
sketching
• Don’t be inhibited about drawing ability —
Practice simple symbols

www.id-book.com 14
Prototyping with index cards
• Index cards (3 x 5
inches)

• Each card
represents
one element of
interaction

• In evaluation, can
step through the
cards

www.id-book.com 15
 Wizard-of-Oz prototyping
• The participant thinks they are interacting with a
computer, but a human is responding to output rather
than the system
• Usually done early in design to understand peoples’
expectations

• What ethical issues are

there with this approach?

15
www.id-book.com
 High-fidelity prototyping
• Uses materials that would 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 people think they have a complete
system…see compromises

www.id-book.com 16
 Compromises in prototyping
• Prototyping involve compromises
• For software-based prototyping, maybe there is a slow
response? sketchy icons? limited functionality?
• In-the-wild prototypes are operational but not
necessarily robust
• Two common types of compromise:
Horizontal: wide range of functions, with little detail
Vertical: a lot of detail for only a few functions
• Other common compromise: robust vs changeable
• Beware of compromises in prototypes as final product
needs to be engineered

www.id-book.com 17
 Conceptual design
• A conceptual model is an outline of what people
can do with a product and what concepts are
needed to understand how to interact with it
• Immerse in the data to understand problem
space and current requirements
• Creativity and brainstorming techniques
• Mood board may capture desired feel
• Consider alternatives: scenarios and prototyping
help
www.id-book.com 18
Building scenarios

www.id-book.com 19
Choosing an interface metaphor
• Interface metaphors combine familiar knowledge with
new knowledge in a way that will help the user
understand the product.
• Three steps: understand functionality, identify potential
problem areas, and generate metaphors
• Evaluate metaphors:
▪ How much structure does it provide?
▪ How much is relevant to the problem?
▪ Is it easy to represent?
▪ Will the audience understand it?
▪ How extensible is it?

www.id-book.com 20
 Considering interaction
and interface types
• Which interaction type?
▪ How the user invokes actions
▪ Instructing, conversing, manipulating,
exploring, or responding
• Do different interface types provide
insight?
▪ Shareable, tangible, augmented reality, and
so forth
www.id-book.com 21
 Expanding the initial conceptual model

• What functions will the product perform?

▪ What will the product do and what will the user do?
• How are the functions related to each other?
▪ Sequential or parallel?
▪ Categorizations, for example, all actions related to
privacy on a smartphone
• What information is needed?
▪ What data is needed to perform the task?
▪ How is this data to be transformed by the system?

www.id-book.com 22
 Concrete design
• Difference between conceptual and concrete is
emphasis
• Many aspects to concrete design
▪ Color, icons, buttons, interaction devices, and so on
• User characteristics and context
▪ Inclusiveness, input, and output modes
• Accessibility
▪ Web Content Accessibility Guidelines
• Localization and internationalization
▪ Language, navigation, icons, and metphor
▪ Indigenous knowledge and perspectives
www.id-book.com 23
 Generating prototypes
• Generate a storyboard from a scenario
▪ Break down scenario into steps
▪ Create a scene for each step
• Sketching out a storyboard prompts designers to
think about design issues
• Generate a card-based prototype from a
storyboard or from a use case
▪ Consider each step in the use case – what
interaction element is needed
▪ Draw a card that captures it
www.id-book.com 24
Generating storyboard

www.id-book.com 25
Generating card-based prototype

www.id-book.com 26
Mapping the overall experience
• Combination of personas, prototypes, or
stickies to model the overall experience
• Visual representation called:
▪ Design map
▪ Customer journey map
▪ Experience map
• Two common representations
▪ Wheel
▪ Timeline
• User flows focus on screen content and
design, particularly used for mobile devices
www.id-book.com 27
An experience map drawn as a wheel

Source: LEGO
www.id-book.com 28
An experience map drawn as a timeline

Source: Adlin and Pruitt (2010), p134. Used courtesy of Morgan Kaufmann.
www.id-book.com 29
 Construction: Physical computing
• Build and code prototypes using electronics
• Toolkits available include
▪ Arduino
▪ LilyPad (for fabrics)
▪ Raspberry Pi
▪ BBC micro:bit
▪ MaKey MaKey
• Designed for use by a wide range of people
www.id-book.com 30
 Physical computing kits (1)

The Arduino board

Source: Used courtesy of Dr. Nicolai Marquardt
31
www.id-book.com
Physical computing kits (2)

The Lilypad Arduino kit Source: Courtesy of Leah Beuchley

www.id-book.com 32
 Physical computing kits (3)

The BBC micro:bit

Source: micro:bit. Used courtesy of Micro:bit Foundation

www.id-book.com 33
 Construction: SDKs
• Software Development Kits
▪ Programming tools and components to develop for a
specific platform, for example, iOS
• Includes: IDE, documentation, drivers, sample
code, and application programming interfaces
(APIs)
• Makes development much easier
• Examples:
▪ Amazon’s Alexa Skills Kit for voice-based services
▪ Apple’s ARKit for augmented reality

34
www.id-book.com
 Summary
• Prototyping may be low fidelity (such as paper-
based) or high fidelity (such as software-based)
• Ready-made software and hardware helps
create prototypes
• Two aspects to design: conceptual and concrete
• Conceptual design develops an outline of what
people can do and what concepts are needed to
understand the product.
• Concrete design specifies design details, for
example, layout or navigation
35
www.id-book.com
 Summary (continued)
• Three approaches to develop an initial conceptual
model: interface metaphors, interaction styles, and
interface styles.
• Expand an initial conceptual model by considering
whether product or user performs each function,
how those functions are related, and what
information is required to support them
• Scenarios and prototypes can be used to explore
design ideas
• Physical computing kits and software development
kits facilitate the transition from design to
construction
36
www.id-book.com