4- 104 equirements Analysis and

Softwere Engineening
Notes Speificat

5 Software Design

Syllabus
design principal, Architectural design,
Desighriented design, Object oriented design), User interfaceComponent level design
design, applicarion
Web
design
Contents
5.1 Definition of Software Design

6.2 Design Concepts

..Summer-2016, 2019,
Winter-2017, 2018, 2019, Marks 7
5.3 Design Principles
5.4 Design Model

5.5 Architectural Design * ' *

....Summer-2018,2019,
. .

Winter-2017, 2018,.. Marks 7

56 Component Level Design. Summer-2016,2019, Marks 7
57 User Interface Design ..Summer-2012, 2014, 2016,
2018, 2019,
Winter 2017, 2018, 2019, Marks 7

5.8 Web Application Design

TECHNICAL PUBLICATIONS An up thrust

for knowledge (5-1
 5-3
5-2 ware Engineering
Software Design
Sofwere Engineering Software Design
The component-level design transforms structural elements of software chitecture
5.1 Definition of Software Design The

into
procedural description of software module. The information used by the
Software design is model of software which translates
the requirements into component design is obtained from class based model, flow based model and
software product in which the details about software data structures, architonished behavioural model.
interfaces and components that are necessary to implement the system are given. ure,
.Software design is important to assess the quality of software. Because design is

only waythat we can accurately translate the user requirements into the
5.1.1 Designing within the Context of Software Engineering the
finished software product.
.Software design is at the core of software engineering and it is applied irrespective Without design unstable system may get developed. Even if some small changes
of any process model are made
then those changes will go fail Jt will become difficult to test the
After analysing and modelling the requirements, software design is done which product.The quality of the software product can not be assessed until late in the
serves as the basis for code generation and testing. software process.

Software process of translating analysis model into the

5.2 Design Concepts GTU:Summer 2016. 2019.Winter-2017, 2018.2019 Marks
designing is a
design
model.
The analysis model is manifested by scenario based, class based, flow oriented and The software design concept provides a framework for implementing the right
behavioural elements and feed the design task.
software
The classes and relationships defined by CRC index cards and other useful class are certain issues that are considered while designing the software
Following
based elements provide the basis for the data or class design.
.The architectural design defines the between major struchural Abstraction Information hiding
relationship
elements of the software. The architectural styles and design patterns can be used Modularity Functional independence
to achieve the requirements defined for the system. Architecture Refactoring
Mapping ofanalysisto deslgn model .Refinement Design dasses
asedelements Class-based
Flow orien
Usecases
Usecase diagram Control fow
Data flow
diagram oriented el men. elements
Flow-orlented
low-oneneu
elements
avioral
Component
level
design
/om
ponent
level
Pattern

Activity diagram dlagram

elements design 5.2.1 Abstraction
Swimiane Processing Scenario-based
narratives elements Intertace complexity. Software design
diagram to cope up with the
Analysis
model FlOW-onented nterface
deslgn The abstraction means an ability software design process levels
Class diagram State elements design at different levels of abstraction.
At each stage of
Analysls diagrams Behavioral
elements Architectural design
curs the software solution.
At the higher level of
abstractions should be applied to refine
Ouen
package
CRC models Olagram Flow-orlented o broad terms and in
the lower level more
ed elementCollaboration
s elements Architectura the solution should be stated in
diagrams Class-based deslgn a0StTaction,
navioral
ele

6iements Data/class diagram detailed description of the solution is given.

abstraction and
Class-based Datal class abstraction the procedural
W different levels of
elements diagram Design model n e moving through
Fig. 5.1.1
Translating analysis model into the data abstraction are created. instructions in the specitic
design model of
.The interface procedural abstraction gives the named sequence its implementation
design describes how software communicates NE mentioned by
with systems. [hese means the functionality of procedure is abstraction in which
systems interacting with each other as well as with the
are hat Search the
record is a procedural
who te det hidden. For example : name of the

design represents the flow of informationhumans

them. Thus interface each
opepe of h
e

hidden (i.e. Enter the name, compare

success! Other
wise
behaviour. The usage scenarios and specihc y entation
details are
found then
declare
and behavioural odelling if a match is
provide the information needed by models of analysis mou 8 a i n s t the
entered one,
the interface design. declare 'name not found)
for knowledge
An up thrust
TECHNICAL PUBLICATIONS An up thrust TECHNICAL PUBLICATIONS
for knowledge
 Soñwere Engineering 5-4

In data abstraction the collection of data

objects represented, Ror
sotware Detgn
is
Sotware Engineering 5-5
Software Design

The total cost

procedure search the data abstraction will be record. The
attributes such record ID, name, address and
example for te
The record consists will
lso get
ncreased.

Fig. 5.2.1.
required to develop such software
product is
as
designation. of by following
anious show

shove Fig. 5.2.1 provides usefu guideline for the modularity

and that is
522 Modularity The
dularity or the undermodul while developing the software product must
The software is divided into We should dularize the software but the
separately named and
addressable commo be
avoided.

modularity must remain near

called as modules. denoted by M
the region
.Modularization should be such that the development can be planned easily
Monolithic software is hard to
grasp for the software engineer,
hence it ha software increments can be defined and delivered, changes can be more easily
become a trend
divide the software into number of
to
co-relation between the number of modules and products. But #h ere a
accommodated and long term maintenance can be carried out effectively
overall cost of the , Meyer defines five criteria that enable us to evahate a design method with respect
product. Following argument supports this idea - software
"Suppose there are two problems A and B with to its ability to define an effective modular system :
varying
greater than the complexity of the problemcomplexity.
of problem A is If the comnl
B then . Modular decomposability : A design method provides a systematic mechanism for
required solving the problem A is greater than that of
for obviously the efir decomposing the problem into sub-problems. This reduces the complexcity of the
the time problem
required by the problem A to get solved is more than that B. That also mea
of problem B:"
means problem and the modularity can be achieved.
The overall
sum of
complexity of two problems when they are combined is .Modular composability: A design method enables existing design components to
complexity
and conquer
of the
problems when considered individually. This greater than the be assembled into a new system.
strategy (according to divide and leads to divide
into smaller conquer strategy the problem is Modular understandability : A module can be understood as a standalone unit. It
subproblems and then the solution to these divide will be easier to build and easier to change.
dividing the software problem into subproblems is
obtained). Thug
modularity. It is possible to concludemanageable number of pieces leads to the
that if we subdivide concept of
Modular continuity: Small changes to the system requirements result in changes
effort required to the software to individual modules, rather than system-wide changes.
develop each software component will become
conclusion is invalid because the
indefinitely then
module and its effects
total very smal. But this Modular protection: An aberrant condition occurs within a

required for developing each module also number of modules get increased the efforts are constrained within the module.
with each effort gets increased. That means the cost
gets increased. The associated
effort(cost)required for
integration
these modules 5.2.3 Architecture
Total software
COS
Architecture means representation of overall
structure integrated system. In
of an

structure is used by various

architecture various components interact and the data of the
the
Cost to elements. Architecture provides
These components are called system
M integrate components. that important framework
activities can be
so
DaSic framework for the software system
Total number of Conducted in systematic manner.
modules must be models can be used and these are
within this region n architectural design various system
tis a region of
minimum cost Functioning
Model
this model
Region of under be represented using
Costt module Structural model Overall architecture of the systen can

modularity Region of framework and corresponding

over-modularity Framework model This model shows the
architectural

Number of applicability. the system due to

on
modules reflection of changes
Fig. 5.2.1 model shows the
Modularity and software cost
Dynamic model This
external events.

TECHNICAL
PUBLICATIONS -

An up thrust
for
PUBLICATIONS An up thrust forkowledgo
knowledge TECHNICAL
Sotware Engineening 5-6

Process model The sequence of

Software Desgn S o f n w a r eE n g i n e e n i n g
5-7
processes and their
functoning is represe
model
d in this Softwars Dasign
can make
Functional model The functional hierarchy occurring in the
system is represenh
nother. Similarly
one
changes in the desired module without
model.
by thio
other module.
affecting he
5.2 Functional Independence
524 Refinement
.The functional independence can be
.Refinement is actually a process of elaboration. achieved by
modules with single-minded approach. developing the fhunctional
.Stepwise refinement is a top-down design strategY proposed by functional independence
Niklaus WRTu .1sing functions may be compartmentalized
.The architecture of program is
a
developed by successively refining levolH interfaces are simplified. and
procedural detail. evels of
Tndependent modules are easier to maintain with reduced error
The process of program refinement is propagation
analogous to the
process of refinementand Functional independence is key to good design and design is the to
a
partitioning that is used during requirements analysis. quality.
key software
Abstraction and refinement are
complementary
that i n the abstraction low-level concepts. The major difference , The major benefit of functional independence is in achieving effective
details are suppressed. Refinement helps theis modularity.
designer to elaborate low-level details. . The functional independence is assessed using two qualitative criteria
Cohesion
and coupling.
525 Pattem
5271 Cohesion
According to Brad Appleton the design patern can be defined as With the help of cohesion the information
nugget (something valuable) of insight which It is a named hiding can be done.
conveys the essence of proven solution t A cohesive module performs only "one task" in software procedure with little
a
recurring problem within certain context.
a
interaction with other modules. In other words cohesive module
In other
words, design pattern acts as a performs only
one thing.
occurring in specific domain. Using design design solution for a particular problem
Pattern can be reusable. pattern designer can determine whether Different types of cohesion are:
1. Coincidentally cohesive The modules in which the set of tasks are related
Pattern can be used for current
work. with each other loosely then such modules are called coincidentally cohesive.
.Pattern can be used to solve 2. Logically cohesive - A module that performs the tasks that are logically
similar kind of
problem with different functionality. related with each other is called logically cohesive.
5.2.6 Infomation Hiding 3. Temporal cohesion The module in which the tasks need to be executed in
Information hiding is one of the Some specific time span is called temporal ohesive.
term information important property of effective modular design ne
hiding means the modules 4 Procedural cohesion When processing elements of a module are
related with
information contained in are
designed in such a way
module which does not
one module cannot be
accessible u one another and must be executed in some specific order
then such module is
to the other module
amount of information require this information). Due to information hiding only imuit called procedural cohesive.
can be passed module share
used by other module. to other module or to local ructure
data suru Communicational cohesion When the processing elements of a
any cohesive.
The the data then such module is communicational
advantage of information hiding is h e goal is to achieve high cohesion for modules in the system.
information hiding some data and basically in
testing and maintenanee Due to
another module. This procedures of mfrom
avoids introduction of module can be hiae
one
ultimately errors module from onE module

TECHNICAL PUBLICATIONS -
An up thrust for knowledge TECHNICAL PUBLICATIONS -An up thrust forknowledge
 Sotwere Engineering 5-8
5-9
Software Design Sofware Engineening

oftware Design
5272 Coupling are-

Coupling effectively represents how the modules can be Benefits of refactoring

module or with the outside world.
"connected with other ,The
redundancy can be achieved.

Inefficient algorithms can be eliminated or can be replaced by efficient

Coupling is a measure of interconnection among modules in a
program struchs constructed
Poorly constructed or inaccurate data structures can be
one

acture. removed
Coupling depends on the interface complexity between modules. failures can be rectified.
or
replaced.
,Other design
.The goal is to strive for lowest possible coupling among modules The
decision of refactori oring particular component is taken
by the
design. in softMa software system.
designer of the

.The property of good coupling is that it should reduce

or avoid
and ripple effects. It should also reduce the cost in change im act ReviewQuestions
program changes, testing and
maintenance.
1. Explain the following design concepts.
.Various types of coupling are: Modularity ü) Architecture ii) Refinement
i) Data coupling The data What do you understand by refactoring ? Groe the
coupling is possible by parameter passing or importance of refactoring in
improoing the
interaction. data quality of software.
3. What are the characteristics of a well formed design class ?
) Control coupling The modules share related control data
in control 4 Diferentiate between abstraction and refinement.
coupling 5. Explain the dierent design concepts.
i) Common coupling In common
GTU
Summer-2016 Marks 7
- coupling common data 6. Compare coupling and cohesion.
Explain dijferent types of coupling and its efects softuaze
on
shared among the modules. or a
global data is modules. GTU: Winter-2017. Marks 4. Winter- 2018. Marks 7
iv) Content Define coupling and cohesion. What is the diference betwen cohesion andcoupling
coupling Content
data or control information coupling
occurs when
module makes
one
use of GTU: Summer-2019 Marks 1
maintained in another module. 8. Compare coupling and cohesion. GTU Winter-2019. Marks 3
Sr.NNo.
Coupling Cohesion
Coupling represents how the modules 5.3 Design Principles
connected with are In cohesion, the
the outside world.
other modules or with cohesive module Davis suggested a set of principles for software design as :
performs only one thing
With The design process should not suffer from "tunnel vision".
coupling interface
complexity is With
decided. cohesion, data hiding can be done. The design should be traceable to the analysis model.
3. The goal of The design should not reinvent the wheel
coupling is to achieve lowest
The goal of
coupling cohesion is to achieve hign The design should "minimize the intellectual distance" between the software
cohesion.
Various types of and the problem in the real world.
Data
couplings are -

