Recipes

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