05201106 - Software Engineering

Module-5
User Interface Design
1. Introduction
 User Interface (UI) is the point of interaction between the user and a computer
system or application.

 A good UI ensures ease of use, efficiency, and satisfaction.

 In IT industry, UI is a critical part of software, web, and mobile application design,

influencing user experience (UX).

2. Objectives of UI Design
✅ Make software easy to learn and use
✅ Ensure efficient task completion for users
✅ Improve user satisfaction and experience
✅ Reduce errors and increase productivity
✅ Provide a consistent look and feel across the system

3. Types of User Interfaces

Type Description Example

Command-Line Users type commands to interact

Linux terminal, CMD
Interface (CLI) with the system

Graphical User Visual elements like buttons,

Windows OS, Web browsers
Interface (GUI) icons, and menus

Menu-Driven Interface Users select options from menus ATM machines, Mobile apps

Users fill in forms to interact with Online registration, Feedback

Form-Based Interface
system forms

Natural Language System interprets user’s natural Chatbots, Voice assistants

Interface language input like Alexa/Siri

4. Key Concepts of UI
4.1 Consistency
 Ensure uniform design across screens, menus, and actions.
 05201106 - Software Engineering
Module-5
 Example: Same button style for “Submit” across all forms.

4.2 Feedback
 System should inform users about actions or errors.

 Example: “Payment Successful” message after completing a transaction.

4.3 Visibility
 Important functions should be easily visible and accessible.

 Example: Navigation bar clearly displayed on all pages.

4.4 Affordance
 Design elements should suggest how they can be used.

 Example: Buttons should look clickable, sliders should look draggable.

4.5 Error Prevention and Recovery

 Prevent errors and provide clear instructions to recover.

 Example: Undo option, form validation messages.

4.6 Simplicity
 Keep UI clean and minimal, avoid clutter.

 Example: Only essential information on dashboards.

4.7 Flexibility and Efficiency

 Supports both novice and expert users.

 Example: Keyboard shortcuts for advanced users, tooltips for beginners.

5. Example (IT Industry – Online Shopping System)

 GUI: Product images, Add to Cart button, Filters

 Feedback: “Item added to cart” popup

 Consistency: Same checkout process across devices

 Error Recovery: Display message for invalid card number

 Flexibility: Guest checkout or registered user checkout

Daily Life Example– College Event Registration

 Menu-Driven Interface: Select event from dropdown
 05201106 - Software Engineering
Module-5
 Form-Based Interface: Fill registration details

 Feedback: “Registration Successful” message

 Consistency: Same button style across registration pages

 Error Recovery: Alert if required fields are missing

Advantages of Good UI
✅ Enhances user satisfaction and engagement
✅ Improves productivity and efficiency
✅ Reduces learning time and errors
✅ Encourages repeat usage of the system
✅ Supports brand identity and professional appearance

Limitations / Challenges
❌ Poor UI leads to confusion and errors
❌ Designing for all user types can be complex
❌ Frequent updates may require UI redesign
❌ Balancing aesthetics and functionality is challenging

Interface design model

1. Introduction
 Interface Design Model (IDM) is a structured approach to designing the user
interface of a system.

 Focuses on how users interact with software and ensures the interface is efficient,
user-friendly, and visually appealing.

 Widely used in IT industry for web applications, mobile apps, desktop software,
and embedded systems.

2. Objectives of Interface Design Model

✅ Enhance user satisfaction and experience
✅ Ensure efficient navigation and task completion
✅ Reduce errors and improve usability
 05201106 - Software Engineering
Module-5
✅ Provide consistent and intuitive interface
✅ Serve as a blueprint for UI implementation

3. Key Concepts of Interface Design Model

3.1 User-Centered Design (UCD)
 Design interface based on user needs, goals, and limitations.

 Example: Simplified checkout for first-time online shoppers.

3.2 Iterative Design

 Interface is designed, tested, and refined repeatedly based on user feedback.

 Example: Multiple prototypes for a mobile app before final release.