Various types of
Commoncoupling, Control
The design should exhibit uniformity and integration.
Coincidental cohesion, cohesion
are
coupling and Content coupling, Logical
coupling. cohesion
Temporal cohesion, Procedural cohesion The design should be structured to accommodate change.
and Communicational cohesion.
The design should be structured to degrade gently.
5.2.8 Refactoring Design is not coding and coding is not design.

Refactoring is The design should be assessed for quality.

behaviour. Fowlernecessary
for
has defined simplifying the design without design should be reviewed to minimize concepthual
errors.
The
in such a changing the funchonm o
way that the externalrefactoring as "the process of changing a
behaviour of the software
design do not get changed, syst rer
the internal
structure gets Review Question
improved". nowE
TECHNICAL State and explain any four design principles.
PUBLICATIONS -

An up thrust for
knowledge TECHNICAL PUBLICATIONS
An up thrust for knowedge
 5- 10 5-11
Sotwere Engineering
Software Design S o f w e r eE n g i n e e r i n g Softwere Design

5.4 Design Model Data Design Element

54.1
.The process dimension denotes that the design model evolutes due t . he data design represents the high level of abstraction. This data represented at
software tasks that get executed as the part of software process. various m level is refined gradually for implementing the computer based system. The
The abstract dimension represents level of details as each element da oreat impact on the architecture of software systerns. Hence structure of data is
element of analysis data has
important factor in software design. Data appears in the form of data structures
model is transformed into design equivalent.
at the program component level. At the applícation level it appears as
In following Fig. 5.4.1 the dashed line shows the boundary between analvsis18 and n algorithms
dhe database and at the business level it appears as data warehouse and data mining,
design model.
Thus data plays an important role in software design.
Class diagrams Use cases
|Class diagraji Requlrements
High Analysis package Use case Analysis package
Constralnts
CRC models
CRC models diagrams
Activity diagram Collaboraion
teroperability
targels aand 5.4.2 Architectural Design Element
dorabon
rarms Swimlanee diagrams configuration
D

