SlideShare a Scribd company logo
Bulletin of Electrical Engineering and Informatics
Vol. 10, No. 4, August 2021, pp. 2273~2284
ISSN: 2302-9285, DOI: 10.11591/eei.v10i4.3108 2273
Journal homepage: http://beei.org
UI/UX integrated holistic monitoring of PAUD using the TCSD
method
Erly Krisnanik, Tri Rahayu
Departement of Computer Science, Universitas Pembangunan Nasional Veteran Jakarta, Indonesia
Article Info ABSTRACT
Article history:
Received Sep 8, 2020
Revised Mar 30, 2021
Accepted Jun 24, 2021
User interface (UI)/user experience (UX) is one part of the stages in the
development of the system to produce interactive and attractive web-based
application layouts so that it is easy to understand and use by users. In this
research, a case study was conducted on early childhood in PAUD Kuntum
Mekar. The design of the UI/UX model for holistic integrative PAUD
monitoring becomes one of the solutions to help parents and teachers. The
method used to design UI/UX is the task centered system design (TCSD)
approach starting from the stages; 1) identification scope of use, 2) user
centered requirement analysis, 3) design and scenario, and 4) walkthrough
evaluate, the method used for system testing is user satisfaction, and heuristic
usability. The purpose of this study is the UI/UX design with TCSD can
provide valid data needs of each actor based on the assignment and design of
the story board of the developed system. The results of this research are
UI/UX model design for integrative holistic PAUD monitoring application.
Keywords:
Evaluate
Scenario
Storyboard
TCSD
UI/UX
This is an open access article under the CC BY-SA license.
Corresponding Author:
Erly Krisnanik
Department of Computer Science
Universitas Pembangunan Nasional Veteran Jakarta
University Road, RS Fatmawati, Pondok Labu, West Jakarta 12450, Indonesia
Email: erlykrisnanik@upnvj.ac.id
1. INTRODUCTION
User Interface is an aggregate of the means by which system users interact with machines, devices,
computer programs, or other tools. UI provides the means: Input, allowing the user to control the system; and
Output, enabling the system to inform users. Blair-Early and Zender [1] meanwhile, user experience (UX) is
a person's perception and response to the use of a product, a system used, or service by providing an
assessment of how satisfied and comfortable using it is. Nikam et al. [2] the basic principle in designing a
UX is that users have the experience that users determine to have the experience to the level of satisfaction
based on satisfaction and comfort in interacting with products, systems, or service. If the UX features
are developing well but there are no end-users who are satisfied and comfortable, the value of UX will be
low [3],[4].
TCSD method is one of the methods used to design UI/UX in accordance with the task needs of
system users through useability testing, so the user interface design becomes better and optimal, and easy to
use. S. Greenberg [5]. TCSD is a process that can be describing as; 1) a concrete description in the form of
the real world, such as doing every task in everyday life [6], 2) Determine the users and assignment in the
system based on the descriptions of the users, 3) designing a prototype of an interface that meets system
requirements, 4) evaluate the interface by performing a task-centered walkthrough [7], [8].
The research object case study is PAUD Kuntum Mekar in the village of Baros Serang Banten. The
problem that exists in PAUD Kuntum Mekar is that the current education system requires communication
 ISSN: 2302-9285
Bulletin of Electr Eng & Inf, Vol. 10, No. 4, August 2021 : 2273 – 2284
2274
between parents and teachers so that it requires informative and easy-to-use media. Beside that, the
researchers designed a UI/UX model for the needs of a web-based integrative holistic PAUD monitoring
information system. This research uses the TCSD method, so the system design developed is followed by
user needs, easy to use, interactive, and informative. The purpose of this study was to provide up-to-date
information about activities at PAUD Kuntum Mekar is information on a balanced nutrition menu,
information on health care, information on child development, and immunization schedules. The scope of
this studied discusses UI/UX design based on user needs tasks through the stages in TCSD. The contribution
of this research is in the form of a integrative holistic UI/UX design to make it easier for every user involved
with the system starting from health monitoring management, PAUD data management, and PAUD
monitoring card management.
2. RESEARCH METHOD
The software development method in this research is to use the TCSD method because it makes it
easier for the author to group the work based on the duties and responsibilities of the user required by the
Integrative Holistic monitoring system for children of early childhood. The stages of the research method in
TCSD can be seen in Figure 1.
Figure 1. The stages of the research method using TCSD
The flow of the integrative holistic UI/UX design starts from the following stages are [9], [10]:
a. The preparation stage, at this stage the identification of problems from the Integrative holistic
monitoring system of children of early childhood is carried out. The problem-solving solution was
created, by determining the scope and objectives of the systems that fit the business process,
b. System user identification stage, at this stage a description of the system is carried out, identifying
system users, defining the scope of the system and describing the potential of the existing system,
c. The system user requirements analysis stage, at this stage, the component specifications for UI/UX are
prepared,
d. Design stage scenario system creation, at this stage the user interface design is carried out according to
user needs and compiles the story board of each UI,
e. The UI search evaluation stage, at this stage, determine who the system user is, assign system user, the
required UI and business process flow as well as UI improvements based on search results.
Bulletin of Electr Eng & Inf ISSN: 2302-9285 
UI/UX integrated holistic monitoring of PAUD using the TCSD method (Erly Krisnanik)
2275
Sampling testing was carried out on eight users of the system consisting of teachers, parents of
PAUD and health experts. The reason for only assigning eight users to be used as sampling is because the
scope of the project does not involve many users. Nielsen [11], [12] the method used for task testing uses a
Likert scale to assess positive attitudes with positive statements and negated attitudes through negative
statements. A. Joshi et al. [13], the equation of the calculation formula to determine the number of ideal
values obtained from the maximum value multiplied by the number of users can be seen in formula (1).
Ideal value=5 x Many Users (1)
To determine the index value based on the number of respondents' values divided by the total ideal
number of population multiplied by 100%, it can be shown in formula (2).
Index Value=(
total respondent score
ideal Number
) x 100% (2)
While the determination of the average calculation is obtained from the total number of respondents'
values divided by the total number of ideal values multiplied by 100%, it can be seen in formula (3).
Average=(
total number of respondents score
total ideal Number
) x 100% (3)
3. RESULTS AND ANALYSIS
The flow of activities for designing the UI/UX holistic integrative monitoring model for PAUD
using the TCSD method has 4 stages that must be followed, namely [14], [15]; 1) identification scope of use,
2) user centered requirements analysis, 3) design as scenario, and 4) walkthrough evaluate.
3.1. Identification scope of use
User identification focuses on the Kuntum Mekar school where researchers interview the
information needs of each user related to the system and plan the content requirements needed so that the
development of a holistic integrative monitoring system application is in accordance with existing business
processes. This stage also determines the tasks and users involved in running the application. Interviewing
about the tasks of each user involved in the purpose is to see the habits carried out by each user. After
identifying the user there are 3 users where each user has a different task. Details of the tasks required by
system users can be seen in Table 1.
Table 1. System users by task
User Task
PAUD
Teacher
The teacher of PAUD has the task and responsibility of making master data for PAUD children, list of
healthy menus for children of PAUD, monitoring the development of nutrition for children of PAUD,
immunization schedule, monitoring of immunization data for children of PAUD, making health care
schedules for children of PAUD, making monitoring of recording data on children's health development
PAUD and make a schedule of giving vitamins for children PAUD.
Parents PAUD parents can monitor the nutritional development of their children, monitor immunization schedules,
provide vitamins, health care, monitor the results of children's development and health
Health Expert Provide immunization vaccines, check the health of teeth, mouth and nails, provide vitamins and provide a
balanced nutritional menu.
3.2. User centered requirement analysis
Analysis of the needs of system users is carried out through data needs analysis based on direct
observation and interviews [16]-[18] with Kuntum Mekar's PAUD and the parents of the PAUD 's children.
The results of the needs analysis will be used as a reference for making system improvements. There are 3
analysis studies based on needs consisting of:
a. Analysis of information needs, the problem faced by Kuntum Mekar is that the PAUD teacher as the
admin has difficulty making monitoring reports on the activities they have done and PAUD 's parents
often lose information on activities carried out by their children while at school. Based on these
problems, it is necessary to build a UI/UX model design for a web-based application of a holistic
integrative monitoring system for young children so that all users can interact whenever and wherever
they are.
b. Analysis of data storage needs, the problem faced is that the data on young children is never updated
and is often lost, such as data on activity records for young children regarding immunization schedules,
 ISSN: 2302-9285
Bulletin of Electr Eng & Inf, Vol. 10, No. 4, August 2021 : 2273 – 2284
2276
healthy nutrition menu schedules, and health care schedules and poorly documented data on monitoring
the health of young children. such as; giving vitamins, examination of teeth, and nails.
c. Technology needs analysis, existing computer aids are still limited to the use of Microsoft office such as
word, excel and ppt which are used as media for making reports so that errors often occur in making
reports. Based on this, it is necessary to make a web-based PAUD children's health monitoring system
application using the application software used are PHP, MySQL, and Laravel Web server using
Xampp (Apache and phpMyAdmin).
3.3. Design as scenario
The system user activity process flow can be designed after the researcher identifies the integrative
holistic activities carried out by PAUD Kuntum Mekar can be seen in Figure 2. The depiction of the process
flow is divided into 3, namely:
a. The process flow of the PAUD teacher's activities as admin
In Figure 2 (a), you can see the flow of the system based on the activities of the PAUD teacher
where the PAUD teacher can manage the holistic integrated monitoring website by accessing the PAUD data
menu, the health monitoring schedule menu, the PAUD monitoring card menu, and the user menu as well as
making reports to the PAUD school principal.
b. Flow of user activity process as parent
The process flow of parents' activities in using the holistic integrative monitoring website application starts
from the registration menu to get a user account, the immunization schedule menu, the balanced nutrition schedule
menu, the health care menu, and the PAUD monitoring report card menu. On the health care menu, there is a
submenu of health checkup schedules and a menu of vitamin administration. Can be seen in Figure 2 (b).
c. Flow of user activity process as a health expert
Health experts have an important role in the development and growth of young children. Therefore
the holistic integrative monitoring application provides facilities for health experts to be able to access the
system through menus, namely; 1) updating immunization data, 2) updating health care data starting from
examining teeth, skin, and nails and updating vitamin data, and 3) updating the menu balanced nutrition.
Digram process flow can be seen in Figure 2 (c).
The relationship between system users can be seen in Figure 2 (d). Where the interaction between
teachers and parents depends on each other in monitoring the health development of young children.
Meanwhile, the involvement of experts is a source of data that will provide immunizations, health checks,
and the provision of a balanced nutrition menu for young children. This research has produced 9 main
scenarios of the activities of the actors involved, namely; 1) managing PAUD master data, 2) making a list of
healthy nutrition menus, 3) nutritional care, 4) immunization schedules, 5) health maintenance schedules, 6)
immunization schedule information, 7) information on development of PAUD, 8) recording of immunization
activities, and 9) recording of health care activities. Hardianto and Karmilasari [8], Silva et al. [19],
Escanillan et al. [20] Scenarios in system design are indispensable in making system applications so that
there is no mistake in coding programs and designing UI/UX according to the needs of system users.
3.3.1. Stroryboard design
The following is an example of making a storyboard for immunization content on a web-based,
holistic integrative monitoring application. Immunization scenarios based on the main tasks produced are five
task scenarios, namely; 1) the task of recording immunizations, 2) the task of recording immunization
schedules, 3) the task of viewing immunization schedule information, 4) the task of immunization activities,
and 5) the task of viewing reports on immunization activities. Admin users (PAUD teachers) can make data
changes for immunization activities, while parents can only view information on the schedule of
immunization activities. All storyboard designs can be seen in Figure 3.
After designing the conceptual model is complete, the next step for the researcher is to test the tasks
that are included in designing the system application to be converted into a test scenario. Previously,
researchers had obtained results from eight users who had been tested in a series of tests, then the users gave
each interaction a score based on the task that had been carried out. In Table 2, you can get the ideal
number=40 from the calculation of the number of tasks multiplied by the number of users according to
formula (1). The value in the amount column is obtained from the total value of potential users per task. The
test results based on the index value refer to the calculation formula (3). In the first task, there were 8 users
with the index value=(30/40)𝑥100%=79%. The calculation results for the second task up to the task five are
the same as the first task.
Bulletin of Electr Eng & Inf ISSN: 2302-9285 
UI/UX integrated holistic monitoring of PAUD using the TCSD method (Erly Krisnanik)
2277
(a)
(b)
Figure 2. The system user activity process flow, (a) flowchart diagram of the PAUD teacher (admin), (b)
parent diagram activity
 ISSN: 2302-9285