3.3 Prototyping
 Build a mock-up of the interface to test layout, workflow, and usability.

 Types: Low-fidelity (paper sketch), High-fidelity (interactive prototype)

3.4 Information Architecture

 Organize and structure information so users can easily find what they need.
 Example: Menu categories, search functionality in e-commerce websites.

3.5 Navigation Design

 Define how users move through the system efficiently.

 Example: Breadcrumbs, tabbed menus, back/forward buttons.

3.6 Visual Design Principles

 Ensure consistency, readability, and visual hierarchy.

 Principles: Color, typography, spacing, alignment, iconography.

3.7 Interaction Design

 Define how users interact with system elements (buttons, forms, sliders).

 Focus on affordance, feedback, and responsiveness.

 05201106 - Software Engineering
Module-5
4. Interface Design Process / Model

Phase Description

Requirement Analysis Identify user needs, tasks, and system goals

Create conceptual models, workflow diagrams, and

Interface Modeling
prototypes

Design & Layout Develop screens, menus, and navigation structures

Usability Testing Test with real users, gather feedback, identify issues

Refinement & Modify design based on feedback and implement final

Implementation interface

Evaluation & Maintenance Continuously monitor and improve UI post-deployment

5. Example (IT Industry – Online Shopping System)

 Requirement Analysis: Identify user needs like search, cart, checkout, payment.

 Interface Modeling: Create wireframes of product pages, cart, and checkout screens.
 Design & Layout: Use consistent colors, buttons, and typography.

 Usability Testing: Test navigation and ease of purchase with users.

 Refinement: Improve search filters, add progress indicators during checkout.

Daily Life Example– College Event Registration

 Requirement Analysis: Students should register, pay fees, and receive confirmation.

 Interface Modeling: Paper sketches or digital mock-ups of registration form.

 Design & Layout: Use simple fields, clear labels, and submit button.

 Usability Testing: Ask students to complete registration; gather feedback.

 Refinement: Add validation messages, improve confirmation emails.

Advantages of Interface Design Model

✅ Ensures user-centered and usable interface
✅ Reduces user errors and learning time
 05201106 - Software Engineering
Module-5
✅ Improves user satisfaction and productivity
✅ Facilitates consistent and professional UI
✅ Helps in planning and implementing UI efficiently

Limitations
❌ Can be time-consuming for complex systems
❌ Requires skilled designers and usability testers
❌ Frequent changes in user requirements may require redesign
❌ Misalignment between design and development may occur

Internal and external design

1. Introduction
 System Design is generally divided into External Design and Internal Design.

 Helps bridge the gap between requirements analysis and implementation.

 Widely used in IT industry for software, web, and mobile application development.

2. External Design (User Interface & Functional Design)

2.1 Definition
 External Design focuses on what the system should do from a user’s perspective.

 Concerned with interface, outputs, inputs, and external interactions.

2.2 Objectives

✅ Define user interface and user experience

✅ Specify functional behavior of the system
✅ Ensure clarity of inputs, outputs, and reports
✅ Serve as a blueprint for internal design and coding

2.3 Key Components

Component Description Example

User Interface Screen layouts, menus, forms Online shopping product page

Inputs Data required from users Registration form, search query

 05201106 - Software Engineering
Module-5
Component Description Example

Outputs Data/results produced by system Invoice, confirmation message

External Interfaces Interaction with other systems Payment gateway, API integration

Daily Life Example – College Event Registration

 Input: Student details, event selection

 Output: Registration confirmation, receipt

 UI: Simple registration form with clear labels and buttons

 External Interface: Payment gateway integration

3. Internal Design (System & Data Design)

3.1 Definition
 Internal Design focuses on how the system will perform internally to achieve the
external requirements.

 Concerned with data structures, algorithms, modules, and control flow.

3.2 Objectives

✅ Define internal architecture and modules

✅ Specify data storage, processing, and control mechanisms
✅ Ensure efficiency, maintainability, and security
✅ Serve as a blueprint for coding and database implementation

