COMMUNITY DIRECTIONS ViLO: A Visual Interactive Resource for Supporting Self-Guided Learning

Traditional module delivery in higher education often follows a linear structure, which is not always conducive to understanding concepts and the many possible relationships between them. In this paper we introduce an online visual interactive learning resource called ViLO designed to address this problem. We describe the principles guiding the development of ViLO, early evaluation results and our plans for future work.


Introduction
Teaching at higher education institutions is typically conducted in the form of a linear sequence of lectures introducing different topics relevant to a module.This is often necessary for logistic and pragmatic reasons.This linear presentation of material can make it difficult for students to understand the relationships between module topics and consequently to apply concepts correctly to solve problems.
To address this issue, we investigate the potential of a visual and interactive presentation of relevant topics, which complements traditional lecture material to help students gain a deeper understanding of the material.Building on previous work on concept maps (Novak & Canas, 2007) and on presenting teaching materials in visual form (Schwab et al, 2017), we present ViLO, a web-based Visual Interactive Learning resOurce that presents module topics as connected graphs.Thus, ViLO moves away from the linear structure of lectures and enables both targeted and open-ended exploration by topic of interest or by lecture.Students can use ViLO in their own time at their own pace.
ViLO was initially introduced to aid the learning of programming language concepts in a School of Computer Science since most programming resources are practice-oriented and do not focus on concepts.Feedback from staff and students indicated that the idea is more widely applicable and could be of use in diverse subjects.We have since expanded ViLO to include content for a Microeconomics module and there is interest in using the resource for teaching topics as varied as databases, chemistry and English grammar.
In this paper, we discuss the guiding principles used in the development of ViLO, its design and implementation, early evaluation results and directions for future work.

Guiding Principles
The development of ViLO was guided by a number of design considerations grounded in previous work as well as our own experience in teaching on undergraduate and postgraduate level modules.

Visual Overview of Relationships between Concepts
A core aim of ViLO is to reveal visually relationships between concepts of a high-level topic (e.g, object-oriented programming or microeconomics).Bound in a structure that assumes a number of lectures taught across time, university modules typically convey content in a linear way where larger topics are divided up and introduced to students in form of smaller chunks.However, this structure can make it difficult to convey important relationships between such concepts.
Most online learning resources aimed at selfguided exploration and learning still use a linear structure, typically with one tutorial or exercise following another in sequence.ViLO extends the notion of concept maps (Novak & Canas, 2007) by visually capturing the hierarchical nature of subject material as well as relationships between concepts.We partially draw from ideas previously explored by Booc.io (Schwab et al, 2017), which is a web-based, visual, interactive learning system that supports linear and non-linear learning plans.Its content is organised into a nested hierarchical circular layout with a linear plan determining the ordering of circles and nonlinear plans providing short-cuts within circles.In contrast, ViLO presents the content in a hierarchical node-link diagram driven by relationships, with the possibility of multiple linear plans being available for the same content using lecture views, without losing sight of the relationships.

Open-Ended Exploration of Concepts
We aim to support different ways of navigating information in ViLO including open-ended explorations.
Targeted searching of information is already well supported via common search engines or library catalogues.However, targeted search implies that the user already knows what they are looking for and is able to specify their query (typically in textual form).Students who are still in the process of learning about a new topic often have difficulties of specifying queries in an informed way as they lack the necessary vocabulary or knowledge of how concepts in questions are related.In ViLO we therefore support different navigation strategies for the vast information spaces that higher education modules often encompass.ViLO supports targeted search via textual query alongside visual navigation of concepts along the hierarchical graph structure and linear navigation of topics by lectures using design principles of exploratory search (Marchionini, Hay & Adams, 2000).

Juxtaposing Visual Overviews and Textual Descriptions
In ViLO we juxtapose visual overviews and textual descriptions.Visual overviews in form of hierarchical graph structures can provide an overview of topical branches of a module, that is, how higher-level concepts are divided into lower-level aspects and how different concepts are related.In contrast, textual descriptions can provide more detail about specific topics and concepts.Juxtaposing both forms of information presentation complements different methods of interactive information presentation.

Availability and Extensibility
ViLO is a web-based information resource and therefore platform independent.Students can access it via a common browser.This provides a low access barrier for students, as no installation process is required, and also ensures that any updates to content have immediate effect.ViLO also enables teaching staff to easily create and modify content and to customise its presentation in ViLO.We found this to be particularly important as an information resource such as ViLO can only be as good as its content.Facilitating the addition of new and modification of new content alongside traditional teaching material is therefore key.
In the following section we describe the current design of ViLO in light of these design considerations.

The Design and Implementation of ViLO
ViLO is a web-based information resource that consists of a content view (Figure 1 -left) and a visual concept browser (Figure 1 right).The content view consists of an explanation (in blue) of the selected topic or concept, in this case the concept of "Class" in object-oriented programming.Additional Figure 1 ViLO interface information such as code examples (in the case of programming), videos, formulae and figures as well as links to additional sources can be provided and structured in colourcoded text boxes.The selected topic is highlighted in orange as a circular node in the concept browser.Related topics are directly connected to this node and a topical hierarchy is suggested in form of node size, colour and shape.For example, in Figure 1 we see that the concept of "Class" belongs to the higherlevel topic of "Program structure" and contains subtopics such as "Methods" and "Constructors".The student can immediately see that besides "Class" other important topics connected to "Program structure" are, for example "Interface" and "Execution" as well as more low-level concepts such as "Generics", "Package" and "Enumerations".