Bulletin of Electr Eng & Inf, Vol. 10, No. 4, August 2021 : 2273 – 2284
2278
(c)
(d)
Figure 2. The system user activity process flow, (c) activity diagram of a health expert, (d) the role of the
user in the system (continue)
Bulletin of Electr Eng & Inf ISSN: 2302-9285 
UI/UX integrated holistic monitoring of PAUD using the TCSD method (Erly Krisnanik)
2279
(a) (b)
(c) (d)
(e)
Figure 3. Stroryboard design; (a) the task of recording immunizations, (b) the task of recording immunization
schedules (c) the task of viewing immunization schedule, (d) the task of immunization activities, (e) the task
of reports
Table 2. Total ideal value
Task Number Candidat User Total Total Ideal Number Index Value
1 3 5 4 4 4 3 4 3 30 40 79%
2 3 5 4 5 4 4 4 4 33 40 83%
3 4 5 4 4 4 4 4 3 32 40 80%
4 3 3 4 5 4 4 4 4 31 40 78%
5 4 5 4 4 3 4 4 4 32 40 80%
Total 158 200
Average 79%
3.3.2. Mockup design
Based on the storyboard design, a UI/UX mockup design has been made that has been approved by
the system user. Hussain et al. [21] UI design uses the Marvel application tools that can be designed online.
The following UI/UX mockups can be seen starting from Figure 4 (a)-(e). Researchers did a UI redesign after
getting feedback from the user. This design is carried out in order to get optimal results and tailored to user
needs. The following is an image of the UI/UX design after improvements, see Figure 4. The researcher
continues the next testing phase to get the optimal value from the user. It can be seen in Table 3 that the
results of user satisfaction with the model design offered increased to 84.5% from the previous average value.
 ISSN: 2302-9285
Bulletin of Electr Eng & Inf, Vol. 10, No. 4, August 2021 : 2273 – 2284
2280
(a)
(b)
(c)
Figure 4. UI/UX model design for immunization content, (a) record immunization data, (b) record
immunization schedule, (c) record immunization activities
Bulletin of Electr Eng & Inf ISSN: 2302-9285 
UI/UX integrated holistic monitoring of PAUD using the TCSD method (Erly Krisnanik)
2281
(d)
(e)
Figure 4. UI/UX model design for immunization content, (d) information schedule, (e) immunization report
(continue)
Table 3 Iteration test Table 2
No. Task Total Total Ideal index value
1 34 40 85%
2 33 40 83%
3 34 40 85%
4 33 40 83%
5 35 40 87,5%
Total 169 200
Average 84,5%
3.4. Implementation UI/UX
3.4.1. Walkthrough evaluate
After designing the scenario design, a UI/UX model design will be generated for a web-based child
health monitoring information system in PAUD Kuntum Mekar, then a walkthrough evaluation will be
 ISSN: 2302-9285
Bulletin of Electr Eng & Inf, Vol. 10, No. 4, August 2021 : 2273 – 2284
2282
carried out. Hussain et al. [21] , Klotins [22] all the design results as a scenario at this stage will be coded into
the programming language using the hypertext prepocessor (PHP) script language and my structured query
language (MySQL) database. Furthermore, the design evaluation is carried out whether it is in accordance
with the needs of the task and the needs of the user [23]. All the design results as a scenario at this stage will
be coded into the programming language using the PHP scripting language and the MySQL database.
3.4.2. Usability heuristics
UI design testing uses usability heuristics to be able to observe user activities. Observation of user
activity is carried out directly where the user and the researcher are at the same location at one time. This is
done so that researchers get feedback from every activity undertaken by the user . Usability heuristic has 10
indicator variables that will be used as a tool to measure the UI that is designed. Nielsen [11], Filippi [24]
Farzandipour et al. [25] indicators that are used as variables in the heuristic test can be seen in Table 4.
Table 4. Heuristic usability indicators
No Variabel Usability Heuristic Description
1 X1 Visibility of System Status
2 X2 Compatibility between the System and the Real World
3 X3 User Control and Freedom
4 X4 Standards and Consistency
5 X5 Help Users to Identify, Diagnose and Solve Problems
6 X6 Error Prevention
7 X7 There is an introduction
8 X8 Flexibility and Efficiency
9 X9 Minimalist Design and Aesthetics
10 X10 Help and Documentation Features
After the task is made and tested, the overall assessment results of all integrated holistic monitoring
application modules can be seen in Table 5. Based on Table 5, the average value index of the test results is
91%, it is means the users are satisfied with the final achievement. These results also indicate that the user
has understood all the tasks used to design a web-based integrative holistic monitoring application system
[26]-[28].
Table 5. The results assessment of heuristic usability indicators
Variabel Usability Heuristic Description Total Ideal Value Index Value
X1 Visibility of System Status 120 125 96%
X2 Compatibility between the System and the Real World 135 150 90%
X3 User Control and Freedom 140 150 93%
X4 Standards and Consistency 110 125 88%
X5 Help Users to Identify, Diagnose and Solve Problems 145 150 97%
X6 Error Prevention 80 100 80%
X7 There is an introduction 70 75 93%
X8 Flexibility and Efficiency 90 100 90%
X9 Minimalist Design and Aesthetics 115 125 92%
X10 Help and Documentation Features 160 175 91%
Total 1165 1275
Avarage 91%
4. CONCLUSION
The conclusion of this study is that UI/UX design using the TCSD method for web-based
applications can run on an intranet network or the internet. The development of this system is for easy data
availability, easy data update management, user-friendly menus, and reporting. UI/UX design testing uses
satisfaction with test results of 84.5%. This proves that the preparation of the designed tasks has answered
user needs. The usability system test uses a usability heuristic by using ten indicators are used as
measurement variables. The test result was 91%. Based on these conclusions, this study suggests are the
development of mobile app-based applications can be continued so that parents can more easily monitor
every activity carried out by the PAUD school. Besides, applications can be developed integrated with
population data in Baros Serang District, Banten.
Bulletin of Electr Eng & Inf ISSN: 2302-9285 
UI/UX integrated holistic monitoring of PAUD using the TCSD method (Erly Krisnanik)
2283
ACKNOWLEDGEMENTS
Thank God, finally this paper was completed on time. We would like to thank to Universitas
Pembangunan Nasional Veteran Jakarta for providing research funding assistance and to the research team
who have been united in completing the research series. We would like to thank PAUD Kuntum Mekar for
being the object of our research.
REFERENCES
[1] A. Blair-Early and M. Zender, “User Interface Design Principles for Web Applications,” Aral Balk.-Confessions an
internet junkie, vol. 24, no. 1, pp. 85-108, 2008.
[2] M. Nikam, I. Gawali, V. Khollam, A. Lokhande, and J. Mante, “Online UI / UX Platform ( Crafter ),” Int. J. Sci.
Res. Comput. Sci. Eng. Inf. Techno, vol. 7, no. 3, pp. 483–486, 2021.
[3] H. S. JOO, “A Study on UI/UX and Understanding of Computer Major Students,” International journal of
advanced smart convergence, vol. 6, no. 4, pp. 26-32, 2017, doi: 10.7236/IJASC.2017.6.4.4.
[4] M. Indriana and M. L. Adzani, "UI/UX analysis & design for mobile e-commerce application prototype on
Gramedia.com," 2017 4th International Conference on New Media Studies (CONMEDIA), 2017, pp. 170-173, doi:
10.1109/CONMEDIA.2017.8266051.
[5] C. P. Putra, M. K. Sabrina, and S. Widowati, “Perancangan User Interface E-Commerce Neitzo Company
menggunakan Metode Task Centered System Design (TCSD),” e-Proceeding Engineering, vol. 2, no. 3, p. 7790,
2015.
[6] S. Greenberg, “Working Through Task-Centered System Design,” Diaper, D. Stanton, N. Handb. Task Anal.
Human-Computer Interact., Chapter, vol. 2, pp. 49-66, 2004.
[7] Y. Syahrul and D. H. Pertiwi, “Designing Mobile Based User Interface for Promotion of Lakeur Craft Art
Application at Balaputra Dewa State Museum,” Journal of Physics: Conference Series, IOP Publishing, vol. 1500,
no. 1, p. 012120, 2020.
[8] Z. I. Paramarini Hardianto and Karmilasari, “Analysis and Design of User Interface and User Experience (UI / UX)
E-Commerce Website PT Pentasada Andalan Kelola Using Task System Centered Design (TCSD) Method,”
Proceedings of 2019 4th International Conference on Informatics and Computing, ICIC 2019. 2019.
[9] R. Dermawi, H. Tolle, and I. Aknuranda, “Design and usability evaluation of communication board for deaf people
with user-centered design approach,” Int. J. Interact. Mob. Technol., vol. 12, no. 2, pp. 197–206, 2018, doi:
10.3991/ijim.v12i2.8100.
[10] M. Agarina, A. S. Karim, and S. Sutedi, “User-Centered Design Method in the Analysis of User Interface Design
of the Department of Informatics System’s Website,” The 5 th International Conference on Information
Technology and Bussiness, 2019, no. Icitb 2019, pp. 218–230.
[11] J. Nielsen, “Finding usability problems through heuristic evaluation,” Conference on Human Factors in Computing
Systems-Proceedings, pp. 373-380, June 1992, doi: 10.1145/142750.142834.
[12] J. Nielsen, “Why You Only Need to Test with 5 Users,” Jakob Nielsens Alertbox, vol. 19, pp. 1-4, September 2000.
[13] A. Joshi, M. Arora, L. Dai, K. Price, L. Vizer, and A. Sears, “Usability of a patient education and motivation tool
using heuristic evaluation,” J. Med. Internet Res., vol. 11, no. 4, p. e47 2009, doi: 10.2196/jmir.1244.
[14] S. R. Novensa and W. Munggana, “Analysis and Development of Interface Design on DKI Jakarta & Tangerang‘S
Qlue Application based on Don Norman’s 6 Design Principles,” International Journal of New Media Technology
(IJNMT), vol. 5, no. 1, pp. 1-7, 2018.
[15] D. Shirole, W. Mishra, D. Dhar, “User Centered System Design for Indian Small Scale Industries : Case Study on
Pottery Industry,” Ergonomics for Improved Productivity, pp. 353-364, 2021, doi: 10.1007/978-981-15-9054-2_40.
[16] R. M. Ratwani, R. J. Fairbanks, A. Z. Hettinger, and N. C. Benda, “Electronic health record usability: Analysis of
the user-centered design processes of eleven electronic health record vendors,” Journal of the American Medical
Informatics Association, vol. 22, no. 6, pp. 1179-1182, November 2015, doi: 10.1093/jamia/ocv050.
[17] B. Göransson, J. Gulliksen, and I. Boivie, “The usability design process - Integrating user-centered systems design
in the software development process,” Softw. Process Improv. Pract., vol. 8, no. 2, pp. 111–131, 2003, doi:
10.1002/spip.174.
[18] H. W. Alomari, V. Ramasamy, J. D. Kiper, and G. Potvin, “A User Interface (UI) and User eXperience (UX)
evaluation framework for cyberlearning environments in computer science and software engineering education,”
Heliyon, vol. 6, no. 5, p. e03917, May 2020, doi: 10.1016/j.heliyon.2020.e03917.
[19] T. S. da Silva, M. S. Silveira, C. De O. Melo, and L. C. Parzianello, “Understanding the UX designer’s role within
agile teams,” In International Conference of Design, User Experience, and Usability, Springer, Berlin, Heidelberg,
pp. 599-609, 2013, doi: 10.1007/978-3-642-39229-0_64.
[20] K. M. P. Escanillan-Galera and C. M. Vilela-Malabanan, “Evaluating on user experience and user interface
(UX/UI) of Enertrapp a mobile web energy monitoring system,” Procedia Comput. Sci., vol. 161, pp. 1225–1232,
2019, doi: https://doi.org/10.1016/j.procs.2019.11.236.
[21] J. Hussain et al., “Model-based adaptive user interface based on context and user experience evaluation,” Journal
on Multimodal User Interfaces, vol. 12, no. 1, pp. 1-16, 2018, doi: 10.1007/s12193-018-0258-2.
[22] E. Klotins, “Usability and user experience measurement model,” School of Computing Blekinge Institue of
technology, 2011.
[23] S. N. Harun, M. Y. Hamid, A. Talib, and Z. A. Rahim, “Usability evaluation’’: Criteria for quality architecture in-
use,” Procedia Engineering, vol. 20, pp. 135-146, 2011, doi: 10.1016/j.proeng.2011.11.148.
 ISSN: 2302-9285
