Design, Prototyping and

Construction
 Overview
• Conceptual design
• Prototyping
•What is a prototype?
•Why prototype?
•Types of prototyping
•Compromises in prototyping
• Construction
• Physical design
• Generating prototypes
• Tool support
 Conceptual design: From
Requirements to Design
 Conceptual Design
 Transforming the user requirements and needs into a conceptual model
 Conceptual Model
 A description of the proposed system in terms of a set of integrated ideas
and concepts about what it should do, how it should behave, and what it
should look like, that will be understandable by the user
 Key Principles
 Keep an open mind but never forget the users and their context
 Discuss ideas with other stakeholders as much as possible
 Use low-fidelity prototyping to get rapid feedback
 Iterate, iterate, iterate!
• Don’t move to a solution too quickly. Iterate, iterate, iterate
• Consider alternatives: prototyping helps
Expanding the
Conceptual Model
What function will the product perform?
◦ I.e., how the task will be divided up between the human and the machine
◦ Task allocation - deciding what the system will do and what must be left for the
user
How are the functions related to each other?
◦ The relationships between tasks may constrain use or may indicate suitable task
structures within the device.
◦ Example: obtaining a list of attendees and meeting constraints before scheduling a
meeting on a shared calendar
What information needs to be available?
◦ What data is required to perform the task?
◦ How is this data to be transformed by the system?
◦ Example: booking a meeting would require the user to tell the system the attendee
list, time length, location, and the date.
Using Scenarios in Conceptual
Design
Scenario
◦ Informal story about a user task or activity; used for expressing proposed or
imagined situations to help in conceptual design
Bødker’s Four Roles for Scenarios
◦ As a basis for the overall design
◦ For technical implementation
◦ As a means of cooperation within design teams
◦ As a means of cooperation across professional boundaries, i.e., as a basis of
communication in a multidisciplinary team
Bødker’s Notion of “plus” and “minus”
◦ Two types of scenarios
◦ “Plus” and “Minus” denotes the most positive and the most negative consequences
of a particular proposed design solution
 8.3.4: Using Prototypes in
Conceptual Design
How do I know what type of prototype to use?
The right way:
use low-fidelity prototypes
• Inexpensive: in materials cost, people time, and schedule time
• No risk of being mistaken for the final product
• Simple and fast to repeat as lessons are learned
• When interface testing of the prototype is complete, implementation can
proceed with confidence
Start of Project End of Project

Low-Fidelity Prototypes Higher-Fidelity Prototypes

(example: paper-based scenarios) (example: limited software implementations)

What is a prototype?
“A prototype is a limited representation of a design that allows
users to interact with it and to explore its suitability.”

A mock-up that allows some evaluation of the emerging

ideas/designs to take place.

“A prototype is an early sample, model, or release of a product

built to test a concept or process.”

Producing early, inexpensive, and scaled down version of the

product in order to reveal any problems with the current design.
What is a prototyping?
An initial stage of a software release in which developmental
evolution and product fixes may occur before a bigger release is
initiated.
Called a beta phase or beta testing
 an initial project gets evaluated by a smaller class of users before full
development.
What is a prototyping?
“A software prototype is an executable model of the proposed
software system. It must be producible with significantly less
effort than the planned product. It must be readily modifiable
and extensible. The prototype need not have all the features of
the target system, yet it must enable the user to test all
important system features before the actual implementation”
(Pomberger & Blaschek, 1996).
 Example of
prototype?

In other design fields a prototype is a small-

scale model example:
• a miniature car
• a miniature building or town plan
 Example of
prototype?

In HCI/interaction design it can be:

• 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 cardboard mock-up
• a piece of software with limited functionality written in
the target language or in another language
Example of
prototype?
Why prototype?
To refine the requirements
To refine the design
To compare designs
To sell the design
To demonstrate an idea
To perform experiments
 Why prototype?
• You can test out ideas for yourself.
• Prototyping offers designers the opportunity to bring their
ideas to life, test the practicability of the current design, and to
potentially investigate how a sample of users think and feel
about a product.

• It encourages reflection: very important aspect of design

• A prototype allows stakeholders to interact with an envisioned

product, to gain some experience of using it in a realistic setting,
and to explore imagined uses.
• Stakeholders can see, hold, interact with a prototype more
easily than a document or a drawing.
• Team members can communicate effectively
Why prototype?
They are…
◦ a useful aid when discussing ideas with stakeholders.
◦ a communication device among team members.
◦ an effective way to test out ideas by yourself.

