Skip to main content

Docebo Help

How can we help?

Transition to the New Course Page

Last Updated
Docebo Module
  • Learn
Reading Time
User Level
  • Administrators

Introduction

Starting on the monthly release of the week of March 27, 2023, as part of the Docebo accessibility journey, Superadmins can preview and test the new course page as well as the revamped course and learning plan page.

This revamp aims at increasing the level of compliance of Docebo Learn with the Web Content Accessibility Guidelines (WCAG) (opens in a new tab), in particular for the course player and the course and learning plan page in catalogs (for not enrolled users) and when accessed from the My Courses and Learning Plans area (for enrolled users).

Available Resources

What’s New

The main drive for the redesign of the course page is accessibility, but this revamp also includes design and functional enhancements. 

Both for the course and the learning plan page and for the course player:

  • The content is organized to provide a meaningful and consistent user experience, also for those using assistive technology.
  • Thanks to the possibility to bypass blocks of content, the users using keyboard-only navigation can quickly reach the content they are interested in. 
  • All of the page's main sections have an accessible name, to provide a meaningful summary to screen reader users. 
  • The visual elements have been properly labeled, whenever needed.
  • The redesign takes the page reflow into consideration to provide a meaningful and consistent experience for the users zooming through the interface. 
  • The texts of the interface have been reviewed to provide a meaningful and consistent experience to everyone. 

The Course and Learning Plan Page in Catalogs

The course and the learning plan page in catalogs and in the Catalogs widget is shown when learners are not enrolled in courses or learning plans and they access them from catalogs. 

The page has been entirely redesigned with accessibility in mind to be more intuitive and easy to use for all users:

  • Widgets: course widgets show a preview of their content and can be expanded.
  • Reflow: the page supports small viewports and learners can zoom it up to 400% without loss of information or functionality.
  •  Skip to main content: the page allows users that rely on keyboard navigation to move quickly to the main content or specific widget bypassing other elements such as the logo, search areas, and header buttons.

The layout of the page is composed of three main areas:

  1. Header: It shows the content details: title, short description, type of content, language, rating, and duration. Learners can perform actions by clicking buttons that open accessible pop-ups to isolate every action. Every action performed informs the user about what is happening. In addition, you can set a header image, making the user experience more enjoyable and of great impact as well as color the course header with a solid color (for example, to emphasize your brand colors), or to keep a basic layout (with no images and colors).
  2. Sidebar: It shows information about the enrollment options, purchase options, and some details about the content: last update, average completion time, credits (CEUs), certificates, certifications, if the e-signature is required, and if it comes from the Content Marketplace.
  3. Content area: It is the page's main area and provides detailed information according to the content type and its configuration. The learning plan page allows learners to explore the content of the courses composing the plan through expandable sections. 

The Course Page for Enrolled Users

The course page is shown when learners are enrolled in courses and access them from the My Courses and Learning Plans page or from the Courses and Learning Plans widget. The page has been redesigned to highlight the course training material (lessons). In addition, course widgets are available from a dedicated menu organized in tabs. 

The layout of the page is composed of three main areas:

  • Course title bar: This area shows the course title, the course type, the course language, the learners' progress in the course, and the action buttons allowing learners to perform the actions configured for the course.  
  • Player area:  The area most impacted by the revamp. It includes the course syllabus expandable panel, the lessons navigation bar, the player, and the description of the lesson, if any.
  • Widgets: The course widgets are grouped in a dedicated area under the player area, and are organized in tabs. All of the widgets are labeled with headings. To provide a good experience to keyboard-only users the keyboard focus allows them to move to the title of the widget selected. 

The E-Learning Player Page

