Project Registration Form-Final Year Project-2021

RP-02

(This form should be completed and uploaded to the Cloud space on

or before XXXXXXXXX)

The purpose of this form is to allow final year students of

the B.Sc. (Hon) degree program to enlist in the final year project group. Enlisting in a project
entails specifying the project title and the details of four members in the group, the internal
supervisor (compulsory), externalInstitute
Sri Lanka supervisor of
(may be from the industry)
Information Technologyand indicating a brief
description of the project. The description of the project entered on this form will not be
considered as the formal project proposal. It should however indicate the scope of the project and
PROJECT REGISTRATION FORM
provide the main potential outcome.

PROJECT TITLE
(As per the accepted Automatic UI Generation with Application of SDLC and HCI Practices
topic assessment form)

RESEARCH GROUP
(as per the Topic Human Computer Interaction
assessment Form)

PROJECT NUMBER TMP-21-016 (will be assigned by the lecture in charge)

STUDENT NAME STUDENT NO. CONTACT NO. EMAIL ADDRESS

Format Perera C.D.D ITxxxxxxxx 0712345678 itxxxxxxxx@my.sliit.lk
1  Godage A.G.S.N. IT18115376  0712064542 it18115376@my.sliit.lk
2 Nissanka N.M.D.S.S. IT18120530  0774180998 it18120530@my.sliit.lk
3 Kalindu S IT18114904  0776543538 it18114904@my.sliit.lk
4 Uduwana P.N. IT18062502  0771422421 it18062502@my.sliit.lk

SUPERVISOR, CO_ SUPERVISOR Details

Page 1|
Project Registration Form-Final Year Project-2021
RP-02

SUPERVISOR Name CO-SUPERVISOR Name

Ms. Samanthi Eranga
Dr. Shyam Mehraaj Siriwardene
Signature Signature

Attach the email as Appendix 1 Attach the email as Appendix 2

01/22/2021 01/22/2021

EXTERNAL SUPERVISOR Details (if any, may be from the industry)

Attach the email

as Appendix 3

Name Affiliation Contact Address Contact Numbers Signature/Date

|
Page 2
Project Registration Form-Final Year Project-2021
RP-02

ACCEPTANCE BY CDAP MEMBER (This part will be filled by the RP team)

Name Signature Date

|
Page 3
Project Registration Form-Final Year Project-2021
RP-02

PROJECT DETAILS

Brief Description of your Research Problem: (extract from the topic assessment form)

1) Due to the prevailing pandemic situation (COVID-19), students and professional developers must
continue their work via online platforms. Therefore, Artifact Consistency is a considerable big
problem in the software development industry and higher education institutions.[1] Nowadays
many software developers continue the software creation as an individual without working as a
team. Not only developers it highly affects the academic student when creating module-based
software projects. Therefore, after completing the final product we can see many inconsistencies
are present compared to the initial requirements. (E.g.- design of user interface in terms of
interactions, design on implementation, conventions, and coding style, look and feel of a
graphical user interface).

2) SDLC (Software Development Life Cycle) best practices are the most important for the modern
software development process. Because (SDLC) is a framework that helps to define tasks and
work phases that are used by both software developers and academic students to plan, design,
build, test, and deliver software product. But nowadays most software developers must run more
than one project simultaneously. Therefore, they are not considering the SDLC best practices
much. And academic students also only focus on the completion of software projects and gain
higher grades without following SDLC best practices. As a result of this, it might result in lack of
SDLC best practices and methodologies. [2][3]

3) Everyone involved in software development has probably at some point been confronted with a
deadline they have to hit, both in software companies and IT-related projects at the University.
Therefore, most of the time developers or academic students focus to complete the task for the
deadline given to them without considering the user requirement satisfaction and quality user
interfaces. As a result of this Most of the time, the final product does not meet user requirements
and HCI (Human-Computer Interaction) design principles.[3] [4]

4) When working as a team on an online platform, communication barriers (E.g.- Constant

Distractions, Difficulty with Self-motivation, and Task Prioritization, etc.,) are the major problems.
From that, it might lead to significant human errors. Therefore, company supervisors or academic
instructors must give maximum guidance from beginning to end, thereby increasing supervision
workload.