•Prototypes answer questions, and support designers in

choosing between alternatives.
Why prototype?
Benefits to users
◦ Prototypes can help the user to realize what it is they really
want.
Benefits to developers
◦ Testing out the technical feasibility of an idea
◦ Clarifying vague requirements
◦ Perform some user testing and evaluation
◦ Check that a certain design direction is compatible with the
rest of the system development
 What to
prototype?

• Technical issues
•E.g. run-time issues
• Prototyping to establish requirements
•Users “see” functionality
• Prototyping for usability concerns
•Our concern in this course
• Work flow, task design
• Screen layouts and information display
• Difficult, controversial, critical areas
 What to prototype?
Compromises in
prototyping
•Two common types of compromise
•Compromises in prototypes mustn’t be ignored.
Product needs engineering
 What to prototype?
Compromises in
Prototyping
‘HORIZONTAL’: PROVIDE A WIDE ‘VERTICAL’: PROVIDE A LOT OF DETAIL
RANGE OF FUNCTIONS, BUT WITH
LITTLE DETAIL FOR ONLY A FEW FUNCTIONS

Two common types of compromise

Compromises in prototypes mustn’t be ignored. Product needs engineering
When and at What Level
For SW, you might prototype at various times in the lifecycle
◦ Different goals, different techniques

Conceptual Design
Interaction Design
Screen Design
Benefits of Prototyping
Early
Exploration and evaluation of different design options
Increase communication among users and developers
 Rapid feedback on ideas and changes
Identify problems and issues before construction
 Types of prototyping
Prototyping methods are generally divided into two separate categories:
1.High fidelity:
• Prototypes look like the final product

2.Low fidelity
• Designer sketches with many details missing

1. Evolutionary Prototyping
• Evolving a prototype into the final product
• Requires rigorous testing
2. Throwaway Prototyping
• Uses prototype as stepping stones to final design
• Thrown away and final product started from scratch
 Low-fidelity Prototyping

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

paper, cardboard
• utilise just a few of the features that will be available
in the final design
• it might be constructed using materials not intended
for the finished product, such as wood, paper, or metal
for a plastic product.
• Examples:
• Storyboarding, Sketches of screens, Card sorting, 'Wizard of
Oz‘, ‘Post-it’ notes, Task sequences, etc.
 Low-fidelity Prototyping

• A low-fidelity prototype does not look very much like the final
product and does not provide the same functionality.
• For example, it may use very different materials, such as paper and
cardboard rather than electronic screens and metal,
• It may perform only a limited set of functions, or
• It may only represent the functions and not perform any of them.
• Low-fidelity prototypes are useful because they tend to be simple,
cheap, and quick to produce. This also means that they are simple,
cheap, and quick to modify so they support the exploration of
alternative designs and ideas.
 Pros and Cons of Low-
fidelity Prototyping
CONS OF LOW-FIDELITY
PROS OF LOW-FIDELITY PROTOTYPING PROTOTYPING
Quick and inexpensive. An inherent lack of realism. Due to the
basic and sometimes sketchy nature of
Possible to make instant changes and test new low-fi prototypes.
iterations.
Depending on your product, the
Disposable/throw-away. production of low-fi prototypes may not
Enables the designer to gain an overall view of be appropriate for your intended users.
the product using minimal time and effort
to test users or stakeholders opinions.
Encourages and fosters design thinking.
 Example of Low-Fi
Prototyping
1. 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

 Example of Low-Fi
Prototyping
2. Sketching
• Sketching is important to low-fidelity
prototyping
• Don’t be inhibited about drawing ability.
Practice simple symbols
Example of Low-Fi Prototyping
3. Card-based prototypes
• Index cards (3 X 5 inches)
• Each card represents one screen or part of
screen
• Often used in website development
 Prototyping
4. ‘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

User

>Blurb blurb
>Do this
>Why?
 High-fidelity prototyping
