Interface Design for E-Learning: Investigating Design Characteristics of Colour and Graphic Elements for Generation Z

Abstract

The majority of students in higher education institutions are among generation Z. They have always depended on e-learning to support their learning activities. Therefore, higher education institutions should provide an attractive e-learning platform. E-learning interface design should be reviewed frequently to smoothen the interaction between students and the e-learning system. It is because interface design that fulfils generation Z students' preferences and expectations may upsurge their participation in e-learning. However, interface design has continually been condemned and turn out to be part of the problem that contributes to the failure of e-learning. Lack of consideration about generation Z students' preferences towards the interface design of e-learning is the factor that leads to these causes. Therefore, this study focused on identifying design characteristics of colour and graphic elements of e-learning from generation Z students' perception. This research involved a purposive sampling method for questionnaire among students of generation Z. The findings from this study could help e-learning developers to design the interface of e-learning that is suitable for generation Z students that will consider color and graphic as important characteristics.

1. Introduction

The educational system in Malaysia has changed tremendously, and e-learning has become one of the learning platforms, especially among Generation Z students. The advancement of information and communication technology (ICT) changed the education system, where classroom learning is blended with e-learning as an efficient method of teaching and learning [1], [2]. This phenomenon is an advantage to generation Z students who spend most of their time connecting with technology.

Students who were born between 1995 to 2010 are called generation Z [3]. Generation Z represents 26% of the overall population in Malaysia [4] and has unique characteristics that differ from the Millennials and Baby Boomers. Generation Z is known as Malaysian’s true digital natives that grew up with the internet and digital technologies [5], and the growth of their character is significantly shaped and influenced by media and technological environment [6]. Research by [7] states that the main characteristic of Malaysian generation Z is that they are electronically engaged. Generation Z in Malaysia penetrates 98% of the internet, and 99% own a smartphone [7]. It is because generation Z students have been exposed to the internet, smartphones and social media since they were born. The top five social media platforms among Malaysian generation Z in 2020 are Facebook, Pinterest, YouTube, Twitter and Instagram [8]. About 71% of Malaysian generation Z receive news from social media and 43% from instant messaging [4]. Staying connected is important to them as they fear missing out. Malaysian generation Z is knowledgeable by obtaining information effortlessly from numerous sources, but they are not favoured to verify the authenticity of the information [6]. Malaysian generation Z also lack critical thinking that causes them to be unable to filter the information properly and emphasize what is best according to their needs [6]. However, Malaysian generation Z is financially literate by using social media platforms to generate income [7]. In addition, Malaysian generation Z also believes that education is important to become successful and using technology as part of their learning [7]. A study commissioned by Dell Technologies and carried out by Dimensional Research involving 724 Malaysian generation Z indicated that 98% of respondents depended on technology as part of their formal education [9]. Because of their dependence on technology, Malaysian generation Z students should relish their learning with e-learning because they can learn and engage with their friends without disconnecting from technology and social media.

Nevertheless, their participation and completion rate in e-learning is still low [10], [11], [12] even though generation Z students monopolize higher education nowadays. Although e learning is popular among the younger generation yet the dropout rate in e-learning is still high [13], [14] compared to conventional learning and is considered more of a supplement to the conventional educational approach [15]. Past researches have shown that one of the factors influencing low student engagement in e-learning focuses on interface design [10], [16]. A good interface design could help to smoothen the interaction between users and the e-learning system to increase students’ satisfaction and motivation to complete their courses in e-learning. Previous research has suggested that understanding targeted users’ preferences and needs towards interface design would increase their involvement [17], [18] in e-learning. It proves that a different generation of students have specific needs and expectations when it comes to features design [19]. Prior studies have shown features preference of e-learning to increase student engagement in e-learning were almost identical between generation Y and Z students such as flexibility, self-paced learning, online quizzes, and discussion board except generation Y students exclude the availability of multimedia and applications as e-learning feature in helping them to be more engaged towards learning [20]. Generation Z students want a variety of multimedia applications such as audio and video, as well as chat applications such as Skype as part of e-learning features [20]. The key design for generation Z students is to integrate social interactions such as social platforms, chatboxes or message boards in the e-learning system [21]. The different preferences of generation Y and Z, although at the slightest, must be focussed on in order to avoid further dropout in e-learning. Besides that, past researches also stated that culture could affect interface design, and students were delightful if their culture is integrated into the interface design [22]. However, most interfaces are designed in general and not specifically to a particular group or culture [23]. Past researches integrated design characteristics with cultural dimensions that centred on national culture without focusing on specific groups [24]. Thus, understanding generation Z students’ preferences and needs in design characteristics of e-learning is important to ensure continuous participation in e-learning. Therefore, this paper aims to identify design characteristics of colour and graphic elements in interface design of e-learning for generation Z by conducting a survey.