Bulletin of Electr Eng & Inf, Vol. 10, No. 4, August 2021 : 2273 – 2284
2284
[24] S. Filippi, “PERSEL, a ready-to-use PERsonality-based user selection tool to maximize user experience redesign
effectiveness,” Multimodal Technologies and Interaction, vol. 4, no. 2, pp. 1-20, 2020, doi: 10.3390/mti4020013.
[25] M. Farzandipour, E. Nabovati, H. Tadayon, and M. S. Jabali, “Usability Evaluation of a Nursing Information
System by Applying Cognitive Walkthrough Method,” International Journal of Medical Informatics, vol. 152, p.
104459, April 2021, doi: 10.1016/j.ijmedinf.2021.104459.
[26] E. Kiliç Delice and Z. Güngör, “The usability analysis with heuristic evaluation and analytic hierarchy process,”
Int. J. Ind. Ergon., vol. 39, no. 6, pp. 934–939, 2009.
[27] M. Penha, W. Franklin, M. Correia, F. Ferreira, and C. Campos, “Heuristic Evaluation of Usability-a Case study
with the Learning Management Systems (LMS) of IFPE,” Int. J. Humanit. Soc. Sci., vol. 4, no. 6, pp. 295–303,
2014.
[28] S. Salve and G. Bhutkar, “Heuristic Evaluation of Online Documentation using Qualitative Indicators,” Int. J.
Comput. Appl., vol. 36, no. July 2014, p. 10, 2011. doi: 10.5120/4524-6146.
BIOGRAPHIES OF AUTHORS
Erly Krisnanik, was born in Jakarta on September 8, 1974. Undergraduate computer education
was taken at the Universitas Pembangunan Nasional Veteran Jakarta, in 1993 graduated in 1997.
Then continued study at the Masters Program in Management Information Systems at the same
university in 2006. Career development starting in 2004 was trusted to be the head of the
laboratory, then in 2006 i became the head of the Informatics Management diploma study
program. In 2014 i became the head of the Information Systems Department until now. In 2017-
2018, I received research grants from Direktorat Riset dan Pengabdian Masyarakat (DRPM)
Dikti the results of the research were published in journals and proceedings as well as
copyrights. The research work carried out is published in a Sinta 2 accredited national journal,
Scopus indexed international proceedings, national level proceedings indexed google scholar.
Tri Rahayu, was born in Jakarta on November 5, 1977. Undergraduate computer education was
taken at Universitas Pembangunan Nasional Veteran Jakarta, in 1996 graduated in 2001. Then
continued study at the Masters Program in Management Information Systems at the same
university in 2006. Started working at the Development University Nasional Veteran Jakarta as a
Laboratory Assistant, in 2002. My teaching experience is as an apprentice lecturer for
Introduction to Information technology. In 2010-2016, I was trusted as the head of the new
student admissions department.

More Related Content

What's hot

Online Intelligent Semantic Performance Based Solution: The Milestone towards...
Online Intelligent Semantic Performance Based Solution: The Milestone towards...Online Intelligent Semantic Performance Based Solution: The Milestone towards...
Online Intelligent Semantic Performance Based Solution: The Milestone towards...
AM Publications
 
International Journal of Engineering (IJE) Volume (1) Issue (1)
International Journal of Engineering (IJE) Volume (1)  Issue (1)International Journal of Engineering (IJE) Volume (1)  Issue (1)
International Journal of Engineering (IJE) Volume (1) Issue (1)CSCJournals
 
The impact of management information systems(mis) technologies on the quality...
The impact of management information systems(mis) technologies on the quality...The impact of management information systems(mis) technologies on the quality...
The impact of management information systems(mis) technologies on the quality...
IJNSA Journal
 
CRITERION BASED AUTOMATIC GENERATION OF QUESTION PAPER
CRITERION BASED AUTOMATIC GENERATION OF QUESTION PAPERCRITERION BASED AUTOMATIC GENERATION OF QUESTION PAPER
CRITERION BASED AUTOMATIC GENERATION OF QUESTION PAPER
vivatechijri
 
IRJET- Student Placement Prediction using Machine Learning
IRJET- Student Placement Prediction using Machine LearningIRJET- Student Placement Prediction using Machine Learning
IRJET- Student Placement Prediction using Machine Learning
IRJET Journal
 
Dams dynamic attendance management system
Dams dynamic attendance management systemDams dynamic attendance management system
Dams dynamic attendance management system
eSAT Journals
 
Factors influencing actual use of
Factors influencing actual use ofFactors influencing actual use of
Factors influencing actual use of
csandit
 
Smart application for ams using face recognition
Smart application for ams using face recognitionSmart application for ams using face recognition
Smart application for ams using face recognition
cseij
 
IRJET- Survey on Various Techniques of Attendance marking and Attention D...
IRJET-  	  Survey on Various Techniques of Attendance marking and Attention D...IRJET-  	  Survey on Various Techniques of Attendance marking and Attention D...
IRJET- Survey on Various Techniques of Attendance marking and Attention D...
IRJET Journal
 
IRJET - Hostel Management System using Ensemble Learning
IRJET - Hostel Management System using Ensemble LearningIRJET - Hostel Management System using Ensemble Learning
IRJET - Hostel Management System using Ensemble Learning
IRJET Journal
 
IRJET- Evaluation Technique of Student Performance in various Courses
IRJET- Evaluation Technique of Student Performance in various CoursesIRJET- Evaluation Technique of Student Performance in various Courses
IRJET- Evaluation Technique of Student Performance in various Courses
IRJET Journal
 
Development of E-learning Software Based Multiplatform Components
Development of E-learning Software Based Multiplatform ComponentsDevelopment of E-learning Software Based Multiplatform Components
Development of E-learning Software Based Multiplatform Components
journalBEEI
 
EXTENSION OF TECHNOLOGY ACCEPTANCE MODEL (TAM): A STUDY ON INDIAN INTERNET BA...
EXTENSION OF TECHNOLOGY ACCEPTANCE MODEL (TAM): A STUDY ON INDIAN INTERNET BA...EXTENSION OF TECHNOLOGY ACCEPTANCE MODEL (TAM): A STUDY ON INDIAN INTERNET BA...
EXTENSION OF TECHNOLOGY ACCEPTANCE MODEL (TAM): A STUDY ON INDIAN INTERNET BA...
IAEME Publication
 
IRJET - Student Sentiment Analysis using Android Application
IRJET -  	  Student Sentiment Analysis using Android ApplicationIRJET -  	  Student Sentiment Analysis using Android Application
IRJET - Student Sentiment Analysis using Android Application
IRJET Journal
 
Ha3612571261
Ha3612571261Ha3612571261
Ha3612571261
IJERA Editor
 
Using Expert Evaluation to Assess the Usability of an Educational Mobile Game...
Using Expert Evaluation to Assess the Usability of an Educational Mobile Game...Using Expert Evaluation to Assess the Usability of an Educational Mobile Game...
Using Expert Evaluation to Assess the Usability of an Educational Mobile Game...
Jorge Luis Pérez Medina
 
HELPING PEOPLE WITH DOWN SYNDROME THROUGH AN USABILITY TESTING GUIDE PROPOSAL...
HELPING PEOPLE WITH DOWN SYNDROME THROUGH AN USABILITY TESTING GUIDE PROPOSAL...HELPING PEOPLE WITH DOWN SYNDROME THROUGH AN USABILITY TESTING GUIDE PROPOSAL...
HELPING PEOPLE WITH DOWN SYNDROME THROUGH AN USABILITY TESTING GUIDE PROPOSAL...
ijcseit
 
3-blackFarrukh_Sahar_Work_Portfolio.5.15
3-blackFarrukh_Sahar_Work_Portfolio.5.153-blackFarrukh_Sahar_Work_Portfolio.5.15
3-blackFarrukh_Sahar_Work_Portfolio.5.15Farrukh Sahar
 

What's hot (19)

Online Intelligent Semantic Performance Based Solution: The Milestone towards...
Online Intelligent Semantic Performance Based Solution: The Milestone towards...Online Intelligent Semantic Performance Based Solution: The Milestone towards...
Online Intelligent Semantic Performance Based Solution: The Milestone towards...
 
International Journal of Engineering (IJE) Volume (1) Issue (1)
International Journal of Engineering (IJE) Volume (1)  Issue (1)International Journal of Engineering (IJE) Volume (1)  Issue (1)
International Journal of Engineering (IJE) Volume (1) Issue (1)
 
The impact of management information systems(mis) technologies on the quality...
The impact of management information systems(mis) technologies on the quality...The impact of management information systems(mis) technologies on the quality...
The impact of management information systems(mis) technologies on the quality...
 
CRITERION BASED AUTOMATIC GENERATION OF QUESTION PAPER
CRITERION BASED AUTOMATIC GENERATION OF QUESTION PAPERCRITERION BASED AUTOMATIC GENERATION OF QUESTION PAPER
CRITERION BASED AUTOMATIC GENERATION OF QUESTION PAPER
 
IRJET- Student Placement Prediction using Machine Learning
IRJET- Student Placement Prediction using Machine LearningIRJET- Student Placement Prediction using Machine Learning
IRJET- Student Placement Prediction using Machine Learning
 
final
finalfinal
final
 
Dams dynamic attendance management system
Dams dynamic attendance management systemDams dynamic attendance management system
Dams dynamic attendance management system
 
Factors influencing actual use of
Factors influencing actual use ofFactors influencing actual use of
Factors influencing actual use of
 
Smart application for ams using face recognition
Smart application for ams using face recognitionSmart application for ams using face recognition
Smart application for ams using face recognition
 
IRJET- Survey on Various Techniques of Attendance marking and Attention D...
IRJET-  	  Survey on Various Techniques of Attendance marking and Attention D...IRJET-  	  Survey on Various Techniques of Attendance marking and Attention D...
IRJET- Survey on Various Techniques of Attendance marking and Attention D...
 
