Building Better Software:Harnessing UI Design

Patterns for Quality

Kamatam Akanksha Mudavath Swapna G Shanmukhi Rama Asst.Prof
Department of Computer science Department of Computer science Department of Computer science
Engineering Engineering Engineering
Chaithanya Bharathi Chaithanya Bharathi Chaithanya Bharathi
Institute of Institute of Institute of
Technology,Hyderabad, India. Technology,Hyderabad, India. Technology,Hyderabad,India.
[email protected] [email protected] [email protected]

Abstract— Effective software development heavily relies on the challenging and critical to the success of a software project.
judicious selection and application of design patterns, which Incorrect design pattern choices may lead to inefficiencies,
streamline development processes by leveraging preexisting maintenance issues, and even project failure, especially for
solutions. However, inexperienced developers often struggle
with selecting appropriate design patterns, leading to project
inexperienced developers.
failures. To address this challenge, we propose a Machine
Learning (ML)-enabled solution integrated into a To address this challenge, a novel approach combining machine
web-based interface. Our system allows users to upload learning (ML) techniques and web-based modules has been
source code, which is then analyzed by ML algorithms to developed. This approach enables developers to predict suitable
predict suitable design patterns. We evaluated various ML design patterns by analyzing source code. Through a user-friendly
algorithms such as Support Vector Machines (SVM), web interface, developers can upload their source code, which is
Random Forest, and Decision Trees based on metrics like then processed by ML algorithms to rank and predict the most
accuracy, precision, recall, and F-score to ensure optimal
appropriate design pattern.The system employs various ML
performance.
algorithms, such as Support Vector Machines (SVM), Random
The system's workflow comprises several modules including Forest, and Decision Trees, which have been evaluated for
user authentication, dataset loading, conversion of source
accuracy, precision, recall, and F-score to ensure robust
code to numeric vectors, ML algorithm training, and design
pattern prediction. Upon login, users can upload datasets performance. Training these algorithms involves utilizing a dataset
containing design pattern information. These datasets are specifically curated for design pattern prediction, sourced from a
processed to convert source code into numeric vectors for publicly available repository.The workflow of the system consists
algorithm training. The ML models are trained and of several modules accessible through REST-based web services:
evaluated using a split of 80% for training and 20% for
testing. Once trained, users can upload their source code for
design pattern prediction. The system ranks the uploaded
1. User Login: Allows users to authenticate and access the
code against trained models to identify the most suitable system using credentials.
design pattern.
2. Load Design Patterns Code: Enables users to upload the
Our system aims to empower developers to make informed dataset containing information about project names, source code
decisions regarding design pattern selection, thereby
class names, and corresponding design patterns.
enhancing software quality and reducing development time.
The web-based interface provides a user-friendly platform 3. Code to Numeric Vector: Converts the source code into a
for seamless interaction with the ML-powered prediction
engine. Experimental results demonstrate the efficacy of our numeric vector representation, replacing words with their average
approach, with Random Forest consistently achieving high frequencies.
accuracy in pattern prediction. By leveraging ML
techniques, our system offers a valuable tool for both novice 4. Train ML Algorithms: Divides the processed dataset into
and experienced developers to optimize their software design training and testing sets, with 80% used for training the ML
processes and ensure project success. models. The trained models are then evaluated using the
Keywords— Machine Learning, Design Patterns, Software remaining 20% of the dataset to calculate accuracy and other
Development, Ontology-based Ranking, Web Application, metrics.
Source Code Analysis..
5. Predict Design Patterns: Allows users to upload their source
I. INTRODUCTION code files for pattern prediction. The ML algorithms rank the
uploaded code to identify the most suitable design pattern, which
Design patterns play a crucial role in software is then displayed to the user.
development by facilitating the reuse of proven solutions
to common design problems. However, selecting the This system empowers developers to make informed decisions
right design pattern for a given context can be about design pattern selection based on the characteristics of their
 code. By leveraging ML and web technologies, it offers
a streamlined approach to improving software design
quality and efficiency, ultimately enhancing the success
rate of software projects.

.
II. DESIGN THINKING METHODS

Empathize: Understand the needs and pain points of

software developers who struggle with selecting
III. DISCUSSION
appropriate design patterns. Conduct interviews and
surveys to gather insights into their challenges and The integration of machine learning (ML) into the process of
frustrations. predicting design patterns from source code represents a
significant advancement in software development methodologies.
Define: Clearly articulate the problem statement based on Design patterns are instrumental in software development, as they
the insights gained from the empathy phase. For enable the reuse of proven solutions and reduce the effort required
example, identify the common errors developers for development. However, the incorrect selection of design
encounter in selecting design patterns and the patterns can lead to project failure, particularly for less
consequences of these errors on software development experienced developers.
projects.
To address this challenge, a solution has been proposed that
Ideate: Brainstorm potential solutions to address the leverages ML algorithms and web modules to analyze source code
identified problem. Encourage creative thinking among inputted by users through a web interface. These ML algorithms
team members to generate innovative ideas. Consider rank the source code to identify suitable design patterns and then
leveraging machine learning and web technologies to display the predicted design pattern as output. This approach is
automate the process of design pattern selection based on not only applicable to both UI and non-UI design patterns but also
source code analysis. ensures accurate pattern selection.

