Improving Moodle’s Usability and Course Interface

Our team at the Online Campus has been working to improve the overall experience for our students from re-engineering the learning process to retooling the technological platform. This included a redesign of the LMS (Learning Management System) to make it more useful, easier navigate, heighten student success, and better communicate our brand. As the software developer for our systems, the task feel to me to aid in accomplishing these goals. The process included creating a new template for Moodle along with several other plugins to enhance functionality. The final result received positive feedback from students and faculty alike. Here is what the student sees:

Moodle Snap plugin - the student's view.

Improving Course Navigation

One of the first challenges was simplifying and re-organizing the course interface so that users could quickly navigate through the course. We accomplished this in several ways:

Simplified Course Page

The course page can become cluttered quickly making difficult for students to figure out what to do. Videos, summaries, labels, documents, etc. quickly fill the page until it becomes on long barrage of information. To prevent this, we changed how the course page is used.

The course page should act like a navigation page. Each module should only take up one line (if possible). Avoid adding any content to the page. Content should exist within modules. Avoid long blocks of text. Try not to use too many colors. Maintain consistency and simplicity. Organize things thoughtfully.

The end result is a simplified experience for the student. They can easily click from activity to resource without trudging through a swamp of information.

Side Navigation Menu

A side menu was created that persisted throughout the course allowing quick access to common information. This was accomplished by moving all the modules within the introductory section of the course to a block on the side. Additional buttons were added, like course home, participants, syllabus, and grades. The menu doesn’t just appear on the course page but throughout the course whenever users visit a module like a forum.

Intro section turned into side menu.

Top “Sections” Navigation

Moodle has the ability to show one “section” (topic or week) at a time. However, the process for clicking through can be cumbersome.

Instead, we created a top navigation bar using numbers to represent each of the sections. The menu leverages Javascript, so the experience is fast as users click through the different sections. Additionally, using the browser’s local storage, the user’s last select is saved so that when the person returns, it opens to the same section every time.

SubHeaders and Categories

Our courses have a three tier structure: units -> lessons -> modules. Moodle, however, only has sections -> modules. As such, a new subheader “resource” was added. Teachers can easily add a subheader into a section to break it up into a smaller section. Additionally, an “activity type header” was created to provide a way to categorize modules (activities and resources). We broke these into logical sections, “Materials”, “Activities”, “Assignments”.

Activity Tasks

We have different ungraded activities like readings or videos that students must complete that don’t involve submitting anything or receiving a grade. We do, however, want the student’s to report back that the activity has been completed. Formerly, we used quizzes for this purpose. However, this required multiple steps that burdened students.

As a result, we created a new “activity” called an “Activity Task” that allows a teacher to add a task to the course along with a due date. Next to the task is a button that enables the student to mark the task as complete. The date is recorded and is compared to the due date to allow teachers to see who has completed the task on time.


Activity task plugin for Moodle.


Activity Task plugin for Moodle with Teacher view.

Tracking Progress

Another goal was to track a student’s progress as they move through the course. We wanted to have the option to track progress on any item and yet not have to edit the core Moodle code to do so. We discovered Moodle has completion tracking built into the system that allows teachers to place dates on any module. It also has some great features for auto-tracking based upon user actions. All we needed to do is figure out a way to leverage those dates and compare them to the course start date in order to track where a student should be in a course versus where they are. The end result was an interface for viewing student progress.

Progress Bar

The progress bar is added to the side menu at the bottom. On the course page, it is moved to the top using Javascript to be the first things students see. We wanted to place a bit of pressure on students if they were falling behind. So, we colorized the progress bar so that it turns yellow if they start falling behind and it turns red if they fall behind by more than 10 activities.

Moodle Snap plugin - progress bars.

Course Schedule

Every module that has completion tracking enabled and has been assigned a date is displayed on a “schedule” page organized week by week. This provides a quick overview of what and when things are due along with a breakdown of the individual progress on modules.

Moodle Snap plugin - Schedule - Student View

Additionally, the student has several options for outputting this schedule. They can print it, or export it as an iCalendar file that enables them to import the items into their calendar.

Moodle Snap plugin - Schedule output

Teacher View

The teachers can see an overview of the progress for each of the students. This enables them to help student’s falling behind.

Moodle Snap plugin - Schedule - Teacher view

Teacher Tools

Module and Date Selection Tools

Modifying the completion tracking on each of the modules can be a long process as you have to open each individual module to make changes. Two tools were created to expedite this process: “Activity Completion Selector” and “Completion Dates Selector”. These tools become available when editing is turned on.

Moodle Snap plugin - Activity Completion Tools

Moodle Snap plugin - Activity Selector


Moodle Snap plugin - Completion Date Selector

Student Forum Posting

In order to make grading forums a bit easier, we created a page for viewing all the forum postings for an individual student. This will show the post made by the student, and if it is a response, it will show the parent post below to provide a bit of context.

Moodle Snap plugin - Student Forum Posts


These improvements helped bring our overall redesign into a complete package. Our team made many other improvements. A great deal of work was done on learning experience as far as education methodology and design.

If you are interested in implementing these tools into your own Moodle site, all of the plugins have been provided freely on Github.

Leave a Reply

Your email address will not be published. Required fields are marked *