[1] Reiss, Steven. (2006). Incremental Maintenance of Software Artifacts. Software Engineering, IEEE
Transactions on. 32. 682-697. 10.1109/TSE.2006.91.

[2] Kramer, Mitch. (2018). Best Practices in Systems Development Lifecycle: An Analyses Based on the
Waterfall Model. 9. 77-84.

|
Page 4
Project Registration Form-Final Year Project-2021
RP-02

[3] R. A. Majid, N. L. M. Noor, W. A. W. Adnan and S. Mansor, "A survey on user involvement in software
Development Life Cycle from practitioner's perspectives," 5th International Conference on Computer
Sciences and Convergence Information Technology, Seoul, 2010, pp. 240-243, doi:
10.1109/ICCIT.2010.5711064.

[4] Barrera León, Luisa & Ramos, Angela & Flórez-Valencia, Leonardo & Pavlich-Mariscal, Jaime & Mejia-
Molina, N.A. (2014). Integrating adaptation and HCI concepts to support usability in user interfaces: A
rule-based approach. WEBIST 2014 - Proceedings of the 10th International Conference on Web
Information Systems and Technologies. 2. 82-90.

Description of the Solution: (extract from the topic assessment form)

There will be two types of stakeholders of this system.

 For industry projects - Software Developers, Project Managers, and Clients
 For academic projects - Students, and Supervisors

For the purpose of this CDAP project, we have chosen the “Mini Design Project” from the Y3-S2
module IT3060 (Human-Computer Interaction) at SLIIT. Throughout this project, we had to follow the
SDLC process. To continue this project, we had to identify the requirements of existing software or new
software that has significantly failed to achieve some or all their objectives, either temporarily or
permanently, and/or have less accessibility for the user interfaces, etc. This project requires to create
web applications with the HCI design process. As an HCI design process, we had to consider either UCD
(User-Centered Design) or the PD (Participatory Design) process. Under the requirement gathering
phase, we were able to gather the requirements from stakeholders and suggested the new system design
by combining both stakeholder requirements and existing project requirements. After that, we followed
hand-drawn wireframes, paper prototyping, User Interface generation, and final implementation to
realize the suggested system design. Therefore, for the scope and proof of concept of this CDAP project,
we will be using the above as a case study.
Main Components of the system:

 Generate UML diagrams (Activity Diagram, Sequence Diagram, Use Case Diagram, Class Diagram)
from the human narrated scenario.
 Obtain generated UML diagrams and converted them into low-fidelity prototypes.( Wireframe)
 Obtain generated low-fidelity prototype (wireframe) and converted them into direct web
interfaces.
 Finally, check whether proper HCI principles have been applied in the final product.

We propose a system called "The Alter" to reduce inconsistency of the software product by keeping
best practices of the SDLC and check the final product has met HCI (Human-Computer Interaction)
principles with minimum supervisor guidance under the COVID 19 situation. Consequently, for academic
students and software developers (both trainee and employee) who are unable to attend to their
workplace or university work as a team, therefore our solution fundamentally satisfies HCI based SDLC
semi-automated system. Because this system facilitates the editable mode with human involvement
which is for study and customizes to generate intermediate output (E.g., Generated UML, wireframes,
paper prototypes, web UI, GUI test cases, HCI principles, etc.) at every stage of the SDLC process. And the
important thing is every input depends on previous output at every phase of the SDLC process. Therefore,

|
Page 5
Project Registration Form-Final Year Project-2021
RP-02

the user must continue related activities through the SDLC stages with the correct understanding and
minimum supervisor guidance.

At the first stage of the SDLC process, use the video conferencing technique to gather the
requirements via the online platform, and meanwhile, the software developers or academic students
should narrow down the list of requirements. And convert that initial requirement into the standard
document manually (E.g., SRS, BRD, etc.). From that system automatically generate UML diagrams
(Activity Diagram, Sequence Diagram, Use Case Diagram, Class Diagram) by using requirement document
and the system facilitates editable mode to customize generated UML diagrams easily.