CFD
diagram
Collaboration
DFD
CFO Thearchitectural desigm gives the layout for overall view of the software
Processing
naratves
Olagram
State diagram
Processing
narratives Analysis
Architectural model can be built using following sources
Sequence State diagrams model
.Data flow models or class diagrams
diagram Sequence Information obtained from application domain
- diagra
Architectural patterns and styles.
Design class
realzations
Technica
subsysten Interface design
Component
Design Elements
collaboration
diagrams
Navigation deslgn
GUI design
diagrams Deslgn class 5.4.3 Interface
Design classes realization
Activity diagram the software system. In interface
Colfaboraton Interface Design represents design of
the detailed
Sequence dlagram other component of the system is
design how information flows from one component
to
diagram Component
dlagram
Design classes
depicted. Typically there are three types of interfaces-
Design
Refined to: Acivity diagram odel
Component Sequenc
dlagram User interface: By this interface riinteracts
igram
Design classes with the system. For example GUI
-

Activity diagram
Sequence diagram Deployment
grams External Interface : This is the interface of
the
Low components with the extemal entities.
Architecture system
alements nterface
eieS
Component levelDeployment level For example - Networking

Linterfac interface Internal interface: This is an interface which represents

the inter component communicaton of the system. For
Process each other
example- Two classes can communicate with
dimension

Fig. 5.4.1 Dimension of design model by operations or by passing

messages

.In both the

analysisand design models the
same UML
analysis model the UML diagrams are used but Flg.5.4.2
diagrams diagrams are abstract
and in design model
are refined and elaborated.
Moreover in design
tne
implementation specific details are provided. model 5.4.4 Component Level Design Elements
Along the horizontal axis various of the software system along
elements such more detailed design
element, component level elements architecture element, as terface
necomponent level design is describe the internal
details
and level design elements
not
these elements have todeployment level elements are give specifications. The component data
necessary that e
local data objects, required
be level design all the
preliminary architecture design developed First
of all the in sequential In component
manner and
e component.
details and procedural
details are exposed.
component level
design occur in parallel. Theoccurs then interface aes ruchures and algorithmic
after the
completions of complete design model. deployment level design
TECHNICAL An up thrust for knowiede
PUBLICATIONS -
An up thrust for TECHNICAL
PUBLICATIONS
-

knowledge
 12 5-13
Sofware Engineening Software Design SoftwereEngineering
Software Desig

that
Component a l of architectural design is to establish the overall structure of software
Fig. 5.4.3 represents The go
of Architectural design represents the ink between design spedification and actual
cornponent order
makes use Interface system. Archited

another component form. design process.

The order is dependent Order TArchitecture is a structure of systems which consists of various components,
Form
form.
upon the component externally visible properties of these components and the inter-relationship among thes
These two objects can be
interfaced with each other. Dependency
relation
Components.

of software archltecture
Fig. 5.4.3 Components ay aab Importance
why the software architecture is important?
There are three reasons
so

5.4.5 Deployment Level Design Elements the

representation of the
computer based system that is
1. Software architecture gives
The deployment level design elements indicate how software functions and software
tothe software development process. This helps in clear specification/understanding
be built. Using this system model even the stakeholders can take active part in
subsystems are assigned to the physical computing environment of the software product
For example web browsers may work in mobile phoned or
they may run on client PC of requirements
or can execute on server machines.
decisions can be taken using software architecture and hence
2. Some early design
and operations remain under control.
system performance
Mobilephone clear cut idea about the computer based system
Client-PC 3. The software architecture gives a

which is to be built.
Web
Web
browser
browser
55.1.1 Structural Partitloning
The program structure can be partitioned horizontally or vertically.

Horizontal partitioning
branches of the modular hierarchy for each
Horizontal partitioning defines separate
Server machine major program function.

Decision maker
Web
browser

Fig. 5.4.4
Deployment diagram
5.5 Architectural Design
GTU: Summer-2018, 2019, Winter-2017,
2018, Marks
5.5.1 Software Architecture
The architectural design is the
up the system and framework design process for
identifying the subsystems mak
for worker
subsystem control and communication.
5.5.1 Hortzontal partioning
Fig.
TECHNICAL PUBLICATIONS An up thrust for PUBLICATIONS
An up thrust for knowledge
knowledge TECHNICAL
Sotware Engineering
5-14 Sofware Engineering 5-15
Software Design Software Desg
Horizontal partitioning can be done by partitioning system into 12 Comparison between Hortzontal and Vertcal Partiton
5512

transformation (processing) and output. input, data

Horlzontal partitioning Vertical partitioning
In horizontal partitioning the design making modules are at the
the ton
top of the partitioning can be done by Vertical
architecture Horizontal
into:
partitioning suggests the control and
partitioning systerm input, data work should be distributed
top-down in
transformation (processing), and output
Advantages of horlzontal partition program structure.

1. These are easy to test, maintain and extend. This kind of partitioning have fewer side Vertical parditioning define separate branches of
Hects in change propagation or error the module hierarchy for each major function.
2. They have fewer side effects in change propagation or error propagation. propagation.
Hence these are easy to maintain the changes.
Disadvantage of horizontal partition
More data has to be passed across module interfaces which complicate the 5.5.2 Architectural Style
overall
control of program flow.
.The architectural model or style is a pattern for creating the system architecture
Vertical parttioning for given problem. However, most of the large systems are heterogeneous and do
Vertical the control and work should be distributed not follow single architectural style.
partitioning suggests top-down in
program structure. .System categories define the architectural style
1. Components: They perform a function.
Function 1 Function 2 Function 3ofal rourve
For example: Database, simple computational modules, clients, servers and filters.
2. Connectors: Enable communications. They define how the components
communicate, co-ordinate and co-operate.

For example: Call, event broadcasting pipes

3. Constraints: Define how the system can be integrated.
determine a system's overall properties from
4. Semantic models: Specify how to
the properties of its parts.
The commonly used architectural styles are
1. Data centered architectures.

2. Data flow architectures.

3. Call and retum architectures.

Fig. 5.5.2 Vertical partitdoning 4. Object oriented architectures
In vertical partitioning
5. Layered architectures
.Define separate branches of the module hierarchy for
.Use control modules to
each major function. 5521 Data Centered Architectures architecture and
co-ordinate communication between functions. the centre of the
the data store lies at operations.
architecture
add, delete and modify
this
Advantages of vertical partition
n

it by performing cient
Sometime the
1. These are other components frequently
access
to central repository.
easy to maintain the The Cent software requests for the data data or

2. They reduce the

changes. central repository
without any change
in

from the
change impact and error propagation. E
ccesses the data
actions
wthout any change in actions of software
for knowledge
PUBLIGATIONS
An up thust
TECHNICAL
TECHNICAL PUBLICATIONS An up thrust
for knowledge
 5-16 5- 17
Sotwere Engineering otware Des Soltware Engineenng
Saftware Design

componen to another. These filters work independently without a bothering about

Client Client one
software of neighbouring filter.
software
the working
E the data flow degenerates into a single line of trarnsforms, it is termed as batch

sequential.

Client
software
Data store- Client
software FierFRerFiEF F
Fig. 5.5.5 Batch sequential

Client
In this patterm the transformation is applied on the batch of data
Client
software software
100 Comparison between Data Flow and Data Center Architecture
Fig. 5.5.3 Data centered architecture
Data flow architecture Data centered architecture
Data centered architecture posses the property of interchangeability. In this architecture series of transformations In this architecture the data store lies at the
Interchangeability means any component from the architecture can be replaced by a new
are applied to produce output data. center of the architecture and other
component without affecting the working of other components. components frequently access it by performing
add, delete, and modify operations
In data centered architecture the data can be passed among the
In data
components. In this architecture the set of components are In data centered architecture the components
centered architecture, called filters and are connected by pipes to are the database elements such as tables and
transform data from one component to queries. And the communication among these
Components are : Database elements such as tables, components takes place with the help of
queries. another
Communication are: By relationships relationship.
Constraints are: Client software has to The filters normally work independently The components of this architecture perform
request ocentral data store for information. without bothering about working of with the central repository without affecting
5.5.22 Data Flow Archtectures neighboring filter. the working of other componentss

