Research Design on Visual Perception of Interface Design of e-learning

. Various researches have been conducted to improve the quality of e-learning courseware. Other than user experience, user interface design is also one of the most important aspects in system usability. It allows users to interact with a system. In the development of user interface design, users are given the utmost priority. Therefore, every development should consider users throughout the process. Developers need to understand the requirements of the end user. The user interface design of an e-learning courseware helps them to conduct activities such as learning, exercise and evaluation. The wrong selection of visual can lead to misunderstanding among the users in interpreting the intended meaning. Furthermore, it is quite tedious for designers to choose the right sign to represent interaction. This paper discuss about research design that needs to be implemented to investigate how users perceive visual elements in interface design.The research design contains five sections; which is setting, sample or participants, measurement instruments, data collection or procedures and data analysis. The sections will be explained through data obtained from the research, underlining the user visual perception aspect. The findings can help improving the quality of e-learning materials for children. The survey shows that students prefer traditional icon than temporary icon. Total of 95% of respondents prefer to use book to represent learn icon. Other than that, this research is also significant to providing the designers and developers with useful guides to enhance their understandings in producing good interface design for e-learning. Excellent qualities of e-learning are essential towards serving the students with the best education. This paper could provide a good reference for researcher to conduct a research that relates to visual communication in information technology


Introduction
In visual communication, there is an area called visual perception which relate to how human perceive a visual. People have different perception towards the thing they have seen and reacted to it. The visual elements that appear on interface design become the subject of this research. Every e-learning materials that has interactivity require interface design. The performance of interface design can contribute to the quality of e-learning materials. E-learning is still part of government initiative to give the best education for students. The presentation of interface design becomes one of the reasons students are not interested to use e-learning material. (Kamaruddin, 2010). From its early introduction in 2001 until today, the problem is still lingering. The Ministry of Education (MOE) offers 1BestariNet to provide access to a cloud-based Virtual Learning Environment (VLE) known as the MyJICT -Malaysian Journal of Information and Communication Technology Vol 4 2019, Issue 1 | e-ISSN 0127-7812 8 FROG VLE and high-speed connectivity by June 2014 to all the 10,000 fully-aided government schools. The FROG VLE is a web-based learning platform which provides virtual equivalents of realworld learning (Frog Asia, 2014). Recent report by the Auditor-General (National Audit Department, 2013) revealed that although RM663 million was spent on the 1BestariNet project, it is suffering from lack of usage. It is significant for researcher to keep working on this area to improve it. The students engagement with e-learning is minimum due to many factors, the interface design is part of it (Nordin, 2017). Systems developers and telecommunication companies should also improve their product reliability by making them more user-friendly and useful. Shen et. al (2017) quoted as saying that the main criteria for evaluating Frog VLE e-learning platform have focused on usability and acceptance. The sensory dimension of e-learning platforms is non-existent enough due to the rapid emerge the ideals of 'hyper-functionalism' nowadays. Therefore, in order to accommodate to future needs the focus on e-learning platforms need an aesthetic perspective instead of mainly addressing usability and function. So, there is need to produce the pleasurable design and aesthetic model of e-learning platform in order to increase the usage of the Frog VLE.
This paper explains about the research design which is part of research methodology that researcher utilise to gather information about visual elements and its contribution to aesthetic and usability of interface. All sections of research from research setting, sampling, instruments, data collection and data analysis are reported. Both quantitative and qualitative approach will be implemented through instruments of survey and observation. Data collected from the research could help developer to decide what visual element is suitable for their project in order to improve the presentation of interface design.

Visual Perception
An organization of interaction design known as Interaction Design Foundation in 2018 defines visual perception as the ability to perceive our surroundings through the light that enters our eyes. The visual perception of colors, patterns, and structures has been of particular interest in relation to graphical user interfaces (GUIs) because these are perceived exclusively through vision. An understanding of visual perception therefore enables designers to create more effective user interfaces. Different attributes of visual perception are widely used in GUI design. Many designers apply Gestalt principles to the design of GUIs so as to create interfaces that are easy for users to perceive and understand. The visual perception of affordances is another example of how the understanding of visual perception is a critical item in any designer's toolkit. Affordance is a concept introduced by perception theorist J.J Gibson as the range of possibilities that an object or environment appears to offer in order to perform an action upon it (Nobel & Bestley, 2005).
Edwards (2016) assumes perception as a set of skills that can perceive edges, spaces, relationships, lights and shadows and finally the perception of gestalt. Even though his points is based on teaching students to draw with perception, it is still related to the way user perceive what they see and how they react to it. Perception is one of valuable capabilities of the human brain, apart from intuition, imagination and creativity. Brain has a superior level of performance for recall and image recognition compared to word recognition, so understanding label or button that combines icon and text is much easier to understand and process. (Kresimir Kraljevic, 2014).