Multiple ML algorithms, including Support Vector Machine

Prototype: Develop a prototype of the web-based (SVM), Random Forest, and Decision Tree, have been evaluated
application that allows users to upload source code files for their performance in predicting design patterns. The
and receive predictions on suitable design patterns. Focus evaluation metrics used include accuracy, precision, recall, and
on creating a user-friendly interface that facilitates FCSORE. Among these algorithms, Random Forest consistently
seamless interaction with the system. demonstrates high accuracy, making it the preferred choice for
this task.
Test: Gather feedback from developers and usability
testing sessions to evaluate the effectiveness and To train these ML algorithms, a Design Patterns prediction dataset
usability of the prototype. Iterate on the design based on sourced from GitHub has been utilized. This dataset contains Java
the feedback received to improve the accuracy of design code representing 13 different design patterns, with each pattern's
pattern predictions and name specified in the dataset file. The training process involves
Deploy: Deploy the application on a web server to make employing ontology-based ranking calculations to calculate the
it accessible to users. Conduct thorough testing to ensure rank between the dataset source code and user-uploaded source
the reliability and scalability of the deployed system. code. Subsequently, the highest-ranking design pattern is selected
Provide documentation and user support to assist as the prediction.
developers in utilizing the application effectively.
The implementation of this project is realized through RESTbased
Evaluate: Continuously monitor the performance of the web services, comprising various modules such as user login,
application in real-world scenarios. Collect metrics on dataset loading, conversion of code to numeric vectors, algorithm
user engagement, accuracy of design pattern predictions, training, and pattern prediction. Each module is seamlessly
and overall satisfaction with the tool. Use this feedback integrated into the web interface, providing users with a user-
to identify areas for improvement and refine the system friendly experience.
further Furthermore, the project's effectiveness is demonstrated through
screenshots showcasing the system's functionality, from the login
process to the prediction of design patterns based on uploaded
source code. Real-world examples illustrate the system's
capability to accurately predict design patterns, such as "Builder,"
"Facade," and "Factory Method."
 In above screen python server started and now open browser
and enter URL as http://127.0.0.1:8000/index.html and press
In conclusion, the integration of ML into the prediction enter key to get below page
of design patterns offers developers a valuable tool for
making informed decisions and enhancing software
development efficiency. By leveraging ML algorithms
and web technologies, developers can streamline the
design process and ensure the adoption of appropriate
design patterns in their projects.

IV. RESULT

The application of machine learning models in selecting

UI and non-UI design patterns has been explored, with
a focus on evaluating the performance of multiple ML In above screen click on ‘User Login’ link to get below login
algorithms like SVM, Random Forest, and Decision page
Tree. Each algorithm's effectiveness has been assessed
based on metrics such as accuracy, precision, recall, and
FCSORE. To facilitate the training of these algorithms,
a Design
Patterns prediction dataset has been sourced from a
GitHub URL, with the dataset details displayed in the
provided screen. The dataset follows a structured
format, with the first row representing column names
like Project Name, source code class name, and the
corresponding design pattern. Subsequent rows contain
dataset values.

Training the algorithms involves utilizing the provided In above screen user is login by using username and password
Java source code to predict design patterns. Ontology- as ‘admin and admin’ and then click on
based ranking calculations are employed to calculate the ‘Login’ button to get below page
rank between the dataset's source code and user-
uploaded source code. The highest-ranking design
pattern is then selected as the prediction.

The implemented project comprises REST-based web

services, consisting of modules such as User Login,
Load Design Patterns Code, Code to Numeric Vector,
Train ML Algorithms, and Predict Design Patterns.
Users can log in using the default username and
password ('admin' and 'admin'), upload dataset files,
convert code to numeric vectors, train ML algorithms,
and predict design patterns based on uploaded source
code.
In above screen click on ‘Load Design Pattern Code’ link to
load dataset and get below output
 In above screen dataset loaded and now click on ‘Code issue of incorrect pattern selection. Through user-friendly
to Numeric Vector’ link to convert dataset into interfaces and robust ML algorithms like SVM, Random
numeric vector and get below output Forest, and Decision Tree, accurate pattern prediction is
achieved. Utilizing a Design Patterns prediction dataset
enhances training, facilitating informed decision-making
for developers. The REST-based web services provide a
seamless platform for pattern prediction and selection.

V. CONCLUSIONS AND FUTURE WORK

The utilization of Machine Learning and web modules for

