FM-AA-CIA-15 Rev.

0 10-July-2020

Study Guide in CS 6 – Application Development and Emerging Technologies Module No. 4.2

STUDY GUIDE FOR MODULE NO. 4.2

CHAPTER 4.2: USER INTERFACE PROTOTYPING

MODULE OVERVIEW

This module covers the following agenda for discussions: prototyping, need for prototyping, types of
prototype, advantages and disadvantages of prototyping and other related stuffs. Discover how prototyping
can help you refine and validate your designs so you can develop and release right software / application.

“They slow us down to speed us up. By taking the time to prototype our ideas, we avoid costly mistakes such
as becoming too complex too early and sticking with a weak idea for too long.”
– Tim Brown

MODULE LEARNING OBJECTIVES

At the end of this chapter, the student should be able to:

1. Define and understand prototyping
2. Identify and understand the different types of prototyping.
3. Understand the importance as well as the risk of prototyping
4. Identify the processes/activities in prototype development.

LEARNING CONTENTS (TOPIC 1: PROTOTYPING)

WHAT IS PROTOTYPE?

A prototype is an early version of a software system that is used to demonstrate concepts, try out design
options, and find out more about the problem and its possible solutions. Rapid, iterative development of the
prototype is essential so that costs are controlled and system stakeholders can experiment with the prototype
early in the software process. A software prototype can be used in a software development process to help
anticipate changes that may be required:

1. In the requirements engineering process, a prototype can help with the elicitation and validation of
system requirements.

2. In the system design process, a prototype can be used to explore software solutions and in the
development of a user interface for the system.

IEEE defines prototyping as “A type of development in which emphasis is placed on developing prototypes
early in the development process to permit early feedback and analysis in support of the development
process.”

NEED FOR PROTOTYPING

 Enables us to explore the problem space with the stakeholders.

 As a requirements artifact to initially envision the system.
 As a design artifact that enables us to explore the solution space of your system.
 A vehicle for you to communicate the possible UI design(s) of your system.
 A potential foundation from which to continue developing the system

Figure 5.1 shows the advantage and disadvantages of prototyping

PANGASINAN STATE UNIVERSITY Prepared by: REYJOHN R. FRIAS, MIT 1

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in CS 6 – Application Development and Emerging Technologies Module No. 4.2

ADVANTAGES DISADVANTAGES
Each iteration builds on the previous iteration and
Users can try the system and provide constructive further refines the solution. This makes it difficult to
feedback during development reject the initial solution as inappropriate and start
over.
Formal end-of-phase reviews do not occur. Thus, it is
An operational prototype can be produced in weeks
very difficult to contain the scope of the prototype.

Users become more positive about implementing System documentation is often absent or incomplete,
the system as they see a solution emerging that will since the primary focus is on development of the
meet their needs prototype.

System backup and recovery, performance, and

Prototyping enables early detection of errors
security issues can be overlooked.

Figure 5.1 Advantages and Disadvantages of Prototyping

A process model for prototype development is shown in Figure 5.2.

Figure 5.2 Prototype Development

- The objectives of prototyping should be made explicit from the start of the process. These may be to
develop the user interface, to develop a system to validate functional system requirements, or to
develop a system to demonstrate the application to managers.
- The next stage in the process is to decide what to put into and, perhaps more importantly, what to
leave out of the prototype system.
- The final stage of the process is prototype evaluation. Provision must be made during this stage for
user training, and the prototype objectives should be used to derive a plan for evaluation. Potential
users need time to become comfortable with a new system and to settle into a normal pattern of
usage. Once they are using the system normally, they then discover requirements errors
and omissions.

RISKS IN PROTOTYPING

1. Client May Believe That System is Real

- Unrealistic expectations of the progress

2. Implementers Make Poor Choice

- Justified in prototype but not in real system
- Tempting to build real system same way

3.Prototype Is Not Identical To the Real System

- Users may interact differently due to different response characteristics
- Must interpret prototype experience with care

PANGASINAN STATE UNIVERSITY Prepared by: REYJOHN R. FRIAS, MIT 2

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in CS 6 – Application Development and Emerging Technologies Module No. 4.2

LEARNING CONTENTS (TOPIC 2: TYPES OF PROTOTYPING)

The following are the different types of prototyping:

1. THROW AWAY PROTOTYPING

 As the name suggests, throwaway prototyping is a model created with the intention of discarding it
after the testing process. This is opposed to other methods of prototyping, which assume the
prototype will later be built into the working system. It does mean that throwaway is often the quickest
and cheapest software prototyping method.
 It is developed from the initial requirements but is not used for the final project.
 Written specifications of the requirements
 Some developers believe that this type is a waste of time because you don’t use it.
 Regardless if prototype is discarded or kept for production, you must use an easy to use language.