In the second step obtain UML diagrams (Activity Diagram, Use Case Diagram, Class Diagram &
Sequence Diagram) and convert them into low fidelity prototypes (wireframes) and here also there is an
editable mode so that the developer can change measurements and generated UI components (E.g.,
Buttons, checkbox, slide show, images, etc.). And the user can take a photo by detecting measurements
and the name of the components. (E.g., Using image processing techniques) and save it within the app
itself. Through that other team members will be able to refer to these generated photos and get an idea
about the measurements and UI components when continuing the paper prototyping part by reducing
inconsistencies of the papers prototyping.

The third stage converts low fidelity prototype (wireframe) into functioning web user interfaces.
This phase should be creative because according to the generated low fidelity prototype user tries to
automate web UI with related code patterns. If code is generated automatically there is the technique to
minimize inconsistency of created web UI. Furthermore, there is also an editable mode to customize
generated code according to the given user requirements or changing requirements.

As the final stage, obtained scenario, UML, and generated web UI are tested for the usage of HCI
principles. As a first step user check the applicability of HCI principles for finalizing the product with the
percentage to indicate how far this product follows HCI principles (E.g., Using a Rule-Based Algorithm).
For that users can use an HCI expert rule-based system with maximum coverage of HCI rules to verify
design best practices of developers or academic students. After that, it generates a simple description to
inform which principles should apply and which principles are missing from the product furthermore. And
user can add new conditions/rules in the future if need. After that as an optional step according to the
generated web UI, the system generates GUI test cases automatically. And the system also facilitates
editable mode to edit test cases for future modifications. After that by using generated test cases, the
user can continue the GUI test execution by using Katalon studio under the Web UI testing.

Provided resources, generated source code, generated intermediate data, and other meta-data
will be maintained throughout the entire lifecycle within the app itself, so users do not have to use
arbitrary storage mechanisms to store, share and collaborate with the data.

Page 6|
Project Registration Form-Final Year Project-2021
RP-02

Main expected outcomes of the project: (extract from the topic assessment form)

Main Objective - This research ensures artefact consistency across entire software development lifecycle
while adhering to design best principles and design processes of human computer interaction. Online
design process is aligning yourself with newer approaches. Whenever needed, users can gain knowledge
on how to develop end-to-end software based on initial user-requirements.

Sub Objective 1: Ensures artifact consistency between requirement specification and UML by natural
language. UML diagrams generated according to the requirement will give a better understand for the
user. It is easy for the user to have a flow of the requirement.

Sub Objective 2: This ensures the artefact consistency between UML diagrams and low fidelity prototype
(wireframe) by UML diagrams generated in the previous step. As the next step paper prototypes can be
also included to the system by image recognition with machine learning.

Sub Objective 3: This system ensures the artefact consistency between low fidelity Prototype
(wireframe) and user interfaces by low fidelity prototype (wireframe) generated previously. The
generated wireframe can be edit according to the developer or academic student’s needs. This system
will enhance the creative skills of the academic student and software developer.

Sub Objective 4: Ensures generated user interfaces comply with principles and best practices of HCI
design methodologies. Opportunities for students to engage with lesson related activities in the HCI
module. Therefore, the student will be attached to the module without any force.

WORKLOAD ALLOCATION (extract from the topic assessment form after correcting the
suggestions given by the topic assessment panel.)
(Please provide a brief description about the workload allocation)

MEMBER 1 ………………………………………………………………………………………………………………………………………………………
…

Obtain the requirements and generate UML diagrams based on that.

At the beginning of the process, user can gather list of requirements (functional, non-functional, system,
technical, etc.) from the various stakeholders (customers, users, vendors, IT, staff, etc.) by interviewing
that stakeholders using video conferencing. After that user should create a requirement specification
document manually using initial list of gathered requirements. Then the system automatically generates
the UML use case diagram, activity diagram, sequence diagram and class diagram. Requirement
specification document can be given in natural language. Natural language can be subject to Natural
Language processing techniques and identify certain features in specification document which can be
directly attributed to generating UML components. When generating the UML, it is not always like the
requirement, therefore we have given the chance to developers and academic students to customize the
generated UML diagrams according to their needs.
|
Page 7
Project Registration Form-Final Year Project-2021
RP-02

MEMBER 2 ………………………………………………………………………………………………………………………………………………………
…
Obtain the UML diagrams generated by member 1, generate wireframes based on the UML Diagrams.

