Graphical User Interface (GUI) is an interface on a computer that uses graphical menus to make it easier for users to interact with computers in a simple way. The GUI is the primary user interface to interact with the computing system. GUIs utilize our perceptual and motor skills to fulfill fundamental interactions with computer programs, such as exploration and invoking commands, parameter selection, information retrieval, and multitasking Nowadays, the use of GUI is becoming more and more dominant and is considered increasingly important in the system creation process. GUI helps to communicate the user’s needs clearly and effectively. However, developing GUI often takes a significant time in many software projects. On the other hand, the manual process of creating GUIs is expensive. So, automating this process is highly desirable.
The documentation strategy that facilitates developers to determine the functionality or users need is use case and user story modeling. Use cases are useful for describing the functionality of each actor in the system. The use case specification is an additional document attached to the use case diagram. The Use Case specification, also known as the UC Scenario, is a textual explanation of a set of interaction scenarios for a system. Each scenario describes the actions/steps the actor takes when interacting with the system, whether it succeeds or fails. Use case specifications consist of several descriptions of parts, namely system, features, actors, initial conditions, final conditions, normal scenarios, alternative scenarios, and exception scenarios. A detailed explanation of the interactions between actors and systems related to a particular use case is detailed in a use case (UC) scenario. Therefore, use case specification is the appropriate source for the automatically generated GUI.
Several studies have been conducted to automatically generate GUI from different artifacts. However various results and problems were obtained. There was a need for a system that could generate GUI from the appropriate artifact, thus producing the right GUI with high accuracy. Moreover, no research discusses generating GUI from use case specification.
This research utilizes use case specifications for creating Salt PlantUML GUIs. This study applied the Scrum method for constructing the system with the help of Django Framework, as well as Python and JavaScript as programming languages. Product Backlog was then used as a to-do list and documentation. After generating a product backlog, assigning a sprint workload and sprint was then conducted. A daily meeting was also conducted to discuss the progress, obstacles, and evaluate the software process. This method is derived from similar research that successfully generate user story from business process model and notation.
The rules for converting Use Case Specification to GUIs are the use case specification’s scenario. Each scenario’s sentences will then be separated word by word and put into an array. Every word then will be checked for characters such as “{}”, “#”, and “>”. The character “{}” means that the word or sentence inside it is an element. On the other hand, the character “#” means that the word after it is the element’s ID. Lastly, the character “>” means that the word after it is the element’s value. The system won’t convert a use case specification scenario that doesn’t have the character “{}” in its sentence, so the system won’t generate a GUI. Table 1 shows a login use case specification in the case of a product certification’s use case specification. The use case specification consists of several scenarios between the user and the system.
GUIs generated by the web application are then evaluated by comparing them with those created manually. The evaluation was carried out by two students who had completed the Information Systems Analysis and Design course and the information systems design internship. These two experts also directly contribute to the creation of the system. Evaluation starts by creating GUIs by analyzing the Use case specification, which is the input for the translation web application. Then, the Use case specification is translated automatically using a web application. The output will be compared and rated with the experts’ ones.
Compared to previous studies, this system can generate more GUI components correctly. The generated UI components in the research conducted by Anchiêta et al. were input fields, text, and buttons. This research identified 20 GUIs from 26 GUIs, 18 from 93 fields, and 29 from 86 buttons. A similar study was also conducted by Kolthoff. The system supports basic UI elements (such as buttons, text fields, sliders, etc.), layout and combined UI elements (such as logins, contact views, product descriptions, etc).
The high performance of the system is influenced by the formatted input data. In this study, we propose a unique syntax so that the system can recognize the UI components. In order for this system to convert, the sentence must be enclosed by the character “{}”. Then to identify the element id before the word must be preceded by the character “#”. As well as include the character “<” at the beginning of the word to identify the value of the element. If the UCS does not include these three characters, the resulting output will be empty. This is the limitation of this system, where developer should convert the use case specification based on our proposed syntax.
This study has successfully created a system that can generate use case specifications into GUI designs automatically. The system is built using salt and the scrum method with certain steps. Despite the differences between both artifacts, the system can generate GUI from use case specification accurately. The system has been evaluated by comparing the system generated and manually created GUIs. Resulting in 100% precision, 94% recall, and 96% F-measure. It turns out that this system has been successfully built, which means that this system can generate use case specifications to GUI design automatically.
Author: Badrus Zaman
Complete article can be accessed at: https://scholar.unair.ac.id/en/publications/ucs2gui-guis-generator-from-use-case-specification/