• are prototypes that look and operate closer to the
finished product. For example, a 3D plastic model with
movable parts.
• Uses materials that you would expect to be in the final
product.
• Common environments include Macromedia Director,
Dreamweaver, Visual Basic, etc.
• Some disadvantages
• Danger that users think they have a full system.
Advantages and Disadvantages of
Prototyping
Benefits of prototyping
• Can be used to test every detail of the final product before the product is
built
• Results in higher user satisfaction
• Users are better at evaluating an existing (vs described) system
• It brings the users into the process early
Disadvantages
• Users may be unfamiliar with the technique.
• Management may think that the project is nearly finished
if the prototype is “too good,” or that the prototype can be converted into
the final product
Low vs. High Fidelity
Type Advantages Disadvantages

Low-Fidelity Prototype
 Lower development cost  Limited error checking
 Evaluate multiple design concepts  Poor detailed specification to code to
 Useful communication device  Facilitator-driven
 Address screen layout issues  Limited utility after requirements established
 Useful for identifying market requirements  Limited usefulness for usability tests
 Proof-of-concept  Navigational and flow limitations

High-Fidelity Prototype
 Complete functionality  More expensive to develop
 Fully interactive  Time-consuming to create
 User-driven  Inefficient for proof-of-concept designs
 Clearly defines navigational scheme  Not effective for requirements gathering
 Use for exploration and tests
 Look and feel of final product
 Serves as a living specification
 Marketing and sales tool
Construction
 Construc
tion
• Taking the prototypes (or learning from them) and
creating a whole new product with lots of
functionalities.

• Quality must be attended to: usability, reliability,

robustness, maintainability, integrity, portability,
efficiency, etc.

• Product must be engineered

Evolutionary prototyping
‘Throw-away’ prototyping
Design
Standards/Principles
 Shneiderman’s Eight Golden Rules of Interface
Design

1. Strive for consistency - similar actions are accessed in similar ways, related controls
are grouped together, and messaging uses a uniform structure.
2. Enable frequent user-to-use shortcuts - if folks are familiar with the item, make it
easy for them to accomplish their objective.
3. Offer informative feedback - let the user know exactly what is happening at each
stage of the process.
4. Design dialog to yield closure - each series of actions should have a starting point, a
logical ending point, and the interface should lead you through each action.
5. Offer simple error handling - prevent errors, automatically recover, or allow the user
to easily recover, if an error is made.
6. Permit easy reversal of actions - make it easy to undo errors and easy to stop actions
once started.
7. Support internal locus of control - the user should be in control, and the item
responds to the user's input, not the other way around.
8. Reduce short-term memory load - make it so the user can quickly scan the controls
and know how to use the item rather than remembering.
Norman’s 7 Principles
1. Use both knowledge in the world and knowledge in the head.
2. Simplify the structure of tasks.
3. Make things visible: bridge the gulfs of Execution and
Evaluation.
4. Get the mappings right.
5. Exploit the power of constraints, both natural and artificial.
6. Design for error.
7. When all else fails, standardize.
 Jakob Nielsen's 10
general principles for
interaction design https
://www.nngroup.com/articles/ten-usability-heuristi
cs/
Different Kinds of
Widgets
Menu design
◦ Grouping options in a menu
◦ Should be grouped within a menu to reflect user expectations and
facilitate option search
◦ Logical groups
◦ Options should be grouped by function or into other logical categories
which are meaningful to users.
◦ Arbitrary groups
Icon Design
Need to be widely acceptable to the user group
Are often cultural and context-specific
Internationally recognized symbols now exist for example:
◦ to wash clothes
◦ fire exits
◦ road signs
Screen Design
Two aspects
◦ Splitting the task across a number of screens
◦ All pertinent information must be easily available at relevant times.
◦ How the individual screens are designed
◦ Good organization helps users to make sense of an interaction and to
interpret it within their own context

Bottom line
◦ A trade off is necessary between sparsely populated screens
with a lot of open space and too overcrowded screens
Information Display
Make sure that the relevant information is available for the task.
Choose proper format as different types of information lend themselves to
different kinds of display.
Generate storyboard from
scenario
Generate card-based
prototype from use case
Tool support - DENIM
 Summary

• Different kinds of prototyping are used for different purposes and at

different stages
• Prototypes answer questions, so prototype appropriately

• Construction: the final product must be engineered appropriately

• Conceptual design (the first step of design)

• Consider interaction types and interface types to prompt creativity

• Storyboards can be generated from scenarios

• Card-based prototypes can be generated from use cases
Research Assignment
What is Ubiquitous computing?
◦Meaning
◦Application examples
◦Benefits / Advantages
◦Challenges / Disadvantages