An Online Collaborative Mind Mapping Feature on Student-Centered E-Learning Environment

The Faculty of Computer Science of Universitas Indonesia has implemented online learning facilitated by a learning management system called Student-Centered E-Learning Environment (SCeLE). One of its important features is the online discussion board that enables students to construct knowledge collaboratively. Connecting and comparing several ideas in an online discussion forum are challenging for both students and teachers, especially when the discussion runs very fast with long messages. This study proposes an online collaborative mind mapping feature integrated to the discussion forum. A prototype was developed using the Go programming language and Gin web framework. The usability testing was employed to gather data about user experience in using the application. The participants of the study were all students of the Faculty of Computer Science of Universitas Indonesia. The result of the study shows that the application benefits most of the users. The participants acknowledged that the features help them follow the discussion and it supports the collaborative work. However, in terms of the design and the user experience, more works are required to improve the feature needs.


Introduction
Current technological advancement enables people around the world to access the internet. With this new technology, researchers tried to create a new kind of learning method called online learning. Online learning is a learning method that uses internet technology to help teach the process. With online learning, students can access the learning materials at any time and from any place they want.
Online learning is usually associated with individual learning. However, individual learning has some weaknesses, such as the learner needs more time and effort to get the answer individually [1]. On the other hand, online learning can also be done in collaboration. With collaborative learning, students may find it easier for them to learn because of the brainstorming activities. With collaborative learning and online learning combined, students can seek a better learning method called online collaborative learning. In other words, it is a learning method that focuses on collaboration and runs on an online platform.
The Faculty of Computer Science of Universitas Indonesia has implemented online learning with the Student-Centered E-Learning Environment (SCeLE) [2]. SCeLE is a learning management system that contains multiple courses based on Moodle. Each course has a feature called the online discussion forum. This forum serves as a platform for students to share their knowledge and discuss it together.
So far, this feature is still far from perfect. The discussion sometimes can be very long and complex. Students tend to be confused when following up in the middle of the discussion. Therefore, it needs a new feature that can create collaborative mind maps to help students understand the discussion easier and faster.
Mind map is a diagram that describes some ideas or facts in the middle of the scheme. Mind map structure is hierarchical and is connected with some relations. Mind map itself comes with a combination of images, arrows, and words. The main reason to use mind map is to help represent ideas or facts better than words.
The function of the collaborative mind mapping feature is to enable participants to construct a mind map collaboratively based on the ideas generated in the discussion forum. The mind map plays as a summary or conclusion of the discussion. From the problem above, it can conclude that there are two research questions addressed here. These two research questions are:  How is the learning experience in using the online collaborative mind mapping application?  How is the user experience in using the online collaborative mind mapping application?

Online Learning
Online learning is a learning method that focuses on the learning process with the help of the internet. This approach has three kinds of interaction i.e. student-teacher, student-student, and student-content. The student-teacher interaction can be direct or indirect through recorded audios or videos. On online learning, communication can run asynchronously or synchronously. The student-student interaction can be called peer to peer interaction. In this interaction, a student acts as a scaffolder for the other students. The student-content interaction focuses on the student's action when they interact with the learning materials. On online learning, the student-content interaction runs asynchronously and is facilitated by the internet which can be accessed anywhere [3].

Online Collaborative Learning
Online collaborative learning is about learning collaboratively inside an online environment. The theory on online collaborative learning defines three learning steps in this kind of environment. The first step is idea generation. This first step happens when students start to think about an idea. With online collaborative learning, students may find themselves exposed to many ideas from their peers that may help themselves to learn [4]. The next step is idea organization. This phase of learning occurs when students think about those ideas, and what they find from their peers may contradict with their ideas. In this situation, the students can verify all those kinds of information that suit to the right context. Students may find themselves debating with each other to reach a conclusion [4].
The last phase is intellectual convergence. This last step happens when the students are finally able to construct their new knowledge from the information they receive [4]. This last step sums up all the processes above as the true goal of learning.

Mind Map
Mind map is a diagram to help visualize and organize information. Mind map has two key components, which are node and link. The node stands as the information container and the link stands as the connection between those nodes.
The use of graphical elements such as arrows and figures on mind map helps the students to visualize the information. This happens because it is easier for humans to understand a piece of abstract information visually. Also, with the help of images and videos, human memory will improve because the eyes and brain focus together [5].

Usability Testing
Usability testing is a method to test the usability factor from an application. The main objective of this test is to measure the usability of the application based on three factors, namely efficiency, productivity, and satisfaction [6]. There are many ways to do usability testing. One of them is by observing the user's behavior. In this kind of observation, the tester will examine the interaction between the user and the application, as if it is on a real-life situation. The other kind of usability testing is to give a survey to users after they try the application. The usability result will be based fully on the answers in the survey.

