Dr. Arwa E.

Abulwafa
Week (11)
23-4-2025
 A2: Interpret and analyzing data qualitatively and/or
quantitatively.
 B2: Identify attributes, components, relationships,
patterns, main ideas, and errors.

3
1. Software Design Strategies
2. Software User Interface Design
3. Software Design Approaches

4
 Software design strategies define how software systems are
structured and developed from a high-level overview down to
implementation details.
 These strategies are vital in shaping the software to be
maintainable, efficient, scalable, and aligned with system
requirements.
 There are multiple variants of software design:
 Structured Design
 Function Oriented Design
 Object Oriented Design
5
 Concept:
• It is a process-oriented approach that focuses on processes
and data flow.
• It aims to systematically break down the system into
manageable modules or sub-programs based on functional
decomposition.
• It converts the system's functional specifications into a
structured hierarchy of modules.

6
 Structured design promotes the use of:

• High cohesion:
• Each module focuses on a single, related set of functions.
• Low coupling:
• Modules operate independently with minimal
interdependencies.
 A good structured design achieves clarity, precision, and modularity,
making systems easier to develop, maintain, and scale.

7
 Key Features:
• Uses Data Flow Diagrams (DFDs) to visualize how data moves
through the system.
• Organizes the system into hierarchies using structure charts.
• Focus is on how the system works (pseudo-code).
 Design Tools Used:
• Data Flow Diagrams (DFDs)
• Structure Charts
• Pseudo-code
• Flowcharts 8
 Advantages:
• Promotes modularity.
• Easier to test and debug due to logical structure.
• Helps reduce redundancy and improve clarity.
 Disadvantages:
• Less suitable for complex, object-rich systems.
• Difficult to model real-world behavior (focuses more on how
than what).

9
 Concept:
 This approach treats the software system as a collection of
functions, with each function performing specific tasks.
 It uses a top-down design model, where high-level functions are
broken into sub-functions.
 Basic Principle:
• Emphasizes the transformation of inputs into outputs through a
series of functions.
• Each function takes in input, processes it, and returns output.
• Input → Function → Output paradigm.
10
 Features:
• Breaks the system into functions or procedures.
• Organizes the software around data transformations.
 Common Tools:
• Data Flow Diagrams (DFDs)
• Process specifications
• Flowcharts

11
 Characteristics:
• Highly process-centric.
• Uses functional specifications to define each module’s purpose.
• Code is usually implemented in procedural languages (e.g., C,
FORTRAN).
 Limitations:
• Poor at modeling real-world entities or states.
• Not ideal for modern applications that require flexibility or high
reusability.
• Hard to maintain or extend over time due to limited
encapsulation. 12
 Strengths:
• Well-suited for data transformation tasks.
 Design Process:
1. System behavior is modeled using Data Flow Diagrams (DFDs).
2. DFDs show how data moves and is transformed across functions.
3. The system is logically decomposed into functions based on
operations.
4. Each function is described in detail to define its role and
interactions.
13
 Core Idea:
 It is a software design approach that focuses on modeling real-
world entities—called objects—and their characteristics
(attributes and behaviors), rather than organizing the system
around functions or procedures.
 In OOD, the entire solution revolves around the interactions of
objects, making the design modular, reusable, and closely
aligned with real-world structures.

14
 Key Concepts in OOD:
 Objects
• Represent real-world entities like Person, Bank, Customer.
• Each object contains:
• Attributes (data fields, e.g., name, balance)
• Methods (functions that operate on the attributes)
 Classes
• A class is a template or blueprint for creating objects.
• It defines:
• Possible attributes (data)
• Possible behaviors (methods)
15
• Objects are instances of classes.
 Encapsulation
• Bundling of attributes and methods into a single unit
(object).
• Provides information hiding: internal details of objects are
protected from outside access.
• Promotes security, maintainability, and abstraction.
 Inheritance
