Improving Course Navigation User Experience [Part 1]: Establishing UX Patterns

Navigation is a broader term than what we understand by lesson navigation in LifterLMS with the Previous & Next Lesson links. The lesson navigation is but one of the ways students move around in the course.

Another way a user navigates a course is through the Mark Complete (or Take Quiz/ Assignment) button. A third way a student can navigate through the course is via the sidebar syllabus.

All these three user interfaces (UIs) provide their own type of navigation experience and in some aspects, act as redundancies of each other (that is, there are more than one way of accomplishing the same thing).

Student Behaviour

To understand the user experience (UX) of a student, let’s try creating a persona and describe their behaviour in a course context.

Apam Learns Yoga

Apam enrolls in a Beginners Yoga Program. Each individual lesson has a video, images and some text about one asana (yoga pose).

After enrollment, Apam lands on the course page, reads the introductory text and the syllabus to know that each lesson is about a particular asana. They see a clear Start Course button that they can click to land on the first lesson.

At this point, Apam is navigating the course through the syllabus, getting a very superficial overview of the whole path ahead. For this course, there are no prerequisites or drips. So, they can use the syllabus to navigate through the course in any direction and open any lesson in any sequence.

They can start browsing through the course, just to get a feel and overview. They play a couple of videos here and there, read a few paragraphs till they have satisfied their curiosity of how the course is going to be.

Another way, Apam may explore the course is in a linear fashion, one lesson to another in a sequence. In some courses, it might make sense to direct a student to first just superficially browse a course (or a section) once before diving in.

When ready, Apam will sit down (or twist their body into shapes) and spend focused time on actual learning, completing one or more lessons at a time.

Thus, the four common behaviours that Apam has displayed can be listed as follows:

Navigation BehaviourUI Component
1. Superficial OverviewCourse Syllabus
2. Non-Linear BrowsingCourse Syllabus
3. Linear BrowsingPrev/Next Lesson Navigation
4. Learning/ Task CompletionMark Complete (or similar) button

Of the four, 1 and 2 are pretty straightforward and we haven’t heard any complaints about the Course Syllabus UI or UX.

Some course creators find that displaying the syllabus on the lessons can be distracting and if it’s a large course, it could also be overwhelming. In such a case, you do have an option of removing the sidebar completely or with a bit of custom code, turn it into a one click slide-in-out component.

Course Navigation Models

The earliest mental model we have of processing stored sequential information is from books. Textbooks and Workbooks are common ways we experienced learning offline.

This is the essential mental model on which online courses are still based on. Even though there aren’t physical pages to turn, navigating from one lesson to another is actually called pagination. This is also a mental model followed by slideshows, which are virtualisations of physical photo albums.

That is why the User Interface (UI) of courses often resembles that of a slideshow with a previous and next step (corresponding to left and right in Left to Right (LTR) languages).

Just like books, in many courses, it’s not necessary to have an explicit completion at every step. However, to be able to report student progress and completion, every step has to be explicitly completed in an LMS.

Which is why online courses also use the mental model of a tasklist where each lesson is like a task to be completed. This mental model is visibly obvious in the Course Syllabus widget:

Task/Checklist Model of LifterLMS Syllabus Widget

The Course Syllabus widget that provides the overview and non-linear navigation is something that we have no complaints about. So, we won’t be giving much attention to the first two experiences from the table earlier.

Current Navigation UI with Astra Theme

The last two experiences (Linear Browsing or simply browsing vs Task Completion or simply completion) are two distinct User Experiences provided by two different but closely related UI components in LifterLMS represented by Pattern 1.

Pattern 1: Current Visual Hierarchy in LifterLMS

Problems with the Current UX & a simple CSS solution

Because the Task Completion mental model is not as obvious as the Book/Slideshow mental model in the context of courses, some course creators and students don’t get it intuitively.

Missing Mark Complete

In case of one course creator with a really large course with hundreds of lessons, some students completed the whole course without hitting Mark Complete. It is something they realised when they didn’t receive the course completion certificate.

It then became a hassle to go back and complete each lesson individually and we had to work on a code level solution to directly add the completion information to the database.

Our senses and our mind have evolved strategies to focus on what’s known or important, and ignore everything else. If the Mark Complete button isn’t highlighted enough on your site (due to its color or size), this situation is pretty much possible.

So, a really simple solution UI/UX wise is to implement a visual hierarchy that focuses on highlighting the Mark Complete button (Pattern 2).

Pattern 2: Simple Visual Hierarchy

Doing that is fairly easy with a bit of custom CSS and is perhaps the most economical strategy to improve the UX of course navigation.

In this original layout, there’s a line separating the two navigation models. Also, the task completion model is visually almost at the same level as the browsing one even when it has the primary action color.

(Notice how the check mark icon on the Mark Complete button conveys the Task completion model in the Astra theme.)

Original Visual Hierarchy

To make it slightly more intuitive, I have

  • Removed the line between the two UIs.
  • Reduced the spacing between them to bring them closer.
  • Increased the font-size and padding of the Mark Complete button.
  • Reduced the font-size of the Previous Lesson & Next Lesson text and changed the color to improve the contrast so that it’s still legible even though it has lost some importance.
Promoting Completion Action in Hierarchy

With such simple changes, I’m able to

  • Project an appearance of integration of the two navigation experiences.
  • Highlight the task completion mental model so that it is extremely prominent.

The exact CSS would differ from theme to theme and your designer may have better ideas but using this pattern requires no changes in code or extending templates, unlike the rest of this tutorial.

Here are screenshots of how this looks on a lesson with the Astra theme before and after the changes:

Current hierarchy on the screen
(Click Image to View Larger Size)
Simple hierarchy on the screen
(Click Image to View Larger Size)

