Design Research Dissertation
Name: Nadia Chong Wen
Student ID: 0355736
Specialization: UX/UI
1. Instructions
2. Task 1: Dissertation Draft
Acknowledgement
I am extremely grateful for the guidance of Dr. Yip Jinchi, who throughout the entire process of writing this dissertation gave me the encouragement to write with confidence and invested her time in helping identify the flaws of this study. With her help, encouragement, and feedback, I was able to finish this study with many more insights than before with the will to complete it more than when I started.
I am forever thankful for the participants of the survey that was sent out for without their data, I would not be able to complete this task. The opinions and wants of the participants were essential for the findings and discussion of the research problem at hand.
Finally, I want to thank my friends and family for their support in the process of making this paper possible for providing emotional comfort whenever I got too stressed. I truly appreciate them spreading and sending out my surveys to gather more data for the findings. If it weren’t for their help, this paper probably would’ve never been finished.
Abstract
Educational websites have been popularized in recent years due to the COVID-19 pandemic, becoming a popular e-learning method as students familiarise themselves with the internet. However, there are many e-learning websites that lack structure and design considerations, which may cause difficulties for their users such as confusion—becoming obstacles for their learning experience. This study will examine the effects of UI (User Interface) in educational websites and how its design principles may be utilized to retain and enhance user engagement and attention. Using an online survey, 53 participants were asked about preferences, wants and points of interest in e-learning websites, and what features they found most engaging in them. The findings highlight the roles of design elements within the process of maintaining user focus and possible enhancers to students through questioning and gaining preferences of the survey participants. Therefore, it can be concluded that through UI improvement by taking design elements into consideration and the UX of e-learning platforms allowing changes on the layout that engagement could enhance.
Table of Contents
2.1 Effect of The Design Thinking Method 7
2.2 Role of E-Learning UI in Processing Information 8
2.3 Common User Problems and Designer Solutions 8
3.1 Description of Selected Method: 9
3.2 Justification of Selected Method: 10
4.3. Preferences for maintaining focus: 18
5.1 The Role of UI in Educational Platforms 25
5.2 Effectiveness of Design Elements in Maintaining User Attention 26
5.2.2 Readability & Layout Hierarchy Design 30
5.3 Enhancement of User Performance through Motivators 32
5.3.1 Personalization & Gamification 32
7.0 Suggestions for Future Research 36
1.0 Introduction
1.1 Research Problem
The Role & Effects of UI Design in Educational Platforms and Educational Processes
1.2 Problem Statement
In recent years, educational websites have been introduced by the internet that helps people, students and working adults alike learn more efficiently. The COVID-19 Pandemic caused many people to rely on educational websites to learn new skills or to archive and teach educational resources for students to continue to learn their lessons. The User Interface (UI) of educational websites is one of the most important aspects to ensure good user accessibility of features for learning and focus.
E-learning websites such as Khan Academy, Coursera, and Duolingo have become three of the many mainstream educational websites at the moment of this problem statement, having been described as efficient and helpful to students not only due to their material but their easy access in getting educational material via the UI of the platform.
There are websites that could have lacking information and structure, such as having important information not being spread out and mapped out which would cause confusion for the users (Yesa et al., 2024). By ignoring usability principles, it will often give users poor user experience (Islam, 2023).
While three educational websites mentioned have their own problems in keeping user retention and engagement in its other aspects, they still manage to maintain their user base. Duolingo has a smooth platform for its gamification and proof that it increases user satisfaction and efficiency (Qi & Xu, 2024) that retains its users while the other two websites provide the users an easy navigation to use while not taking away attention from the teaching material itself, which is important for the purpose of websites. According to Cen et al. (2023), “A well-designed user interface can guide the user to complete the corresponding operation, play the role of a guide, and has the direct advantage of attracting the user.”
The current study will examine the effects of the UI in educational websites and how the design elements of the UI maintains the user’s engagement and focus in their education process in order to determine what enhances user’s engagement and educational process. The researcher will select a few significant educational websites for this purpose.
1.3 Research Objectives
1. To explore, analyse and identify UI design elements that are important for users in education platforms.
2. To understand how UI design elements maintain user focus within educational platforms.
1.4 Research Questions
1. What are the UI design elements that are considered important for users' attention to educational platforms?
2. How do the elements of UI Design of educational platforms enhance user performance?
2.0 Literature Review
A literature review is a piece of academic writing that demonstrates knowledge and understanding of the academic literature chosen by its researcher on the selected publications relevant to the research. According to Snyder (2019), it could serve as a basis for knowledge development and provide evidence of an effect within the research papers. The research articles selected underline important aspects of the interfaces of educational websites and elements that assist users in maintaining focus during their educational process.
2.1 Effect of The Design Thinking Method
The Design Thinking Method is a human-centered approach that allows for creative solutions and analytical processes which are influential when it comes to designing interfaces for students of e-learning websites. The main parts of the Design Thinking Method is split into 5 stages: Emphasize, Define, Ideate, Prototype, Test.
Purwanto et. al. (2022) claimed that e-learning websites that do not use the Design Thinking Method within the process of creating the platforms negatively affect the user experience greatly. The article presented proof of the benefits of creating the platform with The Design Thinking Method by the researchers’ implementation of all the method processes it provides with thorough explanations of the reasoning and thinking behind every stage of the process in order to achieve the most optimal design. As a result, the article found that it was possible to make a new design that was quicker, simpler and easier to use for users compared to StudyNow’s original website through testing with its respondents.
Yesa et. al. (2024) used the Design Thinking Method to find a solution to improve upon the digital platform of Telkom University Surabaya (TUS). The article showcases the implementation of the Design Thinking Method with researching through interviews and surveys to identify the problems within the website (Empathize and Define) and finding a solution through understanding the core problem (Ideate) before making a prototype and letting respondents test it to receive feedback. In its conclusion, the article also found that it was able to resolve the problems of the website through using The Design Thinking method.
2.2 Role of E-Learning UI in Processing Information
It is an important aspect of an e-learning platform to have a cohesive way of laying out the information necessary for the users. Therefore, through a presentation of information with a good user interface, users should be able to have an easier time processing the information laid out on the screen in modern day learning.
According to Qi & Xu (2024), a good hierarchy in the UI design of the platform is able to help users process the information within the educational platform. The researchers show this with an example of the educational app “Duolingo” that the research article was based on, stating that the lack of clear hierarchy with its information affects users’ understanding and educational process by making them overwhelmed or lost in the page’s contents. The article has also stated that the poor functionality of the app causes users to process less information about the contents of their lessons and more on how to navigate through the application.
Yesa et. al. (2024) reiterates that the UI plays a role in processing information for users. While the educational website is not the same as the other two articles, it states that in education, relevant information should be presented in a way that is ensured that the users of TUS’s education website would have a good user experience. The UI of the website could also cause users to process unnecessary information due to its layout and hierarchy. Purwanto et. al. (2022) has described that there is a need for balance for the UI to convey information to the users. If the site is too complex and not designed effectively or if the site took away too much of its complexity, information would be lost to the user.
2.3 Common User Problems and Designer Solutions
Through the surveys, interviews, and questionnaires, the articles were able to understand the users’ needs and fulfil the user’s satisfaction with the platforms. The most common problems that users face in these platforms are as follows: Poor Structure of Platform, Being Lacking in Information, Low Accessibility, and Poor Optimization.
In Purwanto et. al. 's (2024) article, the researchers stated that user needs affect the functionality of the platforms and designers need great in-depth knowledge in both good user interfaces based on design principles and multi-component design platforms. For Yesa et. al. (2024), the article states that using the Design Thinking Method, it was able to fulfil the basic needs of its users. In the case of Qi & Xu (2022), the article recognizes that with the eye-tracking data made, the experimental group which had the optimized version of Duolingo were more inclined to use it and had more attention on the interface and interactive components of the application compared to the other group that were using the normal version.
3.0 Methodology
3.1 Description of Selected Method:
In this research, the data was collected through an online survey to gather information on what UI design elements and explore how elements involved on the website could affect and maintain user focus during their learning process. The researcher collected the data through an online questionnaire from the information provided by the participants in the survey. A sample of the survey is available to be seen in Appendix A.
According to Mansor et al., (2021), online survey or questionnaire-based studies collect information from participants responding to the study link using internet-based communication technology through platforms such as emails and other survey platforms. It is used to gather information on the characteristics and opinions of the respondents that might not have been observable through other means of data collection (Domede et. al., 2022). Additionally, surveys allow for multiple respondents at a time as compared to interviews, with the questions needing 10-20 minutes in order to finish, which many believe saves time.
3.2 Justification of Selected Method:
Online surveys were chosen as a data-gathering method due to their efficiency. Social media has become widespread ever since the COVID-19 era, and it has become a popular method for conducting internet-based data collection (Mansor et al., 2021). They are very efficient in remote data gathering, as creating and administering the online survey can be done in lesser amounts of time compared to several in-person methods of gathering data. (Hlatshwako et al., 2021). Through available online platforms, online surveys have become a way to gather large amounts of data for their respective research through their ease of distribution. Online surveys are time-efficient and low-cost alternatives that can be distributed to the demographic easily without encouraging interviewer biases.
3.3 Pros & Cons of Method:
Online surveys can be easily distributed to their demographic through online platforms such as LinkedIn, Reddit, and other websites. It allows respondents to reduce the time they spend answering the survey (Nayak & Narayan, 2019). Due to the anonymity, there is a higher chance for respondents to be more participative and responsive as compared to an in-person method of data gathering. In addition to this, the data gathered through online means can be presented in a visual format with its software (Domede et. al., 2022).
There are many limitations to an online survey. Firstly, the choices that are offered to the respondents in the survey are highly reliant on the knowledge of the researcher and the survey questions might be limited (Domede et. al., 2022). There is also the issue of disinterested respondents not taking into consideration the questions and answering without any attempt of understanding of the survey due to survey fatigue (Mansor et al., 2021). Most importantly, the participant rate of the survey itself. The response rates of online surveys are generally really poor compared to offline methods, and participants might accidentally give a biased result for the data (Nayak & Narayan, 2019).
3.4 Analysis Criteria:
Fig. 3.4.1 | Duolingo Fig. 3.4.2 | Udemy
This research involved respondents who have used at least one educational website such as Duolingo, (Figure 3.4.1) Udemy (Figure 3.4.2), Coursera and more. The websites mentioned are well known by the public due to the services they provide as educational platforms for people to learn from through either gamification, personalisation, or both. Their user interface (UI) offers users a comfortable user experience (UX) that keeps users learning on their site aside from the courses. These websites aim to make their platforms easy to understand and navigate so as not to disturb the flow of the user.
Furthermore, the target demographic of this research focused on the wide range of ages of the users who used these websites from age 13 to 45 and above. The reasoning behind including the older generation and not just the younger generation is due to the fact that the older generation has been participating more in technology and online learning ever since the COVID-19 pandemic (Ben et. al., 2022).
This research focused on identifying the elements of design of a website’s UX/UI that are important for a user’s learning process and focus. It was to evaluate what users perceive to be needed in their learning experience design-wise and to gather information on what design mistakes hinder the learning process. The survey design with the questions and justifications can be seen in Appendix A.
4.0 Findings
In this section, the survey results and findings were described and analysed thoroughly. This survey collected a total of 53 responses.
4.1 Demographic Questions:
Q1. What is your age?
Figure 1.3 | Age
The majority of respondents were users of educational websites aged between 18-24 with 32 respondents (60.4%), and respondents who are aged 45 and above, having 13 respondents (24.5%). Respondents who are under 18 gave up 6 responses (11.3%), with the remaining group of respondents who are aged 25 to 44 making up 2 respondents (3.8%).
From this, it can be inferred that the majority of the users of educational websites are young children and adults (Under 18 and 18-24), with a percentage of 71.7% of the respondents. However, nearly a quarter of the respondents (24.5%) are aged 45 and above. The representation of the ages between 25 and 44 is significantly lower than the other groups.
Q2. What is your gender?
Figure 1.4 | Gender
26 (49.1%) respondents were male, while 24 (45.3%) were female. There were 2 respondents who preferred not to give their gender. There was a slightly higher number of male respondents in the survey as compared to females but their numbers and percentage are almost equal.
Q3. How familiar are you with educational websites/applications? Rate from 1 to 5 based on Familiarity.
Figure 1.5 | Familiarity with Educational Websites/Application
18 (34%) respondents rated their familiarity with educational websites to be a 4. The two groups that rated 2 and 3 are groups of 12 (22.6%) respondents. 9 (17%) respondents rated their familiarity with educational websites as a 2, and 2 (3.8%) respondents rated themselves 1 on familiarity.
Based on the chart, the majority of the respondents seem to be somewhat familiar with educational websites. 56.6% of the respondents were quite familiar with educational websites and using them, while a lesser number of 17% of the respondents were not too familiar with educational websites. There is a significantly small number of respondents who were not familiar with the platform. This might indicate the rise of use in educational websites and therefore familiarity with them.
4.2 UI Elements:
Q4. What design elements of an application or website helps you focus?
Figure 1.6 | Design Elements
84.9% (45 checks) of the respondents believe that readability is one of the design elements that allow for an educational website to help users focus on their learning process. The next two most selected options by the respondents were navigation with 75.5% (40 checks) and Structure and Hierarchy with 69.8%. Colors do not seem to be as important as the previous options, with only 47.2% (25 checks) of respondents choosing it as an element that helps them focus. There are also a few other elements that were written by the respondents; however, this research will focus on the main points and selections within the survey.
Q5. What visual issues have you had with educational websites?
Figure 1.7 | Visual Issues
A significant number of respondents selected Poor Structure of Website (83%) and Poor Navigation and Instructions (79.2%) to be the most common visual issues that are experienced in educational websites. Nearly half the respondents believe that texts being too small (49.1%) and the sizes of posts and material (43.4%) are issues that the respondents experienced within their educational websites. Distracting colors are the least chosen option, with 26.4% of respondents choosing it as a visual issue.
Q6/7. Does the design of educational websites and applications cause problems for your learning experience? / If yes or no, why?
Figure 1.8 | Problems for Learning Experience
The majority of the respondents believe that the design of educational websites and applications does cause problems with their learning experience, with 46 (86.8%) respondents. There is a small number of respondents who are not affected by the design when it comes to learning experiences.
For the respondents who believe that the design impacts their learning experience, the reasoning for many of them was the navigation of the educational website. Some respondents stated losing motivation due to having to learn how to navigate through the platform to find information and learning resources, instead of focusing on their respective courses. Respondents stated that if the structure of the layout of the website was unclear, it would cause them to be frustrated and unmotivated, as it gives a sense of poor UI design and serves as an interruption alongside distracting colors.
The respondents who were not affected by the design of their educational website stated that they were more focused on their learning material and the structure of the platform.
4.3. Preferences for maintaining focus:
Q8. For body text size, what is preferable to you?
Figure 1.9 | Body Text Size
79.2% (42 responses) of the respondents have a preference for medium-sized body text of 16/18 pt within an educational website. 11.3% (6 responses) prefer the smallest type of body text of 12 pt. There were 5 respondents who preferred the big size (24/28 pt) of body text. No respondent selected the biggest size of body text.
Q9. What would you consider is a great motivator in UI design among these options?
Figure 2.0 | Motivator
Personalization is a major design motivator for the respondents, with it being chosen by 64.1% (34 responses) of respondents. Gamification has 19 respondents (35.8%) who believe it to be a good motivator for educational websites. The additional results have been added as they include the choice but did not register within the survey platform.
Q10. What colors do you think help make you focus on your learning process more?
Figure 2.1 | Colors
Many respondents have different opinions on what colors help them focus. 9 respondents (16.3%) answered that blue is a color that would help them in their learning process, as highlighted in parts of an educational website. It is the same for red and yellow, with 6 respondents (11.3%) and 3 respondents (5.7%) believing it to help their educational process. Some respondents (5.7%) stated that black, white, and grey help them focus due to the high contrast of the colors. 18.9% (10 responses) of respondents believe that darker colors within an educational website allow them to focus. Pastel colors were also mentioned by 9.4% (5 respondents) to have helped them in their learning process.
Q11. Does Screen Size affect your focus in the learning process?
Figure 2.2 | Screen Size
Many respondents (84.9%) believed that the screen size of their device affects the focus of the learning process of users, while 15.1% of the respondents did not have their focus affected by the screen size of their learning process.
4.4. Feedback:
Q12. What do you think should be added into educational websites and applications to improve your learning experience?
Figure 2.3 | Improvement
43 respondents (81.1%) believed that color changing with examples such as light and dark mode in educational websites, would help improve the learning process. Zoom-in functions for educational websites are also part of an educational website that 75.5% of the respondents believed would help improve user experience. Checkboxes are not as significant in comparison to the other two elements, which had been chosen by 27 respondents (50.9%). Navigation of educational websites was also mentioned by some respondents (5.7%) to improve the experience.
Q13. Have you used any of these educational websites/applications?
Figure 2.4 | Educational Websites
Duolingo is observed to be one of the most used educational platforms among the respondents at 35 responses (66%). 10 respondents (18.9%) have used Coursera. Udemy has also been used by 8 respondents (15.1%). There are other educational platforms mentioned but responses that mentioned them were lesser in number compared to the three previously mentioned platform
Q14/15. How long have you spent on the learning platform that you got? Which aspect of the design of the application kept you focused while learning on the website or application?
Figure 2.5 | Time spent on Education Website
Many respondents answered that they only recently started using the learning platform. 24 respondents (45.3%) used their learning platform for under 11 months, with 12 respondents (22.6%) using it for at least 10-30 minutes per week. There are 5 respondents (9.4%) who have been using their online learning platforms for 1-3 years.
The major aspect of the design that kept the users focused while learning was gamification. Most respondents of this survey are Duolingo users and are motivated to focus on their lessons in order not to lose a “streak” they have. The simplified and structured layouts of educational websites were also an aspect that kept users focused on their learning process.
Q16. Do you enjoy using educational websites/applications?
Figure 2.6 | Enjoyment of Educational Websites
48.1% (26 respondents) have answered “Maybe” on their enjoyment of educational platforms, while 44.4% (24 respondents) enjoy using educational websites. A small number of respondents dislike the use of educational websites. The data may have been affected by the respondents’ educational platform due to their learning of its educational platform’s aspects.
4.5. Summary
The research has shown that the UI of educational websites can affect the engagement of the users and enhance their learning process with the right motivators. There may be a lot of issues within the UI of an educational website that cause unwanted distractions for its users, such as when the structure of the posts and website is not balanced and when the texts are too small with poorly navigation. With this analysis, errors to be avoided within website design which may act as barriers to learner focus, are identified and addressed, and ways to enhance the learning process of the users of educational websites are explored.
5.0 Discussion
For this section, the role of user interfaces in educational platforms will be discussed first and move onto the impact of the design elements that users deem important with its impact such as the hierarchy, font size, and visual elements of the interface. Through the data collected from the survey, the user preferences & motivators were identified alongside the preferred features of users and will be discussed thoroughly on how it could enhance user engagement and focus.
5.1 The Role of UI in Educational Platforms
A user interface is a means that allows users to engage with a device. It is a tool that connects users to the materials displayed on the screen of the device which presents the materials, features, and information that it provides. It has played a significant role in educational platforms due to the increased reliance and focus on the services that technology has been able to offer since the Covid-19 era’s shift to online learning (Miya & Govender, 2022).
As the first thing that students see of the application is the layout and design interface before engaging with the materials, the first impression of the user interface in general plays an important part to the students’ user experience as they decide to continue using the platform or to look for an alternative (Sheng et. al., 2013). A good user interface also plays an important role in allowing users to easily navigate through necessary information within the platform without their educational process being disrupted by unnecessary elements.
Therefore, the role of user interfaces in education platforms is critical for student experiences in order to provide for the most optimal educational learning in the educational platform the teaching information is presented in.
5.2 Effectiveness of Design Elements in Maintaining User Attention
This discussion will focus on what design elements maintain user attention. Design elements are components that make up the visual composition of a design and are considered important for users’ attention to educational platforms. It is shown through the current survey that design elements have effectiveness in the learning process. It plays a vital role in user interfaces to allow for users to immediately identify a focal point in the materials shown on the screen through the design of the interface (Gamal, 2021) with elements such as colors, font sizes and the design hierarchy of the educational platform.
5.2.1 Colors
Colors is a design element that introduces contrast and harmony to designs in and out of technology. According to the survey conducted by the researcher, 47.2% of the respondents have stated that color is an element that assists in maintaining user attention during their learning process. It is stated that colors stimulate the learning process due to the brain processing information through a visual form (Hazwani et. al., 2021). The respondents of the survey have differing opinions on what colors help their focus in their learning process with both darker and lighter colors being mentioned in helping their learning process.
Figure 5.2.1 Screenshot of Main Page of Coursera
It is stated that 16.3% of the respondents believe that blue helps enhance their learning process, which is the main color that Coursera uses for its website (Fig. 5.2.1). The use of blue is often used as a mental motivator that encourages a clear head and increases focus for users (Baper et. al., 2021).
The contrast between the shades of lighter blue and darker blue help direct the eyes of the user to the important parts of the website that it wishes for students to focus on. Using the pastel light blue in the banner of the website, Coursera makes itself feel more friendly and inviting through it and thus help maintain user attention (Mansor et al., 2024). Pastel colors had been stated to cause feelings of relaxation and reduction of discomfort to the user’s eyes (Nordin et. al., 2024) which could be a reason of the use of this color.
The cold colors used in the presented websites of Coursera, Duolingo, and Udemy (blue, green, purple) have been stated to be associated with positive feedback for students (Baper et. al., 2021) which help students be more motivated and relaxed with the rest of the contrasting colors. The warm colors red and yellow were not used as a primary color of any of the websites presented but has been favored by almost the same number of participants as blue.
Figure 5.2.2 Screenshot of Udemy’s Course Selection
Black, Grey, and White make up 5.7% of the respondents that believe these colors help them focus during the learning process with white and black providing for maximum contrast and grey backgrounds act as a good background for any color with maximum saturation (Richardson et. al., 2014). This is shown in a wide variety of educational websites utilizing these three colors to contrast and highlight information such as Udemy (Fig. 5.2.2) which utilizes these colors by using grey as sections to contain information with black text and a white background.
Figure 5.2.3 Screenshot of Main Page of Duolingo Website in Dark Mode
Darker colors were also shown to be colors that maintain the respondents’ attention with 18.9% stating it helps. This presents itself as dark mode has shown benefits in maintaining concentration and attention through reducing eye strain on users and makes it more comfortable for the users to continue looking at the screen (Yang et. al., 2024) which also reflects with the respondents’ wants for a dark-mode option. Through the strong contrast between the bright colors and the dark background in Figure 5.2.3, Duolingo is able to direct students' eyes to the most important parts of the lessons while allowing for reduced eye strain so users can continue on with their lessons for longer amounts of time.
In summary, colors that cause good contrast are highly used in educational websites such as black, grey, and white to contrast and allow for users to pay attention to their classes. Darker colors help highlight information and maintain user attention by the reduction in the strain on the eyes of students. Colder colors such as blue, green, and purple are recommended as a primary color of e-learning website due to the feeling of motivation and relaxation it provides to the user.
5.2.2 Readability & Layout Hierarchy Design
Readability is an important factor that users rely on to process and absorb information that is presented visually on the screen through words. In the survey conducted, the majority (89.4%) stated that readability is an important factor in maintaining user attention in the educational process with 49.1% of participants having problems with the text of the educational material being too small. There are multiple factors that play into the readability of an education website, but the researcher will focus on two factors: Font Size and Layout Design. The reason the researcher chose these two factors are due to the importance these two factors in the hierarchy of a website.
Font Sizes play a part in maintaining focus to the user as the size of the font affect how users read the material. According to a study done (Banerjee et. al, 2011), the font size 14pt was preferred by users as it promotes faster reading. However, the survey shows that 79.2% of participants prefer body-text size to be 16-18pt in contrast with the study.
Figure 5.2.4 Coursera Screenshot on UI/UX Course
The educational information presented in Coursera has consistently used body text sizes that range from 12pt to 18pt. As these font sizes aren’t disruptive and allow for quick reading for the user, it would be that users of educational websites will be able to focus on the information presented in these font sizes and reduce eye strain (Khan & Raza, 2012).
Figure 5.2.5 Screenshot of Coursera’s Epic Games Game Design Professional Certificate Page
The design of e-learning websites layout allows for the information presented to be processed in a way that would guide the user through it with structure and flow. The layout has been shown to be important to the users and respondents. In the survey, 69.8% respondents believe that readability, structure, and hierarchy of the educational website helps maintain user attention. The biggest negative impact to 83% of user participants' experiences in an e-learning website has been stated to be poor navigation and poor structure of the website’s contents. This shows that students are more motivated to continue to engage and focus on their e-learning platform through seeing an easy-to-process hierarchy of a layout with a proper showcase of information (Soydaş & Akyazı 2021). This is presented in Figure 5.2.5. where through structural hierarchy of the layout through using the grid method and font sizes that Coursera can present information in an efficient and easy manner to users to understand and perceive properly.
5.3 Enhancement of User Performance through Motivators
This discussion will answer how design elements could enhance user performance in an e-learning website. Motivation is a crucial part in the e-learning process for users as it pushes users to continue on their e-learning journey and their want of acquiring knowledge in an e-learning website. As the researcher has found that motivation is a key enhancer in user’s performance, it was identified that respondents believe the greatest motivator helps enhance their educational process.
5.3.1 Personalization & Gamification
Survey results suggested that the respondents believe that through personalization & gamification that their user performance and engagement would be enhanced with improvement of personalization being the highest enhancer.
Personalization allows users to tailor the user interface in ways where it could be adjusted to fit user wants and needs. 64.1% of respondents stated that personalization is a good motivator in their learning process and experience. How personalization allows for enhancement of user performance would be through allowing customization of elements such as adjusting font size, dark mode, and changing colors (Sural & Bozkaya, 2016). This reflects in the survey as 81.9% of respondents agree that by adding the feature of switching between dark and light mode that it would improve their engagement and experience in their educational process.
Figure 5.3.1 Screenshot of Duoling’s Settings Preference Page
Personalization of the layout through change of colors allow for a strong emphasis in an e-learning environment of the user that provides for an adaptable interface that will be able to cater to user needs (Klašnja-Milićević & Ivanović, 2021) therefore enhancing the user performance by allowing users to have a more in-depth and adaptable experience. By allowing users to choose the design of the website through dark mode, sound effects, animations, it helps students adjust to the design to be appropriate for their learning journey.
Gamification in E-learning is the act of implementing game-like mechanics and design elements into the learning process of the website. 30.2% of the respondents believe that gamification motivates them to do more on their respective gamified e-learning platform which is Duolingo. Through questioning as to why respondents continued to use Duolingo, it is due to the “streak” function— a function that rewards students for consistently logging onto the platform for their lessons, that encourages users to return to the application and continue their use of the app.
Figure 5.3.2 Example of Duolingo’s Streak
How gamification enhances the user performance in Duolingo is by offering loyalty systems such as the “streak” function and perks that give users satisfaction (Rebelo & Isaías, 2020) that they are able to complete their lessons consistently and efficiently. It allows users to feel that they are getting rewarded by the platform by continuing on with their lessons.
6.0 Conclusion
This research highlights how UI/UX is able to enhance the e-learning process through design elements and allow for users to get more engagement. As time goes by and technology develops, more users will be relying more on online e-learning for their studies on many topics. Therefore the knowledge on enhancement to make lessons more engaging is essential to the educational process in order for users to effectively allow users to maintain their focus on the material in e-learning websites. The study focused on how design elements are able to maintain user attention through the use of colors, font size, and the layout hierarchy in an e-learning website and that through motivators such as personalization and gamification that engagement on the educational process could be enhanced. Through collecting data from surveys about the preferences of users of e-learning websites, it was found that by choosing the right design elements and design features that e-learning websites can enhance the focused engagement with learning content significantly.
The main findings of this paper was the use of which design elements would be able to enhance the learning experience and help users maintain focus on their educational information. It was found that design elements play a crucial role in maintaining user focus during the learning process through design principles. When it comes to the role that colors play in maintaining the student’s focus is a strong contrast from colors like black, white, and gray. Lighter colors such as pastel colors are used as a highlight for the effect that it has on the student’s perception of the lessons by making it friendlier to approach while darker colors that could be used for the background are able to ease students’ eyes and allow them to continue to maintain focus. Readability affects student focus by their sizes with bigger font sizes being easier to read for students compared to smaller font sizes in general but the crucial way for e-learning websites to allow for better readability is for the layout hierarchy to be structured and easy-to-process for students of e-learning websites. With this finding, it is important for designers to choose the right font sizes to be presented in a structural way on the layout for students to easily process. This paper has also indicated that motivators are vital in the process of e-learning websites in order to give students a push to continue on their learning journey while enhancing the educational process. Personalization allows students of e-learning websites to dictate the layout and their own learning process for their respective classes which allows for the enhancement of user engagement. Users would be able to choose the level of education to choose from and enhance their own learning process while adjusting the layout of the page through size of the typeface and changing colors which would allow for more motivation to continue engaging with the e-learning websites. Gamification of e-learning websites would also allow the enhancement of user engagement through motivators such as login loyalty streaks, a sense of development by helping students, and a more engaging educational process that rewards students for learning through accomplishing tasks. Through the implementation of these two factors, user engagement would be maintained and improved through user satisfaction and accomplishment.
There are limitations to this study that will be addressed. The first limitation was that the only source of data gathered was through surveys. While the survey held both qualitative and quantitative data that could be used for this finding, the researcher could’ve used visual analysis to understand the structure of the e-learning websites and analysed the design principles used to further prove the study’s findings. The second limitation was that websites used for this study are limited to three websites that both the researcher and users were familiar with instead of the other less known educational websites to be able to state on how to enhance. The third is the time constraint and lack of proper number of survey participants. This study’s methodology was done in a short amount of time with the number of survey participants being only 53 with not many insights compared to other studies done.
7.0 Suggestions for Future Research
There are many possible ways to improve the study above what is done in this paper. In future research, how other design elements could help enhance the educational process could be explored alongside what elements to improve in designing an educational website and what to avoid while designing the website while enhancing the user experience. This research would be able to help designers design an effective and engaging educational website for students to use and learn from while avoiding potential mistakes that could happen during the design process.
The results from the findings have shown what users prefer in e-learning websites and what could be changed when optimizing an educational website to enhance its experience. In order to stay relevant and satisfy user wants, research on e-learning websites on the modernization of its layout design to improve the learning experience of students could ensure that the website will continue to be used to avoid becoming outdated (Seridi et. al., 2019). It would be useful to identify the trends in other websites of a similar nature to e-learning websites to understand what parts of a website are changing and wanted from users.
The data collected from the findings of the survey conducted could prove to be important to understand user wants and needs in an educational website when it comes to what other factors of the design of the e-learning website could factor in the educational process. Further research could be done on the process of making efficient and usable navigation through e-learning websites as users often rely on it to go through e-learning websites’ numerous educational materials that will often get lost in too many pages (Han et. al., 2013). Designers should consider what kind of navigation panel fits the educational website and how it could be presented in an appealing way that does not disrupt the main elements of the e-learning page.
8.0 References
Alobaydi, B. & Alsswey, A. (2025). Examining how design elements influence student trust and satisfaction in educational websites. Journal of Posthumanism, 5(2). https://doi.org/10.63332/joph.v5i2.496
Banerjee, J., Majumdar, D., Pal, M. S., Majumdar, D. (2011). Readability, Subjective Preference and Mental Workload Studies on Young Indian Adults for Selection of Optimum Font Type and Size during Onscreen Reading. www.academia.edu. https://www.academia.edu/download/48796293/Readability_Subjective_Preference_and_Me20160913-23237-1flwrcn.pdf
Baper, Salahaddin & Husein, Husein & Salim, Sazgar. (2021). The Impact Of Colour On Students’ Perception In Learning Spaces. Tikrit Journal of Engineering Sciences. 28. 33-43. 10.25130/tjes.28.2.03. https://www.academia.edu/88480046/The_Impact_of_Colour_on_Students_Perception_in_Learning_Spaces
Çakır, H. S., & Akyazı, E. (2021). Interaction Increasing Factors: Research on E-learning Content Design. International E-Journal of Educational Studies, 5(9), 25-40. https://doi.org/10.31458/iejes.786457
Cen, C., Lo, G., Li, L., Liang, Y., Li, K., Jiang, T., & Xiong, Q. (2023). User-Centered Software Design: User Interface Redesign for Blockly–Electron, Artificial Intelligence Educational Software for Primary and Secondary Schools. Sustainability, 15(6), 5232. https://www.mdpi.com/2071-1050/15/6/5232
Domede, A. & Dinkelman, A. (2022). Survey Forms for Data Collection: Key Considerations. 10.4018/978-1-7998-8085-1.ch010. https://www.researchgate.net/publication/357488073_Survey_Forms_for_Data_Collection_Key_Considerations
Gamal, F. (2021). Graphic design for E-learning platforms and their digital content and its role in achieving the educational process. Journal of Architecture, Arts and Humanistic Sciences. https://mjaf.journals.ekb.eg/article_195056_en.html
Ghai, A., & Tandon, U. (2022). Analyzing the Impact of Aesthetic Visual Design on Usability of E-Learning: An Emerging Economy Perspective. Higher Learning Research Communications, 12(2), 1-22. 10.18870/hlrc.v12i2.1325. https://www.researchgate.net/publication/369476748_Analyzing_the_Impact_of_Aesthetic_Visual_Design_on_Usability_of_E-Learning_An_Emerging_Economy_Perspective
Han, K.& Hwang, B. & Jeon, J.. (2013). A navigation pattern analysis of university department’s websites using a processing mining approach. Innovations in Education and Teaching International. 52. 1-14. 10.1080/14703297.2013.832634. https://www.researchgate.net/publication/272119732_A_navigation_pattern_analysis_of_university_department's_websites_using_a_processing_mining_approach
Islam, S. (2023). Why eLearning Platforms Fail & How to Avoid That. TutorLMS. https://tutorlms.com/blog/why-elearning-platforms-fail-how-to-avoid-that/
Klašnja-Milićević, A., & Ivanović, M. (2021). E-learning personalization systems and sustainable education. Sustainability, 13(12), 6713. https://doi.org/10.3390/su13126713
Mansor, Z., Nordin, H., & Singh, D. (2021). Interface Design for e-learning: Investigating design characteristics of colour and graphic elements for generation Z. KSII Transactions on Internet and Information Systems, 15(9). https://doi.org/10.3837/tiis.2021.09.005
Nayak, S. D. P., & Narayan, K. A. (2019). Strengths and Weaknesses of Online Surveys. IOSR Journal of Humanities and Social Sciences, 24, 31-38.
Qi, Y., & Xu, R. (2024). Research on User Interface Design and Interaction Experience: A Case Study from "Duolingo" Platform. EAI Endorsed Transactions on Scalable Information Systems, 11(5). https://doi.org/10.4108/eetsis.5461
Rebelo, S., & Isaías, P. (2020). Gamification as an engagement tool in E-Learning Websites. Journal of Information Technology Education Research, 19, 833–854. https://doi.org/10.28945/4653
Reyna, J. (2013). The importance of visual design and aesthetics in e-learning. Training & Development, 40(5), 28-31. https://www.researchgate.net/publication/311681269_The_importance_of_visual_design_and_aesthetics_in_e-learning
Richardson, R., Drexler, T. & Delparte, D. (2014). Color and Contrast in E-Learning Design: A Review of the Literature and Recommendations for Instructional Designers and Web Developers (MERLOT Vol. 10, No. 4, December 2014). MERLOT Journal of Online Teaching and Learning. 10. 657-669. https://jolt.merlot.org/vol10no4/Richardson_1214.pdf
Seridi, Ali & Dib, Lynda & Bourbia, Riad. (2019). Modernization of e-learning platforms towards a service-oriented architecture. Journal of Electrical Systems. 15. 123-132. https://www.researchgate.net/publication/332034706_Modernization_of_e-learning_platforms_towards_a_service-oriented_architecture
Snyder, H. (2019). Literature review as a research methodology: An overview and guidelines. Journal of Business Research, 104, 333–339. https://doi.org/10.1016/j.jbusres.2019.07.039
Sural, I., & Bozkaya, M. (2016). Student satisfaction towards the personalization of appearance in online learning environments. US-China Education Review A, 6(10). https://doi.org/10.17265/2161-623x/2016.10.002
Hlatshwako, T. G., Shah, S. J., Kosana, P., Adebayo, E., Hendriks, J., Larsson, E. C., Hensel, D. J., Erausquin, J. T., Marks, M., Michielsen, K., Saltis, H., Francis, J. M., Wouters, E., & Tucker, J. D. (2021). Online health survey research during COVID-19. The Lancet Digital Health, 3(2), e76–e77. https://doi.org/10.1016/s2589-7500(21)00002-9
Yang, A., Goh, C., & Yi, L. (2024). The Research into Dark Mode: A Systematic Review Using Two-Stage Approach and S-O-R Framework. International Journal of Communication Networks and Information Security (IJCNIS). https://www.researchgate.net/publication/377088244_The_Research_into_Dark_Mode_A_Systematic_Review_Using_Two-Stage_Approach_and_S-O-R_Framework
Yesa, C. L., Putri, N. A, & Noer, D. S. (2024). Designing an Academic Website User Interface Using the Design Thinking Method. JISIP (Jurnal Ilmu Sosial Dan Pendidikan), 8(2), 1243. https://ejournal.mandalanursa.org/index.php/JISIP/article/view/6726
9.0 Picture Credits
Figure 3.4.1 Duolingo., Figure 5.2.3 Screenshot of Main Page of Duolingo Website in Dark Mode., Figure 5.3.1 Screenshot of Duolingo's Settings Preference Page., Available at: https://www.duolingo.com/learn
Figure 3.4.2 Udemy. Available at: https://careers.tufts.edu/resources/udemy-online-learning/
Figure 5.2.1 Screenshot of Main Page of Coursera. Available at: https://www.coursera.org/
Figure 5.2.2 Screenshot of Udemy’s Course Selection. Available at: https://www.udemy.com/
Figure 5.2.4 Coursera Screenshot on UI/UX Course. Available at: https://www.coursera.org/specializations/ui-ux-design
Figure 5.2.5 Screenshot of Coursera’s Epic Games Game Design Professional Certificate Page. Available at: https://www.coursera.org/professional-certificates/epic-games-game-design-professional-certificate
Figure 5.3.2 Example of Duolingo’s Streak. Available at: https://preview.redd.it/how-many-days-do-you-lose-around-the-year-to-streak-freezes-v0-1oslh8tppyka1.jpg?width=640&crop=smart&auto=webp&s=f76d949b780ff0c8306e16833c877d7fc829637d
10.0 Appendixes
Appendix A - Sample Survey Questionnaire
Section 1: Demographics
Section 2: UI Elements
Section 3: Preferences for maintaining focus
Section 4: Feedback
2. Task 2: Final Dissertation Turnitin
3. Task 3: Flipbook
4. Task 4: Research Article
5. Feedback
Link to Feedback: https://docs.google.com/document/d/1EOS9FAqh0s2BnNiKues1E942Iuwy8Yht/edit?usp=sharing&ouid=118144981606286348778&rtpof=true&sd=true
6. Reflection
Experience:
In my experience of this module, I found it quite hard to keep up with the pace initially about the discussion topics and everything due to the amount of assignments I had to do during this semester. In the end, I managed to push through and reach the end by making it to the end. It was really challenging to do this module while juggling with work heavy modules, but I really need to take note to manage my time more properly in order to avoid panicking last minute.
I enjoyed finding a way to create the book as seen above and seeing my research become something more sensible.
Observations:
I have observed that I have a really hard time catching up to the progress during the first few weeks of the module. Unlike the previous semester, I started to understand more on what exactly us UI/UX. However, I have observed that I started to be able to work on more of a schedule the more this module progressed and it helped me greatly juggle all my other assignments despite not being able to catch up at times. I also observed that my sense of UI/UX improved the more I researched it.
Findings:
This was the first time I had to justify my research by providing points from an analysis and have more information to back it up. I didn't think that it would be such a deep dive on UI/UX but thanks to that, I found that I have gained a better understanding on UI/UX and whatever was needed for my Interactive Class.
Comments
Post a Comment