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 sections and subsections of a course in the left-sidebar navigation of the in-course experience.

In addition to the sidebar navigation, learners saw breadcrumbs at the top of every in-course experience page that listed section name, subsection name (if applicable), and unit name (if applicable) above a horizontal navigation bar. The horizontal navigation bar 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.

Open

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. The top of each in-course experience page included breadcrumbs. Below that, a horizontal navigation bar made up of clickable component icons, previous and next buttons on the horizontal navigation bar and at the bottom of each in-course experience page. The breadcrumbs currently include a Course breadcrumb as the left-most breadcrumb, which when clicked brings users to the Course Outline page showing a course description and outline.

Open

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 completion statuses of the course section, subsection and units, and easily navigate to course sections, subsections, and units.

The existing horizontal unit-level 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 experience pages as well. The right-sidebar will display course discussion forum activity and future notification bars, etc.

Key Use Cases

Functional Requirements

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

• Remove breadcrumbs from in-course experience pages

• Left-sidebar allows user to drill from section to subsection and from subsection to unit

• 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 right-sidebar functions (Approaches (by Raccoon Gang and Pearson) for this already exist elsewhere, and may be a good reference to look at when building this out)

  • The in-course experience page content remains the primary function of the page, and the dual sidebars are designed in such a way to minimize distraction from course content

  • Learner must be able to collapse the left-sidebar navigation and easily expand it from its collapsed state

  • Learner must be able to collapse the right-sidebar function and easily expand it from its collapsed state

• For MVP, toggle option, with plan to potentially remove option by Sumac.

Non-functional Requirements

• Passes accessibility check

• Compatible with mobile web

• Congruent with native mobile experience

Potential Design Challenges

• One use case to consider when creating a design is the real use case of subsections having dozens to hundreds of units in one subsection, what does the sidebar navigation look like in this case?

• Another use case is to consider is how very long section, subsection, or unit names behave in the sidebar navigation?

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 experience page should appear and behave once this sidebar has been implemented, so that the user is able to view course content easily, while also being able to access or collapse either sidebar

• Implementation of left-sidebar navigation and right-sidebar compatibility

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:

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. Because the in-course experience page will have both a left- and right-sidebar, distraction-free mode may be explored to introduce an easy way for learners to focus on course content when sidebar functions aren’t immediately needed while also allowing learners to easily access sidebar functions when they are needed.

Distraction Free (Focus mode)

There is a potentially connected project to introduce the option of a distraction free mode, that users could toggle to remove most of the content that is not specifically related to the current learning experience.

UX Approach Doc – Distraction Free/Focus Mode

Open

Focus mode toggle: off

Open

Focus mode toggle: on

Considerations for sidenav

• This feature could potentially give users the ability to hide the horizontal nav if they desired, which could resolve the question of whether the sidenav eventually totally replaces the horizontal nav

• In a world where the sidenav toggle existed independently of the focus mode feature, we believe the breadcrumbs shown in the design would be redundant and could be removed

• This project is currently on hold at 2U, so decisions on the sidenav MVP should not be impacted by any assumptions about this project

• If there is community interest in doing this project as a follow on to the sidenav MVP release, 2U has done the discovery and design for this project, and had just started development when the project was paused. So it’s potentially in a good place to be picked up by the community if desired