True Integration through Code

The strategy above will work well with most themes. However, some themes make it a point to push the navigation down to the bottom of the screen. If a lesson just has a video or very little text, there’s often a large visual gap between the two UIs.

Also, at this point in this tutorial, we need to start thinking about combine or unify these two separate navigation interfaces into a single experience.

In both these cases, you’d need to write custom code, and extend and override templates. This is because these two are distinct UI components with their own separate templates. We’ll explore the actual code in the subsequent parts of this tutorial. In this post, we’re just exploring the possible patterns.

Three Column Navigation

One of the first logical ideas could be to simply make it a three column navigation (Pattern 3). Depending on your layout, this can get really crowded and the issue of not observing the task mental model may not change without additional work.

Pattern 3: Three Column Navigation

Free vs Restricted Navigation

In the instance above where a student can freely browse through a course in any direction, Free Navigation takes place. In some courses, browsing is actively discouraged. When there are restrictions on their navigation (due to drips or prerequisites), it’s Restricted Navigation.

Combined Next Step UX

Courses with Free Navigation sometimes don’t want a special Mark Complete action. They’d rather merge it with the Next Step action. They don’t care about a separate browsing experience or want to actively discourage it. We receive this as a feature request with a reference of other LMSes that do that.

Irrespective of use cases, it does seem more intuitive to somehow combine the two mental models with a visual bias towards the more common browsing navigation.

So, what we want to do is keep a two column model, visually like the Previous Step/Next Step browsing model with the completion action somehow amalgamated with the Next Step action (Pattern 4).

Pattern 4: Next Step Combined in some way

Single Next Step UX

In Restricted Courses, depending on the completion or drip, one of the two may become useless at one time or the other so that they can act like states of one another.

This makes a lot of sense since the Mark Complete button also redirects the user to the Next Lesson (if it’s available). So, if a student hasn’t completed a lesson, you could simply display a Mark Complete button in the right column and hide the Next Lesson button.

When the student completes the lesson, you could hide the Complete button and start displaying the Next Lesson button (Pattern 4.1):

Pattern 4.1: Next Step with States

This could make things extremely simple for the student since they don’t have to be confused between the two types of Next Step behaviour. That’s why this UX is extremely popular in the feature requests we receive.

However, it doesn’t make sense to implement something like this in core because first, this takes away the browsing experience. Second, this can get complicated if you wish your students to have the ability to mark a lesson incomplete. It also gets complicated if you have a quiz where you want to allow multiple attempts.

In these cases, what is the only button you’d show? How do you make that decision?

Since this has a narrower use case, it can’t be a core feature. If this does make sense for your use case, follow this tutorial along and I’ll take you through the steps in subsequent parts.

Hierarchy of Next Step Actions

At this point, one thing should have become clear. Of the various Next Step options, you could easily choose one to be the most important and relevant.

From the example above, if a student hasn’t completed a lesson yet, the Mark Complete button can be thought of the most important and expected action that a student can take. The Next Lesson action can become visually unimportant in comparison even though it is present:

Pattern 4.2: Next Step Hierarchy

This has all the advantages of the previous UI and none of the disadvantages. This pattern is very similar to Call to Action (CTA) buttons with a secondary action so that our Next Step UX could be like this:

CTA style Next Step with explicit choice
Hierarchy on the screen
(Click Image to View Larger Size)

So, instead of making a call on what is the only button to display, we need to make a call on what the primary action in a given context is.

In my personal opinion, this is the most reasonable model to work with if you want to stick to a two column, combined UX. However, I’d like to go a step further and see if we can optimise this UX even more.

How important is the Previous Step really?

How often do you expect the student to press the Previous Lesson button?

When browsing, is it safe to assume that the student will just keep going next, till they’re done and ready to start the course (or a section). In such a scenario, using the Course Syllabus is a faster way to get there instead of clicking Previous Lesson multiple times.

When learning, a student would keep clicking Mark Complete till their session ends and pick up from where they left in the next session.

Of course, the previous navigation is needed but is it visually and functionally as important as the next step?

Is the Previous Lesson button really needed though? If you get really radical and minimal, the browser’s back button or gesture can take care of backward exploration and completely get rid of the Previous Lesson action!

It follows that you could reduce the hierarchy of the Previous Lesson action too.

Pattern 5: Overall Practical Hierarchy

At this level, it just might make sense to create visual symmetry with the one primary and two secondary actions:

Pattern 2: Simple Visual Hierarchy

Which is pretty much what we started with! Did this whole exercise amount to nothing? Well, at least now you know why it is the way it is, by default! It’s simple and works for every use case. It doesn’t make a lot of sense to modify the core UI just because there are more elegant solutions possible in some cases. For such things, we create such recipes and tutorials.

We’ll implement this pattern a little differently in the sense that instead of always having the Mark Complete as the primary large central button, we could switch the positions depending on the context.

Pattern 2.1: Swapped Primary Action

Conclusion and What’s Next

What we’ll do in the subsequent parts of this tutorial/recipe is to explore these customisations technically, at the level of code.

Any of them might make more sense for your particular use case and one of them could possibly make sense as a default. That depends on your feedback and comments. Which of these patterns makes more sense for you? Are there any other patterns that you feel we should explore?

If you’re a theme developer or have a theme developer on board and integrate any of these, we’d love to know about it too.

2 thoughts on “Improving Course Navigation User Experience [Part 1]: Establishing UX Patterns”

  1. Pingback: Improving Course Navigation User Experience [Part 2]: Planning UI Copy & Markup - Make LifterLMS

  2. Pingback: Improving Course Navigation User Experience [Part 3]: Implementing the Navigation Model - Make LifterLMS

Leave a Comment

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