3.3 Key Components

Component Description Example

Database tables, relationships,

Data Design Student table, Event table
file structures

Process Algorithms, procedures, and Registration validation, payment

Design workflow processing

Control
Internal checks, error handling Input validation, transaction rollback
Design
 05201106 - Software Engineering
Module-5
Component Description Example

Module Registration module, Payment module,

Decomposition into smaller units
Design Notification module

3.4 Example (Daily Life – College Event Registration 🎉)

 Data Design: Student table, Event table, Payment table

 Process Design: Check seat availability → Validate payment → Update registration

 Control Design: Error messages for invalid input

 Modules: Login module, Registration module, Payment module, Confirmation

module

4. Comparison of External and Internal Design

Aspect External Design Internal Design

Focus User perspective System perspective

Inputs, outputs, UI, external Modules, algorithms, data structures,

Concern
interfaces control flow

Specify what the system should

Objective Specify how the system will do it
do

Example Registration form, invoice Database tables, validation logic

User
High Low
Interaction

Advantages
 Clear distinction helps in better planning and implementation

 Supports modularity and maintainability

 Improves communication between developers and users

 Reduces errors and rework during coding

 05201106 - Software Engineering
Module-5
Evaluation
1. Introduction
 Evaluation in system and software design is the process of assessing the
effectiveness, usability, and performance of a system or interface.

 Ensures the system meets user requirements, business goals, and quality
standards.

 Widely used in the IT industry for software testing, usability studies, and quality
assurance.

2. Objectives of Evaluation
✅ Assess whether the system meets functional and non-functional requirements
✅ Identify usability issues and performance bottlenecks
✅ Ensure user satisfaction and efficiency
✅ Facilitate continuous improvement of system and interface
✅ Reduce errors, risks, and maintenance costs

3. Types of Evaluation
3.1 Formative Evaluation
 Conducted during system development.

 Focuses on improving design and functionality iteratively.

 Methods: Prototyping, User feedback, Usability testing

 Example: Testing registration form layout with a small group of students before full
deployment.

3.2 Summative Evaluation

 Conducted after system completion.

 Focuses on overall effectiveness, efficiency, and satisfaction.

 Methods: System testing, Performance analysis, User surveys

 Example: Measuring transaction success rate and user satisfaction of a complete

online shopping system.
 05201106 - Software Engineering
Module-5
4. Evaluation Criteria

Criteria Description Example

Ease of use, learnability, and user

Usability Navigation clarity, form simplicity
satisfaction

System performs intended tasks Payment processing, report

Functionality
correctly generation

Performance Speed, responsiveness, reliability Fast page load, minimal downtime

Password encryption, secure

Security Protection of data and access control
transactions

Modular code, clear

Maintainability Ease of updates and modifications
documentation

Web app working on desktop and

Compatibility Works on different platforms/devices
mobile

5. Evaluation Methods
5.1 Heuristic Evaluation
 Experts review the system against usability principles (heuristics).

 Example: UI experts checking button placement, color contrast, and navigation flow.

5.2 User Testing

 Real users interact with the system while evaluators observe performance and gather
feedback.

 Example: Students using a college event registration portal and reporting issues.

5.3 Surveys and Questionnaires

 Collect user opinions and satisfaction ratings.
 Example: Post-event feedback on registration and payment experience.

5.4 Performance Testing

 Check system’s speed, responsiveness, and reliability under load.

 Example: Online shopping system handling multiple simultaneous transactions.

5.5 Automated Tools

 Use software tools to monitor errors, performance, and security.
 05201106 - Software Engineering
Module-5
 Example: Load testing tools, code analyzers, security scanners.

6. Example (IT Industry – Online Shopping System)

 Formative Evaluation: Prototype testing for product catalog and checkout process

 Summative Evaluation: Full system tested for transaction success rate, user
satisfaction, and performance metrics

 Methods Used: User testing, performance testing, surveys