IRJET - Hostel Management System using Ensemble Learning
IRJET - Hostel Management System using Ensemble LearningIRJET - Hostel Management System using Ensemble Learning
IRJET - Hostel Management System using Ensemble Learning
 
IRJET- Evaluation Technique of Student Performance in various Courses
IRJET- Evaluation Technique of Student Performance in various CoursesIRJET- Evaluation Technique of Student Performance in various Courses
IRJET- Evaluation Technique of Student Performance in various Courses
 
Development of E-learning Software Based Multiplatform Components
Development of E-learning Software Based Multiplatform ComponentsDevelopment of E-learning Software Based Multiplatform Components
Development of E-learning Software Based Multiplatform Components
 
EXTENSION OF TECHNOLOGY ACCEPTANCE MODEL (TAM): A STUDY ON INDIAN INTERNET BA...
EXTENSION OF TECHNOLOGY ACCEPTANCE MODEL (TAM): A STUDY ON INDIAN INTERNET BA...EXTENSION OF TECHNOLOGY ACCEPTANCE MODEL (TAM): A STUDY ON INDIAN INTERNET BA...
EXTENSION OF TECHNOLOGY ACCEPTANCE MODEL (TAM): A STUDY ON INDIAN INTERNET BA...
 
IRJET - Student Sentiment Analysis using Android Application
IRJET -  	  Student Sentiment Analysis using Android ApplicationIRJET -  	  Student Sentiment Analysis using Android Application
IRJET - Student Sentiment Analysis using Android Application
 
Ha3612571261
Ha3612571261Ha3612571261
Ha3612571261
 
Using Expert Evaluation to Assess the Usability of an Educational Mobile Game...
Using Expert Evaluation to Assess the Usability of an Educational Mobile Game...Using Expert Evaluation to Assess the Usability of an Educational Mobile Game...
Using Expert Evaluation to Assess the Usability of an Educational Mobile Game...
 
HELPING PEOPLE WITH DOWN SYNDROME THROUGH AN USABILITY TESTING GUIDE PROPOSAL...
HELPING PEOPLE WITH DOWN SYNDROME THROUGH AN USABILITY TESTING GUIDE PROPOSAL...HELPING PEOPLE WITH DOWN SYNDROME THROUGH AN USABILITY TESTING GUIDE PROPOSAL...
HELPING PEOPLE WITH DOWN SYNDROME THROUGH AN USABILITY TESTING GUIDE PROPOSAL...
 
3-blackFarrukh_Sahar_Work_Portfolio.5.15
3-blackFarrukh_Sahar_Work_Portfolio.5.153-blackFarrukh_Sahar_Work_Portfolio.5.15
3-blackFarrukh_Sahar_Work_Portfolio.5.15
 

Similar to UI/UX integrated holistic monitoring of PAUD using the TCSD method

City i-Tick: The android based mobile application for students’ attendance at...
City i-Tick: The android based mobile application for students’ attendance at...City i-Tick: The android based mobile application for students’ attendance at...
City i-Tick: The android based mobile application for students’ attendance at...
journalBEEI
 
HELPING PEOPLE WITH DOWN SYNDROME THROUGH AN USABILITY TESTING GUIDE PROPOSAL...
HELPING PEOPLE WITH DOWN SYNDROME THROUGH AN USABILITY TESTING GUIDE PROPOSAL...HELPING PEOPLE WITH DOWN SYNDROME THROUGH AN USABILITY TESTING GUIDE PROPOSAL...
HELPING PEOPLE WITH DOWN SYNDROME THROUGH AN USABILITY TESTING GUIDE PROPOSAL...
ijcseit
 
A METHOD FOR WEBSITE USABILITY EVALUATION: A COMPARATIVE ANALYSIS
A METHOD FOR WEBSITE USABILITY EVALUATION: A COMPARATIVE ANALYSISA METHOD FOR WEBSITE USABILITY EVALUATION: A COMPARATIVE ANALYSIS
A METHOD FOR WEBSITE USABILITY EVALUATION: A COMPARATIVE ANALYSIS
IJwest
 
Analysis Of The Use Of Virtual Meeting In The Implementation Of Proposal Thes...
Analysis Of The Use Of Virtual Meeting In The Implementation Of Proposal Thes...Analysis Of The Use Of Virtual Meeting In The Implementation Of Proposal Thes...
Analysis Of The Use Of Virtual Meeting In The Implementation Of Proposal Thes...
Heather Strinden
 
““USATESTDOWN” A PROPOSAL OF A USABILITY TESTING GUIDE FOR MOBILE APPLICATION...
““USATESTDOWN” A PROPOSAL OF A USABILITY TESTING GUIDE FOR MOBILE APPLICATION...““USATESTDOWN” A PROPOSAL OF A USABILITY TESTING GUIDE FOR MOBILE APPLICATION...
““USATESTDOWN” A PROPOSAL OF A USABILITY TESTING GUIDE FOR MOBILE APPLICATION...
csandit
 
USER EXPERIENCE EVALUATION OF A STUDENT INFORMATION SYSTEM
USER EXPERIENCE EVALUATION OF A STUDENT INFORMATION SYSTEMUSER EXPERIENCE EVALUATION OF A STUDENT INFORMATION SYSTEM
USER EXPERIENCE EVALUATION OF A STUDENT INFORMATION SYSTEM
ijcsit
 
mICF research
mICF researchmICF research
mICF research
Stefanus Snyman
 
mICF poster 5 (olaf) micf research
mICF poster 5 (olaf) micf researchmICF poster 5 (olaf) micf research
mICF poster 5 (olaf) micf research
Stefanus Snyman
 
Dashboard settings design in SVARA using user-centred design method
Dashboard settings design in SVARA using user-centred design methodDashboard settings design in SVARA using user-centred design method
Dashboard settings design in SVARA using user-centred design method
TELKOMNIKA JOURNAL
 
The DeLone and McLean model for measuring success in online learning systems...
The DeLone and McLean model for measuring success in online  learning systems...The DeLone and McLean model for measuring success in online  learning systems...
The DeLone and McLean model for measuring success in online learning systems...
Journal of Education and Learning (EduLearn)
 
A Conceptual Design And Evaluation Framework For Mobile Persuasive Health Tec...
A Conceptual Design And Evaluation Framework For Mobile Persuasive Health Tec...A Conceptual Design And Evaluation Framework For Mobile Persuasive Health Tec...
A Conceptual Design And Evaluation Framework For Mobile Persuasive Health Tec...
Kate Campbell
 
A Critical Evaluation of Popular UX Frameworks Relevant to E-Health Apps
A Critical Evaluation of Popular UX Frameworks Relevant to E-Health AppsA Critical Evaluation of Popular UX Frameworks Relevant to E-Health Apps
A Critical Evaluation of Popular UX Frameworks Relevant to E-Health Apps
rinzindorjej
 
The International Journal of Computational Science, Information Technology an...
The International Journal of Computational Science, Information Technology an...The International Journal of Computational Science, Information Technology an...
The International Journal of Computational Science, Information Technology an...
rinzindorjej
 
The International Journal of Computational Science, Information Technology an...
The International Journal of Computational Science, Information Technology an...The International Journal of Computational Science, Information Technology an...
The International Journal of Computational Science, Information Technology an...
rinzindorjej
 
SOCIO-DEMOGRAPHIC DIFFERENCES IN THE PERCEPTIONS OF LEARNING MANAGEMENT SYSTE...
SOCIO-DEMOGRAPHIC DIFFERENCES IN THE PERCEPTIONS OF LEARNING MANAGEMENT SYSTE...SOCIO-DEMOGRAPHIC DIFFERENCES IN THE PERCEPTIONS OF LEARNING MANAGEMENT SYSTE...
SOCIO-DEMOGRAPHIC DIFFERENCES IN THE PERCEPTIONS OF LEARNING MANAGEMENT SYSTE...
ijseajournal
 
Balanced Evaluation Paper
Balanced Evaluation PaperBalanced Evaluation Paper
Balanced Evaluation Paper
Rachel Phillips
 
User-Interface Usability Evaluation
User-Interface Usability EvaluationUser-Interface Usability Evaluation
User-Interface Usability Evaluation
CSCJournals
 
Generating a Domain Specific Inspection Evaluation Method through an Adaptive...
Generating a Domain Specific Inspection Evaluation Method through an Adaptive...Generating a Domain Specific Inspection Evaluation Method through an Adaptive...
Generating a Domain Specific Inspection Evaluation Method through an Adaptive...
Waqas Tariq
 
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALS
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALSA HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALS
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALS
AIRCC Publishing Corporation
 
A Heuristic Based Approach for Usability Evaluation of Academic Portals
A Heuristic Based Approach for Usability Evaluation of Academic PortalsA Heuristic Based Approach for Usability Evaluation of Academic Portals
A Heuristic Based Approach for Usability Evaluation of Academic Portals
AIRCC Publishing Corporation
 

Similar to UI/UX integrated holistic monitoring of PAUD using the TCSD method (20)

City i-Tick: The android based mobile application for students’ attendance at...
City i-Tick: The android based mobile application for students’ attendance at...City i-Tick: The android based mobile application for students’ attendance at...
City i-Tick: The android based mobile application for students’ attendance at...
 
HELPING PEOPLE WITH DOWN SYNDROME THROUGH AN USABILITY TESTING GUIDE PROPOSAL...
HELPING PEOPLE WITH DOWN SYNDROME THROUGH AN USABILITY TESTING GUIDE PROPOSAL...HELPING PEOPLE WITH DOWN SYNDROME THROUGH AN USABILITY TESTING GUIDE PROPOSAL...
HELPING PEOPLE WITH DOWN SYNDROME THROUGH AN USABILITY TESTING GUIDE PROPOSAL...
 
A METHOD FOR WEBSITE USABILITY EVALUATION: A COMPARATIVE ANALYSIS
A METHOD FOR WEBSITE USABILITY EVALUATION: A COMPARATIVE ANALYSISA METHOD FOR WEBSITE USABILITY EVALUATION: A COMPARATIVE ANALYSIS
A METHOD FOR WEBSITE USABILITY EVALUATION: A COMPARATIVE ANALYSIS
 
Analysis Of The Use Of Virtual Meeting In The Implementation Of Proposal Thes...
Analysis Of The Use Of Virtual Meeting In The Implementation Of Proposal Thes...Analysis Of The Use Of Virtual Meeting In The Implementation Of Proposal Thes...
Analysis Of The Use Of Virtual Meeting In The Implementation Of Proposal Thes...
 
““USATESTDOWN” A PROPOSAL OF A USABILITY TESTING GUIDE FOR MOBILE APPLICATION...
““USATESTDOWN” A PROPOSAL OF A USABILITY TESTING GUIDE FOR MOBILE APPLICATION...““USATESTDOWN” A PROPOSAL OF A USABILITY TESTING GUIDE FOR MOBILE APPLICATION...
““USATESTDOWN” A PROPOSAL OF A USABILITY TESTING GUIDE FOR MOBILE APPLICATION...
 
USER EXPERIENCE EVALUATION OF A STUDENT INFORMATION SYSTEM
USER EXPERIENCE EVALUATION OF A STUDENT INFORMATION SYSTEMUSER EXPERIENCE EVALUATION OF A STUDENT INFORMATION SYSTEM
USER EXPERIENCE EVALUATION OF A STUDENT INFORMATION SYSTEM
 
mICF research
mICF researchmICF research
mICF research
 
mICF poster 5 (olaf) micf research
mICF poster 5 (olaf) micf researchmICF poster 5 (olaf) micf research
mICF poster 5 (olaf) micf research
 
Dashboard settings design in SVARA using user-centred design method
Dashboard settings design in SVARA using user-centred design methodDashboard settings design in SVARA using user-centred design method
Dashboard settings design in SVARA using user-centred design method
 
