PROTOTYPES

CS 411 Human Computer Interaction

Prepared by: Coravil Joy C. Avila, MIT

LESSON 3
WHAT IS A PROTOTYPE?
PROTOTYPE
The prototype converts industrial ideas to concrete realities. A
highly trained professional team will adopt your entrepreneur idea
specifications and sketch your ideas using the latest CAD
technology. Next, with the help of computer simulation, these CAD
drawings are transformed into a prototype which is an exact copy of
the final product Prototyping helps you get an accurate and
complete working model of innovation, adjust
the weight of several different options, adjust
them, and ultimately create the perfect design.
DEFINITION "A  prototype is an early sample, model,
or release of a product built to test a
concept or process. It is a term used in a
variety of contexts, including semantics,
design, electronics, and software
programming."

---- from Wikipedia.

What is a testable PROTOTYPE?
A user interface prototype is a hypothesis — a
candidate design solution that you consider for a
specific design problem. The most straightforward way
to test this hypothesis is to watch users work with it.
There are many types of prototypes, ranging
anywhere between any of these pairs of extremes
1. Single page vs multipage with enough menus,
screens, and click targets that the user can
completely finish a task.
2. Realistic and detailed vs. hand-sketched on a piece
of paper
3. Interactive (clickable) vs static (requiring a person to
manipulate different pages and act as a “computer”)
The CHOICE OF PROTOTYPE
WILL VARY GREATLY DEPENDING ON

goals of the testing, completeness of the

design, tools used to create the prototype,
and resources available to help before and
during the usability tests.
But, whatever prototype you may use, testing
it will help you learn about users' interactions
and reactions, so you can improve the design.
PROTOTYPING CONCEPTS

LOW MEDIUM HIGH

FIDELITY FIDELITY FIDELITY
with limited functionality but Very similar in
Take the form of clickable areas which
appearance
Mind maps, sticky presents the interactions
Notes, and paper and navigation possibilities and interaction to
sketches of an application. the future
Interactive
application
LOW FIDELITY PROTOTYPE
● Illustrating the structure of an application with adhesive

labels on a whiteboard.

● Designing the Information Architecture of an Application in

a Mindmapping Tool.

● Quickly sketch ideas for dialogue design in discussions

with customers using paper and pen (= paper prototype)

What is Medium Fidelity?

● The design is in greyscale. This means not using

color year in screen designs, and using grayscale
placeholder images.
● The color carries powerful visual signals that
convey meaning and emotion and can distract
user testers from focusing on the structure of the
design, content, and user flow.
What is a High Fidelity Prototype?
● known as high-tech, high-fi or hi-fi prototype, is a
comprehensive and interactive prototype that is quite
close to the final products with lots of functions,
interactions and details.
● It’s often used in the later usability evaluation to
discover the potential issues that a web/app design
may still exist.
Difference Between High Fidelity and Low Fidelity
Prototype

● Low Fidelity Motion Prototype

This low-fi prototype shows the second menu motions clearly
without focusing too much on its UI details.
● Low Fidelity UX Prototype Example for a
Website
Even without UI details, the low-fi prototype helps convey design
ideas and show the main functions, structures, flows and
interactions of a web/app easily. It brings designers lots of
benefits.
Advantages of high-fidelity prototypes

● Rich design details.

● Better visual effect.
● More accurate testing results.
● More effective feedback
● More attractive to clients and stakeholders.
Why is a low fidelity prototype better for you at the early design stage?
Why is a low fidelity prototype better for you at the early design
stage?
● Obviously, the low fidelity prototype focuses more on high-level
concepts of the final products and help discover the potential issues
as well as getting them resolved at the very early stage.
● It helps ensure that you and your team have chosen and followed the
right design theme and direction before digging in.
● at the early design stage, when you and your team are aiming at
quickly translating ideas into visualized prototypes, shortening
iterations and collecting user feedback, a low fidelity prototype is a
much better choice.
When is the right time to use a low-fi prototype?

● When a design idea flashes in your mind and you

want to convert it into a tangible model quickly.
● When you want to discuss your design idea with
your partners as soon as possible.
● When you want to test whether the design ideas are
feasible and meet the user’s needs.
● When you want to get feedback from other team
members.
 The high fidelity prototype often pays muc
Why is high fidelity
attention to the details and functions of a web/app,
prototyping better for you
is often better for designers to test the feasibility o
at the very ending design
stage? web/app designs and attract mor
users/stakeholders at the very ending design stage
 ● the visual design of your product has
been done.
When is the ● you want to test your web/app details,
best time to such as the UI elements, color schemes,
use a high-fi and page copies, etc.
● you want to test an interaction, workflow,
prototype? userflow, transition animation, visual
effects or the design ideas with full UI
details.
● you want to know the feedback from
other designers and users.
 ● Price
● Learning curve
How to choose a
RIGHT Prototyping ● Usage
Tool for a BETTER ● Teamwork
design? ● Fidelity
● Integration
TOOLS FOR PROTOTYPING
● InVision: best prototyping tool for building exceptional products in
one, connected workflow
● Balsamiq: best prototyping tool for building wireframes
● Justinmind: best all-in-one prototyping tool for web and mobile apps
● Figma: best prototyping tool for designing collaboratively.
● Adobe XD: best prototyping tool for enterprise business.
● Mockplus iDoc: Create interactive and animated prototypes.
● RapidUI: This new platform transforms Photoshop files into live sites
and you can make your designs fully interactive.
● https://framer.com/