Navigating Information Using ViLO
There are different ways in which students can navigate information in ViLO.Firstly they can visually navigate the concept browser view by clicking on the nodes in the graph.For example, a student could navigate from "Class" to "Methods" and from there to "Main method" (Figure 2) getting more low-level information about the "Program structure" in Java.
Students can also issue a simple text query in the search bar, directly searching for concepts of interest (e.g., "OOP Paradigm", Figure 3).This will highlight the concept of interest in the Concept Browser while showing the corresponding explanations in the content tab to the left of the interface.Autocomplete functionality facilitates the search for relevant terms.
Finally, students can navigate content based on the linear lecture structure using a "Lecture Browser" where topics are outlined by lecture (Figure 4).Selecting a topic will highlight it in the concept browser and provide the corresponding explanations in form of textual descriptions.
As with any graph layout, the concept browser view can easily become cluttered as more and more topic nodes are opened.Clicking on an explored node will close all open descendants of that node.Students can zoom in and out of the graph in order to maintain a readable overview even in larger graph structures.All interactions with individual nodes are captured in the form of a unique URL, which enables use of the browser history to navigate to concepts that were previously visited.It also ensures that students can share information encountered in ViLO among each other, and continue a study session at a later time.

Content Management System
The content in ViLO is managed and supervised by teaching staff.A visual graph based editing tool, similar to the content browser, providing an interface to the content management system is currently under development.The tool will allow content managers to create new nodes in the graph easily, interconnect them, specify the content for each node and define the visual structure of the graph that will be published to the students.Nodes can be reused and shared between different graphs.

Implementation
ViLO has been implemented using a modern technology stack (Figure 5).The client is written in JavaScript using the libraries React1 , Redux2 and vis.js3 .We chose JavaScript for its ability to be accessed anywhere on the web and the abundance of available libraries that provide a set of tools to design reliable and maintainable applications.
The React library enabled us to use encapsulated components to design the complex user interface features.Using Redux, we can predictably structure the flow of the application and, in turn, reduce development and debugging effort in the future.Finally, the vis.js library is used to render the visualisations and provided the interactive graph for the user to navigate.
The server uses Node.js4 to handle requests from the client (e.g., content queries to the database or content modifications).All content is stored in a OrientDB graph database.We chose a graph database in order to handle multiple current and potential connections between the various concept nodes.A graph does not impose a particular hierarchical structure on the data and enables us to display the same data from different perspectives.Usage analysis using Google analytics indicates that usage peaks around assignment deadlines, class quizzes and exam revision periods as well as on initial release.This supports our aim of using ViLO as a complementary resource for traditional teaching delivery rather than a substitute.Figures 6 and 7 show usage patterns for a class with weekly quizzes and overall statistics for ViLO respectively.
Interviews with a small sample of eight first year students who used ViLO as part of their first Computer Science module at university confirm these patterns, but also reveal which groups of students might benefit most from a resource such as ViLO.Students who were completely new to the topics taught in the module seemed to see more benefit in ViLO, compared to students who already had some prior knowledge.Students unfamiliar with the topic found ViLO to be beneficial as it helped them focus on relevant topics and also to learn and understand the underlying terminologies around the topic in focus (e.g., object-oriented programming).In contrast, more experienced students felt they could find additional material about lecture topics online using canonical search engines.In contrast to less experienced students, they know what to search for and can judge the relevance of sources they find.A student's statement summarises it: "What I really like about it [ViLO] as opposed to normal online sources is that online sources are really good for people who know what they are looking for.And I don't know what I am looking for, because I am just a beginner."Less experienced students benefit from the more focused information available in ViLO but also from the visual overviews that do not require a prior knowledge of the terminology, but provide an overview of relevant terms, concepts and their connection.
However, even more advanced students could see potential benefits of ViLO and asked if we would make more advanced content available, as indicated by the following student statement: "I think [ViLO] would be useful even at later stages [of learning about Computer Science."Some of the students we interviewed also studied other subjects.These students stated that they could see ViLO being used as part of other subjects: "It would be good for organic chemistry.Because there are different reaction types.It could be useful."These statements are confirmed by teaching staff at schools outside of Computer Science who showed a great interest in ViLO when it was presented at a University conference to share good teaching practices.It is these interactions that led us to deploy ViLO as part of an introductory module in Microeconomics.

Conclusions and Future Directions
As indicated in the previous section, early evaluation results based on usage analysis and interviews with students indicate that ViLO is a useful resource for reinforcing learning and as a quick reference guide.Interest expressed by academic staff in other subjects and universities in using ViLO as an additional resource for their students further add support to this position.
ViLO is a work in progress and we continue to develop and refine its functionality.The user interface for its content management system is about to be released and will help the adoption of ViLO to diverse subjects.Many interesting avenues for further work remain.A larger scale evaluation of the resource using students with different levels of prior knowledge and learning habits remains a priority as does obtaining structured feedback from lecturers and tutors on the usefulness of such a resource.
In terms of functionality, we plan to improve the customisability of ViLO in terms of the relationships displayed and visualisations of the content graph.Literature (Kinchin, Hay & Adams, 2000) suggests that allowing students to organise the content and form their own graphs and hierarchies from leaf nodes will lead to a deeper understanding.An interface to allow such exercises without altering the default graph structure is another potential extension.
ViLO is currently available from anywhere on our local university network.Our goal is to establish a wider community of users and contributors from higher education institutions.

Figure 2 Figure 3
Figure 2 Navigating Concept nodes displayed as a hierarchical node-link diagram

Figure 4
Figure 4 Browsing concepts by lecture

Figure 5 Figure 6 Figure 7
Figure 5 Implementation of ViLO