This paper is organized as follow. Section 2 presents the design characteristics of colour and graphic elements that were collected from previous researches. Section 3 focuses on the methodology to develop the instruments for the survey. Section 4 shows the results from the survey focusing on colour and graphic elements and section 5 summarises the entire paper and potential future work.

2. Theoretical Research

Many interface elements have been studied by past researchers, especially colour and graphic elements. These two elements have always been considered and used in the interface design of e-learning [10], [25], [26]. Colour plays a vital role in e-learning interface design as it can stimulate the learning process because the brain receives information visually [27]. The right colour combination would make the interface design more appealing. Besides, colour can be used for background, foreground, typography, links and others. Meanwhile, there are few elements categorized as graphical elements such as icon, image, metaphor, logo and symbol. Because of their function as a visual element, they are categorized as graphical elements [27], [28]. Graphical element is important in interface design because it helps the students to understand visually without reading the text label.

Past researches have suggested design characteristics associated with the cultural dimension could help in designing attractive interface design [10], [22]. Cultural adaptation into interface design is crucial because each interface element has a different meaning in different cultures [29]. For instance, the red colour signifies pride in South Asia, the colour of anger in Japan, death in Egypt and danger in the USA [29], [30]. Hofstede cultural dimensions have always been referred to by other researchers because they are more comprehensive compared to others [25], [31]. There are six cultural dimensions created by Hofstede, which are:

i. Power Distance (PDI) – relates to the willingness to accept unequal power distribution (high PDI).

ii. Masculine (MAS) – relates to dominant values, either male (assertiveness and competitiveness) or female (modesty and caring).

iii. Individualistic (IDV) – relates to individualist (self-interest) or collectivist (group harmony) society.

iv. Uncertainty Avoidance (UAI) – relates to tolerance towards uncertainty and ambiguity.

v. Long Term Orientation (LTO) – relates to future orientation, while past and present orientation relate to Short Term Orientation (STO). 

vi. Indulgence (IVR) – relates to free gratification and having fun.

Besides that, Hofstede has studied culture in more than 60 countries, inclusive of Malaysia. Previous researchers developed interface design by referring to Hofstede’s study. Fig. 1 shows the cultural dimension index from Hofstede’s study in Malaysia.

Fig. 1. Malaysia cultural dimension index by Hofstede

Interface design characteristics were mapped with cultural dimensions based on Hofstede’s study. Values Survey Module 2013 (VSM 2013) is often referred to as map design characteristics with cultural dimensions. VSM 2013 contains 24 items from six cultural dimensions. Colour and graphic are among the vital interface elements in the making of interactive interface design. Based on Hofstede’s study, PDI index in Malaysia has shown the perfect score, which was 100. Therefore, interface design in Malaysia is dominant with PDI features compared to other dimensions [32].

Previous research on the characteristics of colour in high PDI culture urges on using the colour of black or white as a background to emphasize the name or image of institutions [33]. Prior studies among students from Saudi Arabia and Malaysia regarding the features of online examination of Harvard Law School, the results have shown that majority of students preferred white background colour followed by grey background colour [34]. In addition, the majority of students preferred black text colour followed by white text colour and blue text colour. Besides, past research found that pastel colour such as white, beige and soft pink as background colour were effective for childrens with Dyscalculia because pastel colour can keep the focus on learning compared to bright colour that can disrupt their learning [35]. In addition, research by [36] among elderly aged above 60 years old regarding mobile assistive systems found that yellow background or light grey background is acceptable to the elderly. Thus, light colours such as white colour and pastel colour are more acceptable as background colours compared to dark colour such as black colour.