• Enables code reuse and hierarchical organization.
• A subclass can inherit attributes and methods from a
superclass.
• Allows creation of specific classes based on generalized
parent classes. 16
 Polymorphism
• Enables methods to share the same name but behave
differently based on context or input.
• Supports:
• Method overloading (same name, different arguments)
• Method overriding (subclass redefines superclass method)
• Allows for flexible and extensible code design.

17
 Design Tools:
• UML (Unified Modeling Language)
• Class diagrams
• Sequence diagrams
 Advantages:
• High reusability through inheritance and polymorphism.
• Better maintainability and extensibility.
• Intuitive modeling of real-world systems.

18
 Design Process
1. Create a solution design based on requirements or previous
models (e.g., sequence diagrams).
2. Identify objects in the system and group them into classes
based on similar attributes and behaviors.
3. Define class hierarchies (inheritance relationships) and object
relationships.
4. Build the application framework by organizing how objects
will interact within the system.

19
 Benefits:
 Modularity: Each class/object can be developed and tested
independently.
 Reusability: Classes and methods can be reused across
applications.
 Maintainability: Changes in one class usually do not affect
others.
 Real-world mapping: Naturally models entities and behaviors in
real systems.
 Scalability: Easy to extend the system with new object types.
20
 Structured Function- Object-Oriented
Feature
Design Oriented Design Design
Functions & Objects (data +
Focus Processes & modules
transformations behavior)
Modeling Tool DFDs, Structure Charts Functional Specs UML, Class Diagrams
Functional Class and object
Modularity Type Procedural modules
decomposition hierarchy
Code Reusability Limited Limited High
Real-world
Poor Weak Strong
modeling
Language
C, Pascal C, FORTRAN Java, C++, Python
Support
Maintainability Moderate Moderate High
21
 Definition & Purpose
 The User Interface (UI) is the front-end visual or interactive
layer of a software system that allows users to interact with both
software and hardware components.
 It acts as a bridge between the user and the system, enabling
control, input, and feedback through various forms of
communication.

22
 Where UI Is Found
 User interfaces are integrated into almost all digital devices,
including:
• Computers
• Mobile phones
• Cars
• Music players
• Airplanes & ships
 Essentially, anywhere digital technology is involved, a user
interface is present. 23
 Role of UI in Software
• Provides a visual representation of the software’s functions.
• Offers the platform for human-computer interaction (HCI).
• Helps users understand, navigate, and control software
systems.
• Contributes significantly to a software product’s popularity and
usability

24
 Qualities of a Good UI
 A successful user interface should be:

Attribute Description
Attractive Visually appealing to encourage engagement
Simple to Use Easy to navigate, even for new users
Responsive Quick reaction time to user inputs
Clear Information and options are understandable
Consistent Uniform design across all screens and interactions

25
 Types of User Interfaces
 UI can vary based on hardware, software, and application
needs, and can be:
• Text-Based
• Graphical
• Audio/Video Based
• Hardware or Software or a combination of both

26
 UI Categories
1. Command Line Interface (CLI):
1. Text-based input
2. Requires knowledge of commands
3. Used by technical users or in development environments
2. Graphical User Interface (GUI):
1. Visual-based interaction (windows, buttons, icons)
2. More intuitive and user-friendly
3. Common in modern consumer applications
27
 Definition & Background
 It is a text-based user interface used for interacting with
software and operating systems.
 It was the primary means of communication with computers
before graphical interfaces became widespread,
 It remains widely used among technical users and
programmers due to its power and efficiency.

28
 How CLI Works
• Users type text commands at a command prompt to instruct
the system.
• It requires the user to remember commands and their syntax.
• Output is displayed directly in the same window after executing
commands.
 Limitations
• Not user-friendly for beginners.
• Error handling in earlier versions was poor.
• Requires memorization of complex syntax and commands. 29
 Features of CLI
 Lightweight:
 Uses significantly fewer system resources compared to GUI.
 Efficient:
 Allows for rapid and precise control, especially for experienced