As the second stage of the process, software developer or academic student must generate wireframe
based on UML diagrams generated by member 1. (Sequence Diagram, Use Case Diagram, Activity
Diagram & Class Diagrams). [1]

When generating the wireframe, it is not exactly the requirement, therefore we have given the chance to
developers and academic students to customize the generated wireframes according to their needs.
These are the options to generate wireframes from diagrams.

Option 1 – Get the diagrams generated by member 1 (Use Case, Sequence, Activity & Class Diagrams).
Then identify the keywords by analyzing all the diagrams using Natural Language Processing & generate
wireframe. [2]

Option 2 – Analyze the diagrams generated by member 1(Use Case, Sequence, Activity & Class
Diagrams), generate scenario based on the diagrams & generate wireframe. [3]

Option 3 - Develop a model (Extract features & create a model) & train a dataset for general diagrams
like payment, registration & login. When an anonymous diagram meets, the system will identify the
diagram and generate customize wireframe. [4]

As an optional step, paper prototypes can be also included to the system by image recognition using
machine learning. Combining both above in ensemble model results full accurate result.

[1] M. Kamalrudin and J. Grundy, "Generating essential user interface prototypes to validate
requirements," 2011 26th IEEE/ACM International Conference on Automated Software Engineering (ASE
2011), Lawrence, KS, 2011, pp. 564-567, doi: 10.1109/ASE.2011.6100126.

[2] K. Kolthoff, "Automatic Generation of Graphical User Interface Prototypes from Unrestricted Natural
Language Requirements," 2019 34th IEEE/ACM International Conference on Automated Software
Engineering (ASE), San Diego, CA, USA, 2019, pp. 1234-1237, doi: 10.1109/ASE.2019.00148.

[3] Y. Yang, X. Li, Z. Liu and W. Ke, "RM2PT: A Tool for Automated Prototype Generation from
Requirements Model," 2019 IEEE/ACM 41st International Conference on Software Engineering:
Companion Proceedings (ICSE-Companion), Montreal, QC, Canada, 2019, pp. 59-62, doi: 10.1109/ICSE-
Companion.2019.00038.

[4] Yang, Yilong & Li, Xiaoshan & Ke, Wei & Liu - 刘志明, Zhiming. (2019). Automated Prototype
Generation From Formal Requirements Model. IEEE Transactions on Reliability. PP. 1-25.
10.1109/TR.2019.2934348.

Page 8 |
Project Registration Form-Final Year Project-2021
RP-02

MEMBER 3 ………………………………………………………………………………………………………………………………………………………
…

Obtain the low fidelity prototypes based on the UML, and generate functioning web user interfaces using
HTML/CSS etc.

As the third stage of the process, Obtain the low fidelity prototypes from above wireframes and paper
prototypes and generate Web User Interfaces using OpenCV image processing technique. When
generating the Web User Interfaces it is not 100% like the wireframes or paper prototypes, therefor we
give chance to developers and academic students to customize the generated HTML/CSS code according
to their accurate colors, font sizes etc. When generating web interfaces next step is to develop
functioning web interfaces. When generate web interfaces through wireframes and that web interfaces
are non-functioning web interfaces therefor when generating interfaces system identify common words
from the sequence diagram generated by member 1 through Natural Language Processing Techniques.
As an example, when we identify “Log in” word from the sequence diagram system has common coding
for Log in function. So, System can identify the log in button of web interface and apply that coding to
that button. So that system has various coding for various common functions and system can give that
coding for generated web interface buttons. In the end we can generate functioning web interfaces for
the user.

|
Page 9
Project Registration Form-Final Year Project-2021
RP-02

MEMBER 4 ………………………………………………………………………………………………………………………………………………………
…
Obtain the scenario, UML, and generated web interfaces and test for the usage of HCI principles.