Besides using black or white colour as a background, websites design in high PDI culture also use national colours as the main theme colour on the website [37], [38]. Many universities in Malaysia tend to use national colours on their websites. For example, Universiti Kebangsaan Malaysia (UKM) uses national colours, which are blue, red and white [38]. For example, Universiti Utara Malaysia (UUM) uses blue and yellow on the university’s website [39]. Because of high PDI culture values, which focus more on the national look, thus implementing national colours is commended. Past research stated that colourful interface is found on the interface design in Malaysia whereby this colour characteristic represents low IDV culture [40] and colour classification indicates low UAI culture [41].

Meanwhile, previous researches discovered that image of authority figures, monuments or national building that represents strong history are often being used in the websites in Malaysia [42], [43]. By expressing national building, historical monument or image of important people, it showed high PDI culture that represents a strong national identity [44]. The majority of websites would show respect for figures with authority in Malaysia, and it is common among Malaysian websites. In addition, interface design for high PDI culture also showed institutional hierarchy, awards, vision statement, and title must be addressed properly, such as ‘Datuk’ or ‘Tan Sri’ [45]. For example, the image or banner on the UKM’s website as the top-ranking university in the Malaysia and world [38]. Besides, the logo and coat of arms were shown in the header of every page of Malaysia’s website, especially on university and government websites, and it catches a lot of attention in emphasizing the identity of the institutions. Table 1 shows the design characteristics of colour and graphic elements that have been obtained from past research.

Table 1. A literature review on design characteristics of colour and graphic elements in Malaysia

Table 1 shows the design characteristics of the interface that were acquired from past researches. These design characteristics were from past research, which was referred from the result of Hofstede’s study. However, Hofstede’s study in Malaysia happened more than 40 years ago, and students’ expectations and preferences towards e-learning interface design also changed in tandem with the advancement of ICT. Thus, interface design features would be enquired among generation Z students in empirical studies.

The colour and graphic elements discussed in this study have known to have an impact on the interface design. The Colour element concentrates on theme colour, background and foreground colour. The graphic element focuses on image, logo and symbol. Based on previous researches, design characteristics of colour and graphic were influenced by PDI and IDV cultural values [37], [38], [42], [43], [44]. Fig. 2 shows the conceptual model of interface elements with cultural dimensions.

Fig. 2. Conceptual model of interface elements with cultural dimensions

Based on Fig. 2, a set of the questionnaire is constructed to identify design characteristics for generation Z in Malaysia. A good questionnaire is needed in order to get a reliable response from Generation Z students.

3. Method

Questionnaire items were divided into two sections. The first section was about the respondent demographic profile, which includes the year of birth, gender, religion, race, nationality, state of birth and learning centre, either university or college. The respondent demographic profile is compulsory in order to know the respondents’ background. Year of birth and nationality are required to make sure each respondent is a generation Z student of Malaysia. Gender, race, religion and state of birth are needed in order to know respondents’ background. Meanwhile, a learning centre is necessary in this study in order to know that respondents are from various universities or colleges in Malaysia. The second section revolves around student preferences towards characteristics of e-learning interface design. Therefore, developing questionnaire items must be thorough to achieve the objectives of the survey, which is to identify the design characteristics of e-learning preferred by generation Z students in Malaysia.

3.1 Instrument Development Process

There were several steps taken in the process of developing the questionnaire as the research instrument as shown in Fig. 3.

Fig. 3. Steps in developing the questionnaire