In this architecture
series of transformations Client Client
The set of
components called filters
are
applied to produce the output ata iterFiterh Software Soware
are connected by pipes to transform the data rom

FiterFiter Fiter Flter

FRerFer Faor F Pipes Fae-Ea

Client
sotware Data store
- Client
software

Client
Client
Fiter sotware Software

Pipes Fiter Fiter

5.5.2.3 Call and Return Architecture
scaled. The program struchure is
modiied
ne
program structure can be easily or

architecture how modules call each

Lilter
5zed into modules within the program. In this
Fig.5.5.4 Pipes and flters er. The program structure decomposes the function
into control hierarchy where a
naun invokes number of components.
TECHNICAL program program
PUBLICATIONs -

An up thrust
for for knowledge
knowledge TECHNICAL PUBLICATIONS An up thnust
 5-18
Softwere Engineering Softwere Design Sofware Engineering 5-19
ware Design
hierarchical control tor call and return is represented oriented decomposition is concermed with identifying objects classes, their
In this architecture the The
hiect

Main
and
attribut
the corresponding operations. There is some control
models used to
the object operations.
Fan out co-ordinate
55.25 Layered Architecture
Controller
sub programs The layered architecture is composed
of different
layers. Each layer is intended to
nerform specific operations
machine instruction set can be
so
generated. Various
components in each layer perform specific operations.
Application
sub programs
User interface
layer
cation
ayer

Ulity
ayer

Fan in
Core
ayer

Fig. 5.5.6 Call and return Archltecture

5524 Object Oriented Architecture
In this architecture the system isdecomposed into number of interacting objects.
These objects encapsulate data and the corresponding operations that must be
applied Components
to manipulate the data.
perfoming
vanous operatons

Class name Class name Fig. 5.5.8 Layer architecture of components

A
B
I h e outer layer is responsible for performing the user interface operations while
Attributes
Attributes the components in the inner layer perform operating system interfaces.

Operations Messages The components in intermediate layer perform utility services and application
Operations
software functions.

Messages Review Questions

Messages Messages
(Parameter What is architectural design ? Enlist diferent style and patterns of architecture.
Class name passing) iks 4
Class name GTU: Winter-2017,2018, Marks 7. Summer-20
softriure.
What is software architecture ? Erplain any two architectural styles of
Attributes 201 Marks 4
Attributes GTU: Su
Operations Messages
Operations 5.6 Component Level Design GTU: Summer-2016, 2019. Marks 7
After data,
as procedural design.
5.5.7 Omponent level design is also called
Object oriented architecture architectural and interface design the component
level design occus.

TECHNICAL PUBLICATIONS for knowledge

An up thrust
for knowledge TECHNICAL PUBLICATIONS
-
An up thrust
 5-21
Sotware Cesign
Softwere Design
SofwareEngineering
20
Software Engineering

design is to translate el into

design model into operational Name Description
.The goal of component level
software. The primary name of data or control item, the data store or
Graphical, tabular or text based notations are used to create a set of tructured Name external entity.
-

constructs. These structured programming constructs translate each Other name used for the Name
programming
design model. Hence the work of CO
product of component Alias
component into procedural or how is It describes where the data or control item is used. It also
procedural design model.
Where-used
level design is describes how that item is used(that means input to the process,
used output to the process)
.The goal of software design strategy is to organize the program modules in such a
can be changed easily if needed.
that they can be easily developed and
way The used in data dictionary are
software design The notations
commonly used strategies of
are
most
1. Function oriented design 2. Object oriented design Data construct Notation Meaning
s composed of
56.1 Function Oriented Design Composition
And
In function oriented design, the design of the software system is divided into various Sequence
function. Thus is Selection Or
interacting units. Each unit then becomes a system designed from
functional point of view. This approach is more used for developing smaller systems Repetition Repetition for n times
m
But not preferred for larger systems because it is difficult to know what large systems
Optional data
do.
Commented information
Various models that can be created in function oriented design are
i) Data flow diagrams i) Data dictionaries For example
"passenger" can be entered in
ii) Structure charts iv) Pseudo codes. Consider the some reservation system. The data item

i) Data flow diagram the data dictionary as

We have discussed Data flow diagrams in section 4.14.1. passenger

name

ii) Data Dictionaries none

alias:
where used
The data passenger's query (input)
dictionary be defined as an
can
organized collection of all the data elements of te how used :
system with precise and rigorous definitions so that user and system analyst will have a ticket (output)
common
understanding of inputs, outputs, components of stores and intermediate calculations. description passenger_name +

passenger passenger_address

The data models less

are
detail hence there is a need for data
dictionary. passenger_name =
p a s s e n g e r _l a s t _ n a m e

passenger_hrst name +
-

.Data dictionaries are lists of all of

the names used in the
system models.
passenger_middle_iniial

Descriptions of the entities,

relationships and attributes are also included in aae
passenger_address = local_address+
dictionary. community_address

zip_code
Typically, the data dictionaries house number +

and desigm tool

are
implemented as a
part of structured ana local_address =
street n a m e +

.The data (apartment number)

dictionary stores
following type of information community_address =city_name+
state_name | province_namej

TECHNICAL thrust for knowiedge

PUBLICATIONS -
An up thrust
for TECHNICAL PUBLICATIONS
-
An up
knowledge
 5-22
Sotware Engineering Software Design SoftwareEngineenng
5-23
Software Design

The data dictionary defines the data items unambiguously

One can give the detailed description
of data items using data dictionary Get
.For large computer based system the size of data dictionary is very huge. I employee Flag going from caller to called
details
complex to maintain such a data dictionary manually. Hence automated
tools can be used to maintain the data dictionary. (CASE) Data going from caller to called
Employee
Name
Advantages Employee Flag going from called to calle
1. Data dictionary support name management and avoid duplication D
Employee 10
of Is validd Data going from called to caller
2. It is a store organisational knowledge linking analysis, designn and
implementation.
ii) Structure Charts Find
employee
The structure chart is a principle tool of structured design. name

The basic element in the structured chart is module. Module is defined

collection of program statement with four attributes.
as a
Flg. 5.6.2 Use of flag
Input and output: What the
module gets from the invoker
The iterations and decisions on a structured chart is as shown in Fig. 5.6.3.
Get student
details Calling module
is called input and what the
receiver gets from the module
is called output. Symbol for
showing decisions
Function The function Symbol for showing

processes the input and

Final student name Issue tickets to iteration
and marks Called module all passengers
produces the output.
Mechanics : The code or the
Fig. 5.6.1 Connector
logic by which the function is
carried out.
Internal data: It is the own
.The two modules can be
workspace.
connected to each other
The module by a connector as shown belo
uses data and
flags. The data is processed by different
flag is used as a control
signal. It can be set or
reset.
Ihe modules. Get Calculate fare
Calculate fare
for second
Print ticket

For example if we forgeneral first

have to modules reservation
one for Ciass passenger
another module is for getting the employee detail(caller) nd details class passenger
will sent the data as finding the
employee name(called). Then the caller ai
employee's ID and n
name of
employee. If the employee ID is using valid
that ID the called
module will fina Fig.5.6.3 Interaction
called module to a caller then that
module. The use of data message will be given the
and flag can
be as shown in r'g.5.6.2