design pattern prediction represents a significant
advancement in software development. By addressing the
issue of incorrect pattern selection, developers can enhance
the efficiency and effectiveness of their projects. The
integration of robust ML algorithms, such as SVM,
In above screen entire dataset converted to numeric Random Forest, and Decision Tree, ensures accurate
vector and then click on ‘Train ML Algorithms’ link to pattern prediction, leading to improved software quality
train ML and get below output
Moving forward, further research can focus on enhancing
the performance and versatility of the ML algorithms used
for design pattern prediction. Additionally, efforts can be
directed towards expanding the dataset used for training to
encompass a broader range of design patterns and
programming languages. Moreover, the development of
more intuitive and user-friendly interfaces can streamline
the pattern prediction process for developers, fostering
greater adoption and utilization of such systems in the
software development community

VI. ACKNOWLEDGMENT
In above screen can see each algorithm performance in This research was supported by Chaithanya
tabular and graph format and in all algorithms Random Bharathi Institute of Technology
Forest got high accuracy and in graph x-axis represents
algorithm names and y-axis represents accuracy and VII. REFERENCE
other metrics in different colour bars and now click on
‘Predict • Mobile application revenue generation.
[Online].
Design Patterns’ link to get below page Available from: https://www.abiresearch.com/press/tabletswill-
generate-35-of-this-years-25-billion-/ [retrieved:
December,2019].
• S. Henninger and P. Ashokkumar, “An ontologybased
infrastructure for usability design patterns,” Proc. Semantic
Web Enabled Software Engineering (SWESE), Galway,Ireland,
pp. 41-55, 2005.
• T. A. Coleti et al., “Design Patterns to Support Personal
DataTransparency Visualization in Mobile
Applications, International Conference on Human-Computer
Interaction,Springer, Cham, pp. 46-62, 2019.
• T. Neil, “12 Standard Screen Patterns,”
http://designingwebinterfaces.com/designing-webinterfaces-
In above screen select and uploading any java source code 12-screen patterns, accessed November, 2012.
in UI/non-UI format and then click on ‘Submit’ button to • Patternry, “UI Design Patterns and Library Builder,”
predict names of design pattern http://patternry.com, accessed November, 2012. J. Tidwell,
Designing Interfaces. Sebastopol, CA: O’Reilly, 2011.
EVALUATION
• A. Toxboe, “UI Patterns - User Interface Design Pattern Library,”
The integration of Machine Learning and web http://ui-patterns.com, accessed November, 2012
modules for design pattern prediction in
software development addresses the critical
 • Gómez, R.Y., D.C. Caballero, and J.-L. Sevillano,
Heuristic Evaluationon Mobile Interfaces: A New
Checklist. The Scientific World Journal,2014
• Nielsen, J. and R. Molich, Heuristic evaluation of user
interfaces, in Proceedings of the SIGCHI Conference
on Human Factors in Computing Systems. 1990,
ACM: Seattle, Washington, USA. p. 249-256.
• Advances in Space Technologies (RAST), Istanbul,
Turkey, 2015, pp. 539-544, doi:
10.1109/RAST.2015.7208403.
• A. Dutta, A. Negi, J. Harshith, D. Selvapandian, A. S.
Antony Raj and P. R. Patel,
"Evaluation Modelling of Asteroids’ Hazardousness using
ChaosNet," 2023 IEEE 8th International Conference for
Convergence in Technology (I2CT), Lonavla, India, 2023,
pp. 15, doi: 10.1109/I2CT57861.2023.10126386.

• Penttilä, Antti, Hilppa Hietala, and Karri Muinonen.

"Asteroid spectral taxonomy us- ing neural networks."
Astronomy & Astrophysics 649 (2021): A46
• Upender, Kaveti, Tammali Sai Krishna, N. Pothanna, and
PV Siva Kumar. "Predict- ing the Potentially Hazardous
Asteroid to Earth Using Machine Learning." In Pro-
ceedings of Second International Conference on
Advances in Computer Engineering and Communication
Systems: ICACECS 2021, pp. 359-369. Singapore:
Springer Na- ture Singapore, 2022.
• Machado, JA Tenreiro, and S. Hamid Mehdipour.
"Multidimensional analysis of near-earth asteroids." SN
Computer Science 3, no. 3 (2022): 207.
• Penttilä, Antti, Hilppa Hietala, and Karri Muinonen.
"Asteroid spectral taxonomy us- ing neural networks."
Astronomy & Astrophysics 649 (2021): A46.
• Ravani, Khilan, S. Mathavaraj, and Radhakant Padhi.
"Site detection for autonomous soft-landing on asteroids
using deep learning." Transactions of the Indian National
Academy of Engineering 6 (2021): 365-375.
• R. N. Ranaweera and T. Fernando, "Prediction of
Potentially Hazardous Asteroids using Deep Learning,"
2022 2nd
International Conference on Advanced Research in
Computing (ICARC), Belihuloya, Sri Lanka, 2022,
pp. 31-36, doi:
10.1109/ICARC54489.2022.9753945.