Research Design
Researcher applied the research design of five sections which consist of setting, sample or participants, measurement instruments, data collection or procedures and data analysis (Yvonne, 2009). The research questions will determine where the research will be done, who will be involved in the surveys, what type of instruments to be applied and what procedure need to be conform. The qualitative and quantitative data will be collected and analysed through data analysis.

Research Setting
The location of survey was at Terminal Sejahtera ( Figure 2). The centre provides e-learning facilities to students around Kuala Lumpur. There were 205 students at Sri Sentosa, 37 year five and 31 of year six. It was one of six centres available under Terminal Sejahtera e-learning programme. Other locations were at Sri Labuan, Sri Kota, Desa Rejang, Sri Pahang and Kg Bharu.

Sample/Participants
Students at Terminal Sejahtera were selected as purposive sample as they meet the criteria of study which focus on users of 10 and 12 years old (Figure 3). They were also selected as convenience sample as they were accessible and available. The respondents were expected to be 20 students that currently using the e-learning courseware. A survey and observation were conducted for data MyJICT -Malaysian Journal of Information and Communication Technology Vol 4 2019, Issue 1 | e-ISSN 0127-7812 10 collection. They have the ability to use the system as the centre are accessible from 9am to 6pm every day. The participants are also the target group that could use the e-learning courseware in the future.

Measurement Instruments
Researcher applied attitude scale for survey. Attitude scale is a technique to measure response of respondent such as feeling, perception and preferences ("Attitude Scale", n.d). The survey provides closed-ended questions to children as they were having difficulty to answer with lickert scale. Furthermore, the survey could also consumed more time for its completion. Through this survey, respondents were required to choose what text and image they prefer or agree to represent the navigation button. Score was extracted upon endorsement made for each statement in which a sufficient total for each item is total up. Researcher decided to employ visual as part of the questionnaire to allow respondents answer directly based on the graphics. This would answer the questions about user preferences on visual elements aesthetically and meaning. (Chanwimalueng, et.al., 2013). As for usability, researcher did an observation on students' activity. They were instructed to do certain activities on the prototype. This process can only be done after the prototype was developed based on the findings. Their reactions were recorded based on structured questions to identify how useable the courseware to the children. This require researcher to be involved in the observation, to record every activities.

Data Collection/Procedures
The procedure to conduct the survey was as follows. Researcher obtained the consent from Terminal Sejahtera administrator. Respondents were selected from year four, five and six students who have been registered at the centre. The participants will be given the questionnaire through administrator, in order to make them comfortable to answer the questions, without any pressure. The quantitative data were collected at the end of survey. The observation needed to be scheduled earlier to allow administrator arrange the session with the students. More visitors came to the centre during school holiday. The observation was done one by one; three to five students were selected. A tablet computer was used for this observation. A narrative report of qualitative data was written out of this observation.

Data Analysis
The numerical data from survey is presented in the form of table and chart. The data was accumulated to find out how student perceives visual elements. The questionnaire was design to cover as many visual elements available on interface. All questions were analysed to get the findings. The percentage of each answer selected determine the visual or sign they prefer to represent the interaction button. Data from observation will be compiled as a report of students' reactions.

Survey and Observations
A questionnaire consists of 10 questions were asked to respondents for survey. They were given a questionnaire in the form of a piece of paper. Researcher guides them to answer the questions. The questions are related to visual elements where they need to choose the font, icon, symbol, image, shape and colour combination they prefer. The visuals or graphics used in the questionnaire were design based on secondary data that has been planned to be included in the development of prototype. The objective of this survey was to find out which elements they like and at the same time which symbols and images they were familiar with, which sign they could understand better. The survey questions were designed to measure the perception of the respondents about the text and images that appear on interface. The students were given two to four choices and they need to choose one they prefer the most.