This is the final stage of this process and the software developers or academic students should obtain
scenario, UML, and generated web user interfaces and test HCI principles. Therefore, In this scope, the
user can check the applicability of the HCI principles of the final product using the Rule Base Algorithm.
According to the proposed system Rule Base Algorithm typically consists set of if-then rules that are
related to HCI principles to verify whether the developer or academic student follows the design best
practices when creating the software product(Ex;-Button sizes, Font size, color, etc.). In this section as
technologies, we can use the rule-based algorithm to generate an HCI rule-based expert system by
introducing a new algorithm with maximum coverage of HCI rules which are derived from HCI
frameworks like; TUKUCHIY framework [1], UFuRT (User, Function, Representation, and Task analysis)
framework [2], HOT-fit (Human, Organization, Technology-fit) framework [3], etc, Usability metrics, and
HCI laws like; Miller’s Law of Short Term Memory Load [4], Fitts’ Law [5], Hick-Hyman Law [6], Pareto
and Zipf Laws [7], Accot-Zhai law, etc. Also, the user will be able to extend the system with new
conditions/rules in the future. Therefore, the system will check finalized software project is applicable
with HCI principles and concept to verify how well it fits diverse user groups such as different genders,
ages, cultures, etc. As an optional step, automatic GUI test case generation the next step. For that, as
technologies hope to use a combination of techniques and concepts derived from model-based testing
(Ex;- IFML[8], UML Class Diagrams, and Sequence Diagrams) to extract UI elements from HTML code to
generate GUI test cases automatically and finally do simple GUI test execution using Katalon studio to
identify GUI errors.

[1].Barrera León, Luisa & Ramos, Angela & Flórez-Valencia, Leonardo & Pavlich-Mariscal,
Jaime & Mejia- Molina, N.A.. (2014). Integrating adaptation and HCI concepts to support usability in
user interfaces: A rule-based approach. WEBIST 2014 - Proceedings of the 10th International Conference
on Web Information Systems and Technologies. 2. 82-90. 

[2].Zhang, Jiajie & Butler, Keith. (2007). UFuRT: A work-centered framework and process for design
andevaluation of information systems. 

[3].Erlirianto, Lourent & Ali, Noor & Herdiyanti, Anisah. (2015). The Implementation of the
Human, Organization, and Technology–Fit (HOT–Fit) Framework to Evaluate the Electronic Medical
Record (EMR)System in a Hospital. Procedia Computer Science. 72. 580-587.
10.1016/j.procs.2015.12.166.

[4].O’Mahony, Kieran. (2020). Miller’s (Adjusted) Law. 10.4324/9781003106159-11. 

[5].Mackenzie, I.S.. (2017). Fitts' Law. 10.1002/9781118976005.ch17. 

|
Page 10
Project Registration Form-Final Year Project-2021
RP-02

[6].Wu, Tingting & Dufford, Alexander & Egan, Laura & Mackie, Melissa-Ann & Chen,
Cong & Yuan,Changhe & Chen, Chao & Li, Xiaobo & Liu, Xun & Hof, Patrick
& Fan, Jin. (2017). Hick-Hyman Law isMediated by the Cognitive Control Network in the Brain.
Cerebral cortex (New York, N.Y. : 1991). 28. 1-16. 10.1093/cercor/bhx127. 

[7]. Newman, Mark. (2004). Power Laws, Pareto Distributions and Zipf's Law. Contemporary Physics
-CONTEMP PHYS. 46. 10.1080/00107510500052444.

[8]. ao, Rong & Liu, Xiaoyan. (2020). IFML-Based Web Application Modeling. Procedia Computer
Science.166. 129-133. 10.1016/j.procs.2020.02.034.

DECLARATION (Students should add the Digital Signature)

“We declare that the project would involve material prepared by the Group members
and that it would not fully or partially incorporate any material prepared by other
persons for a fee or free of charge or that it would include material previously
submitted by a candidate for a Degree or Diploma in any other University or Institute of
Higher Learning and that, to the best of our knowledge and belief, it would not
incorporate any material previously published or written by another person in relation
to another project except with prior written approval from the supervisor and/or the
coordinator of such project and that such unauthorized reproductions will construe
offences punishable under the SLIIT Regulations.

We are aware, that if we are found guilty for the above-mentioned offences or any
project related plagiarism, the SLIIT has right to suspend the project at any time and or
to suspend us from the examination and or from the Institution for minimum period of
one year”.

STUDENT NAME STUDENT NO. Signature

1  Godage A.G.S.N. IT18115376

2 Nissanka N.M.D.S.S. IT18120530

|
Page 11
Project Registration Form-Final Year Project-2021
RP-02

IT18114904
3 Kalindu S

IT18062502
4 Uduwana P.N.

|
Page 12