1

Group Members
Abdul Sattar
Irfan Haider

1/30/2018
Chapter # 10 ( Component Level Design) 2

• Main Topics
• What is a Component
• Designing Class-Based Components
• Conducting Component-Level Design
• Designing Traditional Components
• Component Based Development

1/30/2018
What is Component ? 3

• A Component is a modular building block for computer software ,

which can be replaced or deployed as part for a particular
software .
• It can share data among other components
• We will further discuss it in these three points
• An Object Oriented View
• The Traditional View
• A Process Related View

1/30/2018
An Object Oriented View 4

• A Component is Set of Classes

• Every Class is well elaborated
• Interface relevant to class must implemented
• Analysis classes and infrastructure classes are used

1/30/2018
The Traditional View 5

• A Component is a functional element of a program that

incorporates processing logic
• Internal data structure required to implement processing logic
• Interface that enables the component to be invoked and data to
be passed to it

1/30/2018
Designing Class Based Components 6

• Component Level Design Guidelines

• Component
• Floor Plan
• Interfaces
• Dependencies
• Inheritance

1/30/2018
Designing Class Based Components 7

• Cohesion
• Component or class encapsulate only attributes that are closely related to
one another to the class or component itself
• Types of Cohesion
• Functional
• Layer
• Communicational

1/30/2018
Designing Class Based Components 8
• Coupling
• Coupling is a qualitative measure of the degree to which classes
and connected to one another
• Content Coupling
• Common Coupling
• Control Coupling
• Stamp Coupling
• Data Coupling
• Routine Call Coupling
• Type Use Coupling
• Inclusion or import Coupling
• External Coupling

1/30/2018
Conducting Component Level Design 9

• Identify all design classes that correspond to the problem domain.

• Identify all design classes that correspond to the infrastructure
domain.
• Elaborate all design classes that are not acquired as reusable
• Specify message details when classes or components collaborate .
• Identify appropriate interfaces for each component
• Elaborate attributes and define data types and data structure
required to implement them.
1/30/2018
Conducting Component Level Design 10

• Describe processing flow within each operation in detail.

• Describe persistent data sources and identify the classes required
to manage them.
• Develop and elaborate behavioral representations for a class or
component.
• Elaborate deployment diagrams to provide additional
implementation detail
• Refactor every component level design representation and always
consider alternative.
1/30/2018
Component level design for WebApps 11

• Content Design at the component level

• Content Design at the component level focuses on content objects and the
manner in which they may be packaged for presentation to a webapp end
user
• Functional Design at the component level
• Modern webapps deliver increasingly sophisticated processing functions like
data processing , data computation , establish data interface , database
access and query etc

1/30/2018
Component-Based Development 12

• Domain Engineering
• Define the domain to be investigated .
• Categorize the items extracted from the domain.
• Collect a representative sample of applications in the domain.
• Analyze each application in the sample and define analysis classes.
• Develop a requirements model for the classes.

1/30/2018
Component-Based Development 13

• Component Qualification , Adaption and Composition

• Component Qualification
• Component Qualification ensures that a candidate component will perform the
function required , will properly fit into the architectural style specified for the
system and will exhibit the quality characteristics that are required for the
application.

1/30/2018
Component-Based Development 14

• Component Adaption
• A library of components that can be easily integrated into an application
architecture .
• Component Composition
• Task in which Qualified , adapted and engineered components assembles to
populate the architecture which established for an application .

1/30/2018
Component-Based Development 15

• Analysis and Design for Reuse

• Standard Data
• Global Data Structure Idetifies
• Standard interface protocols
• Three Level of Interface protocol established
• Nature of intermodular interfaces , Design of external technical interfaces , human
computer interface
• Program Templates
• Architectural design or style for a new software

1/30/2018
Component-Based Development 16

• Classifying and Retrieving Components

• Components are classified by their terms of use or functionality
• Components are retrieved from a big library in which these stored in a
efficient way by using a well defined mechanism .

1/30/2018
Chapter # 11 ( User Interface Design ) 17

• The Golden Rules of interface Designing

• Place the user in Control
• Reduce the user memory load
• Make the interface consistent

1/30/2018
The Golden Rules 18

• Place the user in control

• Define interaction modes in a way that does not force a user into
unnecessary or undesired actions.
• Provide for flexible interaction.
• Allow user interaction to be interruptible and undoable
• Streamline interaction as skill level advance and allow the interaction to be
customized

