PANGASINAN STATE UNIVERSITY BS COMPUTER ENGINEERING

CpE116 Software Design Laboratory Report No. 06

LABORATORY REPORT NO. 06

User Interface Design

OVERVIEW

The aim of this laboratory session is to explore the principles and best practices of
User Interface (UI) design within the context of Object-Oriented Programming (OOP). User
Interface Design plays a critical role in software development as it directly impacts the
usability and user experience of an application. In this lab, we will delve into the key
considerations, design patterns, and implementation techniques for building effective and
user-friendly UIs using an object-oriented approach.

OBJECTIVES

• Understand the significance of User Interface Design in software development.

• Explore the principles of User-Centered Design and its integration with OOP.
• Gain practical experience in designing and implementing UIs using OOP concepts.
• Analyze the impact of UI design on user satisfaction and overall software quality.

ABSTRACT

Chapter 11 of the book "Software Engineering: A Practitioner's Approach" by Roger

S. Pressman focuses on user interface design. The chapter discusses key aspects such as
usability, consistency, and user control. It highlights common interface design errors and
presents the golden rules of interface design: placing the user in control, reducing memory
load, and ensuring consistency. The chapter explores principles of user interface design,
including flexible interaction, reducing memory load through meaningful defaults and intuitive
shortcuts, and using real-world metaphors in visual layout. It emphasizes progressive
disclosure, where information is presented hierarchically based on user interest. Various
design models are covered, including the user model, design model, mental model, and
implementation model. The chapter emphasizes the importance of task analysis and
modeling to understand user workflows and task hierarchies. The content delves into the
analysis of display content, including data placement and customization, on-screen
identification, partitioning of large reports, and graphical output. It discusses steps in interface
design, such as defining interface objects, modeling user actions, and depicting interface
states. Design issues like response time, help facilities, error handling, menu labeling,

PANGASINAN STATE UNIVERSITY 1

PANGASINAN STATE UNIVERSITY BS COMPUTER ENGINEERING

CpE116 Software Design Laboratory Report No. 06

application accessibility, and internationalization are addressed. The chapter presents

interface design principles, including anticipation, communication, consistency, controlled
autonomy, efficiency, focus, Fitt’s Law, human interface objects, latency reduction,
learnability, work product integrity, readability, track state, and visible navigation. Aesthetic
design principles are also touched upon, such as using white space, emphasizing content,
organizing layout elements, considering scrolling bars, and accounting for resolution and
window size.

Overall, Chapter 11 provides a comprehensive overview of user interface design

principles and considerations, offering valuable insights for creating effective and user-
friendly interfaces.

Chapter 12 of the book "Software Engineering: A Practitioner's Approach" by Roger

S. Pressman focuses on pattern-based design. The chapter introduces design patterns and
their benefits in solving recurring design problems. It discusses the definition and purpose of
design patterns, emphasizing their ability to describe common problems and reusable
solutions. The chapter explains the basic concepts related to design patterns, highlighting
the role of context in understanding problems and finding appropriate solutions. It discusses
the system of forces that influence problem interpretation and solution application. Effective
design patterns are described, focusing on their problem-solving abilities, proven track
record, non-obvious solutions, consideration of system structures and mechanisms, and their
impact on aesthetics and utility. Generative patterns are introduced as patterns that describe
essential aspects of a system within a unique context. The chapter categorizes different kinds
of patterns, including architectural patterns, data patterns, component patterns (design
patterns), interface design patterns, and WebApp patterns. The chapter discusses creational,
structural, and behavioral patterns. It introduces frameworks as implementation-specific
infrastructures that provide structure and behavior for software abstractions. The elements of
a pattern, such as pattern name, problem, solution, collaborations, consequences, and
related patterns, are explained. Pattern languages are discussed as collections of
interconnected patterns that solve problems across an application domain. The chapter
outlines the process of pattern-based design, starting with the requirements model and
extracting patterns at different levels of abstraction. It emphasizes working inward from the
context and refining the design by adapting each pattern to the specific software being built.
The chapter also provides a pattern organizing table, categorizing patterns based on types

PANGASINAN STATE UNIVERSITY 2

PANGASINAN STATE UNIVERSITY BS COMPUTER ENGINEERING

CpE116 Software Design Laboratory Report No. 06

for quick reference. Common design mistakes related to design patterns are highlighted,
emphasizing the importance of selecting appropriate patterns and adapting them as
necessary.

In conclusion, Chapter 12 emphasizes the importance of pattern-based design in