Each step would be explained briefly in this section. The first phase was to identify the constructs used in this study. The combination of two main aspects, interface design and Hofstede cultural dimensions, was used to produce 12 constructs. The constructs from interface design were chosen based on the findings from the literature review and focus group interview [46]. In this research, six constructs from interface elements are colour, graphic, typography, layout, navigation and audio-video, along with six dimensions of Hofstede cultural model. After identifying the constructs, questionnaire items for each construct were developed by adapting them with VSM 2013, which was a validated cultural questionnaire. VSM 2013 consists of 24 validated items designed to compare the country’s cultural value, which was aligned with six cultural dimensions of Hofstede. For this research, questionnaire items were developed based on the construct in Fig. 2. The original items were adapted according to the needs of the e-learning interface design study and information from past research. Table 2 shows the original items of colour and graphic elements that were mapped with VSM 2013 based on previous research and Table 3 contains the modified questionnaire items that were used in the survey.

Table 2. The items of colour and graphic elements mapped with VSM 2013 from past research.

Table 3. The result of modified and adapted questionnaire items with VSM2013 from past research and expert validation.

(*) Added after an empirical study was conducted.

Table 2 shows the original items from past research that were mapped with VSM 2013. Then, these questionnaire items went through the validation process before they can be used in the survey.

3.1.1 Instrument Validation Process

The validation process (pilot study) was conducted to increase the validity and reliability of the questionnaire items. There were two phases in the pilot study. The first phase of the pilot study was the validity phase which involved three experts with more than ten years of experience in the field of interface design (HCI) and culture. Initially, all experts were contacted through e-mail to enquire whether they want to participate in the validation process. A date, time and place to meet was arranged after they agreed to participate for instrument validation. Before interviewing the experts, a set of instrument validation form is handed to them. The instrument validation form contains a table of formulated questionnaire items mapped with VSM 2013, references from past research and a section for comments from the experts. VSM 2013 and original items, as shown in Table 2 was likewise provided in the instrument validation form. All comments from the earlier expert were reviewed and modified before interviewing the subsequent expert. The modified questionnaire items based on the first expert opinion was reviewed by the second expert and continued with the next expert in order to obtain saturated results. These questionnaire items were reviewed and validated to ensure that each item was compatible with VSM 2013. The purpose of expert validation was to validate the adaptation of modified questionnaire items into VSM2013. Table 3 shows the result of modified and adapted questionnaire items with VSM2013 from past research and expert validation.

Table 3 shows the result of expert validation towards the modified and adapted questionnaire items with VSM 2013 whereby bold word indicates the value of cultural dimension that differs from past researches. There were ten questionnaire items developed for colour and graphic elements with cultural values. The second phase of the pilot study focuses on the reliability test in order to identify instruments deficiency and to determine instruments reliability before distributing the survey. In this pilot study, 50 questionnaires were distributed and only 32 respondents participated in the reliability study. Students majoring in art and mass communication from UiTM Shah Alam were chosen to participate in the pilot study. The aggregated students in these courses were chosen because it meets the requirement for the pilot study, which require 30 to 50 respondents. Past researches stated that 10 to 50 respondents were needed in the pilot study for questionnaire instruments [47], [48]. During the pilot study, the duration of time needed by respondents to answer the questionnaire was recorded. Besides, respondents were asked to check all items and instructions so that it is clear and easy to understand. After that, questionnaire items were repaired, modified or removed based on the result of the pilot study in order to be used in the actual survey. Cronbach’s alpha analysis was conducted using an internal consistency approach. The Cronbach’s alpha value for all questionnaire items was 0.932. The value obtained indicates the questionnaire items were acceptable and satisfactory. Thus, these questionnaire items can be used in the actual survey.

3.2 Survey

The sampling method used in the survey was purposive sampling that focuses on respondents who meet the criteria, which are students from higher education institutions in Malaysia, including universities, polytechnics and colleges who were born from 1995 to 1999 and had prior experience using e-learning. More than 500 questionnaires form were distributed to generation Z students in Malaysia.

Two methods were used to distribute questionnaires. The first method was online, whereby the questionnaires were distributed via WhatsApp application, e-mail and Facebook, by which a link to Google Docs was provided. The second method was conducted using the form of a questionnaire. Three hundred eighty-six (386) feedbacks had been collected, in which two hundred ninety-eight (298) were from questionnaires form, and ninety-eight (98) were from Google Docs. Based on Krejcie and Morgan [49], the recommended sample size for a population of more than 100, 000 was 384 sample. So, 386 feedbacks were considered enough for this study.

