Module 4

Prototyping
Prototyping is a kind of implementation, design.
Prototyping in practice often overlap and occur simultaneously.
A Prototype in that sense is a design representation
DEPTH AND BREADTH OF A PROTOTYPE
The idea of prototypes is to provide a fast and easily changed
early view of the envisioned interaction design. So a prototype
must be something less than the real system.
The choices for your approach to prototyping ,are about how to
make it less. Achieved by focusing on less than full fidelity of
details.
 Horizontal vs. Vertical Prototypes
Horizontal prototype provides an overview where you can base a
top-down approach.
A horizontal prototype is effective in demonstrating the product
concept and for conveying an early product overview to
•managers
•customers
•users
but, because of the lack of details in depth, horizontal prototypes
usually do not support complete workflows and are less realistic.
Horizontal vs. Vertical Prototypes
A vertical prototype allows testing a limited range of features.

A vertical prototype is ideal when you need to represent completely

the details of an isolated part of an individual interaction workflow
in order to understand how those details play out in actual usage.
“T” Prototypes

A “T” prototype combines the advantages of both horizontal and

vertical, offering a good compromise for system evaluation.

Much of the interface is realized at a shallow level (the horizontal

top of the T), but a few parts are done in depth (the vertical part of
the T).

T prototype provides a nice balance between the two extremes,

giving you some advantages of each
“T” Prototypes
Local Prototypes

We call the small area where horizontal and vertical slices intersect a
“local prototype” because the depth and breadth are both limited to
a very localized interaction design issue.
A local prototype is used to evaluate design alternatives for particular
isolated interaction details, such as the
Appearance of an icon,
Wording of a message, or
Behavior of an individual function.
Local Prototypes

Separate window
FIDELITY OF PROTOTYPES

The fidelity of a prototype reflects how “finished” it is perceived to be

by customers and users, not how authentic or correct the underlying
code is.

Low fidelity
Low-fidelity prototypes are not faithful representations of the details of
look, feel, and behavior, but give more abstract impressions of the
intended design

A low-fidelity prototype is much less evolved and therefore far less

expensive.

It can be constructed and iterated in a fraction of the time it takes to

produce a good high-fidelity prototype.
Medium fidelity Prototypes

As a mechanism for medium fidelity prototypes, wireframes are an

effective way to show layout and the breadth of user interface
objects and are fast becoming the most popular approach in many
development organizations.

High-Fidelity Prototypes
High-fidelity prototypes are more detailed representations of
designs, including details of appearance and interaction behavior.

High-fidelity prototypes are the vehicle for design details to get

them just right as they go into the final implementation. final
product will be more realistic, more interactive, more responsive,
more representative of a real software product than a low-fidelity
prototype
1. What is the primary goal of prototyping in web design?
a) To create fully functional web pages.
b) To outline the layout and structure of web pages.
c) To optimize website performance.
d) To provide an interactive and testable representation of a
design.

2. What is the term for a simplified and non-functional version of a

website used to test and refine the layout and structure?
a) Usability testing
b) Mockup
c) Wireframe
d) User flow
3. What is the term for the practice of creating a simplified and
interactive version of a website to test its functionality and user
interactions?
a) Usability testing
b) Prototyping
c) Wireframing
d) User flow

4. Which design tool is commonly used for creating wireframes and

prototypes in web design?
a) Photoshop
b) Sketch
c) Microsoft Word
d) Excel
PAPER PROTOTYPES
The facility of paper prototypes enables you to create a new
design idea, implement it in a prototype, evaluate it with users,
and modify it.

You should construct your early paper prototypes as quickly and

efficiently as possible.

Early versions are just about interaction, not functionality.

Sometimes a paper prototype can act as a “coding blocker” to

prevent time wasted on coding too early.
Fig. Depth, breadth, and fidelity considerations in choosing
a type of prototype
Paper Prototypes for Design Reviews and Demos
Your earliest paper prototypes will have no functionality or
interaction, no ability to respond to any user actions.

The goal is to see some of the interaction design very quickly—in

the time frame of hours, not days or weeks.

Hand-Drawn Paper Prototypes

The next level of paper prototypes will support some simulated
“interaction.”

As the user views screens and pretends to click buttons, a human

“executor” plays computer and moves paper pieces in response to
those mock user actions.
Computer-Printed Paper Prototypes
To make computer-printable screens for low fidelity prototypes, you
can use tools such as OmniGraffle (for the Mac) or Microsoft Visio.

When used as a prototyping tool, Excel provides grid alignment for

