Analysis of Web-based Learning Interface Design based on Experts’ Verification for Higher Education

Recently, the Web-based learning (WBL) platform, particularly for higher education, has become more crucial due to the Covid-19 pandemic. Thus, due to the increased use of WBL in higher education, an effective WBL interface design for higher education is truly important in order to attract students to use WBL and to further keep them engaged during learning via the Webbased platform. Therefore, the aim of this study was to determine the aesthetics of web interfaces based on experts’ opinions. This study adopted a quantitative research approach involving a data-gathering survey. Fifteen (15) WBL interfaces were designed based on nine (9) design principles which were balance, proportion, simplicity, alignment, movement, hierarchy, consistency, contrast, and proximity. The results of this study discovered that nine (9) WBL interfaces were determined by the experts as aesthetic interfaces, five (5) WBL interfaces as non-aesthetic and 1 (one) WBL interface was considered neither aesthetic nor non-aesthetic. This finding revealed that six (6) out of nine (9) interfaces had the balance design principle. However, balance was also in most non-aesthetic interfaces. A possible reason that balance was the most design principle in both the aesthetic and the non-aesthetic interfaces is that when designing WBL interfaces, there is a need to consider the combination of the design principles as a whole, and not count the design principles individually. In conclusion, this study's findings could contribute to the knowledge in the Human Computer Interaction domain, specifically in the interface design area. Keywords— Human computer interaction; web design; aesthetics interface; web-based learning; higher education. Manuscript received 30 Sep. 2020; revised 27 Jan. 2021; accepted 14 Mar. 2021. Date of publication 30 Jun. 2021. International Journal on Informatics Visualization is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.


I. INTRODUCTION
Aesthetics is defined variously as beauty in appearance [1], visual appeal [2], an attitude [3] and a response or a judgement [4]. For the purpose of this study, aesthetics is referred to as aesthetic appeal and it is the combined effect produced by a combination of design principles organized according to certain design principles to produce a single, unified design. Aesthetics is an important element that enables to influence people's attraction. However, designing aesthetic web interfaces is extremely challenging. This is due to the fast technology growth of Web-based learning interfaces, in which design is one key factor that drives researchers and designers to integrate technology into the key elements of Web interfaces.
On the other hand, numerous terms are used to refer to Web-based learning (WBL) including Web-based instruction (WBI), Internet-based training (IBT), Web-based training (WBT), distributed learning (DL), advanced distributed learning (ADL) and online learning (OL) [5]. Web-based learning (WBL) refers to the process of learning that happens online [6]. In addition, according to [7], WBL is often called online learning or e-learning because it includes online course content. The advancement in the computer system and the availability of Internet connection further helps the use of online learning. According to [8] in 2013, about 39% of the world population was online and 750 million households were connected to the Internet. Whatever the distance, economic scale, and consistent message, WBL can assist in learning [9]. Furthermore, WBL also encourages individualised learning, flexible scheduling, and new teaching methods. Web-based learning is also simply updated and there is limitless resource to update it from. Thus, due to the importance of the aesthetics in web interface design and the increased use of WBL, this study aimed to determine the aesthetic interfaces of the WBL application for higher education.
On the other hand, interface design is linked to interaction design as both interact to see interaction between interfaces and is part of the system development process [10]. Digital information is an important area for the application of design interfaces. According to [11] user interface "means user interact with content to accomplish some goal" (p.89). He explains that an interface is the intermediary between the user and the content, where the content is adapted to what the user demands.
Furthermore, the design of the interactions becomes one area of Human Computer Interactions (HCI) by studying human interactions with any technology or product [12]. Interaction design is a phase that uses the user's experience in the design of the product interface. Therefore, it is a process in which they have to define whether the product is easy to tell or to use and avoid ambiguity. Interface design is an important stage in system development as it offers important interactions based on the user's experience.
One of the important aspects of the learning activity via a Web platform is the aesthetics of an application interface. The use of visual aesthetics in the presentation of the system is important because learning can be improved if attention is paid to how the material to be learned is presented and how students are required to communicate and interpret the material [13]. In addition, the visual organisation (structure) and the visual appeal of the interface draw the students to the content of the learning modules and encourage them to further explore the learning materials.
However, the aesthetics of Web interfaces is very subjective and depends on the person evaluating it is because different people have different views [14]. One of the approaches to measure the aestheticism of web interfaces is by evaluating the design principles. According to [15] design principles are tools that are applied to the design elements to bring them together and it can be the deciding factor whether the design is successful or not. In a paper [16] cited [17] that declared design elements as the base unit in constructing visual design and the design principal help make the visual more agreeable and interesting to look at [16]. [17] considered repetition, alternation, harmony, gradation, contrast, dominance, unity, and balance as design principles. In addition, there are also other design principles to be identified, for example the Gestalt design principle such as figure and ground, similarity, proximity or contiguity, continuity, closure, area, and symmetry [16].
A number of research had been done on measuring aesthetic interfaces based on design principals. [12] proposed 14 design principles to achieve the best design for a computer system [18], [19]. Those principles are balance, equilibrium, symmetry, sequence, cohesion, unity, proportion, simplicity, density, regularity, economy, homogeneity, rhythm, as well as order and complexity. [12] stated the combination of these principles are important in attracting users' attention and influencing their perceptions on the usability of the web page.
Another study by [20] investigated the relationship between user preferences for the aesthetic design of interfaces, based on six design principles defined by [18] which were cohesion, economy, regularity, sequence, symmetry, and unity. They found that an interface was most preferred when it corresponded to a medium level of layout aesthetics. It was also found that the layout principles of symmetry and cohesion were more influential than the other layout principles.
Furthermore, a study by [21] measured aesthetics in a product design. This study focused on the principles of contrast, proportion, and pureness for defining beauty and novelty and appropriateness for attractiveness. This study found that the participants were more interested in images with better proportion while maintaining certain contrast.
Previous studies revealed that there are many design principles that contribute to the aesthetics of interfaces. However, the previous studies did not specifically determine the most important design principal combination in order to construct a pleasant web interface. Therefore, this study aimed to determine the aesthetic interfaces based on the combination of the design principles of the WBL application for higher education.
The paper is organized as follows. Section II explains the research methodology and is followed by Section III with the results and discussion. Finally, the conclusion of this paper is in Section IV.