software engineering. It introduces various types of patterns, pattern languages, and
frameworks, providing guidance on effectively applying patterns to solve design problems.

DISCUSSION

A. Choose a software system (or your project) and design its user interface.

According to the User Interface design process discussed in the book, we learned there are
four phases which are represented in a Spiral Model.

Software System: Task Scheduler Application

I. Interface Analysis
a. User Analysis
1. User Profile
• Home Users: Individuals managing household chores, personal tasks, and family
schedules.
• Busy Individuals: People with busy schedules who need a clear overview of their tasks
and appointments.
• Task-oriented Users: Individuals who prioritize task management and want to stay
organized.
2. User Demographics
• Age: Users can range from young students to older adults managing personal and
professional responsibilities.
• Profession: Users from diverse professional backgrounds, including office workers,
freelancers, students, and homemakers.
• Technical Expertise: Users may have varying levels of technical expertise, from basic
computer skills to advanced knowledge in using productivity tools.
3. User Goals and Objectives
• Task Overview: Users aim to have a clear visual representation of their tasks and

PANGASINAN STATE UNIVERSITY 3

PANGASINAN STATE UNIVERSITY BS COMPUTER ENGINEERING

CpE116 Software Design Laboratory Report No. 06

appointments for the day or week.

• Scheduling Flexibility: Users desire the ability to add, modify, and delete tasks easily
on specific days within their schedule.
• Time Management: Users seek features that assist in effective time allocation and
task distribution.
• Reminders and Notifications: Users desire reminders and notifications for upcoming
appointments or task deadlines to avoid missing important events.
• Ease of Use: Users want a user-friendly interface that allows for quick and effortless
task entry, deletion, and modification.
4. User Preferences
• Minimalist Design: Users prefer a clean and minimalist interface that focuses on
displaying essential information without unnecessary clutter.
• Clean and Intuitive Interface: Users prefer a clutter-free interface that is easy to
navigate and understand.
• Customizable Settings: Users want the option to customize the application's
appearance and preferences according to their preferences.
• Mobile Compatibility: Users desire the ability to access and manage their tasks on
various devices, including smartphones and tablets.

b. Task Analysis
1. Task Identification
• Task Creation: Users should be able to create new tasks by entering the task title,
date, and optional description.
• Task Deletion: Users need the ability to remove tasks that are no longer relevant or
completed.
• Task Modification: Users may want to modify task details, such as changing the task
title or updating the due date.
2. Task Sequencing
• Weekly Schedule: Users should be able to view their tasks and appointments
organized by the days of the week for a comprehensive weekly overview.
• Daily Schedule: Users need a clear display of tasks and appointments for the selected
day, allowing them to plan and manage their day effectively.
3. Task Complexity

PANGASINAN STATE UNIVERSITY 4

PANGASINAN STATE UNIVERSITY BS COMPUTER ENGINEERING

CpE116 Software Design Laboratory Report No. 06

• Simplicity of Task Creation: Design an interface that allows users to quickly enter tasks
with minimal effort and distractions.
• Seamless Task Deletion: Enable users to remove tasks with a straightforward action,
minimizing any confusion or additional steps.
• Effortless Task Modification: Users should be able to modify task details in a simple
and intuitive manner without encountering unnecessary complexities.
c. Environment Analysis
• Android Operating System

II. Interface Design

a. Defining interface objects and operations.
• Interface Objects: Task, Daily Schedule, Weekly Schedule, Reminders, Notifications,
Add Task Button, Delete Task Button, Edit Task Button, Mark Task as Complete
Button, Task Details Panel, Task Due Date, Task Description, Settings Panel.
• Operations (Actions): Add Task, Delete Task, Edit Task, Mark Task as Complete,
View Daily Schedule, View Weekly Schedule, Set Reminders, View Notifications,
Navigate Settings.
b. Defining events (User Actions) that will cause the state of the user interface to change.
• User Actions: Clicking on Add Task Button, Clicking on Delete Task Button, Clicking
on Edit Task Button, Clicking on Mark Task as Complete Button, Selecting a Date on
Daily Schedule, Selecting a Week on Weekly Schedule, Setting Reminders, Viewing
Notifications, Changing User Preferences.
c. Depicting each interface state as it will actually look to the end-user.
• Wireframe 1: Home Screen/ Default Screen
• Display: Weekly Schedule, Add Task Button, Notifications Icon, Settings Icon.
• Example Interface State: Displaying the home screen with the Weekly Schedule
section populated with tasks for the current week.
• Wireframe 2: Daily Tasks Screen
• Display: Daily Schedule, Add Task Button, Notifications Icon, Settings Icon,
Checkbox Icon
• Example Interface State: Displaying the home screen with the Daily Schedule
section populated with tasks for the current day with a functionality of ticking the
checkbox indicating the task is finished.

