An Empirical Study of e-Learning Interface Design Elements for Generation Z

E-learning is the latest evolution of electronicbased learning that creates, fosters, delivers and facilitates the learning process anytime and anywhere with the use of interactive network technology. The use of e-learning as a learning platform makes users want a high quality of interface design to interact with the e-learning system. Interface design that meets students’ needs and expectations may increase their involvement and satisfaction towards e-learning, especially generation Z students. However, interface design is always being criticized and has become a part of issues that cause the failure of e-learning. Lack of understanding about students’ cultural background and preferences towards e-learning interface design are the major factors that contribute to this phenomenon. To ensure the success of e-learning, a model of interface design specifically for generation Z students’ culture that consists of interface elements and design characteristics need to be developed. So, this study aimed to address this subject by identifying e-learning interface elements and design characteristics from existing literature, confirming the elements and design characteristics and discovering related elements for elearning interface design from generation Z students’ perspective. This study used semi-structured for a focus group interview that included seven students. The focus group interview involved three main steps which were sampling, protocol and research instruments. This study validated several interface elements and design characteristics that contribute to the model of e-learning interface design. The findings could guide the interface designer in designing e-learning interface for generation Z students. Keywords—e-Learning; interface design; generation Z; culture; focus group


I. INTRODUCTION
The education system in Malaysia has undergone many changes as information and communication technology (ICT) is widely used in educational institutions consistent with the modernization of the globalization era. The development of ICT affects the education system where learning in the classroom is integrated with electronic learning or e-learning as an effective teaching and learning method [1] [2]. The integration of e-learning has opened up the opportunities for an active communication between lecturers and students especially generation Z students who dominate educational institutions and known as a generation of technology literate or digital natives [3] [4].
Generation Z students were born between 1995 and 2010 [5][6]. Generation Z has been shaped by technological advanced since they were born and known a world with internet and mobile devices. Technology has become their nature as they always stay connected to social media such as Facebook, Twitter, YouTube and WhatsApp as part of their interaction and learning [6]. It becomes their culture as they always depend on technology in their daily life. Therefore, generation Z students should enjoy e-learning as a learning platform because they can learn and stay connected with their friends at the same time without disengaged from technology and social media. In addition, generation Z students love to do something fast because they want to get information and answers immediately from various sources, even from unreliable sources [7]. However, their involvement and engagement towards e-learning are still low and unsatisfying [9] [11]. Besides, the rate of drop out courses in e-learning is higher than classroom learning despite the growing popularity of e-learning [8][12] [13]. One of the reasons for low student involvement towards e-learning is due to poor e-learning interface design [10][8] [14] [15]. For example, users are not familiar with the design features would have a tendency to disconnect with learning experience because interface designers had failed to develop engaging e-learning environment [16]. Previous studies discovered that adapting culture into interface design could improve the look and feel of the e-learning system [17] [18].
Previous researchers have studied cultural differences in interface design to determine how culture can affect the interface design [19][20] [21]. For example, the minimalist interface design of Google is accepted in most Western countries but has failed to attract users in South Korea (SK) where Google is far behind the local search engine Naver.com [22] [23]. Google failed to understand users need in SK with the minimalist concept because the interface design of Naver.com is more complex and colourful with interesting animations, images, links to other web pages and more features on the main page [22] [23]. Complex interface design is common features on SK web pages, but in Western countries, users find it hard to accept the complexity of interface design. Interface designed with appropriate culture looks more attractive and functional to the targeted users. However, many developers usually develop interface design based on the culture of the country and not individual [24] [25], in addition, less prescriptive about interface design elements in the existing models.
Less attention to the importance of interface elements and design characteristics complicate the process of developing cultural interface design [26][27] [28]. Hofstede's cultural model is commonly used to explain culture based on six www.ijacsa.thesai.org dimensions which are power distance (PDI), masculine (MAS), individualistic (IDV), uncertainty avoidance (UAI), long term orientation (LTO) and indulgence (IVR). Hofstede has conducted research on more than 60 countries, including Malaysia. The result of Hofstede study in Malaysia shows that PDI scores highest compared to other dimensions and highest in the world compared to other countries [29] [30]. Various interface developers refer to the result of Hofstede's study [29] whereby interface design is more highlighted on PDI dimension. Examples of high PDI in the interface design are using the corporate colour of institutions, the image of leaders, organization charts that show hierarchy and special titles in the interface design.
The emergence of a new generation causes cultural interface design needs to be revised constantly in order to make sure the interface meets the users' preferences. To refer the result of Hofstede study in Malaysia in designing the interface for the new generation is questionable whether or not the result is still valid. This is because the Hofstede study was more than 40 years ago and obsolete. Thus, this paper aims to address the issue of e-learning interface design based on generation Z students' preferences and needs by identifying and collating the interface elements and design characteristics from theoretical and empirical perspectives. Interface elements such as colour, graphics and typography are known as cultural markers. Each marker has its own design characteristics which would suit the needs of generation Z students [31][19] [32]. These identified elements or cultural markers and design characteristics of the interface can help developers to develop e-learning system in the future. Besides, there are several limitations in this study, such as noncomparative study because it focuses on e-learning interface design for generation Z only. This study also focused on a few interface elements only such as colour, graphic, layout and navigation. It is because of the limitation of past research about the other elements. Moreover, the existing interface design model fewer details in describing the design characteristics of each element. This paper is organized as follow. Section II presents interface elements and design characteristics that were obtained from the literature. Section III presents the methodology used in the empirical study, particularly the focus group interview. Section IV presents the results from the focus group interview, and Section V concludes the paper by summarising the whole paper and future work.

