Journal of Soft Computing Exploration Homepage: htps://shmpublisher.
com/index.
php/joscex p-ISSN: 2746-7686 e-ISSN: 2746-0991 Measuring the usability effectiveness of using card menus and tree menus in school web applications Hadiq1.
Solehatin2.
Djuniharto3.
Much Aziz Muslim4 1Information Technical.
Sekolah Tinggi Ilmu Komputer PGRI Banyuwangi.
Indonesia 2,3Informatics Management.
Sekolah Tinggi Ilmu Komputer PGRI Banyuwangi.
Indonesia 4Faculty Of Technology Management and Business.
Universiti Tun Hussein Onn Malaysia.
Malaysia
Article Info
ABSTRACT
Article history:
The aim of this research is to measure the usability effectiveness of a web application by using card menus and tree menus using user-friendly criteria and access speed as indicated by the number of clicks made by the user.
The method used in this research is the Task-centered User Interface method, where this method allows for planning and evaluating the arrangement of the interface according to user needs.
There are four stages in this method, including user identification by conducting needs analysis, the second phase is user interface design.
The third phase is the implementation of the card menu and tree menu design, and the fourth face is testing the usability and effectiveness requirements.
From the research that has been carried out regarding measuring the effectiveness of using card menus, it is more effective to use than tree menus because you can directly lift the menu and access it.
Meanwhile, for usability, the card menus have a higher usability index than the tree menus.
Meanwhile, for usability measurements carried out by direct observation and distributing questionnaires, the resulting percentage of user understanding, ease, and speed for the card menu display was 87% and for the tree menu was 60% so that the card menu display was more accepted by users than the tree menu.
The new thing provided by the results of this research is in the form of suggestions that can be used by web application developers to use the right type of menu in building web-based applications with the same specifications as in the case of school finance applications.
Received March 21, 2024 Revised March 22, 2024 Accepted March 22, 2024 Keywords:
Effectiveness Usability Card menu Tree menu This is an open access article under the CC BY-SA license.
Corresponding Author:
Solehatin Informatics Management.
Sekolah Tinggi Ilmu Komputer PGRI Banyuwangi.
Jalan Achmad Yani Nomor 80 Taman Baru Banyuwangi.
Jawa Timur.
Indonesia.
Email: atin33@yahoo.
https://doi.
org/10.
52465/joscex.
INTRODUCTION
The user interface (UI) and user experience (UX) are part of the system development stages to produce an interactive and attractive web-based application layout that it is easy for users to understand and use .
Ae .
In the 21st century, technology has becomepart of all humans in the world and will continue to develop in the future .
Creating an application is greatly influenced by user needs, so input and suggestions A SHM Publisher Hadiq et al.
/ J.
Soft Comput.
Explor.
Vol.
No.
Maret 2024: 67-73 from users are needed as the first step in designing a system.
Building an interaction design for a financial mathematical calculator using user-centered design methods .
, .
Creating UX is a challenge that exists before designing the user interface (UI), and in realizing the user interface, you must pay attention to the influence of aesthetics .
, .
Meanwhile, the results of the user interface structure that has been created require measuring its utility using the user interface and evaluating the user experience .
Ae.
When presenting an application display, an interface is needed that can provide convenience for the user so that it provides comfort in operating the application being used.
The presentation of the interface is an important point to get a positive impact from users in order to provide a good experience and trust in the level of user satisfaction with using the system.
To assess the success of implementing UX management, it is necessary first to understand what UX management actually is and how to measure or determine good UX management .
To obtain research data, a multiphase mixed method approach was carried out consisting of two interview studies and two action research studies.
with two different OEMs .
Ae.
A comprehensive user study conducted to compare the usability of Automated AUI with manual systems resulted in a much more positive user experience compared to manual systems.
Nowadays most of the services are offered through cloud environment, which are accessed remotely .
The EnerTrApp mobile web application is an application with a user interface that is designed and evaluated through usability testing to assess its effectiveness, efficiency, and user satisfaction .
Ae.
Different interaction modes and user interfaces have been developed to evaluate the most suitable and userfriendly interaction modes for operators.
Trials were conducted to assess the usability and potential of the application with satisfactory results .
From all the literature obtained by the researchers .
Ae.
, the research that will be carried out is a measurement of the effectiveness of usability in the use of school financial applications by presenting card menu and tree menu displays.
The researchers conducted effectiveness measurements by measuring the speed of menu use, both card menus and tree menus.
Meanwhile, usability is carried out by direct observation and distributing questionnaires to users, namely, school financial application operators.
The results of the research can provide information on which application display is better and more acceptable for users to use when using card menus or tree menus.
METHOD
The research process carried out by the researcher made research stages that were carried out sequentially in 4 .
phases, the stages were the first phase of needs analysis, the second phase of user interface design, the third phase of implementation and the fourth phase of testing, .
, .
The stages of the research phase can be seen in Figure 1.
From all the literature obtained by the researchers, the research that will be carried out is a measurement of the effectiveness of usability in the use of school financial applications by presenting card menu and tree menu displays.
The researchers conducted effectiveness measurements by measuring the speed of menu use, both card menus and tree menus.
Meanwhile, usability is carried out by direct observation and distributing questionnaires to users, namely, school financial application operators.
The results of the research can provide information on which application display is better and more acceptable for users to use when using card menus or tree menus.
Figure 1.
Research stages Needs Analysis Phase At the needs analysis stage, researchers obtained information from schools, especially about the needs needed for the school finance application that will be used.
The needs for the application include:
Hadiq et.
al/ J.
Soft Comput.
Explor.
Vol.
No.
Maret 2024: 67-73 Student Data The student data menu, consists of a data menu which is used to store student data, and an add menu, which is used to add student data.
Entry For input, it includes the SPP menu which is used to process and input student tuition payment data and other entry menus which are used to process and input BOS and donation data.
Expenditures Meanwhile, expenditure is a menu used to process and input expenditure data.
Reports The report menu consists of the SPP menu which is used to create reports linked to SPPS and the financial menu which is used to create financial reports.
User Interface Design Phase The user interface design stage is to design a display for the school financial application using menu cards and tree menus.
Where both models will be created in 1 .
application which will later be used for The model of card menu display is in Figure 2 and the tree menu is shown in Figure 3.
Figure 3.
Menu cards Figure 4.
Tree menu The menu card presents menus in blocks, grouped according to application needs, and takes up a lot of space on the application display.
By presenting menu cards, users can directly use the menu they need with one click.
Meanwhile, the presentation of the tree menu is arranged as a tree according to its groups and does not take up much space on the application display.
To access the menu tree, the user must click on the menu at least more than once.
Implementation Phase At the implementation stage, the researcher presented the user interface design for the school finance application by presenting a menu card and a tree menu in one application.
Where the application will later be used for testing on users.
The results of the card menu and the tree menu design display in the resulting school finance application can be seen in Figure 4.
Hadiq et al.
/ J.
Soft Comput.
Explor.
Vol.
No.
Maret 2024: 67-73 Figure 4.
Display of card menu and tree menu Trial Phase Meanwhile, for the final phase, a trial was carried out with the objective of measuring the level of usability and effectiveness of the use of school financial applications with card menu and tree menu displays.
The usability tests were carried out by researchers by direct observation of school financial application users or school financial operators.
Observations were carried out in 3 .
primary level schools, both elementary and middle school, in the Banyuwangi area.
The researcher measured effectiveness by looking at the speed of access to the presentation of menu cards and tree menus in the school finance application.
The access speed can be seen from the number of clicks required to enter the menu.
For usability, this was done by observing school financial application operators when using the application and then distributing a questionnaire.
The questionnaire was distributed to determine the operator's understanding, ease, and speed in using the application for menu cards and menu trees.
The questionnaire questions given include questions for displays with menu cards and questions for tree menus.
The questionnaire questions include the following:
Questions for menu cards .
Is the menu card a menu that is easy for users to understand? .
The card menu is a menu that is easy to use to access the intended web page? .
The card menu that is is a quick menu used to access the target web page? .
Questions for the tree menu .
The tree menu is a menu that is easy for users to understand? .
The tree menu is a menu that is easy to use to access the targeted web page? .
The tree menu is a quick menu used to access the targeted web page? Measuring the effectiveness results carried out by researchers on the use of school financial applications, the researchers concluded that card menus are more effective for use in school financial applications than tree menus because the lift menu can be accessed directly by counting the number of clicks For card men, you only need 1 .
click to go to the desired lift menu.
Meanwhile, in the tree menu, clicks are made more than 1 .
click, even more to lift the target menu.
The measurement of usability was carried out by analyzing data obtained when conducting direct observations of the use of school financial applications and distributing questionnaires to operators to determine responses to the use of school financial applications.
From the data obtained, the percentage of usability measurements can be calculated.
From the data from the existing questionnaire, data analysis was carried out using a Likert scale with the percentage determination and weight value for each question that was assessed.
The weight value table is shown at 1 and for the percentage Table at table 2.
Table 1.
Value weights Answer Strongly agree Value Hadiq et.
al/ J.
Soft Comput.
Explor.
Vol.
No.
Maret 2024: 67-73 Agree Enough Disagree Don't agree Table 2.
Percentage of values Answer
80% - 100%
60% - 79.
40% - 59.
20% - 39.
0% - 19.
Information Strongly agree Agree Enough Disagree Don't agree To calculate the percentage measurement, the equation formula is as follows:
P = (F/N)*100
Information:
P = Percentage (%) F = Frequency to be searched for N = Number of respondents RESULTS AND DISCUSSIONS In the research process carried out, the researcher carried out the stages specified in the methodology chapter by following 4 .
stages to measure the effectiveness and usefulness of the card menu and tree menu displays in the school finance application.
From the data obtained after conducting needs analysis, design, implementation and trials, researchers produced data from the results of trials and direct observations with 3 .
schools and 2 .
financial operators each who were used as respondents.
From the 3 .
questions on each card menu and the tree menu display of 6 .
respondents, the following calculations were produced:
Calculation of the Questionnaire Regarding The Display The Menu Card From the questionnaire filling data .
umber of responses / N) obtained for each question, it is then converted to a number on a Likert scale and then multiplied by the value weight which produces a score (F).
After the score (F) is obtained from each question, look for the average score for the questionnaire questions on the menu card.
The results of the calculation of the questionnaire for the menu card are in Table 3.
Table 3 Questionnaire calculation of the menu card display
Number
Question
Number of Respondents (N) Likert
Scale
Score
(F)
Percentage Average Is the menu card a menu that is easy for users to The card menu is a menu that is easy to use to access the intended web page? The card menu that is is a quick menu used to access the target web page? Calculation of the Questionnaire Regarding The Display of The Tree Menu For the tree menu, the same calculation is also carried out, namely by recording the questionnaire filling .
umber of responses / N) obtained for each question, then converting it to a number on a Likert scale, then multiplying it by the value weight which produces a score (F).
After the score (F) is obtained from each question, look for the average score for the questionnaire questions on the menu card.
The results of the calculation of the questionnaire for the menu card are in Table 4.
Hadiq et al.
/ J.
Soft Comput.
Explor.
Vol.
No.
Maret 2024: 67-73 Table 4.
Questionnaire calculations for the tree menu display
Number
Question
Is the menu tree a menu that is easy for users to Tree menu is a menu that is easy to use to access
the intended web
The tree menu is a quick menu used to access the targeted web
Number of Respondents (N) Likert
Scale
Score
(F)
Percentage Average So, with the data produced, the research that has been carried out regarding measuring the effectiveness of using card menus is more effective to use than tree menus because you can directly lift the menu and access Meanwhile, for usability, the card menus have a higher usability index than the tree menus.
Meanwhile, for measuring usability, which was carried out by direct observation and distributing questionnaires, the resulting percentage of user understanding, ease and speed for the card menu display was 87% and for the tree menu was 60% so that the card menu display was more accepted by users than the tree menu.
CONCLUSION
The research has been carried out following the stages of the research method, and measurements have been carried out and produced data that are presented to the reader.
The research results related to measuring the effectiveness of using card menus are more effective than tree menus because you can directly lift the menu and access them.
Meanwhile, for usability, the card menus have a higher usability index than the tree menus.
Meanwhile, for measuring usability, which was carried out by direct observation and distributing questionnaires, the resulting percentage of user understanding, ease and speed for the card menu display was 87% and for the tree menu was 60% so that the card menu display was more accepted by users than the tree
REFERENCES