users.
 Scriptable:
 Supports automation using scripts and macros.
 Minimal Interface:
 Offers a clean, distraction-free environment focused solely on
input and output. 30
 CLI Elements
1. Command Prompt
 Displays the current working context.
 Indicates the system is ready to accept input.
2. Cursor
 A blinking line or bar showing where the next character will
appear.
 Moves as text is typed or deleted.

31
 3. Command
 A specific instruction (with optional parameters) to be
executed.
 The result appears directly in the terminal, followed by a new
prompt.
 Use Cases
• Preferred in server environments, programming, system
administration, and for automation tasks.
• Useful for power users seeking more control and efficiency than
GUI allows.
32
33
 It provides a visual and interactive way for users to communicate
with a software system.
 Unlike the text-based Command Line Interface (CLI), GUI enables
users to navigate software using windows, icons, buttons, and
menus, making it more intuitive and user-friendly.
 GUI may include both hardware and software elements,
depending on the system, and is a core component in modern digital
devices like computers, smartphones, tablets, cars, and smart
appliances.

34
 GUI Elements:
 Window
 Main container to display content; can be resized, moved, or
nested (child windows).
 Tabs
 Allow multiple documents or views in a single window (e.g.,
browsers).
 Menu
 List of grouped commands; often located at the top of the
window.
35
 Icon
 Small graphic that represents an app or file; launches software
when clicked.
 Cursor
 Pointer that follows mouse or touch input; used to select and
navigate.

36
37
 Application-Specific GUI Components:

Component Purpose
Application Window Main interface of the software; can be OS-based or custom.
Dialog Box Temporary pop-up window for user confirmation or action.
Text Box Area to enter text input.
Button Clickable control to submit or trigger actions.
Radio Button Allows selection of only one option from a set.
Check Box Allows multiple selections from a list.
List Box Displays a scrollable list of options.
Includes sliders, combo boxes, data grids, drop-down lists,
Other Components
etc.
38
Dialogue Box

List-box

39
 GUI Development Tools
 These tools allow developers to visually design interfaces and
often include drag-and-drop components.
 Some tools are platform-specific:

Tool Purpose / Platform

FLUID Lightweight GUI builder for C/C++
AppInventor Android app GUI design
LucidChart Diagrams and interface planning
Wavemaker Web and mobile app GUI design
Visual Studio IDE with powerful GUI development tools
40
 It refers to the method or approach used to plan and construct a
software system.
 It involves organizing the system into modules, defining how they
interact, and ensuring the design aligns with user requirements and
environmental constraints.
 The approach chosen depends on the system’s size, complexity,
development methodology, and functional goals.

41
 Common System Design Approaches
1. Top-Down Design
 Starts with a broad view of the system.
 Breaks it down into smaller subcomponents.
 Good for understanding the system structure early.
2. Bottom-Up Design
• Begins with designing individual components.
• Integrates them to form a complete system.
• Encourages reuse of existing modules.
42
3. Iterative Design
• System is built stage-by-stage.
• Allows refinements at each iteration based on feedback.
4. Incremental Design
• Develops one part at a time, adding new functionality
gradually.
• Promotes flexibility and continuous improvement.
5. Agile Design
• Based on collaboration and adaptability.
• Encourages rapid iterations with evolving requirements.
• Common in modern development environments. 43
 It is a software design strategy where the entire system is initially
viewed as a single entity, and then systematically broken down
into smaller sub-systems and components in a hierarchical
structure.
 How It Works:
• Begins with a generalized model of the complete system.
• The system is decomposed into sub-systems based on
functionality or characteristics.
• Each sub-system is then treated as an individual system and
further decomposed.
• This process continues iteratively until the most detailed,
44
lowest-level components are identified.
 Hierarchy Formation:
