Status: Product definition

Overview

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

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

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.

WGU Version

Pearson Version

RaccoonGang Version

https://drive.google.com/file/d/1M3V9_TsxbM_W9_LXHSrdsD0aTJDR0g8P/view

For the avoidance of doubt, this proposal is advocating for restoring the side-bar navigation as the default user experience, not an option behind a feature toggle.

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.

[Accumulate research here.]

Key Use Cases

Functional Requirements

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

• Can be hidden or shown by user action

• Plays well with potential distraction free feature

Non-functional Requirements

• Passes accessibility check

• Compatible with mobile web

• Congruent with native mobile experience

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.

Proposed Scope for first release:

In scope:

• Reintroduction of sidebar navigation to replace breadcrumbs

• Sidebar will live on the lefthand side so righthand side can be free for notifications, in-context discussions

• Possible toggle between lefthand and righthand sidebars

• Possible collapsible option for lefthand sidebar

• Possible optional configurations:

  • How many levels deep

  • With or without unit-level horizontal navigation

Out of scope:

• Focus mode feature

• Righthand sidebar pluggable infrastructure

Epics/Milestones to get to first release

Epic 1 (Product + UI): Decision: Keep or lose horizontal unit nav. Approach: Either A/B test (from scratch or using pre-existing data); possible 1:1 or small group user interviews.

Epic 2 (Product + UI): UI design for a community-wide solution. Takes into account testing results from Epic 1. Builds on right/lefthand toggles implemented by Raccoon Gang and Pearson.

Epic 3 (Eng): Implementation

Solution

Technical solution

Additional information

Plan for long-term ownership/maintainership