The Course UI is build on the core course renderers and the course format renderers. Over time UI has degraded because of theme and navigation changes. The course editing looks particularly bad on mobile devices.

To improve the Course UI these steps could be taken:

Back to the drawing board: Look at the course UX and flow

Course navigation can be complex and users can easily loose the course context. Alberto has designed some improved navigation for courses and it would help to look at the work done again.

Unify the Course renderer and course format renderer 

Moodle supports custom course formats, but course formats do not have enough control over rendering the activity instances. If the methods in the core course renderer that control sections and activies are moved the the course format base renderer custom course formats would have far more control.

Use moustache templates for course format HTML

Current course formats and the core course renderer use the html_writer class for most of the HTML used in course pages. Transferring these to moustache templates and updating the HTML for Bootstrap 4 would make it look more consistent and would make maintenance easier. With new templates in place we can reduce the amount of css needed to render the course page.

Improve mobile design

With new HTML in place we can work on improving the mobile design of the course pages

Replace legacy JavaScript

Moodle courses use legacy YUI code for things like completion tracking and moving around activities and sections. This JavaScript can be updated to use modern AMD JavaScript and for the moving of activities the new AMD Drag & Drop library created by marina can be used.

Consider course formats on the Plugins DB

Consider the effects of upgrading the Course renderers on the custom course formats existing on the plugins DB. 

 Justification

• Educators have to be able to add activities with ease and there should be no confusion on managing and positioning activities in a course.
• Plugin / theme developers should be able to use simple templates to create a customized learning experience.
• We have to maintain our user interface and make sure they are clean and consistent. The course page look has degraded over time.

Stakeholders

• This will make the UI less cluttered for course managers / teachers, especially in editing mode.
  The course page and course page navigation could be improved for end users. Highlighted sections don’t look right. The alignment of page elements is off. Labels with images and videos don’t look great.
• Any theme designer could use the new renderers to provide a custom course experience with less trouble. This will be valuable to the Moodle partners.
• Plugin developers could create a new course format with little effort.