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 (pictured below) offered learners the ability to view and navigate between the 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 the section, 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.
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:
What is in this course? – Outline / Content Clarity
What do I need to complete or do? – Outcomes / Progress
Is this course for me? – Relevance / Belonging
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 now 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.
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.
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.
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.
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 the 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
Passes accessibility check
Compatible with mobile web
Congruent with native mobile experience
One use case to consider when creating a design is the real use case of subsections having dozens to hundreds of units in the subsection, what does the sidebar navigation look like in this case?
Another use case is to consider what very long section, subsection, or unit names look like in the sidebar navigation?
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
The following table outlines what is in scope and out of scope for this MVP release.
In Scope | Out of Scope |
|---|---|
|
|
In order to deliver all components of the MVP Left-Sidebar Navigation release, the following features will need to be completed:
Epics | Requirements |
|---|---|
Epic 1 (Product + UI): UI | UI design for a community-wide solution. Feel free to reference implementations by Raccoon Gang and Pearson while ideating on UI |
Epic 2 (Engineering): Implementation | The UI design developed in Epic 1 is implemented, so that the left-sidebar navigation is restored as the default navigation |
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.