Recipes

Improving Course Navigation User Experience [Part 3]: Implementing the Navigation Model

In Part 1 of this series, we discussed possible mental models that could be used to enhance or replace the current lesson navigation component in LifterLMS.

In Part 2, we went a step ahead and planned the markup and the copy that would be involved in implementing such revisions.

This concluding part discusses the actual code needed to implement the ideas discussed in the earlier parts.

Improving Course Navigation User Experience [Part 2]: Planning UI Copy & Markup

In Part 1 of this recipe, we explored various UX patterns for Course Navigation where one of the central theme was that the Mark Complete (or similar) and Next Lesson actions are subtypes of the same Next Step action in a basic intuitive course model.

For the UI, this means that the Mark Complete button and the Next Lesson button become citizens of the same visual space – the right column (next step) of a two column navigation.

For that to happen, we need to change the markup of the navigation component in the template system.

Default Navigation Templates

The two templates responsible for the two distinct experiences are:

Within the lesson-navigation.php template, another template is used to generate the Previous and Next Lesson links’ markup:

https://github.com/gocodebox/lifterlms/blob/3.34.4/templates/course/lesson-preview.php

This lesson-preview.php template is also used within the Syllabus component. So, we’ll also need to differentiate between the use of this template in these two contexts, either by splitting it into two separate templates or by modifying the output for each context.

Lesson Navigation Templates

Restructuring Navigation

Now, we’re looking to do something like this:

Which means that whatever the final pattern we build, we’ll have to redo the templates. What we’re looking for is a two-column layout where the left column will always contain only one action but the right column may contain more than one actions.

If you spend some time going through the code in the templates above, you’ll notice that the current markup is structured like this:

  • div.llms-lesson-button-wrapper (complete-lesson-link.php)
    • button (Mark Complete/ Take Quiz/ Start Assignment)
  • nav.llms-course-navigation (lesson-navigation.php)
    • div.llms-course-nav.llms-prev-lesson (lesson-preview.php)
    • div.llms-course-nav.llms-next-lesson (lesson-preview.php)

In this markup, like we’ve discussed in the earlier part, the task completion model and the navigation model have two distinct spaces. What we want to do instead is to rearrange them into a structure similar to this:

  • nav.llms-course-navigation
    • div.llms-course-nav-step.llms-prev-step
      • div.llms-course-nav.llms-prev-lesson
    • div.llms-course-nav-step.llms-next-step
      • div.llms-lesson-button-wrapper.llms-next-action.llms-next-primary-action
      • div.llms-course-nav.llms-next-lesson.llms-next-action.llms-next-secondary-action

We’ve divided the navigation using two new top-level div’s while moving the existing navigation elements a level deeper. In the div for the next action, we’re attempting to differentiate between the primary and secondary actions. This will help us prioritise the primary action visually, irrespective of its order in markup.

At the same time, we don’t want to modify the selectors so that any existing functionality doesn’t break and we achieve what we need with minimum code.

Various States of the Navigation UX

Before going further, let’s take the various permutations in stock. I have listed five states of the navigation

  1. Standard Lesson not yet completed.
    1. with a regular Mark Complete button
    2. with a Take Quiz/Start Assignment button
  2. Completed Lesson.
    1. with a Mark Incomplete button
  3. Next Lesson is Restricted (via prerequisite/drip)
  4. First Lesson (No Previous Lesson, so replaced by Back to Course link)
  5. Last Lesson (No Next Lesson, so replaced by Back to Course link)

We’re considering all the variables in this part of the tutorial. In a subsequent part, we’ll look at special cases where some of these variations will either not exist (for eg, Mark Incomplete) or will be implemented differently.

It is also important to note that at this stage, the Take Quiz and the Start Assignment buttons can be considered as the same UI component as the Mark Complete button.

Also, this doesn’t claim to be exhaustive and cover every possibility, just most of them. Even the copy is something you can obviously modify. (If you do see something missing, let us know in the comments and we’ll try and update this series accordingly!)

Explicit Next Step Choice

An important principle of design is providing clear and explicit choice to a user when there are options for an action. This is why you see wordy CTA buttons. For more, see: https://www.smashingmagazine.com/2015/05/designing-for-explicit-choice/

So, we’re going to change the text of the buttons a bit for explicit choice and an interactive human voice.

State 1. Standard Lesson

In situation 1, for example, we could use:

  • Primary Action: Mark Complete & Go to Next Lesson
  • Secondary Action: Next Lesson without completing
State 2. Completed Lesson

Once the lesson is complete (situation 2), we could use:

  • Primary Action: Go to Next Lesson.
  • Secondary Action: Mark Incomplete.

At this point, it is useful to note that, the text Lesson Complete is displayed in place of the Mark Complete button irrespective of whether marking incomplete is enabled. When Mark Incomplete is enabled, there is a button as well as this text.

In another recipe, we’ve discussed ways to move this indicator and make it more obvious. This way, the Lesson Complete text becomes redundant. One less element to worry about in our navigation.

Now that that’s out of our way, let’s try rewording the options for a lesson with a Quiz:

  • Primary Action: Take Quiz to Complete Lesson.
  • Secondary Action: Next Lesson without completing.

For a lesson with an Assignment:

  • Primary Action: Start Assignment to Complete Lesson.
  • Secondary Action: Next Lesson without completing.
State 3. Restricted Next Lesson

When the next lesson is restricted because of a prerequisite:

  • Primary Action: Mark Complete & Go to Next Lesson.
  • Secondary Action (disabled): Next Lesson unavailable before completing {lesson link}.