• The approach creates a multi-level hierarchy, starting from the
highest-level system and drilling down to the smallest, well-
defined components.
• As each part is designed, its role and connection to the larger
system is also clarified.
• Eventually, all components are defined and assembled into the
complete software system.

45
 When to Use Top-Down Design:
• Best suited for new software development projects that are
being built from scratch.
• Particularly effective when specific details are not known
initially.
• Helps in managing complexity by dealing with high-level
structure first before addressing implementation details.

46
 Benefits of Top-Down Design:
• Encourages structured thinking and planning.
• Supports modular development and clarifies system
structure early in the process.
• Makes it easier to assign and manage development tasks across
teams.

47
 Advantages:
• The top-down approach strongly emphasizes system
requirements, making the final design more responsive to user
and business needs.
 Disadvantages:
1. Limited Reusability: Since the design is tightly focused on the
specific application requirements, it may miss opportunities
for reusing existing components.
2. Complex Architecture: The design may overlook the benefits of
a clean, modular, and simple architecture, potentially leading
to more complexity. 48
 It is a software design approach that begins with the most specific
and basic components and gradually builds higher-level systems
by combining these lower-level elements.
 The process continues until a fully integrated system is formed.
 As the design ascends through layers, abstraction increases,
meaning the system becomes more generalized and conceptual at
higher levels.

49
 How It Works:
1. Start with existing low-level components or primitives.
2. Combine these into intermediate modules or sub-systems.
3. Continue layering until the entire system is built as a single
cohesive unit.
 This method is ideal when designing new systems based on
existing modules or legacy systems, where reuse of existing
code or components is desired.

50
 Best Use Case
• Most suitable when a system is being developed from existing
resources, such as libraries, tools, or reusable components.
• Often used in environments where low-level functionality is
already available.
 Relation to Other Approaches
• Neither top-down nor bottom-up is ideal when used in
isolation.
• A hybrid strategy combining both is typically the most effective,
allowing:
• Structured planning (top-down)
51
• Practical implementation and reuse (bottom-up)
 Advantages:
 Reusability & Cost Efficiency
 Reuses general-purpose components, reducing cost and effort.
 Abstraction Support
 Hides complex low-level implementation details.
 Integrates
 Well with Top-Down Design Can be combined with other
strategies for better flexibility.

52
 Disadvantages:
 Weak Problem Alignment
 The design may not reflect the structure or logic of the actual
problem.
 Complexity in Building Quality Solutions
 Designing efficient and appropriate reusable components is
difficult.
 Feature Bloat
 Risk of creating too many unnecessary or generic functions.

53
 Each software design strategy serves different needs:
• Structured design is good for clear, process-driven applications.
• Function-oriented design works well in simple, input-output
systems.
• Object-oriented design is ideal for modern, complex, and
reusable systems.
 In practice, a hybrid of these strategies may be used, depending on
the project scope, domain complexity, and design goals.

54
 The Command Line Interface remains a powerful, efficient, and
resource-friendly tool, especially for advanced users.
 While it lacks the intuitiveness of graphical interfaces, its precision,
speed, and automation capabilities make it indispensable in
many technical domains.
 A Graphical User Interface (GUI) plays a critical role in human-
computer interaction, especially in user-centric applications.
 With elements like windows, icons, buttons, and menus, GUI makes
software more accessible, interactive, and visually appealing.

55
 The GUI design process involves structured steps to ensure usability,
tailored user experiences, and integration with system functionality.
 Modern development tools make GUI design both easier and more
powerful.
 Top-Down Design is a logical and systematic design strategy that
starts from a broad system view and works its way down to the
detailed implementation level.
 It is ideal for ground-up software development, especially when
the initial design lacks detailed specifications.

56
 This approach builds a clear, hierarchical structure, making
system integration and development more organized and
manageable.
 Bottom-Up Design focuses on building a system from the ground
up, leveraging existing tools and components.
 While effective for enhancing reusability and modular