The DeLone and McLean model for measuring success in online learning systems...
The DeLone and McLean model for measuring success in online  learning systems...The DeLone and McLean model for measuring success in online  learning systems...
The DeLone and McLean model for measuring success in online learning systems...
 
A Conceptual Design And Evaluation Framework For Mobile Persuasive Health Tec...
A Conceptual Design And Evaluation Framework For Mobile Persuasive Health Tec...A Conceptual Design And Evaluation Framework For Mobile Persuasive Health Tec...
A Conceptual Design And Evaluation Framework For Mobile Persuasive Health Tec...
 
A Critical Evaluation of Popular UX Frameworks Relevant to E-Health Apps
A Critical Evaluation of Popular UX Frameworks Relevant to E-Health AppsA Critical Evaluation of Popular UX Frameworks Relevant to E-Health Apps
A Critical Evaluation of Popular UX Frameworks Relevant to E-Health Apps
 
The International Journal of Computational Science, Information Technology an...
The International Journal of Computational Science, Information Technology an...The International Journal of Computational Science, Information Technology an...
The International Journal of Computational Science, Information Technology an...
 
The International Journal of Computational Science, Information Technology an...
The International Journal of Computational Science, Information Technology an...The International Journal of Computational Science, Information Technology an...
The International Journal of Computational Science, Information Technology an...
 
SOCIO-DEMOGRAPHIC DIFFERENCES IN THE PERCEPTIONS OF LEARNING MANAGEMENT SYSTE...
SOCIO-DEMOGRAPHIC DIFFERENCES IN THE PERCEPTIONS OF LEARNING MANAGEMENT SYSTE...SOCIO-DEMOGRAPHIC DIFFERENCES IN THE PERCEPTIONS OF LEARNING MANAGEMENT SYSTE...
SOCIO-DEMOGRAPHIC DIFFERENCES IN THE PERCEPTIONS OF LEARNING MANAGEMENT SYSTE...
 
Balanced Evaluation Paper
Balanced Evaluation PaperBalanced Evaluation Paper
Balanced Evaluation Paper
 
User-Interface Usability Evaluation
User-Interface Usability EvaluationUser-Interface Usability Evaluation
User-Interface Usability Evaluation
 
Generating a Domain Specific Inspection Evaluation Method through an Adaptive...
Generating a Domain Specific Inspection Evaluation Method through an Adaptive...Generating a Domain Specific Inspection Evaluation Method through an Adaptive...
Generating a Domain Specific Inspection Evaluation Method through an Adaptive...
 
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALS
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALSA HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALS
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALS
 
A Heuristic Based Approach for Usability Evaluation of Academic Portals
A Heuristic Based Approach for Usability Evaluation of Academic PortalsA Heuristic Based Approach for Usability Evaluation of Academic Portals
A Heuristic Based Approach for Usability Evaluation of Academic Portals
 

More from journalBEEI

Square transposition: an approach to the transposition process in block cipher
Square transposition: an approach to the transposition process in block cipherSquare transposition: an approach to the transposition process in block cipher
Square transposition: an approach to the transposition process in block cipher
journalBEEI
 
Hyper-parameter optimization of convolutional neural network based on particl...
Hyper-parameter optimization of convolutional neural network based on particl...Hyper-parameter optimization of convolutional neural network based on particl...
Hyper-parameter optimization of convolutional neural network based on particl...
journalBEEI
 
Supervised machine learning based liver disease prediction approach with LASS...
Supervised machine learning based liver disease prediction approach with LASS...Supervised machine learning based liver disease prediction approach with LASS...
Supervised machine learning based liver disease prediction approach with LASS...
journalBEEI
 
A secure and energy saving protocol for wireless sensor networks
A secure and energy saving protocol for wireless sensor networksA secure and energy saving protocol for wireless sensor networks
A secure and energy saving protocol for wireless sensor networks
journalBEEI
 
Plant leaf identification system using convolutional neural network
Plant leaf identification system using convolutional neural networkPlant leaf identification system using convolutional neural network
Plant leaf identification system using convolutional neural network
journalBEEI
 
Customized moodle-based learning management system for socially disadvantaged...
Customized moodle-based learning management system for socially disadvantaged...Customized moodle-based learning management system for socially disadvantaged...
Customized moodle-based learning management system for socially disadvantaged...
journalBEEI
 
Understanding the role of individual learner in adaptive and personalized e-l...
Understanding the role of individual learner in adaptive and personalized e-l...Understanding the role of individual learner in adaptive and personalized e-l...
Understanding the role of individual learner in adaptive and personalized e-l...
journalBEEI
 
Prototype mobile contactless transaction system in traditional markets to sup...
Prototype mobile contactless transaction system in traditional markets to sup...Prototype mobile contactless transaction system in traditional markets to sup...
Prototype mobile contactless transaction system in traditional markets to sup...
journalBEEI
 
Wireless HART stack using multiprocessor technique with laxity algorithm
Wireless HART stack using multiprocessor technique with laxity algorithmWireless HART stack using multiprocessor technique with laxity algorithm
Wireless HART stack using multiprocessor technique with laxity algorithm
journalBEEI
 
Implementation of double-layer loaded on octagon microstrip yagi antenna
Implementation of double-layer loaded on octagon microstrip yagi antennaImplementation of double-layer loaded on octagon microstrip yagi antenna
Implementation of double-layer loaded on octagon microstrip yagi antenna
journalBEEI
 
The calculation of the field of an antenna located near the human head
The calculation of the field of an antenna located near the human headThe calculation of the field of an antenna located near the human head
The calculation of the field of an antenna located near the human head
journalBEEI
 
Exact secure outage probability performance of uplinkdownlink multiple access...
Exact secure outage probability performance of uplinkdownlink multiple access...Exact secure outage probability performance of uplinkdownlink multiple access...
Exact secure outage probability performance of uplinkdownlink multiple access...
journalBEEI
 
Design of a dual-band antenna for energy harvesting application
Design of a dual-band antenna for energy harvesting applicationDesign of a dual-band antenna for energy harvesting application
Design of a dual-band antenna for energy harvesting application
journalBEEI
 
Transforming data-centric eXtensible markup language into relational database...
Transforming data-centric eXtensible markup language into relational database...Transforming data-centric eXtensible markup language into relational database...
Transforming data-centric eXtensible markup language into relational database...
journalBEEI
 
Key performance requirement of future next wireless networks (6G)
Key performance requirement of future next wireless networks (6G)Key performance requirement of future next wireless networks (6G)
Key performance requirement of future next wireless networks (6G)
journalBEEI
 
Noise resistance territorial intensity-based optical flow using inverse confi...
Noise resistance territorial intensity-based optical flow using inverse confi...Noise resistance territorial intensity-based optical flow using inverse confi...
Noise resistance territorial intensity-based optical flow using inverse confi...
journalBEEI
 
Modeling climate phenomenon with software grids analysis and display system i...
Modeling climate phenomenon with software grids analysis and display system i...Modeling climate phenomenon with software grids analysis and display system i...
Modeling climate phenomenon with software grids analysis and display system i...
journalBEEI
 
An approach of re-organizing input dataset to enhance the quality of emotion ...
An approach of re-organizing input dataset to enhance the quality of emotion ...An approach of re-organizing input dataset to enhance the quality of emotion ...
An approach of re-organizing input dataset to enhance the quality of emotion ...
journalBEEI
 
Parking detection system using background subtraction and HSV color segmentation
Parking detection system using background subtraction and HSV color segmentationParking detection system using background subtraction and HSV color segmentation
Parking detection system using background subtraction and HSV color segmentation
journalBEEI
 
Quality of service performances of video and voice transmission in universal ...
Quality of service performances of video and voice transmission in universal ...Quality of service performances of video and voice transmission in universal ...
Quality of service performances of video and voice transmission in universal ...
journalBEEI
 

More from journalBEEI (20)

Square transposition: an approach to the transposition process in block cipher
Square transposition: an approach to the transposition process in block cipherSquare transposition: an approach to the transposition process in block cipher
Square transposition: an approach to the transposition process in block cipher
 
Hyper-parameter optimization of convolutional neural network based on particl...
Hyper-parameter optimization of convolutional neural network based on particl...Hyper-parameter optimization of convolutional neural network based on particl...
Hyper-parameter optimization of convolutional neural network based on particl...
 
Supervised machine learning based liver disease prediction approach with LASS...
Supervised machine learning based liver disease prediction approach with LASS...Supervised machine learning based liver disease prediction approach with LASS...
Supervised machine learning based liver disease prediction approach with LASS...
 
A secure and energy saving protocol for wireless sensor networks
A secure and energy saving protocol for wireless sensor networksA secure and energy saving protocol for wireless sensor networks
A secure and energy saving protocol for wireless sensor networks
 
Plant leaf identification system using convolutional neural network
Plant leaf identification system using convolutional neural networkPlant leaf identification system using convolutional neural network
Plant leaf identification system using convolutional neural network
 
Customized moodle-based learning management system for socially disadvantaged...
Customized moodle-based learning management system for socially disadvantaged...Customized moodle-based learning management system for socially disadvantaged...
Customized moodle-based learning management system for socially disadvantaged...
 
Understanding the role of individual learner in adaptive and personalized e-l...
Understanding the role of individual learner in adaptive and personalized e-l...Understanding the role of individual learner in adaptive and personalized e-l...
Understanding the role of individual learner in adaptive and personalized e-l...
 
Prototype mobile contactless transaction system in traditional markets to sup...
Prototype mobile contactless transaction system in traditional markets to sup...Prototype mobile contactless transaction system in traditional markets to sup...
Prototype mobile contactless transaction system in traditional markets to sup...
 
Wireless HART stack using multiprocessor technique with laxity algorithm
Wireless HART stack using multiprocessor technique with laxity algorithmWireless HART stack using multiprocessor technique with laxity algorithm
Wireless HART stack using multiprocessor technique with laxity algorithm
 
Implementation of double-layer loaded on octagon microstrip yagi antenna
Implementation of double-layer loaded on octagon microstrip yagi antennaImplementation of double-layer loaded on octagon microstrip yagi antenna
Implementation of double-layer loaded on octagon microstrip yagi antenna
 
The calculation of the field of an antenna located near the human head
The calculation of the field of an antenna located near the human headThe calculation of the field of an antenna located near the human head
The calculation of the field of an antenna located near the human head
 
Exact secure outage probability performance of uplinkdownlink multiple access...
Exact secure outage probability performance of uplinkdownlink multiple access...Exact secure outage probability performance of uplinkdownlink multiple access...
Exact secure outage probability performance of uplinkdownlink multiple access...
 
Design of a dual-band antenna for energy harvesting application
Design of a dual-band antenna for energy harvesting applicationDesign of a dual-band antenna for energy harvesting application
Design of a dual-band antenna for energy harvesting application
 
Transforming data-centric eXtensible markup language into relational database...
Transforming data-centric eXtensible markup language into relational database...Transforming data-centric eXtensible markup language into relational database...
Transforming data-centric eXtensible markup language into relational database...
 
Key performance requirement of future next wireless networks (6G)
Key performance requirement of future next wireless networks (6G)Key performance requirement of future next wireless networks (6G)
Key performance requirement of future next wireless networks (6G)
 
Noise resistance territorial intensity-based optical flow using inverse confi...
Noise resistance territorial intensity-based optical flow using inverse confi...Noise resistance territorial intensity-based optical flow using inverse confi...
Noise resistance territorial intensity-based optical flow using inverse confi...
 
Modeling climate phenomenon with software grids analysis and display system i...
Modeling climate phenomenon with software grids analysis and display system i...Modeling climate phenomenon with software grids analysis and display system i...
Modeling climate phenomenon with software grids analysis and display system i...
 
