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

Improve the layout and usability of the items in the timeline block

    XMLWordPrintable

    Details

    • Affected Branches:
      MOODLE_400_STABLE
    • Fixed Branches:
      MOODLE_400_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-72277-master
    • Testing Instructions:
      Hide

      Setup

      1. Create "course 101", add "week 0" assignment, set the due date to the past, so it could be marked as overdue in timeline block, add "week 1" assignment, set the due date within the next 7 days
      2. Create a forum in "course 101", enable activity completion (manual mark is ok), and make sure "expect completion on" is set (within 7 days)
      3. Create "course 102", and create the same activities as above

      Test

      • Go to dashboard, create timeline block if it's not shown, make sure the block is in the center column of the screen
      • In timeline block, choose "sort by date" from the drop-down on the right, dates in the block should be shown bold.
      • Choose "sort by courses" from the drop-down on the right, in course view, dates should not be bold, but course names should be. The course name should not be a hyperlink to the course
      • Dates containing an overdue item should always have an "overdue" red pill next to the date.
      • Times should be on the left side of activity icon
      • Call to action should be moved from a link below the details, to a button to the right
      • There should be a horizontal separator below each activity's row in the list.
      • "More courses" button to be left aligned
      • Move the block to right side bar, in the "small" block view, the action button should wrap below the event row.
      Show
      Setup 1. Create "course 101", add "week 0" assignment, set the due date to the past, so it could be marked as overdue in timeline block, add "week 1" assignment, set the due date within the next 7 days 2. Create a forum in "course 101", enable activity completion (manual mark is ok), and make sure "expect completion on" is set (within 7 days) 3. Create "course 102", and create the same activities as above Test Go to dashboard, create timeline block if it's not shown, make sure the block is in the center column of the screen In timeline block, choose "sort by date" from the drop-down on the right, dates in the block should be shown bold. Choose "sort by courses" from the drop-down on the right, in course view, dates should not be bold, but course names should be. The course name should not be a hyperlink to the course Dates containing an overdue item should always have an "overdue" red pill next to the date. Times should be on the left side of activity icon Call to action should be moved from a link below the details, to a button to the right There should be a horizontal separator below each activity's row in the list. "More courses" button to be left aligned Move the block to right side bar, in the "small" block view, the action button should wrap below the event row.
    • Story Points:
      0
    • Sprint:
      HQ Team International Sprint 7, HQ Team International Sprint 8, HQ Team International Sprint 9, HQ Team International Sprin 10

      Description

      In order to improve the user experience in the timeline block, there are some changes we can make to increase readability and usability of the information and actions provided:

      1. In date view, dates should be shown bold/strong.
      2. In course view, dates should not be bold, but course names should be. The course name should not be a hyperlink to the course anymore, because it adds to the complexity/how busy the block is, course itself isn't the focus of the block, and there are other easy ways for students to access it elsewhere in the dashboard.
      3. Dates containing an overdue item should always have an "overdue" red pill next to the date.
      4. Times should be moved from the right of the block to the left (before the activity icon).
      5. Call to action should be moved from a link below the details, to a button to the right (text strings unchanged).
      6. Instead of the whole description linking to the activity, only the name of the activity should be linked so the information is easier to digest. For example, instead of "Online text assignment is due", it would become "Online text assignment is due". This requires a large enough amount of work that it will be separated out onto its own issue and handled separately.
      7. There should be a horizontal separator below each activity's row in the list.
      8. In the course view, there should also be a horizontal separator below the activity name.
      9. Move the existing "More courses" button to be left aligned instead of centred.

      In the "small" block view, the action button should wrap below (into the same position of the call to action in the current implementation).

      Also check for any changes required to behat testing, for example the links moving to buttons.

      Below are prototype screenshots with the relevant items above labelled:

      Dates view

      Courses view

       Note: There are some other new features shown in the screenshots, however only those listed should be completed in this issue. The others are either part of other issues/projects, or unconfirmed features at this stage.

       

      The following are items identified as still requiring some user testing (and/or were discussed after the above design was completed), and are out of scope for this issue. Any applicable after user testing will be raised separately:

      • Listing the activity type and any other changes to layout/contents of the event text (including separating the activity name from action, as mentioned previously).
      • Handling/truncating long activity names.
      • Potentially removing separate call to action (button or link).
      • Final placement of the teacher "counter" (eg how many to be marked), such as to a badge/pill.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              dongsheng Dongsheng Cai
              Reporter:
              michaelh Michael Hawkins
              Peer reviewer:
              Huong Nguyen Huong Nguyen
              Integrator:
              Adrian Greeve Adrian Greeve
              Tester:
              Gladys Basiana Gladys Basiana
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Sujith Haridasan
              Votes:
              0 Vote for this issue
              Watchers:
              6 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 4 days, 6 hours, 13 minutes
                  4d 6h 13m