The player page of e-learning courses has been completely revamped, the main enhancements include:

  • Course Syllabus: The new area showing the course content is an expandable panel allowing learners to navigate the course lessons, and that can be displayed or hidden with a click.
  • Consistent Player Experience: The new course player has been designed to provide a consistent experience for all types of training materials. Navigation elements and functionalities do not change position or aspect but simply adapt them according to the type of training material.
  • Theater Mode: To provide a real immersive user experience, the new player includes the Theater Mode view, which allows learners to expand the player and focus only on the content by hiding the platform header and the course widgets while keeping the course syllabus and the navigation bar visible. 

The Instructor-Led Training (ILT) Player Page

The player page of ILT courses has been completely redesigned, the main enhancements include:

  • New Layout: The page focuses on ongoing and future events to provide learners with better guidance on how to complete the course. The events can be shown with a Day view ( to see all of the events of a single day) or an Agenda view (to access the complete list of the session’s events). Past events are hidden by default but they can be viewed by enabling a filter. 
  • More visibility for actions: The buttons to join events are highlighted in the upcoming events area and shown next to the events. 
  • Session completion information: The course progression status area is followed by a widget providing details on what the learners need to do to complete the session.

The Learning Plan Page

The revamp of the page of learning plans includes:

  • Progress details: The learner's progress in the learning plan is clearly displayed in the Progress area, as well as the courses to start and/or resume.
  • Learning plan details: It is an area showing the summary of the learning plan details: last update, time left to complete the plan, if it is associated with certificates and certifications, and if it comes from the Content Marketplace. 

Unique Course URL

Courses now have unique URLs, independently from the page where the learner accesses it and from the learner enrollment status. This enhancement responds to an idea with 162 votes. 

The old course links will not be automatically updated but will still work (if bookmarked, or shown in communications, for example).

Activating the New Course Page Preview for Your User

The preview of the course page is available for Superadmins, meaning that they can activate the preview for their use only, test it, and decide to activate the new course page for all users. Superadmins can also decide to leave the preview mode and go back at a later time. 

Please Note! The preview mode is available until June 2024, when the old course page will be sunset and all users will be required to adopt the new course page. Learn more in the Community (opens in a new tab).

To activate the preview of the course page, log in as a Superadmin, and access the Admin Menu from the gear button in the top right corner of the page. Move now to the Settings area and click on Configure Branding and Look. 

From the banner on the top of the Desktop tab, click on Enter the Preview Mode and then Confirm and Reload on the pop-up window that will open. The platform interface will reload to activate the preview mode. 

Before confirming you want to activate the preview mode, remember that:

  • You will be the only user activating the new course page. The other users (including Power Users and other Superadmins) will keep seeing the old course page.
  • The changes you do while in preview mode (such as enabling options, changing colors, etc) will reflect on the live environment.

Activating the course page preview

While in preview mode, the Preview Mode label is shown on the top right corner in the areas listed in the What's New chapter of this document only for your user. 

Preview Mode label

You can deactivate the preview by reaching the Configure Branding and Look menu and by clicking on Leave Preview Mode in the banner at the top of the page. 

Leave preview mode

Activating the New Course Page for All Users

Once you have activated the new course page preview for your Superadmin user (as described in the Activating the New Course Page Preview for Your User chapter of this article), you can activate the new course page for all of the platform users.

To do so, log in as a Superadmin, and access the Admin Menu from the gear button in the top right corner of the page. Move to the Settings area and click Configure Branding and Look. 

Activate for all users

From the banner on the top of the Desktop tab, click on Activate for All Users. Confirm you want to activate the preview in the pop-up box, and wait for the platform to reload. All users will see the changes linked to the new course page starting from their next login, or when they reload the platform page, even before they log off and log in again. 

Deactivating the New Course Page

At any time, you can deactivate the new course page experience by reaching the Configure Branding and Look menu and by clicking on Deactivate the New Course Page in the top banner. 

Deactivate the preview

If you deactivate the course page, the configurations done for the header image will not be reverted. If, for example, you loaded a picture as a hero image, once you deactivate you will no longer see it configured, but when you activate the course page again the configuration will be preserved.