Status: Product definition

This is an early draft.

Collaboration developing this is welcome, comments will be solicited later.

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.

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

OpenCraft Version

This was a hi-fi wireframe OpenCraft developed for a possible new theming project. Our aim here was to make the learning experience easier, distraction and clutter free.

Here was our thinking:

To eliminate distraction, once a user has selected a course, they are navigated to a page where everything relates to the course. The main navigation is gone and in its place we have a simple course navigation. If the user wants to exit the learning experience, they can easily do so by selecting the back arrow (next to “Introduction to Linux” above).
The sidebar only relates to the course content, so all learning material is grouped in one place. Our aim was to reduce the number of primary navigation options (goodbye “unit” horizontal nav) to improve general wayfinding, and to make more “space” for learning content on the right of the screen.

We also created a mobile version:

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
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 (in frontend-app-learning)

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.

[UPDATE 1/25 - The MVP will keep the horizontal nav. We will explore simplifying through elimination in later releases, but can punt on epic 1 for now.]

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.

Open edX Product Management

Feature Enhancement Proposal: Restore the left-sidebar navigation in the learner experience