Advantages and disadvantages of throw away prototyping are shown in figure 5.3.

ADVANTAGES DISADVANTAGES
The prototype actually does nothing, it is just
Significantly reduce project risk
presentational.
Has a short project timeline Only for a limited purpose
Starting becomes a thing of the past. Not getting
used as much now.

Figure 5.3 Advantages and Disadvantages of Prototyping

2. EVOLUTIONARY PROTOTYPING
 Evolutionary prototyping is considered as the most fundamental form of prototyping.
 Evolutionary prototyping main concept is to build a robust prototype and constantly improve it.
 Objective to deliver a working system to the end user.
 According to Steve McConnell, "evolutionary delivery is a lifecycle model that straddles the ground
between evolutionary prototyping and staged delivery."

Here are the advantages and disadvantages of evolutionary prototyping:

Advantages:
1. You are always looking for new ways to improve the system.
2. This model increases the chance of having the client satisfied with the working system.
3. The model can be used even when the requirements are not defined.
4. Quicker delivery of the system.

Disadvantages:
1. This method can be used to avoid documenting the requirements of the system.
2. Management is required.
3. Long term maintenance can be expensive.
4. Uncertain design ideas.
5. Information can be lost through so many improvement changes.

3. LOW-FIDELITY PROTOTYPING
 Low-fidelity prototyping is generally limited function, limited interaction prototyping effort.
 They are constructed to depict concepts, design alternatives and screen layouts. They are intended to
demonstrate general look and feel of the interface.
 They are created to educate, communicate and inform, but not to train, test or serve as a basis for
which to code.
 Low fidelity prototyping is used early in the design cycle to show general conceptual approaches
without much investment in development.

PANGASINAN STATE UNIVERSITY Prepared by: REYJOHN R. FRIAS, MIT 3

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in CS 6 – Application Development and Emerging Technologies Module No. 4.2

Example: Paper Prototyping

- Work through scenarios using sketches of the interface.
- Use a storyboard to present a series of interactions with the system.
- Paper prototyping is an effective way of getting user reactions to a design proposal.

4. HIGH-FIDELITY PROTOTYPING
 High-fidelity prototypes represent the core functionality of the products user interface.
 High fidelity prototypes are fully interactive systems. Users can enter data in entry fields, respond to
messages, select icon to open windows and interact with user interface as if it were a real system.
 They trade-off speed for accuracy.
 Building high fidelity prototypes consume resources and have high cost.

Example: Digital prototypes created on software such as sketch or adobe XD etc.

An actual representation and comparison of low-fidelity and high-fidelity prototype is shown below.

Low-Fidelity High-Fidelity

Figure 5.4 Low-Fidelity Vs. High-Fidelity Prototype

To further discuss the difference between the two, a comparison of Low and high-fidelity prototyping is shown
in figure 5.5.

PANGASINAN STATE UNIVERSITY Prepared by: REYJOHN R. FRIAS, MIT 4

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in CS 6 – Application Development and Emerging Technologies Module No. 4.2

Figure 5.5 Comparisons of Low-Fidelity and High-Fidelity Prototyping

LEARNING ACTIVITY 5.1

Individual Activity 5.1

Prototyping (Instruction will be given by the Subject Instructor)

SUMMARY / KEY LEARNING

 A prototype can be used to give end-users a concrete impression of the system’s capabilities
 Prototyping is becoming increasingly used for system development where rapid development is
essential
 Throw-away prototyping is used to understand the system requirements
 In evolutionary prototyping, the system is developed by evolving an initial version to the final version
 Rapid development of prototypes is essential. This may require leaving out functionality or relaxing
non-functional constraints
 Prototyping techniques include the use of very high-level languages, database programming and
prototype construction from reusable components
 Prototyping is essential for parts of the system such as the user interface which cannot be effectively
pre-specified. Users must be involved in prototype evaluation.

REFERENCES

 Baumer, B. (1996). User Interface prototyping- Concepts, Tools, and Experience. Proceedings of
ICSE, 18, 532-541.
 Hoffer, J. J. (2007). Modern Systems Analysis and Design. Reading,MA: Prentice Hall Publishing
Company.

PANGASINAN STATE UNIVERSITY Prepared by: REYJOHN R. FRIAS, MIT 5

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in CS 6 – Application Development and Emerging Technologies Module No. 4.2

 Luqui, V. Berzins (1988).Rapidly prototyping Real-Time System.IEEE Software, September 2020, 25-
36.
 SoftDevTeam. (2006). Evoutionary Prototyping Model. Retrieved September 2020, from
http://www.softdevteam.com
 Sommerville, Ian. Software Engineering, 10th Edition. 2016

PANGASINAN STATE UNIVERSITY Prepared by: REYJOHN R. FRIAS, MIT 6