1/30/2018
The Golden Rules 19

• Place the user in control

• Hide Technical internals from the casual user
• Design for direct interaction with objects that paper on the screen
• Reduce the user’s memory load
• Reduce demand on short-term memory
• Establish meaningful defaults
• Define shortcuts that are intuitive
• The Visual layout of the interface should be based on a real world metaphor

1/30/2018
The Golden Rules 20

• Reduce the user’s memory load

• Disclose information in a progressive fashion
• Make The Interface Consistent
• Allow the user to put the current task into a meaningful context
• Maintain consistency across a family of applications
• If past interactive models have created user expectations , do not make
changes unless there is a compelling reason to do so

1/30/2018
User Interface Analysis And Design 21

• It Begins with the creation of different models of system function

• Tow Type of Analysis and Design of User Interface
• Interface Design and Design Model
• The Process
• Interface Design and Design Model
• Four Different models come into play when a user interface is to be
analyzed and designed
• User Model , Design Model , Mental Model , Implementation Model

1/30/2018
User Interface Analysis And Design 22

• The Process
• Spiral model is used and encompasses four distinct framework activities
• 1)Interface analysis and modeling
• 2)Interface design
• 3Interface construction
• 4)Interface Validation

1/30/2018
Interface Analysis 23

• User analysis
• Task analysis and modeling
• Analysis of display content
• Analysis of the work environment

1/30/2018
Interface Analysis 24

• User Analysis
• User Interview
• Sales input
• Marketing input
• Support input

1/30/2018
Interface Analysis 25

• Task analysis and modeling

• Use cases
• Take elaboration
• Object elaboration
• Workflow analysis
• Hierarchical representation
• User Task

1/30/2018
Interface Analysis 26

• Analysis of display content

• Are Different type of data assigned to consistent geographic locations on
the screen
• Can the user customize the screen location for content
• Is proper on-screen identification assigned to all content
• How will color be used to enhance understanding
• How Error message and warnings be presented

1/30/2018
Interface Analysis 27

• Analysis of work environment

• Will system interaction measured in some manner ?
• Will two or more people have to share information before an input can be
provided.
• How Will Support be provided to users of the system

1/30/2018
Interface Design Steps 28

• User information developed , define interface objects and action

• Define events that will cause the state of user interface to change
, model this behaviour
• Depict each interface state as it will actually look to end user
• Indicate how user interprets the state of the system from
information provided through the interface

1/30/2018
Interface Design Steps 29

• Applying interface design steps

• Once the objects and actions have been defined and elaborated iteratively
they are categorized by type , Target , Source and application objects are
identified .
• Preliminary use case
• User interface design patterns
• A design pattern is an abstraction that prescribe a design solution to a
specific well-bounded design problem

1/30/2018
Interface Design Steps 30

• Design Issues
• Response Time
• Help Facilities
• Error Handling
• Menu and command labeling
• Application accessibility
• Internationalization

1/30/2018
WebApp Interface Design 31

• Interface Design Principles and Guidelines

• Interface Design Workflow for WebApps

1/30/2018
WebApp Interface Design 32

• Interface Design Principles and Guidelines

• Anticipation
• Communication
• Consistency
• Controlled Autonomy
• Efficiency
• Flexibility
• Focus
• Fitt’s law

1/30/2018
WebApp Interface Design 33

• Interface Design Principles and Guidelines

• Human interface objects
• Latency reduction
• Learn ability
• Metaphor
• Maintain work product integrity
• Readability
• Trace State
• Visible Navigation

1/30/2018
WebApp Interface Design 34
• Interface Design Workflow for WebApps
• Review information contained in the requirements model and
refine as required
• Develop a rough sketch of the web app interface layout
• Map user objectives into specific interface actions
• Define a set of user tasks that are associated with each action
• Storyboard screen images for each interface action
• Refine interface layout and storyboard using input aesthetics
design

1/30/2018
WebApp Interface Design 35

• Interface Design Workflow for WebApps

• Identify user interface objects that are required to implement the interface
• Develop a procedural representation of the user’s interaction with the
interface
• Develop a behavioral representation of the interface
• Describe the interface layout for each state
• Refine and review the interface design model

1/30/2018
Design Evaluation 36

• Preliminary design is created

• Prototype of first interface build
• User Evaluates the interface
• Designer study design for evaluation , at this step decided that is
this design required modification or it’s a complete design
• Design modifications are made
• A assigned number of prototype in the cycle is build

1/30/2018