A. Cultural Markers of Interface Design
Interface element is a key factor in bridging the gap between users and the system [21]. Cultural adaptation in interface design is important where interface elements carry a different meaning for different cultures [10] [21]. There are many interface elements, and it is impossible to put all of them in the e-learning interface. Past research on e-learning interface design is insufficient to determine the elements that usually used in e-learning interface design. Therefore, past researches on various interface design such as in educational and banking websites are carefully studied in order to determine commonly used interface elements and to provide clear functionality to generation Z students. Table I show frequently used elements of interface design in past researches. Table I shows several interface elements that are categorized to form one element. The main reason for classification is because they have the same functionality. For example, image, symbol, logo and metaphor element are classified as graphical elements because they can function as a visual element and make interface design more attractive and easy to understand [53] [34]. Structure, information organization [46][54] and appearance [50][51] [55] are categorized as layout elements because their definition about the arrangement of elements and information such as the position of the navigation bar, symbol, logo, date & time and image are same with the definition of the layout. Meanwhile, link element usually in text, button or graphic are used to navigate from page to page so link is classified under navigation element. Typography is textual style of appearance including the arrangement of written language to make the text readable and appealing [38] [56]. Past researchers classify font types and writing direction as part of the language, which is also typography features, including size and textual distance [51] [56]. Therefore, the language element is categorized with typography element. In addition, language can be recognized easily, directly accessible and less defined in cultural context [38] [51]. Table I also shows the frequency of use for interface elements in previous studies. Five elements that always been used in interface are colour, graphic, navigation, layout and typography are proposed as generation Z students' preferences for e-learning interface design. The following is a brief description of how these elements or cultural markers interpreted in various cultures.
Colour is a crucial design element that provides a visual representation of interaction [21]. The right colour combination can highlight the interface design layout, facilitate the discrimination of screen components, highlight the differences and can make the interface design more attractive. Furthermore, colours can be used to communicate specific meaning in different cultures, whereby they use relevant colours in their interface design [57]. Colour can affect users' expectation, and influence user's perceived towards navigation, link or content of interface design [57] [25]. This is because colour can give a different meaning to users from different cultures. For example, red colour is said to bring luck and happiness in China, but in Japan red is considered a colour of anger and symbolizes danger in United State (US) [21] [25].
Graphical elements are always used in interface design. There are several elements categorized as graphical elements such as image, icon, symbol and logo. Graphical elements can help students to understand the content without reading text. Cultural differences cause users to interpret graphics from different perspectives [57]. The system may receive more attention if interface design uses culturally appropriate images [58]. For example, images of high ranking people from institutions' management on web pages were interpreted as fraud by students from Western countries but appreciated in Eastern countries [53]. www.ijacsa.thesai.org
Good navigation allows smooth movement in handling task and exploring e-learning [59] while poorly developed navigation would cause the student trapped and move into the same space [60]. This cause student to take longer time and feel frustrated to continue using e-learning. A research conducted by [24] shows that many Germany websites offered flexible paths for navigation while in Vietnam navigation paths are less flexible. Besides, several cultures use text as links to other pages instead of images or icons as links [21]. Generally, smooth navigation needs to be well designed with navigational aid such as arrows, icons or buttons for users to understand and use it.
Past researches show that every culture has different preferences for interface design. Culture coordination on interface design is based on cultural dimensions in order to understand the design characteristics of each interface elements. In this study, the Hofstede cultural model is referred to adapt culture into interface design.