objects and text, tabbed pages to contain a library of designs, a
hypertext feature used for interactive links, and a built-in primitive
database capability.

How to Make an Effective Paper Prototype

1. Start by setting a realistic deadline

Time management is an important part of any prototyping activity.

There is no end to the features, polishing, and tweaking that can be
added to a paper prototype
2. Gather a set of paper prototyping materials
Blank plastic transparency sheets, 8½ 11; the very inexpensive write-on kind
works fine; you do not need the expensive copier-type plastic
An assortment of different colored, fine-pointed, erasable and permanent
marking pens.
A supply of plain copier-type paper (or a pad of plain, unlined, white paper)
Assorted pencils and pens
Scissors
 “Scotch” tape (with dispensers)
A bottle of Wite-out or other correction fluid
Rulers or straight edges
A yellow and/or pink highlighter
“Sticky” (e.g., Post-it) note pads in a variety of sizes and colors
3. Work fast and do not color within the lines

4.Draw on everything you have worked on so far for the design

Use your conceptual design, design scenarios, ideation, personas,
storyboards, and everything else you have created in working up to
this exciting moment of putting it into the first real materialization of
your design ideas.

5.Make an easel to register (align) your screen and user interface

object sheets of paper and plastic

Use an “easel” to register each

interaction sheet with the others.
The simple foam-core board easels
we make for our short courses are
economical and serviceable
6. Make underlying paper foundation “screens.”

Start with simplest possible

background for each screen in
pencil or pen on full-size paper
(usually 8½ 11) as a base . Include
only parts that never change.

7.Use paper cutouts taped onto full-size plastic “interaction

sheets” for all moving parts

Paper cutouts taped to full size plastic for

moving parts.
8.Do not write or mark on plastic interaction sheets.
The plastic interaction sheets are almost exclusively for mounting
and positioning the paper pieces.

Do not write or draw on the plastic

9. Make highlights on plastic with “handles” for holding during

prototype execution.
10. Make your interaction sheets highly modular by including only a
small amount on each one
Make your interaction sheets highly modular by including only a small amount
on each one

Do lots of sketching and storyboarding before making interaction sheets

Reuse at every level

Cut corners when it does not hurt things

Accommodate data value entry by users.

Create a way to manage complex task threads.

11. Pilot test thoroughly

Before your prototype is ready to be used in real user experience
evaluation sessions, you must give it a good shake-down.

Pilot test your prototype to be sure that it will support all your
benchmark tasks.
FOUNDATIONS FOR SUCCESS IN SE–UX DEVELOPMENT
1.Communication
Communication is important between SE and UX roles to have
activity awareness about how the other group’s design is
progressing,
what process activity they are currently performing,
what features are being focused on,
what insights and concerns they have for the project,
what directions they are taking, and so on.

2.Coordination
When the two lifecycle concepts applied in isolation, the
resulting lack of understanding between the two roles often leads
to working without collaboration and coordination.
Without collaboration, each project group reports its results in
documentation not usually seen by people in the other lifecycle.

Each uses those results to drive only their part of the system design
and finally merge at the implementation stage.

Coordination will help in team building, communication, and in each

lifecycle role recognizing the value, and problems, of the other, in
addition to early agreement on goals and requirements

3. Synchronization

Synchronization of the design work products of the two lifecycle roles

is usually put off until the implementation and testing phases near
the end of the development effort.
4.Dependency and Constraint Enforcement

•System requirements have both SE and UX components.

•The lack of understanding of the constraints and dependencies

between the two lifecycles timelines and work products often create
serious problems, such as inconsistencies in the work products of
the SE and UX design

•Each task in the task analysis on the UX side implies the need for
corresponding functions in the SE specifications
THE CHALLENGE OF CONNECTING SE AND UX
1. User Interaction Design, Software and Implementation

User interaction design as input to UI software

design.
2.The Promise of Agile Development
Even though traditional agile methods (such as XP) do not
explicitly mention UX processes.

We believe that the underlying philosophy of these

methodologies to be
flexible,
ready for change, and
evaluation-centered
has the potential to bridge the gap between SE and UX if they
are extended to include UI components and techniques.
3. The Pipedream of Completely Separate Lifecycles

Two worlds of development cannot exist in isolation.

4. How about Lifecycles in Series?

5. Can We Make an Iterative Version of the Serial Connection?

Iterating a serial connection.

6. It Needs to Be More Collaborative and Parallel

Need for connections between the two lifecycles

More parallel connections between the two lifecycles