PANGASINAN STATE UNIVERSITY 5

PANGASINAN STATE UNIVERSITY BS COMPUTER ENGINEERING

CpE116 Software Design Laboratory Report No. 06

• Wireframe 3: Task Creation Screen

• Display: Task Details Panel (Title, Due Date, Reminders, Description), Save
Task Button, Cancel Button.
• Example Interface State: Showing an interface where users can enter task
details such as title, due date, and description. Buttons to save the task or cancel
the operation are available.
• Wireframe 4: Task Details Screen
• Display: Task Details Panel (Title, Due Date, Description), Edit Task Button,
Delete Task Button.
• Example Interface State: Presenting the detailed view of a task with its title, due
date, and description. Buttons to edit or delete are provided.
• Wireframe 5: Settings Screen
• Display: Customize User Preferences Section (Appearance, Notification,
Reminders), Support Section (Help, Feedback).
• Example Interface State: Showing an interface where users can change the color
theme of the app, write feedback, ask for support, and provide options for
customizing notification and reminders settings.

d. Indicating how the user interprets the state of the system from information provided
through the interface:
• Checkboxes to represent the completion status of tasks.
• Prompt for confirmation to avoid accidental deletion.

PANGASINAN STATE UNIVERSITY 6

PANGASINAN STATE UNIVERSITY BS COMPUTER ENGINEERING

CpE116 Software Design Laboratory Report No. 06

B. Create wireframes or mockups to visualize the user interface design

Wireframe 1: Wireframe 2:

Wireframe 3: Wireframe 4:

PANGASINAN STATE UNIVERSITY 7

PANGASINAN STATE UNIVERSITY BS COMPUTER ENGINEERING

CpE116 Software Design Laboratory Report No. 06

Wireframe 5:

C. Conduct a usability test with your groupmates and gather feedback for
improvements.

Here are the feedbacks and areas for improvements:

On Wireframe 1, the default screen provides a quick overview of the weekly schedule,
but task titles may not be fully displayed. On wireframe 2, the inclusion of a checkbox for
completed tasks is useful for tracking progress. It enhances the user experience by providing
a visual indication of task completion. On wireframe 3, the task creation panel contains
essential information, but ensure it doesn't restrict users from entering all necessary details.
Provide sufficient space or expand the panel if needed. On wireframe 4, the edit and delete
buttons in the task details screen enable effective task management. Users have control over
modifying or removing tasks as needed. On wireframe 5, offering customization options,
feedback submission, and support enhances user control and satisfaction.

In conclusion, the wireframes show potential for the task scheduler app. Consider

PANGASINAN STATE UNIVERSITY 8

PANGASINAN STATE UNIVERSITY BS COMPUTER ENGINEERING

CpE116 Software Design Laboratory Report No. 06

improving task title visibility, providing flexibility in entering task details. The inclusion of task
completion checkboxes, task management options, and customization features is valuable
for users.

CONCLUSION

In conclusion, Chapters 11 and 12 have provided a comprehensive understanding of

the user analysis, task analysis, interface design, and display content analysis in the context
of designing effective user interfaces. These chapters emphasize the importance of user-
centered design, where the needs, preferences, and characteristics of the target users are
thoroughly analyzed and considered throughout the design process.

Overall, by applying the concepts and techniques presented in these chapters,

designers can create user interfaces that align with user needs, enhance usability, and
provide a positive user experience. Understanding the users, their tasks, and effectively
presenting information through the interface are key factors in designing successful software
systems that meet the expectations and requirements of the target users.

REFERENCES

References:
Pressman, R.(nd.) Chapter 11-12, Software Engineering: A practitioner’s approach 7th Ed.

Education 4u. (2018, June 27). User interface design Models | software engineering | [Video].
YouTube. https://www.youtube.com/watch?v=RZhIYAxDa1I

LearnEveryone. (2017, April 11). CHAPTER 11 USER INTERFACE DESIGN SE Pressman

[Video]. YouTube. https://www.youtube.com/watch?v=VWaxbxoS_UI

Wireframe.cc | The go-to wireframing tool. (n.d.). Wireframe.cc. https://wireframe.cc/

PANGASINAN STATE UNIVERSITY 9