B. The Relationship between Hofstede Cultural Dimensions and Elements of Interface Design in Malaysia
Hofstede cultural model is popular among researchers because it is more comprehensive than other cultural models [61][19] [57]. Hofstede studied culture involving more than 60 countries, including Malaysia. The result of Hofstede study is shown in Fig. 1.
According to the past researchers, Malaysia has the highest score of PDI compared to other countries [29][30] whereby a perfect score is obtained from this study. As a result, interface design is more prominent with PDI features compared to the other dimensions [29]. For example, the website of National University of Malaysia (UKM) uses national colours and focus on university expertise and ranking top 150 universities in the world [62]. Table II shows relations between Hofstede cultural dimensions and interface design characteristics in Malaysia based on previous researches.  [25] including in Malaysia. Hofstede study in Malaysia happened more than 40 years ago, and users' preferences towards elearning interface design had also changed. Thus, the interface element and design characteristics would be verified among generation Z students in the empirical study.  [18], [63], [64], [54], [41], [69]  Complete information about the board of directors and institutional management in an organizational chart.
 Special titles must be displayed.
 Displaying awards, hierarchical information and people with rank or authority are key features in the media.
 Use white or black colour as the background to focus on the name and image of the institution.
 Use the official colour of the institution.
 Highly structured information.
High IDV  Information provided on the website is complete and usable. [64] Low IDV (Collective)  Use group images. [41], [48], [49]  Using many different colours (colourful).  Provide a solution for the error message.
Low UAI  Complex menu with various paths and need to scroll.
 A large amount of information is placed on the first or main page.
 Using animation through text movement.
 Using a text link to the main page from any pages.
 Provide feedback on user location.

III. METHOD
The empirical study began with a qualitative method by conducting a focus group interview among generation Z students. The main purpose of the focus group interview was to verify the identified interface design elements that were derived from the literature as well as discovering other interface elements. Besides, the focus group interview was also aimed to find out about design characteristics preferred by generation Z students which would be used later in the survey. There were several steps taken into consideration before the focus group interview.

A. Sampling
The selection of focus group informants was based on several criteria, such as whether they had prior experience in using e-learning and undergraduate student who study in UKM besides being born in 1995 and above. Therefore, purposive sampling technique was adopted. Seven informants who had actively experience in e-learning from various faculties were invited to participate in this focus group. The profiles of seven informants are shown in Table III. Based on Table III, all informants who joined the focus group interview were second-year students. They were selected because they have more experience using e-learning compared to the first-year student who is still new to elearning. The selection of informants from various faculties was to gather opinions from different perspectives and not focussed on one faculty only.

B. Instrument
Interview questions were used as the instrument for the focus group interview. To ensure the suitability of the questions, all questions drafted were reviewed by two experts. Both experts were academicians and had experience in elearning and interface design. The questions were divided into two parts, A and B. Part A covers about informants' experience and difficulty while handling e-learning. A semistructured interview was conducted in this study; thus, extended questions were asked based on informant's answer in order to understand clearly what has been discussed. Part B revolves around five proposed interface elements from literature which are colour, graphic, typography, layout and navigation. Every informant had to give their opinion about each interface element in order to find out about design characteristics preferred by generation Z students. Table IV summarised and described five elements of the interface that were included in interview questions.

C. Protocol
A protocol is the rules provided to conduct a session of focus group interview in a more organized manner. Before the interview session, informants were asked via the online instant messaging application (WhatsApp) about the date and time that suits with all of the participants. A week before the focus group interview, the invitation letter containing a brief description of interview objectives, date, time and venue were sent to each informant. The focus group interview session was recorded. Before starting the interview, informants were given a few minutes to read and understand the consent letter before signing it. Generally, the consent letter was about the www.ijacsa.thesai.org confidentiality of the information was given during the interview that indicates the name of the informants would not be revealed if the report is made public.

Colour
To verify whether colours are important for generation Z students in e-learning and colour combinations to improve elearning interface design.

Graphic
To confirm the types of graphic that should be included and its position in e-learning interface design.

Typography
To identify the types of font to use as heading and common text and font size.

Layout
To validate the position of each element that is preferred by generation Z students to make captivating e-learning interface design.

Navigation
To affirm whether navigation could affect generation Z students while navigating e-learning and links in the form of text, icon or button.

IV. RESULT AND DISCUSSION
The results from the focus group interview are presented in the following section. The design characteristics pertaining to respective elements are shown in bold.

