To address user feedback on 4.0 activity cards, we conducted research and usability testing with both Moodle community members and non-Moodle users. The goal is to redesign the activity cards in a way that solves community pain points and improves the user experience for both teachers/content creators and students.

The following components will be included in the redesign: Activity icons, Availability, Restrictions, Group mode, Activity dates and Completion criteria.

Teachers/Content creators

• The use of vertical space has been minimized by using only what's necessary when needed.

• Distinguishing functionality and behavior between Edit mode and View mode is crucial.

• The teacher role view should exhibit pertinent information tailored to the individual teacher's needs.

• In Edit mode, teachers should be able to easily review the page and verify the accuracy of the settings, without needing to click any additional links or buttons to access the settings information.

• The course overview page should enable effortless editing of the most commonly used settings.

Students

• Within the course page, the activity card provides students with clear and easily accessible information about course activities and content, while also displaying activity settings in a consistent and user-friendly manner.

Issue dependency tree

• Styling:
  • MDL-78199 - Redesign card CSS to make them smaller like the prototype
    • MDL-78200 - Reintroduce groupmode icon with no edit feature yet
      • MDL-78209 - TASK: investigate keyboard and hover navigation on hidden icons
        • MDL-78651: replace CSS classes of the "+" icons between activities by generic CSS helpers
    • MDL-78204 - Modify the access restrictions description to match the prototype
      • MDL-78708 - regression with the activity icon and restriction access
    • MDL-78310 - Set show file extension default to true in mod_resource
    • MDL-78847 - display folder in course page error
  • MDL-78954 - improve action menu subpanels effect and styling (based on MDL-78290 code)
  • MDL-78955 - Modify the choicelist and dropdowns/status style to match the prototype (based on MDL-78826 code)
  • MDL-78558 - final review of the UI to match the prototype

• Migrate the old group mod edit webservice to the new course format: 
  • MDL-78201 - Create the groupmode state actions (webservice)
    • MDL-78202 - Create groupmode reactive mutation to course format

• MDL-78205 - TASK Investigate the feasibility of the new advanced dropdown UI component required for the course editor icons
  • MDL-78279 - Create new details dropdown component (the "thing" we need to display when user click on completion badge)
    • MDL-78280 - Add details dropdown to completion criteria badge (to show the criteria when click)
      • MDL-78289 - Modify the completion criteria for students to display format to match the prototype
  • MDL-78282 - Add radio dropdown interaction to availability badge (to select option on click)
  • MDL-78283 - Add radio dropdown interaction to groupmode icon (to select option on click) (depends on MDL-78200  and MDL-78201)
  • MDL-78826 - improve the dropdown accessibility and keyboard navigation

• Activity icons:
  • MDL-78284 - New activity icons design
  • MDL-78285 - Reintroduce activity mime file type icons (meaning each file has its extension icon)

• MDL-78207 - Implement activity card information badge integration
  • MDL-78222 - Move the current activity information at the bottom of the activity card
    • ¿? - Move the file extension integration in mod_resource to the new badge integration (if UX wants separate from file size)

• MDL-78210 - TASK: investigate the viability of using direct links to quickform sections (base for quickform buttons in completion, restrictions and due dates)
  • MDL-78286 - Add completion quickform direct link button to completion details dropdown (depends on MDL-78280)
  • MDL-78288 - Add access restriction quickform direct link button to restrictions details dropdown (depends on MDL-78204)

• MDL-78290 - TASK: investigate how to open subpanels from the actions menu (like the one proposed for groupmode and availability form the activity action menu)
  • MDL-78665 - create generics submenu classes 
    • MDL-78291 - Add availability option to action menu to open a subpanel instead of showing a modal (depends on MDL-78282)
    • MDL-78203 - Add group mode option to activity actions dropdown menu (depends on MDL-78201 and MDL-78283)

Research report

MVP designs

Prototype instructions

Teacher flow prototype
Student flow prototype