System Usability Scale
System Usability Scale (SUS) is one example of the usability evaluation method. This method is developed by John Brooke. The main goal of this method is to have a fast and reliable usability evaluation test [7]. This test consists of ten questions that correlate to each other [8]. In this test, there are some questions that have inverted scores. It means that not all questions have equal scores, such as scoring on option 1 gets 0 point and scoring on option 5 gets 4 points. The SUS has a score range of 0 to 100. To calculate the total score, all the total points are simply added from the ten questions and they are multiplied by 2.5 so that it can generate the score from 0 up to 100 [7]. From recent study, SUS can give results of up to 80% correctness for ten participants or small data samples, and almost 100% for more than fourteen participants [8].

Methodology
This study consists of six research stages. Those stages were created with a product-centered design approach. In this approach, the prototype design and creation started soon after the problem analysis. The first step of the research stage was literature review. The second step was problem analysis. The third step was designing the prototype and followed by creating the prototype. The fifth step was conducting the usability evaluation. The final step was analyzing the results and making plans for further research. These six steps can be simplified into four main stages. The methods and outputs for each step can be seen in Table 1.  4 and nodes, it should have a feature to delete unwanted objects on the work page. Last but not least was a save button to save the work on the work page.
After selecting everything that is needed to be included in the prototype, the design must be based on Shneiderman's Eight Golden Rules of the Interface Design. One of the most important rules was to strive for consistency; thus, the design must be consistent on every page. Another important rule was to offer informative feedback. This means that every page must have a help button to aid users when they are confused.
The wire framing step was done with the Adobe XD application. The first step was to create a low fidelity prototype. With this design, it only shows the structure of the application. One example of the wireframe can be seen in figure 1 below.  After creating the low fidelity prototype, a high fidelity prototype was done. The high fidelity prototype served as the highly functional and interactive design that resembled the final product i.e. the mind mapping application. The high fidelity prototype can be seen in figure 2 above.

Creating Prototype
The application was built using Go programming language. The reason behind its selection was because Go programming language has an intuitive syntax and pretty fast computation time. For the web framework, Gin Web Framework was used. Gin Web Framework gives some predefined function that makes the development easier.
As for the database of the application, MySQL was utilized. The reason behind its selection was because it was easy to use. Last but not least is the software architecture. This study used REST as the software architecture to help split the application into specific modules.

Conducting Usability Evaluation
After the application development was completed, the next step was conducting the usability evaluation. The first step was to get the research participants with convenient sampling. There were 20 participants who were all students of the Faculty of Computer Science of Universitas Indonesia that had already taken the scientific writing class. The details of the participants can be seen in figures 3 and 4 below.  The next step was conducting usability testing based on two scenarios. The first scenario was to create a new mind map with certain topics on the application. The goal was to detect if there were any difficulties when creating a mind map on the application.
The second scenario was to continue finishing a mind map with certain tasks on the application. The goal was to detect if there were still any difficulties in using the application for the second time and to know the learning experience in using the application for a collaboration task.
After conducting usability testing, the next step was to fill the System Usability Scale (SUS) sheet. The participants needed to tick on certain boxes with numbers on them. Those  particular meanings, consecutively; 1 (strongly disagree), 2 (disagree), 3 (neutral), 4 (agree), and 5 (strongly agree). The list of SUS questions with Indonesian adaptation [9] can be seen in Table 2. 2 Saya merasa sistem ini rumit untuk digunakan (I found the system unnecessarily complex) 3 Saya merasa sistem ini mudah untuk digunakan (I thought the system was easy to use) 4 Saya membutuhkan bantuan dari orang lain atau teknisi dalam menggunakan sistem ini (I think I would need the support of a technical person to be able to use this system) 5 Saya merasa fitur-fitur sistem ini berjalan dengan semestinya (I found that the various functions in the system were well integrated) 6 Saya merasa ada banyak hal yang tidak konsisten (tidak serasi) pada sistem ini (I thought there was too much inconsistency in this system) 7 Saya merasa orang lain akan memahami cara menggunakan sistem ini dengan cepat (I would imagine that most people would learn to use this system very quickly) 8 Saya merasa sistem ini membingungkan (I found the system very cumbersome to use) 9 Saya merasa tidak ada hambatan dalam menggunakan sistem ini (I felt very confident using the system) 10 Saya perlu membiasakan diri terlebih dahulu sebelum menggunakan sistem ini (I needed to learn a lot of things before I could get going with this system)

Analyzing Results
For the usability evaluation, there are two results. The first one is the usability testing result and the second one is SUS results. The usability testing results can be seen in the form of a bar chart of the application usage. The chart can be seen in figure 5 below.