Results And Discussions
As mentioned earlier, there were several visual elements appear on interface design of e-learning. Each element was given consideration to be applied on the prototype of e-learning product. The elements being used in the survey consists of typeface, text, image, icon, shape and colour. Based on the survey done to the 20 respondents, the results are as follow: Typeface Table (1) shows that 45% of respondents chose sans serif and script font. 10% chose serif and none for slab serif. This question is to identify which type is preferable to students. Arial is used to represent sans serif, Times for serif, Cooper Black for slab serif and Segoe for script. The options given were based on application on title page. It can also be applied on navigation button. Sans serif is MyJICT -Malaysian Journal of Information and Communication Technology Vol 4 2019, Issue 1 | e-ISSN 0127-7812 12 chosen for its readability as what has been quoted in previous research by Ali (2008), sans serif fonts are easier on the eyes for on screen reading.

Arial
Times Cooper Black Segoe

Text and Image
Text and image were applied on enter, menu, info and sound button. The multiple choice questions give options of text, image and both. Table (2) presents the outcome of the survey. As for enter button, 60% choose text, 30% both and 10% image. 90% of respondents chose text to represent menu and 10% chose both. There were slightly equal for info button as both text and image get 55% and 45% respectively. The sound button received majority 90% for image as the symbol was quite universal compared to 10% text. From this questions, researcher find out that students prefer to have text or word for enter and menu button. For information and sound, icon is preferable, even though it is just slightly difference on info button. This is to prove that an icon that is familiar to the user can be easily identified.

Traditional and Contemporary Icon
Galitz (2007) gives his recommendations to choose the right icon for interface design. The first one is to use the existing icon that has been recognized and familiar to the user. Second is to use image for nouns, not verbs. Third is to use traditional image and fourth is to consider use cultural and social norms. Researcher has come out with this category of survey. To choose between traditional icon and contemporary icon, researcher split the menu into three images. One to represent learn, second to represent activity and third to represent quiz. These questions are intended to know whether the icons can be the signifier. The traditional icons are represented by book, pencil and paper. As for contemporary icons, they are represented by the shape of tablet which consist of the symbol of line and box, hand and finger on button, and line and question mark. The line and box is to signify text and picture for learn. Hand and button to signify activity. Line and question mark to signify quiz. The results on Table (3) shows that students prefer traditional icon. 95% of respondent prefer to use book for learn, pencil and paper for activity (60%) and paper with question mark for quiz (65%).

Shape
Shape plays some important roles in icon usability. It has its influence in clarity, simplicity, consistency, discriminability (Gallitz, 2007). This question intended to know how students perceive shapes. The symbol is placed inside the shape except for the triangle. There were four type of shapes. It is quite a surprise to figure out that none of them choose circle. The shape were planned to be applied as navigation of next and previous button. Shape can actually help user to recognise the activity. By having a standard shape of button throughout the system will help to improve usability.

Colour
Microsoft through its website stated that colour is very important in the visual interface. We can use it to identify elements in the interface to which we want to draw the user's attention. Colour also has an associative quality; we often assume there is a relationship between items of the same colour. There were four colour schemes provided to be chosen by students that were applied on interface design. All have white content area except for four colour which has light green background. The colour scheme were choosen from secondary data which blue become the main colour. From this survey, it was hard to determine which colour scheme was the most preferable. Both the maximum and minimum colours get highest percentage. 40% of participants prefer four colour scheme and 35% chose one colour that used tones of blue. However, it was obvious that they did not like neutral colour as part of the combinations. This can be seen in Table (

Conclusion
Research design can help researcher to run a smooth research. By having good plan, it can help to achieve the objective, save the cost and time. In visual research, there are many areas of study. The field of study determine the direction of the research. Based on the survey done to the respondents, it can be concluded that they prefer the interface to be presented with text and image. They can understand more of traditional image like book and pencil instead of tablet and stylus to represent learn and exercise. The perception they have in their mind proof to be the reason why they prefer the image they used to see every day. As for image and text, it depends on what sign or symbol developer wants to use. There are many signs or symbols that can be interpreted easily as they are considered universal like the sound and play button. The shape can also help to improve usability when it appears consistently on interface. The colour of interface not only can attract user but it can improve learning if used correctly. The finding from this research is not a complete research to cater all issues related to interface design but it can at least give some ideas how the respondent perceive visual elements. It can help them to learn better. Excellent quality of e-learning materials can be produced through a proper research design. The data collected from respondents about visual perception can be used as reference to suggest the best appearance of interface design in development process. It is part of important aspect in producing a good e-learning material.