Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-61538

Improve the course UI

    XMLWordPrintable

    Details

    • Type: Epic
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.5
    • Fix Version/s: None
    • Component/s: Course, Themes
    • Labels:
    • Affected Branches:
      MOODLE_35_STABLE
    • Epic Name:
      Improve the course UI
    • Story Points:
      5
    • Sprint:
      Moppies Moodle 3.8 Sprint 1, Moppies Moodle 3.8 Sprint 2, Moppies Moodle 3.8 Sprint 3, Moppies Moodle 3.8 Sprint 4

      Description

      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 Glancy 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.
         

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                Unassigned
                Reporter:
                basbrands Bas Brands
                Participants:
                Component watchers:
                Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona), Víctor Déniz Falcón, Bas Brands, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona), Víctor Déniz Falcón
              • Votes:
                12 Vote for this issue
                Watchers:
                13 Start watching this issue

                Dates

                • Created:
                  Updated: