1 Introduction

With the development of information technology, online learning is springing up as an innovative way to make people easy accessing to education. A study [1] conducted by Penn Graduate School of Education showed that online courses had relatively few active users, with only a few persisting to the course end. Most of users don’t possess strong willingness to learn online from beginning to the end. Viewing various online course platforms, such as edX [2] and Coursera [3], courses of specific subject are roughly labelled with the course sources, such as different institutions and universities, instead of the contents themselves. Online courses are shown to users with big titles flatly without any content categories. In this way, users are difficult to know what is the next step to learn, and then they lack a systematic understanding for the contents they aim to learn. Therefore, it is essential to find an appropriate way of organizing and classifying courses for online education.

In this paper, knowledge graph design is proposed as an effective way to promote user experience for online education. Based on the interrelations of the knowledge points within course contents, knowledge graph design can provide clear-established contents and satisfying user experience for learners. Currently, knowledge graph design has been widely used in Internet industry to create more intelligent experience. From 2012, Google’s search engine started to use knowledge graph to unveil search results with structured and detailed information [4]. Through enriching the results with semantic-search information, Google attempts to help users find out information they want most, and to provide deeper and broader information for them. Sergio etc. used knowledge graph to supply a smart sound and music recommendation system [5], enabling the system to tailor users’ appetites for the music at its maximum. These applications of knowledge graph demonstrate its high potential in improving user experience and imply that the design of knowledge graph might be evolved into the online education industry. This paper attempts to break the institution-oriented model of online education platform and to explore the content-oriented as a new way to promote user experience for online education. Specifically, User Experience (UX) is chosen as the subject of online education. Then knowledge graph is implemented into online UX education platform in order to encourage learners’ participation and promote their learning continuity.

2 Related Work

In this part, the existing UX online education platforms are reviewed to get an idea of previous work.

Coursera is a popular online education platform which has close collaboration with various of universities and institutes. In general, courses are organized with different subjects in Coursera. The relevant search results are shown in Fig. 1 as one inputs UX in the search box. These results are listed linearly without specific structures. Also it can be seen that the courses within the results are emphasized with their providers.

Fig. 1.
figure 1

UX search result on Coursera

Full size image

A site very similar to Coursera is edX, which organizes course contents without any structure. From searching results matching as shown in Fig. 2, courses are mainly marked with their names, providers, and availability. There is no hierarchical categorization for the course display. On the right side of the page, a searching filter is designed to refine the search results, allowing users to find the target course quickly.

Fig. 2.
figure 2

UX search result on edX

Full size image

CHUANKE [6], a C2C online video education platform with rich subjects, has become more and more popular in the online education field in China. Figure 3 shows a screenshot of the results after inputting UX in the search box. While the searched courses are arranged without a specific structure. On the right side, some specific recommended courses based on users’ search are provided.

Fig. 3.
figure 3

UE search result on CHUANKE

Full size image

Overall, all the sites mentioned above adopt the same way to present materials to users, which is just tiled display rather than structured categorization. And the brand of the school & institution is highlighted as a vital factor motivating learners to make decisions on whether to learn courses.

3 Implementations of Knowledge Graph

In this section, three cases of the implementation of knowledge graph design from online user experience education projects [6, 7] are presented. Firstly, the preliminary design practice named interactive knowledge graph for UI designers running on CHUANKE is described. We present the design outcome, analyze the user data, and discuss how the produced knowledge graph influences learners’ user experience. Then based on the reflections from the preliminary trial, two newly released products with knowledge graph design, which are running on CHUANKE and ue.baidu.com respectively, are introduced.

3.1 The Interactive Knowledge Graph for UI Designers

When the user searches UI/UX on CHUANKE, a gateway to the integral knowledge graph for UI designers in Fig. 4 was designed. It starts with the knowledge required by a user interface designer, and represents a holistic course framework for UI learners with a fishbone graph. This curriculum graph is created not over courses, but over the contents knowledge points covered in courses. Four hierarchical categorizations are included in this graph. The backbone containing introductory texts highlights the available contents, such as UI overview, Art Foundation, Design Tools, User Interface Design, and so on. Each content is subdivided into smaller topics, each listing its subtopics with texts. Once the user moves the mouse pointer to these texts, courses under each subtopic will show up. Clicking the course title turns the page into a detailed course page within the relevant content. As the preliminary practice on user experience online education, this interactive knowledge graph is intended to make users have a clear view of the knowledge that they are going to learn. It ensures that all prerequisite topics for being an UI designer are sufficiently covered without overlap. And this graph guides users to learn UI/UX knowledge progressively through a recommended path. In addition, through showing how courses would be useful with introductory text, users are easy to be motivated to choose courses to learn based on their desires.

Fig. 4.
figure 4

Interactive knowledge graph for UI designers

Full size image

The data collected from the online education platform before and after launching this function provide strong evidence for the effectiveness of the interactive knowledge graph in promoting learners’ user experience. Figure 5 shows the time variations of the numbers of daily unique visitors as well as the times of daily learning in the online school. From this figure, it can be seen that the number of daily unique visitors remain relatively stable no matter before or after launching the graph. While the times of daily learning has a dramatic growth in the time of launching the graph. Furthermore, Fig. 6 illustrates the times of daily per capita learning has a rapid rise after applying the graph in CHUANKE. There is no doubt that the users’ learning continuity is improved with the interactive fishbone knowledge graph.

Fig. 5.
figure 5

The time variations of the numbers of daily unique visitors and the times of daily learning in the online school

Full size image
Fig. 6.
figure 6

The time variations of daily per capita learning in the online school

Full size image

It is apparent that the fishbone knowledge graph has positive effects on users’ UX online education. But some limitations are figured out as well. It has been found that the fishbone graph brings high-cost interactions for learners, which prevents them from learning the contents continuously. For example, users can mouse over the sub-topic, and see all the courses under it. And then they can click on the course name and be taken into a page with the specific content. After they finish learning the current content, they are obliged to go back to the graph page if they desire to learn more. Another noticed limitation is that the over structured fishbone graph demonstrates the knowledge required by a user interface designer thoroughly at one time, which easily makes users have no idea about what to do next, even enables them to give up learning. And in the structured fishbone knowledge graph, besides the course tittle, there is no other information supporting users’ decision-making about whether to learn the course.

While most of current online education platforms adopt unstructured ways in the content presentation. As prior work stated that courses are mainly displayed flatly on the page rather than organizing them with knowledge-based reasoning. The unstructured way of contents presentation enables users to learn the contents without any instruction, even influences their own learning path. In addition, it could cause users to lack a systematic understanding for the contents that they learn. Therefore, as Fig. 7 articulates, keeping an appropriate balance between the structured way and unstructured way should be taken into consideration in the process of designing knowledge graph for contents.

Fig. 7.
figure 7

The balance between the structured way and unstructured way

Full size image

3.2 The Improved Implementations

Because of realized issues mentioned previously, we are striving to find an appropriate way to represent the contents for learners. In this part, two improved implementations exemplify how to balance the structured way and the unstructured way when designing knowledge graph for diverse contents for online education.

3.2.1 The Redesigned Homepage of UE School on CHUANKE

The new homepage of UE school on CHUANKE was designed with a balanced way between the structured and the unstructured contents displaying. As Fig. 8 shows, the whole contents of UE school are structured with two hierarchical categorizations, including the primary navigation and the secondary navigation. On the left side, the primary navigation shows all the knowledge topics courses cover. As users click on this navigation, the related courses will be displayed on the right. Within this part, sub-topics under each category in the primary navigation constitute the secondary navigation, which works as the filter to refine searched courses on the current page.

Fig. 8.
figure 8

The redesigned homepage of UE school on CHUANKE

Full size image

Compared with the fishbone graph, the new design remains the structured way of designing knowledge graph, giving users a clear framework to learn. Beyond this, courses adopt tiled displaying along with several useful information, including related knowledge points, course type, fee, course satisfaction, the number of learners and its providers. This information informs users of what kind of courses they are viewing, and then facilitates users to have a considerate decision-making about whether to learn.

3.2.2 Online UI Design Learning Platform

Upon looking at several online education platforms such as Coursera and edX, we noticed that they are ‘horizontal’ sites in the context of content. Compared with these sites, the platform ue.baidu.com was designed as a vertical site, specializing in the user interface design online education for college students. This site is another example illustrating how to keep a well-balance between structured and unstructured ways in designing the knowledge graph for online education.

Contents on this site are organized with the knowledge-based reasoning based on the needs of colleague students. Figure 9, the learning navigation page, which is mainly categorized into four sections, including the software skill, college curriculum, career skills and advanced research. Under each category, the contents are presented in a way that allows learners to acquire knowledge with several knowledge points. Figure 10 shows the detailed page for one knowledge point, which contains the general knowledge point introduction, relevant articles, related knowledge points and the software. This page will show up when users click on the small square on the Fig. 9.

Fig. 9.
figure 9

The learning navigation on ue.baidu.com

Full size image
Fig. 10.
figure 10

The detailed page for one knowledge point

Full size image

In this case, this design utilized tiny knowledge points to organize the whole contents, which gives users a clear structure for the contents. Especially, on the detailed page for one specific knowledge point, relevant articles enable the user to have an adequate and deep learning. Relevant knowledge points and software on the right side are sorted out to make users have a smooth learning transition from one knowledge point to another one. Learners are expected to form a good learning circle when they learn on the site. Accordingly, the learning continuity is extended by this new knowledge graph design.

4 Discussion

Knowledge graph design takes the course contents as its main clue, aiming to provide well-reasoned contents for learners through disassembling and refining the knowledge. The work presents a certain number of potential for improving user experience for online education.

Enhance learner autonomy.

The knowledge graph helps users improve their learning autonomy to some extent. From the user data in practices mentioned before, the daily times of per capita number of learning increases dramatically through the employ of the knowledge graph design. Moreover, compared with the unstructured way of contents display, the employ of knowledge graph in online education allows users to learn systematically. As users’ learning path form, it also opens up new opportunities for further explorations in their learning. Consequently, the learner autonomy will be enhanced.

In-depth/In-width Learning.

The knowledge graph design highlights more opportunities for people to learn deeply and widely. On the online education platform with knowledge graph design, users easily gain access to courses with different topics. In this way, they will be cultivated to have a width learning intangibly. Likewise, users are easy to be pushed with the knowledge graph design to expand their comprehension for the content horizontally.

Wide Applicability.

Examples listed above indicate the diverse applications of knowledge graph design in promoting UX online education. Especially the preliminary practice has data strongly supporting the positive role of knowledge graph in online education. These examples imply the potential of knowledge graph design in other subject’s online education, such as computer science, biology, etc. For instance, CHUANKE has attempted to provide contents through the way of knowledge graph. Certainly, how to disassemble the contents emerges as a critical issue to resolve.

There are challenges that need to be solved in order to designing the online learning contents with the knowledge graph. The application of knowledge graph in online education empowers the user to have an intangible learning for different topics. But learning is a personal activity, which strongly depends on their motivations. Although the knowledge graph design already affords a path for learners to follow, it is hard to guarantee people to learn from beginning to the end completely. Also for beginners, the knowledge graph design facilitates them to learn with explorable ways, supporting them in knowledge discovery and enabling them to have a profound understanding for contents. While for advanced learners with specific learning goal, knowledge graph provides well-established contents for them. What’s more, based on the interrelation of contents, knowledge graph could encourage this type of user to have a divergence learning. Hence the different demands of end-users might need to be considered when designing the knowledge graph. In addition, how to strike a balance between the structured and unstructured way should be concerned as well.

5 Conclusion and Future Work

In this paper, we proposed knowledge graph design, an innovative way for users to learn the UX online continuously and positively. This paper starts with the problem that users lack the persistence when they learn online, focuses on describing a new way called knowledge graph to navigate users to learn with specific structure. Fishbone interactive knowledge graph is narrated as the first trial to apply the knowledge graph in UX online education, which reflects us to keep a balance between the structured and unstructured way when presenting online contents with the knowledge graph. Then two newly design outcomes with knowledge graph design are explored in online UX education.

In the future, we will continue to apply the knowledge graph design in the UX online education. Most importantly, we will verify the effectiveness of knowledge graph design in promoting online education with more specific user data. Subsequently, except for the UX online education, we will intend to explore how it could be used in other fields.