A. Colour
Past researchers stated that colour is important in elearning interface design in order to make it look interactive. All informants agreed that colour should be given extra attention in e-learning interface design. Informants also suggested a colour combination that should be used in elearning interface design. Below are some of the comments from informants:  -Interface design looks more attractive if the combination of striking and pastel colour that suitable for both male and female are used in e-learning.‖ -Inf_1.
 -Use more than one colour and combine with animated icons would look more attractive, and background colour must be consistent on each page to look formal.‖ -Inf_3.
 -Use colour corporate of the university as theme colour on e-learning interface design to make e-learning more professional looking and must be consistent on every pages‖ -Inf_4.
 -The background colour on each page should be different. No need to be consistent with one colour only. It is easier for the students to remember the position of the information on each page based on different colours‖-Inf_5.
Based on the comments, there were several characteristics of colour that were pointed out by informants such as a combination of striking and pastel colours, use more than one colour, corporate colour, background colour and consistency of colour background. There was disagreement among informants about the consistency of background colour. Based on the design principle, interface design should be consistent, including the background colour. Besides, an informant suggested to use the corporate colour of the university as a sign of professionalism and to show that e-learning belongs to a respective university. However, other informants disagreed with the suggestion because of the limited choice of colour regarding the university's corporate colour. This is because more colours on interface design would make e-learning more attractive and engaging to the students. Thus, contradict answers between informants would be asked in another empirical study that employs a questionnaire to find out the appropriate interface design of e-learning for generation Z students.

B. Graphic
The graphic is the main element in e-learning interface design. Informants agreed that graphic element was important to the e-learning users. Past researchers stated that users in Malaysia prefer the image of leaders or historical building in the interface design. However, generation Z students have different opinions about the types of images used in elearning. Below are some comments from informants:  -Use many images or change the image in e-learning frequently. Do not use the same image. If the image is always changing, interface design looks more attractive‖ -Inf_6.
 -Images that can inspire students are more appropriate to display in e-learning. For example, the image of students studying or graduating as a motivation for students to complete their studies‖ -Inf_5.
 -Image of successful university's alumni with encouragement words as motivation to students‖ -Inf_2.
 -No need to use a complicated image. Just use inspirational words as an image to inspire students who are using e-learning‖ -Inf_7.
 -Encouragement words were spoken by high ranking university members. For example, the Vice Chancellor's recent speech was full of motivational words, and this can inspire students to succeed. Therefore, a graphic that contains the image of people who deliver the speech along with motivational words should be placed in e-learning‖ -Inf_4.
 -Use graphic that can motivate students not only related to learning but related to university and students‖ -Inf_1.
Based on the comments, informants suggested changing the images frequently to avoid students from feeling boring with the same images and use motivational words as images to encourage students in their learning. Besides, majority informants suggested using graphics that are related to students. This is because the majority students are using elearning so it should be student-oriented. However, an informant suggested using the image of a high ranking person in the university. So, this issue would be addressed through a large scale questionnaire. The informants also informed a few types of graphics that should be avoided used in e-learning www.ijacsa.thesai.org because it can distract the students from using the e-learning. The feedback obtained from the informants are:  -Blurred graphic is not suitable in e-learning because it is hard to understand those graphics‖ -Inf_3.
 -Graphics that have no motive or have an implicit meaning can make the students feel distracted while using e-learning. Not everyone can understand the message of these graphics is trying to convey. Therefore, graphic with clear meaning must be used in e-learning‖ -Inf_5 & Inf_6.
 -Do not use complicated graphic because students would misunderstand the graphic as for advertisement‖ -Inf_2 & Inf_7.
Furthermore, all informants agreed that institutional logo must be placed in e-learning because it symbolizes the identity of the institution. Below are some comments about the logo in the e-learning interface design:  -The use of the university logo in e-learning is a must. This is because the logo symbolizes the institution‖ -Inf_2, Inf_5 & Inf_6.
 -In Malaysia, the position of logo usually is at the top left. So, such a position is strategic, and it does not interfere with the student's line of view when using e-learning‖ -Inf_2 & Inf_7.