4. Result and Discussion

4.1 Demographic Profile of Respondents

The demographic analysis started with a simple descriptive statistic. The purpose of the demographic analysis was to ensure that the distribution of respondents in this study covers the entire Malaysian population. The respondents for this study are generation Z students who are studying at a higher education institution. From 386 feedbacks received, only 367 were valid to be used in this study. Table 4 shows the demographic of respondents.

Table 4. Demographic profile of respondents

Table 4 shows the demographic profile of respondents in this study that encompasses of gender, race, religion, year of birth, learning centre and state of birth. All respondents are Malaysian citizen who was born between 1995 and 1999. The reason for these particular years was chosen is to ensure only generation Z students took part in this survey. Besides, generation Z students who were born in 1995 till 1999 were in universities or colleges when this study was conducted. Therefore, the survey was conducted among generation Z students from higher learning institutions in Malaysia. A large number of students who participated in this survey were Malay, namely 342 respondents. Two hundred twenty-two of respondents were female students and 145 were male students. Most respondents were born in 1999 with a total of 137 students and followed by respondents who were born in 1996. Besides, most respondents were born in Selangor. Two hundred seven respondents were studying in universities and 160 respondents were in colleges or polytechnics. The selection of respondents was based on purposive sampling.

4.2 Analysis Design Characteristics of Interface Elements from Generation Z Students’ Perspectives

Quantitative data was retrieved from the survey to identify generation Z students’ preferences towards interface design characteristics of e-learning. Each question in the survey was based on a 5 points Likert scale in which mean value and standard deviation were measured for each response. Below are the two main elements of interface design that will be discussed in this paper.

a) Colour

Several characteristics of e-learning interface design have been gathered during theoretical and empirical study and were highlighted in the survey. Table 5 shows the results of the survey.

Table 5. Colour characteristics of e-learning interface design by generation Z students

Table 5 shows the results of colour characteristics preferred by generation Z students. The result showed many respondents agreed with the colour combination (M = 3.76, SD = 0.879). A good colour combination can make the student feel delighted in using e-learning. Besides, each colour combination can create different effects such as influencing information processing, improving the quality of information delivery, message reading and usability of the interface [50]. During the empirical study, combining bright and pastel colours were suggested. A combination of bright and pastel colours could create an interesting combination. The use of pastel colours could encourage a calmer vibe compared to bright colours [51]. The prior study states that pastel colour indicates feminine culture while bright colour expresses masculine culture [52]. Besides, the use of colour blocking is popular nowadays. Normally, colour blocking is often heard in fashion, but now it has been used in interface design. Colour blocking is considered to be an exploration of pairing together colour to its opposites on the colour wheel to create an interesting and complementary colour combination. Colour blocking in interface design can be shown as the simple use of brightly coloured geometry shapes to attract users’ attention [53]. Besides, the harmonious colour combination could engage more students. Otherwise, it would be chaotic and boring [54]. Therefore, e-learning developers must pay extra attention to combining several colours that are suitable for generation Z students.

Moreover, generation Z students demanded to use a different colour theme on different pages in e-learning (M = 3.68, SD = 0.974). This is contrary to the principle of interface design which is consistency. However, there were studies that stated that the use of different colours could improve memorization and remembering the position of information and interface layout [55], [56]. Using different colours on different pages, such as red on page 1 and purple on page 2, is the same as using different colours for categorization on the same page. Fig. 4 shows an example of the use of different colours for categorization.

Fig. 4. Example of the use of different colours for categorization

Besides, the use of many colours was supported by the previous study where users in Malaysia preferred many colours in their interface design [37], and generation Z students also preferred many colours in their e-learning interface design (M = 3.84, SD = 0.916). Fig. 4 also shows many colours have been used on a page. However, the use of many colours needs to be controlled so that the e-learning interface design looks neater and not disordered. In addition, the use of many colours can also include colours in graphics such as a logo or image. So, interface developers must be creative when dealing with many colours in the e-learning interface. Previous research stated that many colours in interface design showed collective culture or low IDV culture. Generation Z students’ preferences for the use of many colours are consistent with previous research and complies with collective culture from Hofstede’s research.

