**Designing Fish Optic Mobile Application for Fish Disease Identification**
**Romiza Md Nor1, Muhammad Amin Abdullah2, Nurul Syafiqah Aminuddin,3 Nur Shahidatul Shaurah Sharifunizam4, Aliaa Zafirah Zainal5, Huzaifah A Hamid6**
*1,2,3,4,5Faculty of Computer and Mathematical Sciences, Universiti Teknologi MARA, Cawangan Perlis, Malaysia*
*6Akademi Pusat Bahasa, Universiti Teknologi MARA, Cawangan Perlis, Malaysia*
[1romiza@uitm.edu.my](mailto:1romiza@uitm.edu.my)
Received Date: \*date
Accepted Date: \*date
Published Date: \*date
**HIGHLIGHTS**
- Fish Optic is a mobile application designed for understanding eye anatomy of the fish, recognizing symptoms of the fish disease, and scanning the eyes of the fish to determine the freshness
- This project also uses Human-Centred System Development Life Cycle as the methodology, and every phase of the project had been explained thoroughly in each section
ABSTRACT
*The signs and symptoms of fish disease can be traced by checking on the eye surface which is the cornea of fisheye. The Fish Optic mobile application aims to help students study the fisheye anatomy and to trace the symptoms of diseases on fish. The Fish Optic user mobile application uses Human-Centered System Development Life Cycle (HCSDLC) which consists of four phases which are project selection and planning, analysis, design and implementation. As HCSDLC emphasizes on user involvement throughout all phases, an interview was conducted, and a post task walkthrough was performed. User Acceptance Test formative evaluation was then conducted by distributing questionnaire. Some recommendations are also discussed for future works to improve and refine the design of the Fish Optic mobile application to enhance user experience. It can be concluded that using HCSDLC method throughout the design of Fish Optic mobile application contributes to a well-defined systems requirement to support user needs and to accommodate the lack of human understanding that frustrates users in their daily routines*
Keywords: Fish optic, user involvement, Human-Centered System Development Life Cycle
# INTRODUCTION
Fish play a major role in human’s life and are considered as one of the most significant ties in the food chain (Valentin, 2016). Determining the freshness of a fish greatly contributes to its quality (Zhang et al., 2005). One way to determine its freshness is to understand the fisheye anatomy, as signs and symptoms of fish disease can be traced by checking on the surface of the fisheye. The symptoms will be shown on the clear front surface of the fisheye which is the cornea. If the fish have a disease such as cataract, the cornea of the fisheye will become cloudy. The early detection can prevent fish mortality as well as increase production. To identify disease fish with necked eye are not error free (Chakravorty, 2020).
Therefore, the aim of Fish Optic mobile application is to assist user such as students or even consumers during the process of selecting and buying fish. Furthermore, the design of the mobile application will also educate people on the disease symptoms that can be detected by scanning the fisheyes.
Currently, traditional method is used in detecting the fish freshness, however this method comes with various limitations, and one of them is time consuming which can delay the process of determining the quality of fish (Chebet, 2010; Olafsdottir, 1997). As stated by (Nguyen et al., 2022), the awareness of human roles in Industry 4.0 is increasing. This evidenced by active work in developing methods, exploring influencing factors, and proving the effectiveness of design oriented to humans. As a result, the limitation of human involvement can be overcome through the Fish Optic user interface design by using Human-Centered System Development Life Cycle.
# LITERATURE REVIEW
## Fish Optic
Fish forgery is currently a challenge to many people. The limited number of applications that can help people to know more about fish freshness and the lack of knowledge in differentiating diseased fish from fresh ones, are causing people to become victims of fraud by sellers in the fish market. Hence, application development is needed to solve this problem and to assist people in their daily life activities. Therefore, the main objective of this research is to develop a mobile application that can help consumers to determine the freshness of fish and detect disease from the eye anatomy. Fish Optic is a mobile application that enables user to take pictures of fisheye and submit them to a processing system that implements image comparison feature to analyze the obtained images and to perform classification predefined fish freshness and disease (Rossi, 2016; ElBatsh, 2020). In short, Fish Optic is a design meant for high fidelity prototype mobile application to determine the freshness of fish. It also can detect symptoms of fish disease through the use of fisheyes scanning. It is also hoped that this application can aid marine students in studying the anatomy of fisheyes, determining the freshness of the fish and identifying the disease symptoms of the fish.
## Human-Centered System Development Life Cycle (HCSDLC)
In order to develop the Fish Optic mobile application prototype, the Human-Centered System Development Life Cycle (HCSDLC) was selected. To accommodate the human-centered approach in System Development Life Cycle (SDLC), the new SDLC called Human-Centered System Development Life Cycle (HCSDLC) is required to support user experience and consideration in the development. HCSDLC consists of four phases which are project selection and planning, analysis, design and implementation. This approach is needed to ensure the success of the system development through the collaboration with SDLC and HCI. Further investigation further investigation of user involvement and its significance in the Fish Optic mobile application prototype development is also recommended.
## Related Work
Currently, the design of Fish Optic mobile application is inspired by My Eye Anatomy mobile application (Visual 3D Science, 2020) that allow users to click any part of the human eye and 3D image displayed with information. Other related projects are FishApp (Rossi, 2016) that can detect fish falsification through image processing and machine learning techniques as well as WikiFish (ElBatsh, 2020). which is a fish recognition mobile application developed as part of the model for fish market management system.
# METHODOLOGY
This project is using HCSDLC approach to ensure the system development is a success with the collaboration of SDLC and HCI. Human-Centered System Development Life Cycle (HCSDLC) phases consists of four phases which are project selection and planning, analysis, design and implementation which is shown in Figure 1.
**Figure 1**: Human-Centred System Development Life Cycle Phases (HCSDLC)
## Project selection and planning
The first phase in HCSDLC is project selection and planning. In this phase, all information gathered are analyzed and arranged. Besides feasibility study method, interview was also conducted to determine the worthiness of developing the project. The aim of the interview is to gather the information and the user experience to be included as part of the requirement needed in the application. The interview was conducted on an undergraduate student majoring in Marine Studies. Table 1 shows findings from some of the questions asked during the interview session. The interviewee was asked about the course related to fish, and the problem in identifying fish anatomy and condition of fish only by examining the eyes of the fish.
> **Table 1**: Interview
| Question | Answer |
| -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 1\. Did you have any problem to identify about the anatomy of the fish? | Yes, sometimes when we did not have anything to refer. |
| 2\. During the lab work, did you face any problem when you study about the fish? | Yes, as the fish had some part that difficult to remember. |
| 3\. What can you identify from the eyes of the alive fish? | The features of the eye like surface, eyeball. By observing the features, we can interpret the characteristic of the eye like, it sunken, bulging, bloody and other. |
| 4\. What can we identify based on the eyes of the alive fish? | The health condition of fish, freshness of fish (after caught), and days after caught |
The data gathered during the interview session were used to identify the requirement and problems. All the feedbacks received were taken into consideration during the development of the Fish Optic Application.
## Analysis Phase
The second phase is analysis. The analysis phase involves determining the system requirements, structuring requirements according to their interrelationships and generating and selecting design alternatives. This phase also requires user needs tests on the system requirements which was in a form of demonstrated video of prototypes. The evaluation was performed using User Acceptance Testing (UAT) (results are discussed in Findings and Analysis Section). In UAT, three sections were presented to the respondents which are intention to use, perceive usefulness and perceived ease of use. The questions aim to find out whether the mobile application meet users’ requirements. This application can be divided into three sections which are the 3D eyes of fish with details, the scanning to identify freshness and disease and the information on symptoms. The concept is recorded and forwarded to the design phase.
## Design Phase
The third phase for HCSDLC is design. In this phase, the user interface is specified, sketched, developed and tested, based on the result of the analysis. The goals are to support the identified issues during context, task, and user analyses, and to meet the HCI evaluation metrics requirements. HCI analysis results include metaphors, media, dialogue design and presentation designs. In this project, metaphor is inspired by the actual activity process to enable user to understand the entire system. media design is also concerned with selecting appropriate media types to meet the specific information presentation needs and human experience needs (sketch shown in Figure 2). The media design was applied by choosing the right font type and size and designing theme colour based on the logo for Fish Optic mobile application. Dialogue design focuses on how information is provided to users and how it is captured from users during a specific task. Various existing interaction styles were used such as menus, forms and direct manipulation which are suitable for mobile application interface. Presentation design concerns the decisions on information architecture. Therefore, the design of this mobile application is based on the design of mobile application principles (So, 2017). The final element is formative evaluation that is done in post task walkthrough (results shown in Table 2) to improve the design in implementation phase which contributes to design iterations and refinements.
**Figure 2**: Sketch of Fish Optic
- ## Post-task Walkthrough
Post-task walkthrough is a form of transcript that is replayed to participant for comment. It enables user to react on an action after the event. Post-task walkthroughs is also used to meet intention such as reasons for actions performed and alternatives being considered. It is also necessary in situations where think aloud is not possible. The advantages of post-task walkthroughs are analysts will have more time to focus on relevant incidents and it can prevent excessive interruption of task.
To ensure that the Fish Optic mobile application meets user satisfaction, user involvement and testing requirements were conducted. This post-task walkthrough was conducted by three users. Table 2 summarizes the evaluation conducted. It also shows the user reviews for improvement of the Fish Optic application.
> **Table 2**: Post-task walkthrough
| | Task 1 | Task 2 | Task 3 |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| | To identify and study the fish eyes part at the 3D anatomy. | To detect the freshness of the fish. | To detect and view the fish symptoms. |
| User 1 | User skip to zoom in, zoom out or rotate the images and did not click any parts of eyes anatomy. | User pass and understand the task. | User pass and understand the task. |
| User 2 | User pass and understand the task. | User did not click the scan button after place the camera on the fish eyes. | User pass and understand the task. |
| User 3 | User pass and understand the task but user gives a feedback that is no home or back button. | User pass and understand the task. | User pass and understand the task but user have confused the function of button that can be swipe and click. |
| Number Of Task Success | 2/3 | 2/3 | 3/3 |
| Improvement | Add the magnifying glass and add the pop up that images can be click, zoom in or rotate. Give the clear instruction that this apps do not have button home but the main menu will always appear at every interface. | Give the instruction that user need to click scan button after places the camera on the fish eyes. | Add the icons, so that user will know that button is clickble and can be swipe. |
Data collected from post-task walkthrough were applied to improve the prototype version of Fish Optic application. The results are very useful in identifying the reasons and justification for design rationale based on user feedback.
## Implementation Phase
Lastly, the final phase of HCSDLC is implementation where the prototypes were developed. This implementation phase determines whether the application meets user requirements and preferences or not. The improvement and refinement were made based on the result of formative evaluation which is UAT (as described below) to enhance user experience. Figure 3, Figure 4, and Figure 5 demonstrate the main features of a Fish Optic mobile application user interface. The Fish Optic focuses only on fish freshness, eyes anatomy of fish and knowledge on symptoms if any fish disease occurs.
|  |  |  |
| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
| **Figure 3**: Eye anatomy | **Figure 4**: Eye Reader | **Figure 5**: Symptoms |
**FINDINGS AND DISCUSSIONS**
In this phase, the functionality of the prototype application requirement was ensured. In recognizing the fish disease, the prototype of the application and scanner eyes that contain information on fish freshness were created and tested. User acceptance test evaluation was conducted in this phase to ensure the application is free of errors (Valentin, 2016). 21 participants were involved during the evaluation. The prototype was tested, and a set of questionnaires was distributed. The questionnaires were divided into three sections which are intention to use, perceived usefulness and perceived ease of use. The results are shown in Table 3, Table 4 and Table 5 below.
In the first section, the respondents were asked on users’ intention to perform a specified behaviour. most of the respondents agreed to use the application. The next section is perceived usefulness which refers to the degree to which a person believes that using a particular system would enhance his or her job performance. Most participants agree that the prototype can improve their understanding and knowledge in determining the freshness of fish and identifying fish disease. Perceived ease of use is the final section in User Acceptance Testing. Perceived ease of use refers to the degree to which a person believes that using a particular system would be free from effort.
> **Table 3**: Intention of Use
| Intention of Use | | | | |
| ------------------------------------------------------------------------- | -------------- | ----- | ------- | -------- |
| Once I have access to the Fish Optic application, I will intent to use it | Strongly Agree | Agree | Neutral | Disagree |
| | 19% | 57.1% | 19% | 4.8% |
> **Table 4**: Perceived Ease of Use
| Perceived Ease of Use | | | | |
| --------------------------------------------------------------- | -------------- | ----- | ------- | -------- |
| My interaction with the application is clear and understandable | Strongly Agree | Agree | Neutral | Disagree |
| | 19% | 57.1% | 23.8% | 0% |
> **Table 5**: Perceived Usefulness
| Perceived Usefulness | | | | |
| ----------------------------------------------------------------------------------------------------- | -------------- | ----- | ------- | -------- |
| I find that the Fish Optic application process at the speed that I can easily access without delaying | Strongly Agree | Agree | Neutral | Disagree |
| | 19% | 71.4% | 9.5% | 0% |
**CONCLUSION AND RECOMMENDATIONS**
This paper discussed on Fish Optic, a mobile application designed for understanding eye anatomy of the fish, recognizing symptoms of the fish disease, and scanning the eyes of the fish to determine the freshness. This mobile application aids in assisting consumers in identifying fresh fish during the buying process and for students who study Marine Technology. This project also uses Human-Centred System Development Life Cycle as the methodology, and every phase of the project had been explained thoroughly in each section. Some recommendations were also provided by the participants. It is recommended that the scanner should work even in low light and that the level of freshness should be displayed based on the scanning. Apart from that, it is also recommended that the eye reader should be able to identify symptoms of disease on various fish in the same frame not only on a single fish. Overall, it can be concluded that using HCSDLC method throughout the design of Fish Optic mobile application contributes to a well-defined systems requirement to support user needs and to accommodate the lack of human understanding that frustrates users in their daily routines. In the future, it is hoped that the results in the evaluation process would pave the way for more successful mobile application development and better human experiences.
**REFERENCES**
Chakravorty, H. (2020). To detection of fish disease using augmented reality and image processing. *Advances in Image and Video Processing, Volume8*, (1), 1-4.
Chebet, L. (2010). “Rapid” (alternative) methods for evaluation of fish freshness and quality
ElBatsh, K. (2020). Developing Fish Recognition Mobile Application “WiKiFish” Part of the proposed Model for Fish Market Management System (SAMAKA).
Liliana Blondina Athanasopoulos, E. M. (2018). Studies on The Use of New Methods in View of The Early Diagnosis of Fish Diseases. *Research Journal of Agricultural Science*
Olafsdottir, G., Martinsdóttir, E., Oehlenschläger, J., Dalgaard, P., Jensen, B., Undeland, I. & Nilsen, H. (1997). Methods to evaluate fish freshness in research and industry. *Trends in food science & technology*, *8*(8), 258-265.
Nguyen Ngoc, H., Lasa, G., & Iriarte, I. (2022). Human-centred design in industry 4.0: case study review and opportunities for future research. *Journal of Intelligent Manufacturing*, *33*(1), 35-76.
Rossi, F., Benso, A., Di Carlo, S., Politano, G., Savino, A., & Acutis, P. L. (2016, May). FishAPP: A mobile App to detect fish falsification through image processing and machine learning techniques. In *2016 IEEE international conference on automation, quality and testing, robotics (AQTR)* (pp. 1-6). IEEE.
So, Y. (2017). Designing for mobile apps: Overall principles, common patterns, and interface guidelines.
Valentin Lyubchenko, R. M. (2016). Digital Image Processing Techniques for Detection and Diagnosis of Fish Diseases. *International Journal of Advanced Research in Computer Science and Software Engineering*
Visual 3D Science. (2020). My Eye Anatomy. Retrieved from
Zhang, P., Carey, J., Te'eni, D., & Tremaine, M. (2005). Integrating human computer interaction development into the systems development life cycle: A methodology. *Communications of the Association for Information Systems*, *15*(1), 29.