TECHNICAL
PUBLICATIONS An up thrust
for knowledge
for knowledge TECHNICAL PUBLICATIONS
An up thrust
 5-224 5- 25
Sotware Engineening Software Design ofware Engineering
Software Design

of structure chart is shown in Fig. 5.6.4. Advantagess

The example a

. This code helps in quick building of programing code.

Get fees from to use.
2. It is simple
all students

Total for one

student
Total for all
students 56.2 Object Oriented Design
Total for one The software product can be designed using structured oriented method or using
Valid student
student
entry made hiect oriented techniques. There are some merits and demerits associated with these
astems which directly affect the software development process.
Calculate total
Calculate fees number of
Calculate total
for one student students
fees Structured analysis Object oriented analysis
Record
Valid student
record
is valid Total numbero
of students Tolal fes The structured analysis is a method in which
focus is on functionality of the system
The object oriented analysis is a technique in
which main emphasis is on objects. Each
object is a combination of data members and
Get valid student| member functiors.
record
PRINT

The Data Flow Diagrams(DFD),Control Flow The use cases, class diagram, sequence
Students
record
Field
Diagrams(CFD) and Entity Relationship diagram, state chart diagram, activity diagram,
Field valid
Diagrams(ERD) can be drawn in structured component diagrams can be drawn in this
method.
analysis.
READ EDIT FIELD In this technique, the overhead of partitioning
This is a simple technique of system analysis.
the structure into modules is involved.

Flg. 5.6.4 Structure chart simple because system

Finding bugs is difficult because focus of this Finding bugs is
functionalities. That structure is modular.
iv) Pseudocode approach is merely on

means the system structure is according to the

Pseudo code is a combination of algorithm written in functionalities.
simple language and
programming language statements. This code is effective building block for actual
program. Advantages of 0OD
to which
real world concepts due
For If we want to find out smallest number
example -

The object oriented techniques focus on

among three variables then the
and the customer becomes easy. This
pseudo code can be written as follows. Communication between system engineer
And proper analysis of the system
1. Read values of a, b, and c variables. as a whole.
helps in understanding the system
2 can be carried out.
modules. This helps in managing
If(a<b) can be partitioned into small
Even if one module
ne complex system Errors can be
identifed efficiently.
IF (a c system. This ultimately
<
Drint "a is small"
ne large complex another
remains unaffected.
module
s o m e extent
Else Oaihed to
reduces the maintenance cost of the project. another
print "c is small" o r in

can be
reused in the same system the
Else if (b <c) Component of the system times because of reusability
reusability. Some
print "b is small" is called
Else yem.This process reduced to a large extent
overall cost of system development
gets
print "c is small"

An up thrust for knowledge

TECHNICAL PUBLICATIONs An TECHNICAL
PUBLICATIONS
up thrust for knowledge
 5-27
5-26
S o f h w a r oE n g i n e e n n g

Sofware Design
Sotware Engineering Software Design Class
Addling
Disadvantages of 00D Stoep2: the Class shape and drag it on the page.
1. These very slow. .Clickon
systems are
o t h e name of the class. Right click on the
2. These systems require more memory.
You can cha shape and a Class
window will appear. You can change its name from the name field.
oriented design using UML
The object
add attributes for the lass by clicking Attributes in the right of Class
The object oriented design can be done using Urihed Modeling Language (UMT You can
Properties window. Refer following screen shots for creating class and setting i
Following are diagrams that can be drawnm to represent the object oriented dei
some
1. Class Diagram : Refer section 4.12 esign properties.

2. Use Case Diagram: Refer section 4.11 0rangMcrosolt vsh

.4
3. State Chart Diagram: Refer section 4.15.1
4. Activity Diagram: Refer section 4.11.2 and 4.11.3

5. Sequence Diagram: Refer section 4.15.2

Introduction to MS Visio Tool

The Microsoft Visio tool is commonly used for designing the UML diagrams. Using
Jut Atay (Us
unts)

US unts)
this tool you can draw all kinds of UML diagrams. You can drag and drop different JUt Colaborabca
components of object oriented design and can join them together using appropriate {L5 unks)
JUN Cepirymet
connector. Here are some steps used to create the class diagram in Visio Ju equre
(L5 unts)
Class1
Step 1: Start Visio 2003 or 2007. Then choose the drawing type. Select Software folde,
choose UML-model diagram icon and UML Static Structure Diagram.
Place the mouse over the shapes in UML Static Structure Diagram to view more
details.

JM e Case (US irds)

Medel &xplerer

ab ruture1 Poe

Static Structure-1
Fig. 5.6.6

Flg. 5.6.5 Salect UML Static

Structure Dlagram knowage

thnust
for
An up

TECHNICAL PUBLICATIONS An up thrust

PUBLICATIONS

for knowledge ECHNICAL

 Software Engineenng 5-28 5-29
Software Design
Software Design Software Engineering

, Shape DepieyCpos
Gerner pps

Ar ShoEs Ra Procerbs
Sesrch lor p :

Shapes w
r h here
e your se

Trpevou saardhere
CReges: Ja Coneone* end cptiors
AActty (US urds)
Attrbutes: JM tepoa Frndn Second end nan
Abtes
J n Corporert (US urds) EndmpkhesErd naagbley Ed vwebis
Atrbute L IY y Mpky ew
nar rsped prYate
U AZtrikute roperte upkcate
Frtrd Scord end

Abse
orthand: Name
hs d e the sane boe n te
Type expressuon
L N s y docped U
ype Knspeced
L nLCompe EXpressio **

Model Explor
Class1 Class2
Vsbdir 7N Ohange
e Ce US ures)
Medel brplere Tune J a t c Nructure L
TorgetS Cancd Lgh15n Ane D1.

xSt utise- Doumentotxn: Fig. 5.6.8

Class
name in
Step 4: Save the diagram in different formats. You
can copy and paste the diagram
Wish- 12n
ence Word Document.

Fig. 5.6.7 Review Questions

Draw the use case diagram and class diagram for library
h a t 15 object design of a system ? Marks 7
GTU : Summer-2016.
Step 3: Adding Relation management system.
tate the differences between procedural design and object oriented design.Summer-2019. Marks 3
Just cick and drag the GTU
relations such as type of the relation to connect two classes. You
association, aggregation, generalization can ada
u 5.7 User Interface
Design 7
Marks
Double click on the relationship. :May-2012, Summer-2012, 2014,
2016, 2018, Winter-2017, 2018. 2019,
and/or enter role names association to
specify it. You is provided.
in the
column "End
can
give the association a naname interaction of system with
user

Name" interface design the effective functionality.

user rather than its
by its interface sottware
system
Typically system user judges use of the system. Many
interface leads improper
poorly designed of poorly designed
user interface
be used because using graphical
otems can not interact with the systems
Most of the
o t h e users
in business systems
is also usea.
based interfaces
interfaces. However text
Ser (GUI)
Advantages of iraphical User Interfaces
user can
use the system
easily
with the

1. GUls An inexperienced
a r e easy to use.
TECHNICAL graphical user interface.
PUBLICATIONS An up thrust
for thrust
for knowledge
knowiedge TECHNICAL PUBLICATIONS
An up
 5-31 Software Design
Sofware Engneenng

Software Engineenng
30 Sotware Design Place
the User
in Control
572.1 during requirement analysis the user often demands
requirement.
easily. He can also interars with
task to another very analysing any and help him to get the things done.
2. The u s e r can switch
from one While which will satisfy user requirements
information remains ie
simultaneously. The application wants to control the computerized system. Following
e in for the system
are
many applications means the user always
for uns
That
that allow user to control the system
its own window. :
principles
possible with user. will be restricted from
3. Fast and full screen interaction is thedesign the interaction
modes in such a way that user