Daily Life Example – College Event Registration

 Formative Evaluation: Test registration form layout with a small group of students

 Summative Evaluation: Evaluate full registration system for ease of use, error
handling, and confirmation messages

 Methods Used: User testing, surveys, error tracking

Advantages of Evaluation
✅ Ensures system meets user requirements and business objectives
✅ Identifies errors, inefficiencies, and usability issues early
✅ Improves user satisfaction and adoption rate
✅ Supports continuous improvement and maintenance
✅ Reduces risk and cost of post-deployment fixes

Limitations / Challenges
❌ Can be time-consuming and resource-intensive
❌ Requires active user participation for realistic feedback
❌ Expert evaluations may be subjective
❌ May not identify all issues without comprehensive testing
 05201106 - Software Engineering
Module-5
Interaction and information display software.
1. Introduction
 Interaction and Information Display Software refers to applications that allow
users to interact with data, systems, or services and visualize information
effectively.

 Widely used in the IT industry for business dashboards, monitoring systems,

educational software, and web/mobile applications.

 Focuses on user interface, user experience, and information presentation.

2. Objectives
✅ Enable efficient and intuitive user interaction
✅ Display data and information clearly
✅ Support decision-making and task execution
✅ Enhance user satisfaction and productivity
✅ Provide feedback, control, and navigation to users

3. Key Concepts
3.1 User Interaction
 Refers to how users communicate with software.

 Includes input devices (keyboard, mouse, touchscreen) and interaction patterns (click,
drag, swipe, voice).

 Example: Adding items to a shopping cart using buttons and drag-and-drop.

3.2 Information Display

 Focuses on presenting data clearly and understandably.

 Uses charts, tables, dashboards, icons, graphs, notifications, and visual cues.

 Example: Sales dashboard showing daily, weekly, and monthly revenue graphs.

3.3 Feedback Mechanism

 Software should provide immediate feedback to user actions.

 Example: “Payment Successful” popup or error message for invalid input.

3.4 Navigation
 Allows users to move through the system efficiently.
 05201106 - Software Engineering
Module-5
 Includes menus, tabs, breadcrumbs, buttons, and search functions.

 Example: Navigation bar in an e-commerce website.

3.5 Responsiveness
 System should respond quickly to user inputs.

 Example: Auto-suggestions in search boxes or real-time updates in dashboards.

4. Types of Interaction and Information Display Software

Type Description Example

Data Visualization Displays information using

Tableau, Power BI
Software charts, graphs, and dashboards

Interactive Web Web apps allowing user Online shopping portals,

Applications interaction with data or services Online forms

Allows users to interact with Flight simulators,

Simulation Software
models or virtual systems Engineering simulations

Educational/Training Interactive learning tools for E-learning platforms, Virtual

Software students labs

Monitoring & Control Real-time interaction with SCADA systems, Network

Systems system operations monitoring dashboards

5. Example (IT Industry – Online Shopping System)

 Interaction: Adding/removing items from cart, selecting payment method

 Information Display: Product images, price, stock availability, order summary

 Feedback: “Item added to cart” popup, payment confirmation

 Navigation: Menu categories, search bar, checkout button

 Responsiveness: Fast page loading, instant search suggestions

Daily Life Example– College Event Registration

 Interaction: Selecting events, entering personal details, making payments
 Information Display: Event details, seat availability, confirmation messages
 05201106 - Software Engineering
Module-5
 Feedback: Alerts for missing fields, successful registration message

 Navigation: Tabs for events, registration form, payment, confirmation

 Responsiveness: Quick form submission, real-time seat availability updates

Advantages
✅ Improves user engagement and satisfaction
✅ Enhances decision-making through clear information display
✅ Supports efficient task execution
✅ Provides real-time feedback and control
✅ Facilitates better learning and training experiences

Limitations / Challenges
❌ Poor interaction design can lead to confusion and errors
❌ Information overload may reduce usability and comprehension
❌ Requires careful design for different devices and platforms
❌ High development cost for advanced visualizations and interactivity