Overview

Context

In early 2017, changes were rolled out to the Open edX learner experience to remove the left side-bar navigation from the in-course view.

The Original Sidebar Experience

The original sidebar experience (pictured below) offered learners the ability to view and navigate between the sections, subsections, and units of a course in the left-sidebar navigation of the in-course pages.

In addition to the sidebar navigation, learners saw breadcrumbs at the top of every course page that listed the section, subsection name (if applicable), and unit name (if applicable) above a horizontal navigation bar. The horizontal navigation displayed each component in the unit with an icon indicating the type of component content flanked by Previous and Next buttons on either side. Learners could click on any component icon to navigate to that component or use the previous and next buttons to navigate from one component to the next or previous component in the course.

Reason for Removing the Left-Sidebar

This change was precipitate by UX testing, from the product launch documentation

Additional testing has highlighted that the course landing experience is a clear opportunity area for helping new learners better understand what a course is all about. The home page and the course pages are the areas of initial focus for our team, helping to ensure that the most commonly asked questions learners have when they land in a course are answered quickly and easily. We have found that learners are often looking to answer the following three questions when they arrive in a course:

1. What is in this course? – Outline / Content Clarity

2. What do I need to complete or do? – Outcomes / Progress

3. Is this course for me? – Relevance / Belonging

Current Horizontal Navigation Experience

With the left-sidebar navigation removed, the current out-of-the-box navigation experience relies entirely on the horizontal navigation experience described above made up of the breadcrumbs, clickable component icons, previous and next buttons on the horizontal navigation bar and at the bottom of each in-course page. The breadcrumbs now include a Course breadcrumb as the left-most breadcrumb, which when clicked brings users to a course homepage showing a course description and outline.

Community Response and Renewed Urgency to Restore Sidebar Navigation

Starting immediately in 2017, there were community members who wanted to have the option to enable side-bar navigation and didn’t agree with the initial decision to remove it.

Before MFE became the default solution for user facing experiences, it was still possible to re-enable the side-bar navigation via a waffle flag. However, as the learning experience has migrated to the frontend-app-learning MFE, this waffle flag option is not compatible with the the MFE. Therefore, deployers must choose between upgrading and having their preferred navigation UI.

There have been multiple efforts to add the side-bar back to the in-course experience including versions created by WGU, Pearson, and RaccoonGang. WGU and Pearson will be releasing to their production instances this quarter. Restoring the sidebar has remained a topic of interest in the forums. Furthermore, there’s been a roadmap issue opened to advocate for restoring the in-course sidebar navigation.

Problem

Currently users are unable able to easily way-find in the in-course experience. Understanding where they are, what they’ve done, how much is left is difficult without navigating away from the in-course experience.

In a recent conversation, an Open edX learner shared that they typically keep the course outline open in a separate tab and navigate back and forth between the outline and the in-course experience.

It is arguable that of the three original goals, it is easier to understand “what is in this course,” and “what do I need to complete or do,” with a ready-to-hand, navigable index of the course that includes markers of progress. The current UX requires extra clicks for learners to have access to information that they want to have readily available, causing friction and leading to the development of work-arounds like keeping the outline open in a separate tab.

A second goal of the original work was “to expand the learning content area for learners and provide a more immersive content experience.”

While valuable, this goal can be achieved in other ways. For example, a collapsible sidebar and/or implementation of low-distraction mode could provide a focused, immersive learning experience.

Goals for MVP

The goal of this release is to restore the left-sidebar navigation as the default user experience, not an option behind a feature toggle. The left-sidebar navigation must allow the user to view the course structure and content, their own progress in the course, and easily navigate to course sections, subsections, and units.

The existing horizontal navigation allowing users to navigate from component to component will remain for the sake of this initial MVP release with the idea that user testing will be conducted in the future to better understand the best user experience for viewing and navigating between course components.

The UI for this initial MVP must take into account the right-sidebar being added to these in-course pages as well. The right-sidebar will display course discussion forum activity.

Key Use Cases

Functional Requirements

• Allow users to easily navigate non-linearly and orient themselves in the course

• Allow users to easily see the progress they’ve made in the course

• Can be hidden or shown by user action

• Must play well with soon-to-be-added right-sidebar discussion forum posts

  • Learner must be able easily view course components

  • Learner must be able to know the left-sidebar navigation exists and easily access it

  • Learner must be able to know the right-sidebar discussion forum alerts exist and easily access them

• Plays well with potential distraction free feature

Non-functional Requirements

• Passes accessibility check

• Compatible with mobile web

• Congruent with native mobile experience

Deliverables

The deliverables for this MVP include:

• UI for:

  • The restored left-sidebar navigation and how the it appears when expanded and collapsed

  • How the in-course page should appear and behave once both sidebars have been implemented, so that the user is able to view course content easily, while also being able to know both sidebars exists, what they are for, and access them when needed.

• Implementation

Users

The primary users benefiting from the restoration of the in-course sidebar navigation will be learners taking a course in the Open edX platform.

In Scope/Out of Scope

The following table outlines what is in scope and out of scope for this MVP release.

MVP Specs

In order to deliver all components of the MVP Left-Sidebar Navigation release, the following features will need to be completed:

Technical Open Questions

Open Questions

• How should the existing navigation elements – top navigation and breadcrumbs – change to dovetail with the sidebar navigation experience

  • What’s the UX PoV on how many levels deep the nav should include?

• To what degree will we support “choose your own” navigation via feature flags.

  • Can this be used with or without the existing top navigation?

• What is the best UX and technical approach for implementing “distraction free” mode. It’s assumed this is a separate scope of work. Product definition and confirmation of the user problem won’t be covered here.

Future Direction

After this initial release, usability tests will be conducted in the future to better understand the best user experience for viewing and navigating between course components.