An approach of re-organizing input dataset to enhance the quality of emotion ...
An approach of re-organizing input dataset to enhance the quality of emotion ...An approach of re-organizing input dataset to enhance the quality of emotion ...
An approach of re-organizing input dataset to enhance the quality of emotion ...
 
Parking detection system using background subtraction and HSV color segmentation
Parking detection system using background subtraction and HSV color segmentationParking detection system using background subtraction and HSV color segmentation
Parking detection system using background subtraction and HSV color segmentation
 
Quality of service performances of video and voice transmission in universal ...
Quality of service performances of video and voice transmission in universal ...Quality of service performances of video and voice transmission in universal ...
Quality of service performances of video and voice transmission in universal ...
 

Recently uploaded

H.Seo, ICLR 2024, MLILAB, KAIST AI.pdf
H.Seo,  ICLR 2024, MLILAB,  KAIST AI.pdfH.Seo,  ICLR 2024, MLILAB,  KAIST AI.pdf
H.Seo, ICLR 2024, MLILAB, KAIST AI.pdf
MLILAB
 
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)
MdTanvirMahtab2
 
Runway Orientation Based on the Wind Rose Diagram.pptx
Runway Orientation Based on the Wind Rose Diagram.pptxRunway Orientation Based on the Wind Rose Diagram.pptx
Runway Orientation Based on the Wind Rose Diagram.pptx
SupreethSP4
 
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdfAKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
SamSarthak3
 
Fundamentals of Electric Drives and its applications.pptx
Fundamentals of Electric Drives and its applications.pptxFundamentals of Electric Drives and its applications.pptx
Fundamentals of Electric Drives and its applications.pptx
manasideore6
 
Gen AI Study Jams _ For the GDSC Leads in India.pdf
Gen AI Study Jams _ For the GDSC Leads in India.pdfGen AI Study Jams _ For the GDSC Leads in India.pdf
Gen AI Study Jams _ For the GDSC Leads in India.pdf
gdsczhcet
 
ethical hacking-mobile hacking methods.ppt
ethical hacking-mobile hacking methods.pptethical hacking-mobile hacking methods.ppt
ethical hacking-mobile hacking methods.ppt
Jayaprasanna4
 
Standard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - NeometrixStandard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - Neometrix
Neometrix_Engineering_Pvt_Ltd
 
Architectural Portfolio Sean Lockwood
Architectural Portfolio Sean LockwoodArchitectural Portfolio Sean Lockwood
Architectural Portfolio Sean Lockwood
seandesed
 
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptxCFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
R&R Consult
 
power quality voltage fluctuation UNIT - I.pptx
power quality voltage fluctuation UNIT - I.pptxpower quality voltage fluctuation UNIT - I.pptx
power quality voltage fluctuation UNIT - I.pptx
ViniHema
 
AP LAB PPT.pdf ap lab ppt no title specific
AP LAB PPT.pdf ap lab ppt no title specificAP LAB PPT.pdf ap lab ppt no title specific
AP LAB PPT.pdf ap lab ppt no title specific
BrazilAccount1
 
Final project report on grocery store management system..pdf
Final project report on grocery store management system..pdfFinal project report on grocery store management system..pdf
Final project report on grocery store management system..pdf
Kamal Acharya
 
block diagram and signal flow graph representation
block diagram and signal flow graph representationblock diagram and signal flow graph representation
block diagram and signal flow graph representation
Divya Somashekar
 
Hierarchical Digital Twin of a Naval Power System
Hierarchical Digital Twin of a Naval Power SystemHierarchical Digital Twin of a Naval Power System
Hierarchical Digital Twin of a Naval Power System
Kerry Sado
 
MCQ Soil mechanics questions (Soil shear strength).pdf
MCQ Soil mechanics questions (Soil shear strength).pdfMCQ Soil mechanics questions (Soil shear strength).pdf
MCQ Soil mechanics questions (Soil shear strength).pdf
Osamah Alsalih
 
English lab ppt no titlespecENG PPTt.pdf
English lab ppt no titlespecENG PPTt.pdfEnglish lab ppt no titlespecENG PPTt.pdf
English lab ppt no titlespecENG PPTt.pdf
BrazilAccount1
 
Planning Of Procurement o different goods and services
Planning Of Procurement o different goods and servicesPlanning Of Procurement o different goods and services
Planning Of Procurement o different goods and services
JoytuBarua2
 
The role of big data in decision making.
The role of big data in decision making.The role of big data in decision making.
The role of big data in decision making.
ankuprajapati0525
 
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Dr.Costas Sachpazis
 

Recently uploaded (20)

H.Seo, ICLR 2024, MLILAB, KAIST AI.pdf
H.Seo,  ICLR 2024, MLILAB,  KAIST AI.pdfH.Seo,  ICLR 2024, MLILAB,  KAIST AI.pdf
H.Seo, ICLR 2024, MLILAB, KAIST AI.pdf
 
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)
 
Runway Orientation Based on the Wind Rose Diagram.pptx
Runway Orientation Based on the Wind Rose Diagram.pptxRunway Orientation Based on the Wind Rose Diagram.pptx
Runway Orientation Based on the Wind Rose Diagram.pptx
 
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdfAKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
 
Fundamentals of Electric Drives and its applications.pptx
Fundamentals of Electric Drives and its applications.pptxFundamentals of Electric Drives and its applications.pptx
Fundamentals of Electric Drives and its applications.pptx
 
Gen AI Study Jams _ For the GDSC Leads in India.pdf
Gen AI Study Jams _ For the GDSC Leads in India.pdfGen AI Study Jams _ For the GDSC Leads in India.pdf
Gen AI Study Jams _ For the GDSC Leads in India.pdf
 
ethical hacking-mobile hacking methods.ppt
ethical hacking-mobile hacking methods.pptethical hacking-mobile hacking methods.ppt
ethical hacking-mobile hacking methods.ppt
 
Standard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - NeometrixStandard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - Neometrix
 
Architectural Portfolio Sean Lockwood
Architectural Portfolio Sean LockwoodArchitectural Portfolio Sean Lockwood
Architectural Portfolio Sean Lockwood
 
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptxCFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
 
power quality voltage fluctuation UNIT - I.pptx
power quality voltage fluctuation UNIT - I.pptxpower quality voltage fluctuation UNIT - I.pptx
power quality voltage fluctuation UNIT - I.pptx
 
AP LAB PPT.pdf ap lab ppt no title specific
AP LAB PPT.pdf ap lab ppt no title specificAP LAB PPT.pdf ap lab ppt no title specific
AP LAB PPT.pdf ap lab ppt no title specific
 
Final project report on grocery store management system..pdf
Final project report on grocery store management system..pdfFinal project report on grocery store management system..pdf
Final project report on grocery store management system..pdf
 
block diagram and signal flow graph representation
block diagram and signal flow graph representationblock diagram and signal flow graph representation
block diagram and signal flow graph representation
 
Hierarchical Digital Twin of a Naval Power System
Hierarchical Digital Twin of a Naval Power SystemHierarchical Digital Twin of a Naval Power System
Hierarchical Digital Twin of a Naval Power System
 
MCQ Soil mechanics questions (Soil shear strength).pdf
MCQ Soil mechanics questions (Soil shear strength).pdfMCQ Soil mechanics questions (Soil shear strength).pdf
MCQ Soil mechanics questions (Soil shear strength).pdf
 
English lab ppt no titlespecENG PPTt.pdf
English lab ppt no titlespecENG PPTt.pdfEnglish lab ppt no titlespecENG PPTt.pdf
English lab ppt no titlespecENG PPTt.pdf
 
Planning Of Procurement o different goods and services
Planning Of Procurement o different goods and servicesPlanning Of Procurement o different goods and services
Planning Of Procurement o different goods and services
 
The role of big data in decision making.
The role of big data in decision making.The role of big data in decision making.
The role of big data in decision making.
 
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
 