development, it may lack alignment with system requirements if
not guided by higher-level structure.
 Therefore, it is most powerful when combined with a top-down
design approach in a hybrid strategy.

57
 Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist,
N., & Diakopoulos, N. (2017). Designing the User Interface:
Strategies for Effective Human-Computer Interaction (6th ed.).
 Sommerville, I. (2015). Software Engineering (10th ed.).
 Pressman, R. S., & Maxim, B. R. (2014). Software Engineering: A
Practitioner’s Approach (8th ed.).

58
 Which of the following design strategies starts from a high-level view
and breaks down into components?
A) Bottom-Up Design
B) Hybrid Design
C) Top-Down Design
D) Object-Oriented Design
 Answer: C) Top-Down Design

59
 Which strategy promotes the reuse of existing components?
A) Top-Down
B) Function-Oriented
C) Bottom-Up
D) Structured
 Answer: C) Bottom-Up

60
 Hybrid design strategy is a combination of:
A) Function-Oriented and Structured
B) Object-Oriented and Structured
C) Top-Down and Bottom-Up
D) Class-Based and Use-Case Based
 Answer: C) Top-Down and Bottom-Up

61
 Which design strategy uses DFDs and structure charts to represent
processes?
A) Object-Oriented Design
B) Structured Design
C) Bottom-Up Design
D) Agile Design
 Answer: B) Structured Design

62
 Which design strategy is most suitable for reuse and real-world
modeling?
A) Function-Oriented
B) Top-Down
C) Object-Oriented
D) Structured
 Answer: C) Object-Oriented

63
 Function-Oriented Design mainly focuses on:
A) Data encapsulation
B) Real-world modeling
C) Data transformation
D) Class inheritance
 Answer: C) Data transformation

64
 Which design approach is most aligned with modern languages like
Java and Python?
A) Structured
B) Function-Oriented
C) Object-Oriented
D) Procedural
 Answer: C) Object-Oriented

65
 In Function-Oriented Design, software is decomposed into:
A) Objects
B) Attributes
C) Functions or sub-functions
D) Classes
 Answer: C) Functions or sub-functions

66
 A major drawback of Structured Design is:
 A) Overuse of object classes
 B) Incompatibility with visual tools
 C) Difficulty modeling real-world entities
 D) No support for hierarchical structures
 Answer: C) Difficulty modeling real-world entities

67
 Which design approach uses tools like DFDs, flowcharts, and
structure charts?
A) Object-Oriented
B) Agile Design
C) Structured Design
D) Component-Based Design
 Answer: C) Structured Design

68
 Which type of user interface involves command inputs typed by the
user?
A) GUI
B) Menu-driven Interface
C) Command Line Interface (CLI)
D) Touch Interface
 Answer: C) Command Line Interface (CLI)

69
 In GUI design, which element allows multiple selections?
 A) Radio Button
 B) Drop-down List
 C) Text Field
 D) Check Box
 Answer: D) Check Box

70
 In GUI development, which of the following is a prototyping tool?
A) Visual Studio Code
B) FLUID
C) Oracle DBMS
D) Postman
 Answer: B) FLUID

71
 Which of the following is NOT a core component of GUI?
A) Button
B) Window
C) Packet
D) Menu
 Answer: C) Packet

72
 What does encapsulation in object-oriented design help with?
A) Increasing runtime
B) Hiding implementation details
C) Expanding functionality
D) Data duplication
 Answer: B) Hiding implementation details

73
 Drop-down lists in a GUI help with:
A) Allowing real-time typing
B) Enabling navigation
C) Reducing on-screen clutter
D) Accepting multiple inputs simultaneously
 Answer: C) Reducing on-screen clutter

74
 What does the user interact with in a GUI-based environment?
A) Database
B) Codebase
C) Visual elements like buttons, windows
D) Networking components
 Answer: C) Visual elements like buttons, windows

75
76