Define actions
unnecessary
User Interface Design Principles doing the current state in which user is working
and being in
5.7.1 Interaction
mode means the
to do the related tasks only
if the user has to
the capability, need and experience of system user user is supposed
While designing the user interface Such a mode
GUI becomes frustrating.
should take into account the people's physical and actions at such time then the
should be considered. The designer perform unnecessary
or in game playing software a child can
mental limitations. For instance a short memory .The
interaction should be flexible Microsoft power point
also be aware of the tact that people make flexible. For example in the
recognize pictures rather than text. He should interaction should be
these mistakes in a
friendly manne The user mouse clicks as well
as using
and the interface should tolerate transition is possible using
slide show the side
mistakes
the as per his comfort
principles are used. allows any user to operate system
Following design keyboard. Such flexibility
Instead of using computer terminology make use of user in u s e r interaction
1. User familiarity of 'undo' or interruption'
Provide the facility whenever necessary
Microsoft Office software, the terms suh to correct himself
oriented terminologies. For example in This is the feature which allows the user
software ike Paint' one
as document, spreadsheet, letter,
folder are used and use of the terms directory, work. For example : In the
without loosing his previous for performing his
'undo' actions
file and identities are avoided.
draw some objects
and perform 'redo' or
can
2. Consistency The appropriate level of consistency should be maintained in the
desired drawing.
the commands or menus should be of same format. interaction
user interface. For example Allow user to customize the need to be done
interface certain actions
3. Minimal surprise - The commands should operate in a known way. This makes while handling user
It is observed that in Macro.
are collected in
a
user to easily predict the interface. For example the in word processing document time if these actions
repeatedly. It s a v e s the
under the tool menu there should be a facility of spelling and grammar checking H i d e technical details from
the user
a w a r e of system
User should not be
essential for a casual user.
provide recovering facility This feature is functions. For example
4. Recoverability The system should to user from his functions or file management
errors so that user can correct those error. For example an undo command should commands, operating system the command for printing
if u s e r
instead of giving
document to
be given so that user can correct his errors, or while deleting something the while printing some
convenient for a casual user
then it becomes
confirmation action must be provided, so that user can think again while deleting clicks on the icon indicating print
something. take the print out. interactive with the user
should be
on the screen
appearing on
5. User guidance The user interface can be effectively used by a novice user if some The objects appearing to adjust the object
should be in position oval or edit the
user
guidance such as help systems, online manuals etc. are supplied. his also means that user
Paint' o n e should
be able to stretch
the
the screen. For example in
6.7.2 Golden Rules text written in the object.
Thao Mandel has proposed three golden rules for user interface design- 6722 Reduce the User's Memory Load remember very less.
In fact the design
1. Place the user in control then user has to it assists the
user interface is good and ultimately
tne for the user
2. Reduce the user's remembers more
suggested by
memory load such that the
Following are the principles
be system
d based systems.
3. Make the interface consistent.
h a n d l e the
computer

Let us discuss each rule in detail a n d e l to reduce the memory

load of the user

thrust for knowledge

- An up
PUBLICATIONS
TECHNICAL

TECHNICAL
PUBLICATIONS -
An up thrust for
knowledge
 5-33
5-32 Software Design
Sofrtware Design
SofwareEngineering
Sotwere Engineening

1. Do not force the user to have short term memory Mandel has suggested following principles for consistent interface design.
to direct the current task into meaningful manner
When user isinvolved in complex tasks then he has to remember more. The 1. A l l o user

user
interface should be such that the user need not have to remember past actions This principle suggests that create a user interface with proper indicators on it so
results. And this can be achieved by providing proper visual interface. and
dhat user can understand his current task and how to proceed for new task
2. Establish meaningful defaults across family of product
2. Maintain consistency
Meaningful default options should be available to the user. For exámple in in a packaged manner then every of that
in he f an application
come product
Microsoft word the user can set the default font size as per his choice. Not onh a0plication family should posses the consistent user interface. For example
this, there should be some reset option available to the user in order to get hae
Microsoft Ofice family has several application products such as MS WORD, MS
the original values. Access and so on. The interface of each of these product is
Power Point, MS
3. Use intuitive shortcuts consistent (of course with necessary changes according to its working). That means
as File, Edit, View, Insert, Format,
For quick handling of the system such short cuts are required in the user there is a title bar, menu bar having menus such
interface Tools, Table, Window, Help on every interface. Then tool bars and then design
For example control+S key is for saving the file or control+0 is for
opening the the interface.
file. Hence use of meaningful mnemonics is necessary while designing an
interface layouts are placed on

model of application do not

4. The visual layout of the interface should be realistic 3.1f certain standards are maintained in previous
When certain aspect/feature of the system needs to be highlighted then use of change it until and unless it is necessary
for the user, then do not change
proper visual layout helps a casual user to handle the system with ease. For Certain sequence of operation becomes a standard
becomes habitual with such practices. For instance
example in an online purchase system if pictures of Master card/Visa card are these standards because user
given then it guides the user to understand the payment mode of online control+S is for saving the file then it has become a standard rule now, you if
arnnoying to the user.
different short cut key for saving then it
becomes
purchasing. assign
5. Disclose the information gradually 5.7.3 Interface Design Steps
There should not be
bombarding of information should be presented to
on user. It
actions are identified
the user in a analysis all the tasks and corresponding
systematic manner. For instance one can organize the information in After interface
than
each design process occurs more
hierarchical manner and narrate it to the user. At the Interface design is an iterative process in which
top level of such hierarchical elaborated in m o r e detail Following
are the
structure the information should be in Each time the design step gets
abstract form and at the bottom level more once.
detailed information can be given. commonly used interface design steps
objects and corresponding
define interface
5.7.2.3 Make the Interface Consistent . During the interface analysis step
The user interface should be actions or operations. actions
consistent. This depict the user
levels such as consistency can be maintained at three 2. Define the major events in the interface.
These events

.The visual information Finally model these events.

(all
screen
layouts) should be consistent throughout and ir of view.
should be as per the design standards. like from user's point
. how the interface will look
Analyse information provided
.There should be limited set of interface with the
understands the
input holding the non conflicting information ldentify how the user
The information flow along with it.
transiting from one task to another should be consistent
5.74 User Interface Design Process iterative
can be implemented using
process
The user interface analysis and design
e four framework activihes.
pliral model. It consists of

TECHNICAL for krnowledge

PUBLICATIONS An up thrust
for knowledge TECHNICAL
PUBLICATIONS
An up thrust
Softwere Engineering 5-34 5-35
Softwere Design Sofnware Engineering

Software Design
1. Environment analysis and modelling Review Questions

2. Interface design 1, Explain the Golden rules of user interface design.

3. Implementation
4. Interface validation.
As shown in the above
once. At each pass around the
design can be performed
Interface
validation
What are the interface design steps that cam be applied while designing the interface?
Erplain the sigmificance of User Interace (Ul) in a system. Also ezplain the design Model foar Ul
(Hint: For significance refer section 5.7 and for desigm model refer section 5.7.4)
57.1 each of these tasks
Fig can
performed more tha
be
GTU: Summer-2012. Marks 7
system more requirements can be elaborated and detail
letailed
4. Explain the user interface concept with suitable example GTU Summer-2014. Marks 7
Environmen 5. What is the importance of user interface ? Explain user interface design rules
analysle ano GTU Summer 2016. Marks 7
modelin 6. Describe golden rules of User Interface Design.
GTU Winter 20 17. 2018 Marks 3

7. Explain user interface design issues. GTU Summer2018 Marks 3