C. Typography
Past studies have stated that the selection of appropriate typography must be focussed in e-learning interface design. The result of the interview found that generation Z students are less interested in typography. They only agreed that the fonts used in e-learning should be easy to read and understand. Below are the comments about typography element in interface design:  -Text symbolizes the content of e-learning page, whether it is formal or informal. If the e-learning page is informal, fancy fonts can be used while formal elearning page use fonts that are easy to understand‖ -Inf_6.
 -Use text that has been used prior in order to save time to process and understand the text‖ -Inf_5.
 -Types and size of text should be consistent so that it is easy to read and text and background colour should be contra for it to be easy to see‖ -Inf_7.
 -For important information, the text should be bold or highlight‖ -Inf_2.
 -Or can use other colours to point out the important information‖ -Inf_3.
Based on the comments from informants, readable and understandable text in e-learning interface design is important for generation Z students, and they want important information is highlighted. An informant pointed out about formal and informal text in e-learning, and this issue would be asked in the survey later.

D. Layout
The layout is an interface element that covers the entire elearning page, which involves the arrangement of each interface element such as images, logo, symbols, typography and others. Informant's feedbacks about layout are as follows:  -The horizontal layout makes the content to appear clear and less fibrous. More importantly, the layout should be organized and balanced to facilitate students to find information and so on‖ -Inf_1.
 -The vertical layout looks simpler, less compact and neat. Besides, students do not have to scroll to the side and only scroll down‖ -Inf_7.
 -E-learning interface layout should be consistent on every page. For example, the main menu position should be on the same place on each page. This is because changing places would make it difficult for students to find the main menu‖ -Inf_7.
Most informants suggested that e-learning layout should be simple, organized, balanced, clear and neat to facilitate the students. In addition, the informants also emphasized the importance of consistent layout in e-learning.

E. Navigation
Navigation is important to help students in completing tasks and achieving their goals. Below are comments from informants: In this interview, most informants focussed on the position of the main menu and users' location while using e-learning. Informants agreed with the position of the main menu on the left page. The position of the main menu on the left page is common in Malaysia, and informants found it suits with their preferences. Informants also suggested using the button as links compared using textual links. They also stated that they want to know their location while navigating e-learning. Breadcrumb is often used as a link to any pages without having to follow any sequence. Besides, the informants also suggested that e-learning should provide many navigation options. This allowed students to explore e-learning without limited option. Previous studies also focused on errors [24] [49]. However, informants did not provide deeper feedback about the errors in e-learning on how it should be handled. Therefore, further characteristics of error would be asked in the questionnaire.

F. Additional Elements
The informants also asked whether the five elements of the interface were enough for e-learning. All informants suggested audio, and video elements should be placed in e-learning. The latest technology is the main reason audio and video elements must be used in e-learning. Learning-based audio and video are more attractive and have a lot of benefits compared to textbased learning [68]. Besides, an informant suggested adding simple animation in e-learning interface design.
Focus group interview was conducted to verify the elements of e-learning interface design that fulfil the needs of generation Z students. Five elements have been presented to the informants whereby audio and video element was proposed in order to engage generation Z students towards elearning. During the interview, all informants can freely give their opinions about each element and would be interpreted as cultural-based design and characteristics. Table V shows the list of significant elements of e-learning interface design together with design characteristics from theoretical and empirical data. Table V shows the interface elements and design characteristics that were gathered from theoretical and empirical (focus group interview) study. Most of the results from the theoretical study are not preferable by generation Z students. For example, previous research stated that images of a leader were supposed to be used in the interface [18] [24]. However, generation Z students want images that are related to students or learning in e-learning interface design. The empirical study has confirmed that developing e-learning interface based on Hofstede results is irrelevant because it student preferences changes. Besides, a new interface element is discovered in this study which is an audio/video element. For now, only audio/video elements added to the list of significant elements. The next empirical study, further design characteristics of audio/video would be discovered.

V. CONCLUSION AND FUTURE WORK
This paper discussed the interface elements and together with their corresponding design characteristics that are suitable for generation Z students. The elements and design characteristics were gathered qualitatively through theoretical and empirical study. The proposed interface elements such as colour, graphic, navigation, layout and typography have been discussed and verified by generation Z students that are considered as valid. This is because they have been agreed and supported by the previous study, as mentioned in Table I. Besides, the findings from this study show the role of culture in generation Z's perception towards design characteristics of e-learning which differ from the previous study. www.ijacsa.thesai.org However, these findings still need further research, especially in the design characteristics of e-learning interface, which would be validated in large scale survey. In future research, detailing the features of each interface element is needed to ensure the quality of e-learning interface design prolonged. Besides that a comparative study should be conducted in the future in order to compare interface design preferences of generation Z with other generations. In the meantime, these findings could be an eye-opener to other researchers that every culture or generation has their own preferences concerning interface design, and this can motivate students to be more engage towards e-learning.