II. MATERIAL AND METHOD
This study considered three (3) pages of learning to be presented to the participants. Those pages were Homepage, Introduction page, and Learning page. Each interface applied three (3) combinations of design principles as illustrated in Table 1. The nine (9) design principles applied in this study were balance, proportion, simplicity, alignment, movement, hierarchy, consistency, contrast, and proximity. These combinations of design principles produced 15 interfaces that were to be selected by the participants (the experts) as aesthetic or non-aesthetic interfaces.
This study adopted the survey approach to collect experts' opinions for the web-based interface design. An online survey, which used the Google form was carried out to gather the data from the experts. In the following subsections, the participants in the study and the measurement are explained.

A. Participants
This study involved 32 experts, who were involved in system design and development such as web designer, web developer, mobile application designer and others, as the participants. All the participants had been working for 1 to 20 years. The participants consisted of 14 females and 18 males. The range of the participants' ages was from 31 to 50 years. The participants were required to determine the aesthetic and non-aesthetic design for 15 design interfaces.

B. Measures
The aesthetics of the web interfaces design were measured based on participants' (experts') selection. 15 interfaces that represented three (3) types of interfaces which were Homepage (four interfaces), Introduction page (five interfaces) and Learning page (five interfaces) were presented to the participants. Each page applied three criteria as illustrated in Table 1. Design principles used in this study are from the literature review conducted at the beginning of the study [22], [23], [24], [25]. The design principles were gathered based on the most used design principles in the interface design. The combination of the design principles for each interface was chosen to obtain the most aesthetic design. Each interface was subjectively selected as aesthetic by the experts through an online survey. The method of interface selection was adopted from a study by Lee and [26] and [27]. The nine (9) principles used were balance, proximity, contrast, alignment, proportion, consistency, movement, hierarchy, and simplicity which were randomly combined for each interface. This was done to avoid bias and to ensure each combination got the best chance to be an aesthetic interface. The principle of balance is among the Gestalt principles that propose good design [28]. This is the reason why it is used in this design among other design principles and also as the main design principle in almost all combinations.

III.
RESULTS AND DISCUSSION Table 2 represents the results of the aesthetic and the nonaesthetic web interfaces based on the experts' selection for web-based learning. As presented in Table 2, the nine (9) web interface designs selected by the experts as aesthetic interfaces were Design 1, Design 2, Design 5, Design 6, Design 7, Design 8, Design 10, Design 12 and Design 13. These aesthetic interfaces were based on more than 50% participants' ratings. The highest rating for the aesthetic interface was 87.5%, which was for Design 1 (Homepage) and the lowest rating of 53.1% was for Design 10 (Learning page Meanwhile, the five (5) non-aesthetic design interfaces were Design 3, Design 4, Design 11, Design 14 and Design 15. The non-aesthetic interfaces were based on more than 50% participants' ratings as well. According to the experts' selections, Design 4 (Homepage) was rated as the highest value which was 81.3%. This may be because the web view of the alignments for the left-hand side content should be in the left align or the content should cover the whole left-hand side to avoid empty spaces. This kind of design looked too crowded, messy and a bit complicated. In addition, the many buttons site at this homepage could make the participants confused. On the other hand, Design 15 (Learning page) was rated as the least non-aesthetic interface, with 53.1%. Overall, Design 3, Design 4, Design 11, Design 14 and Design 15 were not suitable to be used in web-based learning interfaces. On the other hand, Design 9 was considered neither aesthetic nor non-aesthetic due the equal number of votes from the participants at 50%.
It can be seen that most of the aesthetic interfaces contained the balance design principle in their designs; six (6) out of nine (9) interfaces contained the balance design principle. They were followed by simplicity (5 out 9 interfaces), proportion, alignment, proximity, movement, hierarchy, consistency, and contrast, respectively. Thus, it could be suggested that the balance design principle is the most important design principle to design aesthetic interfaces for web-based learning applications.
In addition, balance was also contained in four (4) out of five (5) interfaces of the non-aesthetic interfaces. A possible reason for balance becoming the design principle that appeared the most in both the aesthetic and the non-aesthetic interfaces is that, in order to create an aesthetic interface, the combination of the design principles must be looked at as a whole and not evaluated as individual design principles. In other words, a combination of several design principles forms an interface, not only one design principle.

IV. CONCLUSION
In summary, the aim of this study was to classify the aesthetic and the non-aesthetic web learning interfaces designs based on the subjective selection of the experiences of experts. The survey was carried out to collect designlearning interfaces data through respondents' preferences by using the Google form as the survey medium. The interfaces were constructed from nine (9) design principles, which were balance, proportion, simplicity, alignment, movement, hierarchy, consistency, simplicity, contrast, and proximity. This study involved 32 experts from the design system with development background as the test subjects. This study found that nine (9) web interfaces design were selected by the experts as aesthetic interfaces, which were Design 1, Design 2, Design 5, Design 6, Design 7, Design 8, Design 10, Design 12 and Design 13. The five (5)