Start of
rocess 8. What is the importance of User Interface ? Exrplain Lser interfuce design rules
GTU: Summer. Winter 2019. Marks 7

Release 5.8 Web Application Design

Release In web engineering, the web design can be of two types it can be generic and it can
Release
be specific.
as a outcome of design
From generic viewpoint various design models get developed translated into the
be
phase. Using these design models the user requirements
can

Implementation inte That the web

executable code form. At the same time design must
be specific. means

attributes of the web application in such a manner that the

Fig.5.7.1 Interface analysis and deslgn process design must address key test it.
and can
web engineer can build the complete web application
Environment analysis and modelling In this
phase three major factors are focused
-

ie. user, task and environment. First of all the

user and to
user profile is
analysed to understand the 5.8.1 Design Pyramid
elicit the
requirements, then the tasks that are required to carry out desired model that contains
the design that leads to a
be defined as
functionality are iderntified and analysed. The analysis is made on user environment he web design can
This mix may vary depending
and technology.
which involves the physical work environment. aPpropriate mix of aesthetic, content Following Fig. 5.8.1 (See
Finally analysis model is created for the the nature and design activities
of the web application.
interface. This model serves pon Each level of
this pyramid
represents the design pyramid.
basis for the design of ser interface.
as a

.8.1 on next page)

Interface design The interface
design is phase in which all the interface objects
and corresponding actions of each task are
a represents the design activities-
defined.
Interface design the
Implementation The implementation
phase involves creation of prototype usng and organisation
of user interface. It includes
which the interface scenarios can be ns kind of defines the structure
interactions and navigation
evaluated. To accomplish the construction of uSer various modes of
interface some automated tools can be used of screen layout,
ahon
Validation The goal of validation is mechanism.
to validate the
interface for its correc
performance. During validation it is tested whether
all the user Aesthetic des ign It inchudes
text
satisfied or not. The purpose of validation
is also to check requirements g the look and feel
of the web applicaton.
decisions.
to learn and whether the interface is ea kind of design defines aesthetic
easy to use. ns color scheme,
text size
and related

graphic design, knowiedge

thrust for
An up
TECHNICAL PUBLICATIONS An up thrust for TECHNICAL
PUBLICATIONS

knowledge
 36 5-37
Software Engineening Software Destign Software Engineering

Software Desg
User .Communication

satus of the activity initiateby the user must be defined by the interface
asign. This will help in
proper conversation between the end-user and
web
Interface application.
design
Controlled autonomy
Aesthetic design The user movement must be controled by the interface The conversation of design.
user and web applicaion must lhe within the web application itself.
Content design
.Efficiency
Navigation design The interface desing should be such that the users work efficiency must be
Architecture design optimized. The user need not have to wait for too long. Always look at the users
productivity and not at the computer.
Component design
.Flexibility
The interface should be flexible enough to enable some users to accompish tasks
Technology
Fig. 5.8.1 The web design pyramid directly or in somewhat random fashion.
Focus

Content design The web application interface should stay focused on the user task at hand.

This design defines the layout, structure and outline of the contents present in the
.Fitt'slaw
The time to acquire target is a function of the distance to and the size of the target.
web application.
According to Fitt's law for a online purchase system, if user clicks on buy product
Architecture design then immediately a pull down menu of product category (For example: Laptop,
should not
This defines the Pen Drive, IPod, Digital Camera) must appear. This product category
design hypermedia structure of the web application. of the Because then the time for the
be located somewhere in the comer screen.

Navigation design user to acquire it would be too long.

This design defines the Human interface objects
navigational flow between the content objects. The human
Human interface be seen, heard, touched or perceived.
objects can
should have standard
Component design intertace object must be seen on the GUL
These objects
be understandable, self
This design defines human interface objects should
the processing logic required to implement functional resulting behaviour. The
components. consistent and stable.

5811 Intertece Design Latency reduction intermal operation to complete, the web
Kather than making user to wait for some
with the
The interface allow the user to proceed
design must be easy to use,
easy to learn, easy aPplication should multitasking. This will
consistent, efficient, error free and functional.
navigate, inruuu
to use
The latency reduction
also includes
It should
provide a satisfying experiene work as if the operation has been completed. understand what
the end user. to the
thatuser may
user so
Some kind of acknowledgement bar to indicate
e providing the
clock or progress
Whet are Interfece design principles and nappening. For example immediate action
does not o c c u r
guidelines? some kind of audio
feedback when
Anticipation POCessing8
fill up
The interface design must
anticipate user's next move.
Metaphor to use the web
appication. For example
user can

to Wite the
Consistency the have
aphors assist
u s e r not
list He need
items from the
The GUI navigation controls e torm selecting the
by and use to leam
must be consistent simple
throughout the applicatiol Omplete name of item. Metaphors
are

for knowledge
TECHNICAL An up thrust
PUBLICATIONS An up thrust for TECHNICAL PUBLICATIONS
-

knowledge
 5-38
Sofware Engineening Softwe Design 5-39
Software Design
Soware Engineenng

Protect user's work

The work product must be automatically saved so that the contents will 5.812 Aesthetic Design
will not get
lost if some error occurs. Aes ethetic design means the graphical design. In aesthetic design there are two
iSSues that must be focussed
Readability important
All the information presented by the user interface must be readable by
.Visible navigation erybody.
Aesthetic design issues
Avoid invisible navigation. The navigation should be obvious even to the ca
user. The user need not have to search the sCreen to determine how
asual
to link to
other content or services.

What are interaction control mechanisms?

Various interaction control mechanisms are- Layout issues Graphic design
sSues

.Graphic icons
Buttons, switches or graphical images assist user to select some item or to specify
some decision. .Layoutissues
Graphic images -
.Graphics design issues
Some graphical representation is selectable by the user and Let us discuss these issues one by one
may exhibit some
content object web application functionality.
or

Layout issues
Navigation menus
Keyword be There is no absolute rule for defining the screen layout. However following guideline
menus can
presented vertically or horizontally to the user. Using this
menu the user can choose from hierarchy of is used while designing the layout.
is selected.
subtopics when primary menu option
should not be overloaded
1. Don't afraid of white space. In other words the web page
What are the tasks in the interfacee with lot of information.
design?
2. The emphasis should be on content.
Following are some tasks that can be carried out for web
Review and refine the application interface design of the must be arranged from top to bottom and from left to
information present in the analysis model. 3. The layout screen
the upper left comer of the
write. The high priority elements must be placed on
Develop rough sketch of web application interface
layout. web page.
Map user objectives into appropriate interface actions. use of scroll bar is
an
4. As far as avoid usage of scroll bar. Although
possible
.Define the task set associated with each action. users never like to
use scroll bars. Instead,
one can

important element of graphics,

Storyboard screen
images for each interface action. divide the information over the multiple pages.
within the page.
.Refine interface layout using function geographically
aesthetic design. S.
Group navigation, content and browser window size
resolution and
Develop procedural representation for user's 0. Lhe
layout must be designed by considering
interaction.
Develop behavioural representation for the
interface. Graphics design issues In
Interface layout of each state feel of the web application.
must be described in detail. concerned with the look and color
g r a p h i c s design is then the global
Finally review and refine the
interface of all the layout
design
done and
is
application
design model. aesthetic design first other required
aesthetic
elements of an

ypefaces, sizes, styles and

are decided.

TECHNICAL PUBLICATIONS An up thrust

for koanowtedge
An up thrust
for knowledge TECHNICAL
PUBLICATIONS
Sotware Engineering 5-40 5-41
Softwe Deskgn Software Engineening

Software Desig

5813 Cotent Design

Web document
.The content desigm develops the representation for the content objects. t
defines the mechanism required to instantiate the relationship of one also
content. object
with other.