Lastly, using the informal colours of the institution in e-learning (M = 3.21, SD = 0.940) showed the majority of respondents of generation Z students moderately agreed. This shows low PDI culture among generation Z students because they chose to use the non-official colour of the institution in e-learning interface design. Previous researches stated that users of interface design preferred the official colour of institutions. These changes have shown that Generation Z students are more independent and unbound to the culture of the country that was studied many years ago.

b) Graphic

The graphic was also among the interface design elements that have been often given attention during the development of e-learning. The use of appropriate graphic can increase student engagement towards e-learning. A graphic consists of an icon, symbol and image that convey their particular meaning. Table 6 shows the results of the survey.

Table 6. Graphic characteristics of e-learning interface design by generation Z students

The results from the survey have shown that Malaysian generation Z students wanted images of students or related individuals to learning e-learning interface design (M = 3.76, SD = 0.872). This indicated that generation Z students refused about using any images that are unrelated to them in e-learning. In addition, the use of improper images can disrupt the learning process or cause the students to feel uncomfortable using the e-learning as they think the system is not for them [57]. Besides, this finding also contradicted a previous study that urged images of important people of the institution must be used in the interface design. This shows that Generation Z students tried to claim their right [3] towards e-learning and were unbound by high PDI culture.

Logo, symbol or coat of arms are often seen in universities or government websites in Malaysia. This indicated a high PDI culture in Malaysia. Generation Z students agreed that the logo and coat of arms must be displayed in the e-learning interface (M = 3.75, SD = 0.922) because they symbolize the institutions. So, the presence of a logo, symbol or coat of arms indicated that the e-learning system belonged to a particular institution. Although generation Z students refused to use the image of leaders in e-learning, they still valued institutional identity.

Besides that, the majority of respondents agreed to use different graphics on different pages of e-learning (M = 3.60, SD = 0.765). This was because graphics can be segmented into the logo, symbol and image, which made a different graphical appearance in various pages of e-learning, besides being tolerable by the respondents. Besides, the graphics used in e-learning must be simple, clear and meaningful. The majority of respondents disagreed with tolerating blurry, confusing and meaningless graphic (M = 2.75, SD = 0.999) because it had the potential to confuse the students about the function of graphics. The previous study showed that Malaysia has low UAI culture, so users in Malaysia can tolerate ambiguous and confusing images. However, generation Z students were uncomfortable using e-learning with confusing graphics and thus must be prevented from using it. This indicates that generation Z culture has been contrasted with the national culture.

Using motivational words as graphic has been suggested during the empirical study, which could increase students’ enthusiasm for learning. In the survey, the respondents agreed that positive and motivational words as a graphic in e-learning would help them in learning (M = 3.78, SD = 0.887) and wanted to continue using e-learning as a learning platform. This was also supported by using text in graphic (M = 3.59, SD = 0.962) to attract more users to use e learning compared to graphics without text. For example, text labels need to be put together with a symbol or icon for users to understand them. The function of the text is to review image, symbol and icon, especially where icon and symbol cannot convey the message perfectly [27].

5. Conclusion

This paper discussed characteristics of colour and graphic elements preferred by generation Z students. The characteristics of colour and graphic were gathered during the phase of theoretical study. The questionnaire items were developed based on previous research and were asked in the survey to see if generation Z preferences towards e-learning interface design were unchanged from past research. A few design characteristics preferred by generation Z students contradict the design principle of interface and previous studies, such as using different theme colours and graphics in different pages of e-learning. Besides that, there were also a few characteristics of colour and graphic that should be avoided in using it for generation Z students, such as using the formal colours of the institution as the main theme colour of e learning and the image of the leaders of the institution. The findings from the survey revealed that generation Z students’ preferences towards e-learning differ from previous studies. However, these findings still need to be validated by experts to assure each characteristic can fulfil the needs of generation Z students regarding the interface design of e-learning. These findings could be a starting point for other researchers that every culture or generation has its own preferences regarding interface design and would motivate generation Z students to be more engaged in e-learning.