UI/UX integrated holistic monitoring of PAUD using the TCSD method

  • 1. Bulletin of Electrical Engineering and Informatics Vol. 10, No. 4, August 2021, pp. 2273~2284 ISSN: 2302-9285, DOI: 10.11591/eei.v10i4.3108 2273 Journal homepage: http://beei.org UI/UX integrated holistic monitoring of PAUD using the TCSD method Erly Krisnanik, Tri Rahayu Departement of Computer Science, Universitas Pembangunan Nasional Veteran Jakarta, Indonesia Article Info ABSTRACT Article history: Received Sep 8, 2020 Revised Mar 30, 2021 Accepted Jun 24, 2021 User interface (UI)/user experience (UX) is one part of the stages in the development of the system to produce interactive and attractive web-based application layouts so that it is easy to understand and use by users. In this research, a case study was conducted on early childhood in PAUD Kuntum Mekar. The design of the UI/UX model for holistic integrative PAUD monitoring becomes one of the solutions to help parents and teachers. The method used to design UI/UX is the task centered system design (TCSD) approach starting from the stages; 1) identification scope of use, 2) user centered requirement analysis, 3) design and scenario, and 4) walkthrough evaluate, the method used for system testing is user satisfaction, and heuristic usability. The purpose of this study is the UI/UX design with TCSD can provide valid data needs of each actor based on the assignment and design of the story board of the developed system. The results of this research are UI/UX model design for integrative holistic PAUD monitoring application. Keywords: Evaluate Scenario Storyboard TCSD UI/UX This is an open access article under the CC BY-SA license. Corresponding Author: Erly Krisnanik Department of Computer Science Universitas Pembangunan Nasional Veteran Jakarta University Road, RS Fatmawati, Pondok Labu, West Jakarta 12450, Indonesia Email: erlykrisnanik@upnvj.ac.id 1. INTRODUCTION User Interface is an aggregate of the means by which system users interact with machines, devices, computer programs, or other tools. UI provides the means: Input, allowing the user to control the system; and Output, enabling the system to inform users. Blair-Early and Zender [1] meanwhile, user experience (UX) is a person's perception and response to the use of a product, a system used, or service by providing an assessment of how satisfied and comfortable using it is. Nikam et al. [2] the basic principle in designing a UX is that users have the experience that users determine to have the experience to the level of satisfaction based on satisfaction and comfort in interacting with products, systems, or service. If the UX features are developing well but there are no end-users who are satisfied and comfortable, the value of UX will be low [3],[4]. TCSD method is one of the methods used to design UI/UX in accordance with the task needs of system users through useability testing, so the user interface design becomes better and optimal, and easy to use. S. Greenberg [5]. TCSD is a process that can be describing as; 1) a concrete description in the form of the real world, such as doing every task in everyday life [6], 2) Determine the users and assignment in the system based on the descriptions of the users, 3) designing a prototype of an interface that meets system requirements, 4) evaluate the interface by performing a task-centered walkthrough [7], [8]. The research object case study is PAUD Kuntum Mekar in the village of Baros Serang Banten. The problem that exists in PAUD Kuntum Mekar is that the current education system requires communication
  • 2.  ISSN: 2302-9285 Bulletin of Electr Eng & Inf, Vol. 10, No. 4, August 2021 : 2273 – 2284 2274 between parents and teachers so that it requires informative and easy-to-use media. Beside that, the researchers designed a UI/UX model for the needs of a web-based integrative holistic PAUD monitoring information system. This research uses the TCSD method, so the system design developed is followed by user needs, easy to use, interactive, and informative. The purpose of this study was to provide up-to-date information about activities at PAUD Kuntum Mekar is information on a balanced nutrition menu, information on health care, information on child development, and immunization schedules. The scope of this studied discusses UI/UX design based on user needs tasks through the stages in TCSD. The contribution of this research is in the form of a integrative holistic UI/UX design to make it easier for every user involved with the system starting from health monitoring management, PAUD data management, and PAUD monitoring card management. 2. RESEARCH METHOD The software development method in this research is to use the TCSD method because it makes it easier for the author to group the work based on the duties and responsibilities of the user required by the Integrative Holistic monitoring system for children of early childhood. The stages of the research method in TCSD can be seen in Figure 1. Figure 1. The stages of the research method using TCSD The flow of the integrative holistic UI/UX design starts from the following stages are [9], [10]: a. The preparation stage, at this stage the identification of problems from the Integrative holistic monitoring system of children of early childhood is carried out. The problem-solving solution was created, by determining the scope and objectives of the systems that fit the business process, b. System user identification stage, at this stage a description of the system is carried out, identifying system users, defining the scope of the system and describing the potential of the existing system, c. The system user requirements analysis stage, at this stage, the component specifications for UI/UX are prepared, d. Design stage scenario system creation, at this stage the user interface design is carried out according to user needs and compiles the story board of each UI, e. The UI search evaluation stage, at this stage, determine who the system user is, assign system user, the required UI and business process flow as well as UI improvements based on search results.
  • 3. Bulletin of Electr Eng & Inf ISSN: 2302-9285  UI/UX integrated holistic monitoring of PAUD using the TCSD method (Erly Krisnanik) 2275 Sampling testing was carried out on eight users of the system consisting of teachers, parents of PAUD and health experts. The reason for only assigning eight users to be used as sampling is because the scope of the project does not involve many users. Nielsen [11], [12] the method used for task testing uses a Likert scale to assess positive attitudes with positive statements and negated attitudes through negative statements. A. Joshi et al. [13], the equation of the calculation formula to determine the number of ideal values obtained from the maximum value multiplied by the number of users can be seen in formula (1). Ideal value=5 x Many Users (1) To determine the index value based on the number of respondents' values divided by the total ideal number of population multiplied by 100%, it can be shown in formula (2). Index Value=( total respondent score ideal Number ) x 100% (2) While the determination of the average calculation is obtained from the total number of respondents' values divided by the total number of ideal values multiplied by 100%, it can be seen in formula (3). Average=( total number of respondents score total ideal Number ) x 100% (3) 3. RESULTS AND ANALYSIS The flow of activities for designing the UI/UX holistic integrative monitoring model for PAUD using the TCSD method has 4 stages that must be followed, namely [14], [15]; 1) identification scope of use, 2) user centered requirements analysis, 3) design as scenario, and 4) walkthrough evaluate. 3.1. Identification scope of use User identification focuses on the Kuntum Mekar school where researchers interview the information needs of each user related to the system and plan the content requirements needed so that the development of a holistic integrative monitoring system application is in accordance with existing business processes. This stage also determines the tasks and users involved in running the application. Interviewing about the tasks of each user involved in the purpose is to see the habits carried out by each user. After identifying the user there are 3 users where each user has a different task. Details of the tasks required by system users can be seen in Table 1. Table 1. System users by task User Task PAUD Teacher The teacher of PAUD has the task and responsibility of making master data for PAUD children, list of healthy menus for children of PAUD, monitoring the development of nutrition for children of PAUD, immunization schedule, monitoring of immunization data for children of PAUD, making health care schedules for children of PAUD, making monitoring of recording data on children's health development PAUD and make a schedule of giving vitamins for children PAUD. Parents PAUD parents can monitor the nutritional development of their children, monitor immunization schedules, provide vitamins, health care, monitor the results of children's development and health Health Expert Provide immunization vaccines, check the health of teeth, mouth and nails, provide vitamins and provide a balanced nutritional menu. 3.2. User centered requirement analysis Analysis of the needs of system users is carried out through data needs analysis based on direct observation and interviews [16]-[18] with Kuntum Mekar's PAUD and the parents of the PAUD 's children. The results of the needs analysis will be used as a reference for making system improvements. There are 3 analysis studies based on needs consisting of: a. Analysis of information needs, the problem faced by Kuntum Mekar is that the PAUD teacher as the admin has difficulty making monitoring reports on the activities they have done and PAUD 's parents often lose information on activities carried out by their children while at school. Based on these problems, it is necessary to build a UI/UX model design for a web-based application of a holistic integrative monitoring system for young children so that all users can interact whenever and wherever they are. b. Analysis of data storage needs, the problem faced is that the data on young children is never updated and is often lost, such as data on activity records for young children regarding immunization schedules,
  • 4.  ISSN: 2302-9285 Bulletin of Electr Eng & Inf, Vol. 10, No. 4, August 2021 : 2273 – 2284 2276 healthy nutrition menu schedules, and health care schedules and poorly documented data on monitoring the health of young children. such as; giving vitamins, examination of teeth, and nails. c. Technology needs analysis, existing computer aids are still limited to the use of Microsoft office such as word, excel and ppt which are used as media for making reports so that errors often occur in making reports. Based on this, it is necessary to make a web-based PAUD children's health monitoring system application using the application software used are PHP, MySQL, and Laravel Web server using Xampp (Apache and phpMyAdmin). 3.3. Design as scenario The system user activity process flow can be designed after the researcher identifies the integrative holistic activities carried out by PAUD Kuntum Mekar can be seen in Figure 2. The depiction of the process flow is divided into 3, namely: a. The process flow of the PAUD teacher's activities as admin In Figure 2 (a), you can see the flow of the system based on the activities of the PAUD teacher where the PAUD teacher can manage the holistic integrated monitoring website by accessing the PAUD data menu, the health monitoring schedule menu, the PAUD monitoring card menu, and the user menu as well as making reports to the PAUD school principal. b. Flow of user activity process as parent The process flow of parents' activities in using the holistic integrative monitoring website application starts from the registration menu to get a user account, the immunization schedule menu, the balanced nutrition schedule menu, the health care menu, and the PAUD monitoring report card menu. On the health care menu, there is a submenu of health checkup schedules and a menu of vitamin administration. Can be seen in Figure 2 (b). c. Flow of user activity process as a health expert Health experts have an important role in the development and growth of young children. Therefore the holistic integrative monitoring application provides facilities for health experts to be able to access the system through menus, namely; 1) updating immunization data, 2) updating health care data starting from examining teeth, skin, and nails and updating vitamin data, and 3) updating the menu balanced nutrition. Digram process flow can be seen in Figure 2 (c). The relationship between system users can be seen in Figure 2 (d). Where the interaction between teachers and parents depends on each other in monitoring the health development of young children. Meanwhile, the involvement of experts is a source of data that will provide immunizations, health checks, and the provision of a balanced nutrition menu for young children. This research has produced 9 main scenarios of the activities of the actors involved, namely; 1) managing PAUD master data, 2) making a list of healthy nutrition menus, 3) nutritional care, 4) immunization schedules, 5) health maintenance schedules, 6) immunization schedule information, 7) information on development of PAUD, 8) recording of immunization activities, and 9) recording of health care activities. Hardianto and Karmilasari [8], Silva et al. [19], Escanillan et al. [20] Scenarios in system design are indispensable in making system applications so that there is no mistake in coding programs and designing UI/UX according to the needs of system users. 3.3.1. Stroryboard design The following is an example of making a storyboard for immunization content on a web-based, holistic integrative monitoring application. Immunization scenarios based on the main tasks produced are five task scenarios, namely; 1) the task of recording immunizations, 2) the task of recording immunization schedules, 3) the task of viewing immunization schedule information, 4) the task of immunization activities, and 5) the task of viewing reports on immunization activities. Admin users (PAUD teachers) can make data changes for immunization activities, while parents can only view information on the schedule of immunization activities. All storyboard designs can be seen in Figure 3. After designing the conceptual model is complete, the next step for the researcher is to test the tasks that are included in designing the system application to be converted into a test scenario. Previously, researchers had obtained results from eight users who had been tested in a series of tests, then the users gave each interaction a score based on the task that had been carried out. In Table 2, you can get the ideal number=40 from the calculation of the number of tasks multiplied by the number of users according to formula (1). The value in the amount column is obtained from the total value of potential users per task. The test results based on the index value refer to the calculation formula (3). In the first task, there were 8 users with the index value=(30/40)𝑥100%=79%. The calculation results for the second task up to the task five are the same as the first task.
  • 5. Bulletin of Electr Eng & Inf ISSN: 2302-9285  UI/UX integrated holistic monitoring of PAUD using the TCSD method (Erly Krisnanik) 2277 (a) (b) Figure 2. The system user activity process flow, (a) flowchart diagram of the PAUD teacher (admin), (b) parent diagram activity
  • 6.  ISSN: 2302-9285 Bulletin of Electr Eng & Inf, Vol. 10, No. 4, August 2021 : 2273 – 2284 2278 (c) (d) Figure 2. The system user activity process flow, (c) activity diagram of a health expert, (d) the role of the user in the system (continue)
  • 7. Bulletin of Electr Eng & Inf ISSN: 2302-9285  UI/UX integrated holistic monitoring of PAUD using the TCSD method (Erly Krisnanik) 2279 (a) (b) (c) (d) (e) Figure 3. Stroryboard design; (a) the task of recording immunizations, (b) the task of recording immunization schedules (c) the task of viewing immunization schedule, (d) the task of immunization activities, (e) the task of reports Table 2. Total ideal value Task Number Candidat User Total Total Ideal Number Index Value 1 3 5 4 4 4 3 4 3 30 40 79% 2 3 5 4 5 4 4 4 4 33 40 83% 3 4 5 4 4 4 4 4 3 32 40 80% 4 3 3 4 5 4 4 4 4 31 40 78% 5 4 5 4 4 3 4 4 4 32 40 80% Total 158 200 Average 79% 3.3.2. Mockup design Based on the storyboard design, a UI/UX mockup design has been made that has been approved by the system user. Hussain et al. [21] UI design uses the Marvel application tools that can be designed online. The following UI/UX mockups can be seen starting from Figure 4 (a)-(e). Researchers did a UI redesign after getting feedback from the user. This design is carried out in order to get optimal results and tailored to user needs. The following is an image of the UI/UX design after improvements, see Figure 4. The researcher continues the next testing phase to get the optimal value from the user. It can be seen in Table 3 that the results of user satisfaction with the model design offered increased to 84.5% from the previous average value.
  • 8.  ISSN: 2302-9285 Bulletin of Electr Eng & Inf, Vol. 10, No. 4, August 2021 : 2273 – 2284 2280 (a) (b) (c) Figure 4. UI/UX model design for immunization content, (a) record immunization data, (b) record immunization schedule, (c) record immunization activities
  • 9. Bulletin of Electr Eng & Inf ISSN: 2302-9285  UI/UX integrated holistic monitoring of PAUD using the TCSD method (Erly Krisnanik) 2281 (d) (e) Figure 4. UI/UX model design for immunization content, (d) information schedule, (e) immunization report (continue) Table 3 Iteration test Table 2 No. Task Total Total Ideal index value 1 34 40 85% 2 33 40 83% 3 34 40 85% 4 33 40 83% 5 35 40 87,5% Total 169 200 Average 84,5% 3.4. Implementation UI/UX 3.4.1. Walkthrough evaluate After designing the scenario design, a UI/UX model design will be generated for a web-based child health monitoring information system in PAUD Kuntum Mekar, then a walkthrough evaluation will be
  • 10.  ISSN: 2302-9285 Bulletin of Electr Eng & Inf, Vol. 10, No. 4, August 2021 : 2273 – 2284 2282 carried out. Hussain et al. [21] , Klotins [22] all the design results as a scenario at this stage will be coded into the programming language using the hypertext prepocessor (PHP) script language and my structured query language (MySQL) database. Furthermore, the design evaluation is carried out whether it is in accordance with the needs of the task and the needs of the user [23]. All the design results as a scenario at this stage will be coded into the programming language using the PHP scripting language and the MySQL database. 3.4.2. Usability heuristics UI design testing uses usability heuristics to be able to observe user activities. Observation of user activity is carried out directly where the user and the researcher are at the same location at one time. This is done so that researchers get feedback from every activity undertaken by the user . Usability heuristic has 10 indicator variables that will be used as a tool to measure the UI that is designed. Nielsen [11], Filippi [24] Farzandipour et al. [25] indicators that are used as variables in the heuristic test can be seen in Table 4. Table 4. Heuristic usability indicators No Variabel Usability Heuristic Description 1 X1 Visibility of System Status 2 X2 Compatibility between the System and the Real World 3 X3 User Control and Freedom 4 X4 Standards and Consistency 5 X5 Help Users to Identify, Diagnose and Solve Problems 6 X6 Error Prevention 7 X7 There is an introduction 8 X8 Flexibility and Efficiency 9 X9 Minimalist Design and Aesthetics 10 X10 Help and Documentation Features After the task is made and tested, the overall assessment results of all integrated holistic monitoring application modules can be seen in Table 5. Based on Table 5, the average value index of the test results is 91%, it is means the users are satisfied with the final achievement. These results also indicate that the user has understood all the tasks used to design a web-based integrative holistic monitoring application system [26]-[28]. Table 5. The results assessment of heuristic usability indicators Variabel Usability Heuristic Description Total Ideal Value Index Value X1 Visibility of System Status 120 125 96% X2 Compatibility between the System and the Real World 135 150 90% X3 User Control and Freedom 140 150 93% X4 Standards and Consistency 110 125 88% X5 Help Users to Identify, Diagnose and Solve Problems 145 150 97% X6 Error Prevention 80 100 80% X7 There is an introduction 70 75 93% X8 Flexibility and Efficiency 90 100 90% X9 Minimalist Design and Aesthetics 115 125 92% X10 Help and Documentation Features 160 175 91% Total 1165 1275 Avarage 91% 4. CONCLUSION The conclusion of this study is that UI/UX design using the TCSD method for web-based applications can run on an intranet network or the internet. The development of this system is for easy data availability, easy data update management, user-friendly menus, and reporting. UI/UX design testing uses satisfaction with test results of 84.5%. This proves that the preparation of the designed tasks has answered user needs. The usability system test uses a usability heuristic by using ten indicators are used as measurement variables. The test result was 91%. Based on these conclusions, this study suggests are the development of mobile app-based applications can be continued so that parents can more easily monitor every activity carried out by the PAUD school. Besides, applications can be developed integrated with population data in Baros Serang District, Banten.
  • 11. Bulletin of Electr Eng & Inf ISSN: 2302-9285  UI/UX integrated holistic monitoring of PAUD using the TCSD method (Erly Krisnanik) 2283 ACKNOWLEDGEMENTS Thank God, finally this paper was completed on time. We would like to thank to Universitas Pembangunan Nasional Veteran Jakarta for providing research funding assistance and to the research team who have been united in completing the research series. We would like to thank PAUD Kuntum Mekar for being the object of our research. REFERENCES [1] A. Blair-Early and M. Zender, “User Interface Design Principles for Web Applications,” Aral Balk.-Confessions an internet junkie, vol. 24, no. 1, pp. 85-108, 2008. [2] M. Nikam, I. Gawali, V. Khollam, A. Lokhande, and J. Mante, “Online UI / UX Platform ( Crafter ),” Int. J. Sci. Res. Comput. Sci. Eng. Inf. Techno, vol. 7, no. 3, pp. 483–486, 2021. [3] H. S. JOO, “A Study on UI/UX and Understanding of Computer Major Students,” International journal of advanced smart convergence, vol. 6, no. 4, pp. 26-32, 2017, doi: 10.7236/IJASC.2017.6.4.4. [4] M. Indriana and M. L. Adzani, "UI/UX analysis & design for mobile e-commerce application prototype on Gramedia.com," 2017 4th International Conference on New Media Studies (CONMEDIA), 2017, pp. 170-173, doi: 10.1109/CONMEDIA.2017.8266051. [5] C. P. Putra, M. K. Sabrina, and S. Widowati, “Perancangan User Interface E-Commerce Neitzo Company menggunakan Metode Task Centered System Design (TCSD),” e-Proceeding Engineering, vol. 2, no. 3, p. 7790, 2015. [6] S. Greenberg, “Working Through Task-Centered System Design,” Diaper, D. Stanton, N. Handb. Task Anal. Human-Computer Interact., Chapter, vol. 2, pp. 49-66, 2004. [7] Y. Syahrul and D. H. Pertiwi, “Designing Mobile Based User Interface for Promotion of Lakeur Craft Art Application at Balaputra Dewa State Museum,” Journal of Physics: Conference Series, IOP Publishing, vol. 1500, no. 1, p. 012120, 2020. [8] Z. I. Paramarini Hardianto and Karmilasari, “Analysis and Design of User Interface and User Experience (UI / UX) E-Commerce Website PT Pentasada Andalan Kelola Using Task System Centered Design (TCSD) Method,” Proceedings of 2019 4th International Conference on Informatics and Computing, ICIC 2019. 2019. [9] R. Dermawi, H. Tolle, and I. Aknuranda, “Design and usability evaluation of communication board for deaf people with user-centered design approach,” Int. J. Interact. Mob. Technol., vol. 12, no. 2, pp. 197–206, 2018, doi: 10.3991/ijim.v12i2.8100. [10] M. Agarina, A. S. Karim, and S. Sutedi, “User-Centered Design Method in the Analysis of User Interface Design of the Department of Informatics System’s Website,” The 5 th International Conference on Information Technology and Bussiness, 2019, no. Icitb 2019, pp. 218–230. [11] J. Nielsen, “Finding usability problems through heuristic evaluation,” Conference on Human Factors in Computing Systems-Proceedings, pp. 373-380, June 1992, doi: 10.1145/142750.142834. [12] J. Nielsen, “Why You Only Need to Test with 5 Users,” Jakob Nielsens Alertbox, vol. 19, pp. 1-4, September 2000. [13] A. Joshi, M. Arora, L. Dai, K. Price, L. Vizer, and A. Sears, “Usability of a patient education and motivation tool using heuristic evaluation,” J. Med. Internet Res., vol. 11, no. 4, p. e47 2009, doi: 10.2196/jmir.1244. [14] S. R. Novensa and W. Munggana, “Analysis and Development of Interface Design on DKI Jakarta & Tangerang‘S Qlue Application based on Don Norman’s 6 Design Principles,” International Journal of New Media Technology (IJNMT), vol. 5, no. 1, pp. 1-7, 2018. [15] D. Shirole, W. Mishra, D. Dhar, “User Centered System Design for Indian Small Scale Industries : Case Study on Pottery Industry,” Ergonomics for Improved Productivity, pp. 353-364, 2021, doi: 10.1007/978-981-15-9054-2_40. [16] R. M. Ratwani, R. J. Fairbanks, A. Z. Hettinger, and N. C. Benda, “Electronic health record usability: Analysis of the user-centered design processes of eleven electronic health record vendors,” Journal of the American Medical Informatics Association, vol. 22, no. 6, pp. 1179-1182, November 2015, doi: 10.1093/jamia/ocv050. [17] B. Göransson, J. Gulliksen, and I. Boivie, “The usability design process - Integrating user-centered systems design in the software development process,” Softw. Process Improv. Pract., vol. 8, no. 2, pp. 111–131, 2003, doi: 10.1002/spip.174. [18] H. W. Alomari, V. Ramasamy, J. D. Kiper, and G. Potvin, “A User Interface (UI) and User eXperience (UX) evaluation framework for cyberlearning environments in computer science and software engineering education,” Heliyon, vol. 6, no. 5, p. e03917, May 2020, doi: 10.1016/j.heliyon.2020.e03917. [19] T. S. da Silva, M. S. Silveira, C. De O. Melo, and L. C. Parzianello, “Understanding the UX designer’s role within agile teams,” In International Conference of Design, User Experience, and Usability, Springer, Berlin, Heidelberg, pp. 599-609, 2013, doi: 10.1007/978-3-642-39229-0_64. [20] K. M. P. Escanillan-Galera and C. M. Vilela-Malabanan, “Evaluating on user experience and user interface (UX/UI) of Enertrapp a mobile web energy monitoring system,” Procedia Comput. Sci., vol. 161, pp. 1225–1232, 2019, doi: https://doi.org/10.1016/j.procs.2019.11.236. [21] J. Hussain et al., “Model-based adaptive user interface based on context and user experience evaluation,” Journal on Multimodal User Interfaces, vol. 12, no. 1, pp. 1-16, 2018, doi: 10.1007/s12193-018-0258-2. [22] E. Klotins, “Usability and user experience measurement model,” School of Computing Blekinge Institue of technology, 2011. [23] S. N. Harun, M. Y. Hamid, A. Talib, and Z. A. Rahim, “Usability evaluation’’: Criteria for quality architecture in- use,” Procedia Engineering, vol. 20, pp. 135-146, 2011, doi: 10.1016/j.proeng.2011.11.148.
  • 12.  ISSN: 2302-9285 Bulletin of Electr Eng & Inf, Vol. 10, No. 4, August 2021 : 2273 – 2284 2284 [24] S. Filippi, “PERSEL, a ready-to-use PERsonality-based user selection tool to maximize user experience redesign effectiveness,” Multimodal Technologies and Interaction, vol. 4, no. 2, pp. 1-20, 2020, doi: 10.3390/mti4020013. [25] M. Farzandipour, E. Nabovati, H. Tadayon, and M. S. Jabali, “Usability Evaluation of a Nursing Information System by Applying Cognitive Walkthrough Method,” International Journal of Medical Informatics, vol. 152, p. 104459, April 2021, doi: 10.1016/j.ijmedinf.2021.104459. [26] E. Kiliç Delice and Z. Güngör, “The usability analysis with heuristic evaluation and analytic hierarchy process,” Int. J. Ind. Ergon., vol. 39, no. 6, pp. 934–939, 2009. [27] M. Penha, W. Franklin, M. Correia, F. Ferreira, and C. Campos, “Heuristic Evaluation of Usability-a Case study with the Learning Management Systems (LMS) of IFPE,” Int. J. Humanit. Soc. Sci., vol. 4, no. 6, pp. 295–303, 2014. [28] S. Salve and G. Bhutkar, “Heuristic Evaluation of Online Documentation using Qualitative Indicators,” Int. J. Comput. Appl., vol. 36, no. July 2014, p. 10, 2011. doi: 10.5120/4524-6146. BIOGRAPHIES OF AUTHORS Erly Krisnanik, was born in Jakarta on September 8, 1974. Undergraduate computer education was taken at the Universitas Pembangunan Nasional Veteran Jakarta, in 1993 graduated in 1997. Then continued study at the Masters Program in Management Information Systems at the same university in 2006. Career development starting in 2004 was trusted to be the head of the laboratory, then in 2006 i became the head of the Informatics Management diploma study program. In 2014 i became the head of the Information Systems Department until now. In 2017- 2018, I received research grants from Direktorat Riset dan Pengabdian Masyarakat (DRPM) Dikti the results of the research were published in journals and proceedings as well as copyrights. The research work carried out is published in a Sinta 2 accredited national journal, Scopus indexed international proceedings, national level proceedings indexed google scholar. Tri Rahayu, was born in Jakarta on November 5, 1977. Undergraduate computer education was taken at Universitas Pembangunan Nasional Veteran Jakarta, in 1996 graduated in 2001. Then continued study at the Masters Program in Management Information Systems at the same university in 2006. Started working at the Development University Nasional Veteran Jakarta as a Laboratory Assistant, in 2002. My teaching experience is as an apprentice lecturer for Introduction to Information technology. In 2010-2016, I was trusted as the head of the new student admissions department.