During analysis model, the content objects are identified and the relationh
among these objects defined. onships
.During the content design the content object is more closely aligned with data
object. The content object has attributes that specifies the content specife
information during analysis and implementation specific information
durino
design.
Once all the content objects are modelled the information within each
be authored and then formatted in such a manner that the
object must
customer's need get
satisfied.

5.8.1.4 Architecture Design

The architecture design focuses two of
on
types design architectures
Content architecture
.Web application architecture (c) Linear with diversions
(a) Linear (b) Linear with optional fow
Architecture design Fig.5.8.2 LInear structure

Content architecture
Content
architecturee

The content architecture focuses

on
Web application
architecture

the definition of overall

HH
of web application. Various content architectures are
hypermedia of struchure

1. Linear structures

When there is a
predictable sequence of interactions then linear
example a Web Tutorial
in which the web structure is used. ror
pages appear in a
structure of linear structure architecture
is sequence. 1The
particular
represented by following Fig. 5.8.2.

H
(See Fig. 5.8.2 on next page.)
2. Grid structures

In this structure the

web
more dimensions. application contents can be
organised
It is as shown by Fig. 5.8.3. (Fig. 5.8.3 on categorically in two or
next page.)
Fig. 5.8.3 Grd
structur

TECHNICAL thrust for knowledge

PUBLICATIONS An up thrust TECHNICAL
PUBLICATIONS
An up

for knowledge
 Sofware Engineering
5-43 Software Design
42
Sotwere Engineening Software Desig
Web a p p l i c a t i o n a r c h i t e c t u r e

3. Hlerarchical structure
application architecth is useful for achieving the business objectives. It is
used web architecture structure. The contents The
web
This is the most commonly can be
MVC architecture.

arranged in hierarchical manner and the flow of control is only along the vos defined by
Model View Controller (MVO architecture is a kind of infrastructure model that
branches. The

user interface
from web application functionality and informational content.
ples
decon
in three layers Model, View and Controller.
partitioned
Thearchitecture is

all application specific content and processing logic. It includes

The model contains
rontent object, access to external intormation source and all processing functionality.
defines all the interface specific functions.
The view
the access to model and view layers. It also controls the data
The controller manages
flow among them.

architecture be written something like this -

The working of MVC

can

controller. The
User requests for some data. This request is submitted to the
Step 1 for the user request.
controller selects the view object which is appropriate
is transmitted
Once the of request is determined the behavioural request
Step 2 type Sometimes it can access the
model implements the functionality.
to the model. The
Fig. 5.8.4 Hierarchical structure corporatedatabase, if needed.
in the
4. Networked or pure web structure the model must be formatted and organised
Step 3 The data developed by
In this architecture, the achitectural components should be designed in such a appropriate view object.
manner that control can be passed from one
component to every other component. server to the client's
transmitted from application
Step 4 The view object is then form.
information in desired
machine in order to display the required
User request
Controler Behavior
request
W

browser Model
Database

Data Update
Client's machine request
display of View

requested
data
indesired Server's machine
manner
architectun
Model view
Fig. 5.8.6

5.8.1.5 Navigation Design architecture, the navigation pathways

are

web application but the links which

After establishing the pathways are nothing
The navigation
Flg. 5.8.5 Network structure Eined in navigation design.

An up thrust or kowedgo
TECHNICAL PUBLICATIONS

PUBLICATIONS An up thrust
for knowledge
TECHINICAL
 44 5 - 45
Sonwere Engineening Sofware Design ofware Engineering

Software Design
the content object and functionalities of the web understand the concept of NSU consider following scenario -
allow the user to
define the navigational
access

pathways designer must do following things.

Pplication. To is tor onine book
for different users of the site
This web application purchasing.
A user can select a desired
book
1. Identify the semantics of navigation an purchase it using on-ine shopping
cart. If he wishes then he can
get a preview
2. Define the mechanism (syntax) or a method tor achieving the navigation. of that book. Thi preview may contain some description such as table of content,
sample pages from the book, author's information, cost and so on.
Navigation semantics

Innavigation design the user hierarchy

and related use cases
se
are considered Navigation syntax
And
each use case is associated with actor. actor use web
each
lication
differently and therefore have different navigational requirements. Secondly, each
may In this section we will see varnous opions of
creating navigation
will define some classes or functionalities.
actor .Navigational links
Using text based links, buton, icons or some graphical images the navigational links
When user interacts with the web application, he may encounter a series
of can be defined.
navigation semantic units (NSU).
.Horizontal navigational bars
Gnaho and Larcher describes the NSU as follows
It consists of major contents containing appropriate links.
The NSU consists of a sub structure called Ways of Navigating (WoN). The WoN .Vertical navigation column
ents
the navigations ways or paths using which the user can accomplish certain goal. The WoN It consists of major contents containing appropriate links. It lists virtually all major
comsists of Navigation Node (NN) which are connected by navigation links. One high le content objects within the web application.
NSU may contain several low level NSUs. Tabs
:S' It is nothing more than variation of navigation bar or column By this navigatiorn link
User goes through the
sample pages all the functional categories on a tab sheet are represented.
Site maps
It consists of all the content objects and functionalities including the table af content
< Navigation link >>
Queries Book user Preview book The links on table of content can display the content object directly
Tor book
wants to looK iNside
In addition to this, the web designer should establish some standard conventions.
links must be
For example Icons, or graphical images representing navigational
mechanism must be
<Navigation link>> clickable. For text based hyperlinks the appropriate color change
return to
<< Navigation link >» main page applied.
view cost

S<
N a v i g a t i oi
nn K <« Navigation link> S.8.1.6 Component Level Design
BookpUrcnasease Show
book details Following are some tasks of modern web applicahon
web contens
1. Perform localized processing for generating the
2. Enhance navigation capability in dynamic order.
Description 3. Provide computation or data processing capability.
Cart
Frovide the mechanism for database query processing and handling
<Navigation link >> Table of
5. Establish data interfaces with external corporate system.
book purchase content
the program
nese tasks can be accomplished by
designing and construcäng
Sample pages software component tor conventional
identical in the form
to
About author ponents that are

software.
Fig. 5.8.7 Creating NSU
An up thrst for knowledge
TECHNICAL PUBLICATIONS -An up thrust for TECHNICAL
PUBLICATIONS
-

knowledge
Sorware Engineening 5-46
Software Desigr
Notes

6 Software Coding and Testing

Syllabus
Coding standard and coding guidelines, Code review, Soffware documentation,
Testing strategies,
Testing techniques and test case, Test suites design, Testing corventional applications, Testing object
oriented applications, Testing web amd mobile applications, Testing tools (Win rumer, Load rmer)

Contents
6.1 Coding Standard and Coding Guidelines Summer-2016, 2018, ..Marks 7
6.2 Code Review . . .

Summer-2018, 2019, Marks 4

6.3 Software Documentation
6.4 Introduction to Software Testing
6.5 Testing Strategies .. .

Summer-2012, 2016,
2018, 2019, WMnter-2019 Marks 7
6.6 Testing Conventional Applications
6.7 White Box Testing Winter-2017, 2018,
. Summer-2012, 2019, Marks 7
6.8 Black-Box Testing Winter-2013, Marks7
6.9 Comparison between Black Box
and White Box .. . Winter-2012, Summer-2015, Marks 7
Testing
6.10 Testing Technique and Test Csse Winter-2019, Marks3
6.11 Test Suites Design
612 Testing ObjectOriented Applicatons
6.13 Object-Orented Testing Sirategies
6.14 Testing Web Applications
6.15 Testing Mobile Applications
6.16 Testing Tools

TECHNICAL PUBLICATIONS (6-1

-
An up thrust for
knowledge