The primary action may not lead the user to the Next Lesson if it’s prerequisite is a completely different lesson. So, we need to differentiate between scenarios where the current lesson is a prerequisite of the next lesson and where another lesson is a prerequisite instead.

In the former, the copy can stay as it is. In case of the latter, the primary action can’t say Go to Next Lesson, it’d have to just say Mark Complete.

When the next lesson is restricted because of a drip:

  • Primary Action: Mark Complete & Go to Next Lesson.
  • Secondary Action: Next Lesson unavailable before {date}.
State 4. First Lesson

On the Last Lesson:

  • Primary Action: Complete and go back to Course.
  • Secondary Action: none.

On the First Lesson, nothing changes with respect to the next step. Only the Previous Step is a little different.

State 5. Last Lesson

To summarise, here are all the variations we’ve discussed, placed together for clarity and context:

  • Default
    • Primary Action: Mark Complete & Go to Next Lesson
    • Secondary Action: Next Lesson without completing
  • Completed
    • Primary Action: Go to Next Lesson.
    • Secondary Action: Mark Incomplete.
  • With Quiz
    • Primary Action: Take Quiz to Complete Lesson.
    • Secondary Action: Next Lesson without completing.
  • With Assignment
    • Primary Action: Start Assignment to Complete Lesson.
    • Secondary Action: Next Lesson without completing.
  • Prerequisite
    • Primary Action: Mark Complete & Go to Next Lesson.
    • Secondary Action (disabled): Next Lesson unavailable before completing {lesson link}.
  • Drip
    • Primary Action: Mark Complete & Go to Next Lesson.
    • Secondary Action: Next Lesson unavailable before {date}.
  • Last Lesson
    • Primary Action: Mark Complete & Go Back to Course
    • Secondary Action: NA

Now, that we have almost all the pieces in place, we can start building this navigation.

Depending on what model you prefer, you could easily use a bit of CSS to achieve any of these with the same markup guidelines shared at the start.

If you’re a developer, this should be enough to get you started on the code modifications needed to implement these. If you are planning to do so or have already implemented this, share your results with us in the comments.

If you’re looking for copyable code that you’d like to repurpose, part 3 is underway.

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).

Redirecting users from restricted content to login form and back

TLDR;

The whole code is available in a gist here: https://gist.github.com/actual-saurabh/0d5a8ea8d0e90c729a91f86bcf378faf

Requirements

You should be comfortable with copy pasting code and editing some text inside it to be able to use it. This code is theme independent and would work on almost all sites.

Plugin Conflicts

If you have a plugin that extends the login mechanism or post-login redirects, they may interfere with this recipe and it may not work.

That also means that this may not work that well with WooCommerce and you’d need to modify the recipe for that. If you do end up with a recipe for LifterLMS + WooCommerce sites, get in touch with us to publish it here.

Background

When a user lands on a lesson (or another piece of restricted content) on your site, they are either shown a notice or redirected to the course (membership, etc) to buy it and gain access.

This is fine for your prospective members (visitors) but some LifterLMS users find this unsatisfactory for existing members or students.

When students get links to such lessons (restricted content) in an email and click that to reach the lesson, one of two things can happen. If the student is logged in, they’ll see the lesson and things will go on smoothly.

Things are a bit complicated if the student isn’t logged in. There is no way for us to differentiate between anonymous visitors until they login. So, such students (coming from an email) will also be treated like casual visitors.

At this point, a student may not realise what’s going on and attempt to sign up for the course or membership again. That will tell them that they’re already signed up for a course (if they use their registered email address) or create a duplicate sign up (if they use a new email address).

What they need to do is go to the login screen and login. Now, even when the student logs in, they’ll be redirected to the Student Dashboard.

To go back to the lesson (from the email), they would need to open the email again, click on the link again and this time, they’ll be on the lesson as intended by the course creator.

What would have been much easier is if we could do something to the link in the email so that instead of all this, the user was redirected to a login screen and as soon as they login, redirect them back to the lesson seamlessly.

Goals

  • Add a parameter ?login=1 at the end of a restricted URL when adding it to emails intended for registered students who definitely have access when logged in.
  • When such a student clicks this link and lands on the restricted page, redirect them to the login screen.
  • On the login screen, inform the student that they need to login to access the restricted content.
  • After logging in, redirect the user back to the restricted content where they have complete access now.

Here’s a preview of what to expect from this recipe:

Fullscreen Distraction-Free Learning

TLDR;

The whole code is available in a gist here: https://gist.github.com/actual-saurabh/a59beef775b61c33629aa0824061de9c

Requirements

Basic CSS and JS (jQuery) skills are needed to customise this recipe for some themes. Some basic understanding of WordPress APIs may be needed for additional customisation.

This has been tested successfully with many standard themes and should work well, as it is, for such themes.

The code here would work even if there’s no LifterLMS on your site, without any problems, to create a distraction free reading mode.

A note on Fullscreen API

Browsers don’t allow fullscreen without a user interaction. So, the fullscreen mode cannot persist between lessons. This means that a student would have to click a button on every screen to go into fullscreen mode. There is no way around it. See: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

Goal

  • Add a fullscreen button to content.
  • Clicking this button should make the content fullscreen.
  • All headers, footers and sidebars would be hidden.
  • If a course syllabus is present on the page, add a slidein/ slideout syllabus.

Here’s a preview of what to expect from this recipe

LifterLMS Focus Mode Preview