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

Review making tertiary navigation items more distinct.

XMLWordPrintable

    • MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-73595-master
    • Hide

      For these test please restore a backup of the attached course (backup-moodle2-course-2-activity_examples-20220217-1728.mbz ). Before you restore the backup change the username of your 'admin' user to something different, for example 'moodleadmin'. This is to avoid conflicts with the admin user in the backup file.

      Please also install the attached navtester.zip in your /admin/tool folder and visited the moodle admin pages to have it properly installed. It will be used in the tests for the Badges.

      The rules for the tertiary navigation is

      • there should be 25px between the secondary navbar (or activity header) and the tertiary navigation.
        • Note: You can check it by checking the bottom padding of the secondary navigation (div.secondary-navigation) or activity header (if present, div.activity-header) and adding to it the top padding of the tertiary navigation container (div.tertiary-navigation)
      • there should be 20px of spacing between elements in the tertiary nav. Some pages allow tertiary nav elements to be right aligned. Where there is more then one right aligned navigation element there should be 20px of spacing between these elements.
      • on mobile, when there is not enough space to fit all elements of the teriary nav in one row, the elements should wrap with a margin of 25px below the elements

      If any of the pages do not follow the design rules please add a screenshot as evidence. Please do not add a screenshot for each tested page. There are too many pages to check and it would make the test results hard to read.

      Test the participant pages

      1. Login as admin and navigate to the restored course
      2. On the course navigate to these course pages and verify the tertiary navigation follows the designs requirements
      3. Go to the 'Participants' tab
      4. Select each of the options in the select menu and check if the tertiary nav is okay

      Test the grades pages

      1. Navigate to 'Site Administration' in the primary nav
      2. Search for 'enableoutcomes'
      3. Enable it in the search results
      4. Return to the restored course
      5. Go to the 'Grades' tab
      6. Select each of the options in the select menu and check if the tertiary nav is okay

      Test the report pages

      1. Go to the 'Reports' tab in the restored course
      2. Select each of the options in the select menu and check if the tertiary nav is okay

      Test the question bank pages

      1. Go to the 'Question bank' tab in the restored course
      2. Select each of the options in the select menu and check if the tertiary nav is okay
      3. On the Categories menu option, check if the 'Add category' button follows the design requirements

      Test the Badges pages

      1. Go to the 'Badges' tab in the restored course
      2. You should see the 'Manage badges' 'Add a new badge' and 'Nav test - Badge settings' buttons. (the last button will be visible after installing the navtester.zip in admin/tool). Check if the tertiary nav design is okay
      3. Add a new badge by only providing info in the required fields
      4. When done go back to the 'Badges' tab in the restored course
      5. Click the created Badge
      6. You should now see a back button and a select menu for the badge
      7. Try each option in the select menu and check if the tertiary nav design is okay

      Test the Course reuse

      1. Go to the 'Course reuse' tab in the restored course
      2. Try each option in the select menu and check if the tertiary nav design is okay

      Test the role assignments for categories

      1. Navigate to Site Administration > Courses > Manage course and categories
      2. On one of the available categories click the cog dropdown and choose 'Assign roles'
      3. check if the back button follows the tertiary nav design rules

      Test the grading setting pages

      1. Navigate to Site Administration > Grades > Scales
      2. check if the 'Add a new scale' button follows the tertiary nav design rules
      3. Navigate to Site Administration > Grades > Outcomes
      4. check if the 'Add a new outcome' button follows the tertiary nav design rules
      5. Navigate to Site Administration > Grades > Letter
      6. check if the 'Edit' button follows the tertiary nav design rules

      Test the assignment module

      1. Go to the restored course
      2. Navigate to the assignment activity named 'Online text assignment'
      3. Verify the buttons 'View all submissions' and 'Grade' follow the design rules.
      4. Click the 'View all submissions' button
      5. Verify the buttons 'Back' and 'Download all submissions' follow the design rules.

      Test the book module

      1. Navigate to the book activity named 'Departmental Policies'
      2. Verify the buttons 'Previous' and 'Next' follow the design rules., also verify the next button is always aligned to the right.
      3. Click the 'View all submissions' button (THIS does not appear relevant for Book - needs fixing, P. Kazubski 2022-02-19 13:59 CET)

      Test the chat activity

      1. Navigate to the chat activity named 'A repeating chat'
      2. Verify the 'Enter the chat' and 'use more accessible interface' follow the design rules..

      Test the database activity

      1. Navigate to the database activity named 'A database of web links'
      2. Verify the top part of the page containing 'List view', 'Add entry', 'Import entries', 'Export entries' follows the design rules for tertiary navigation.
      3. Click the 'Fields' tab in the secondary navigation
      4. Verify the top part of the page containing 'Manage fields', 'Create a new field', 'Save as preset', 'Export preset' follows the design rules for tertiary navigation.
      5. Click the 'Templates' tab in the secondary navigation
      6. Verify the top part of the page containing 'List template', 'Save as preset', 'Export preset' follows the design rules for tertiary navigation.
      7. Click the 'Presets' tab in the secondary navigation
      8. Verify the 'Import' button follows the design rules for tertiary navigation.

      Test the feedback activity

      1. Navigate to the feedback activity named 'Course evaluation feedback'
      2. Verify the part of the page containing 'Edit questions', 'Preview questions', 'Ask the questions' follows the design rules for tertiary navigation
      3. Click the 'Responses' tab in the secondary navigation
      4. Verify the 'Show responses' select follows the design rules for tertiary navigation.

      Test the folder activity

      1. Navigate to the folder activity named 'Revision of papers'
      2. Verify the 'Edit' and 'Download folder' buttons follow the design rules.

      Test the forum activity

      1. Navigate to the forum activity named 'A standard forum for general use'
      2. Verify the 'Search forums' and 'Add discussion topic' follow the design rules.
      3. Click the 'Subscribers' tab in the secondary navigation
      4. Verify the 'View subscribers' and 'Subscription mode' follow the design rules.

      Test the glossary activity

      1. Navigate to the glossary activity named 'A FAQ-style glossary'
      2. Verify all items in tertiary nav (Add entry to Search) follow the design rules.
      3. Click the dropdown button in the tertiary nav and select 'Export'
      4. Verify the back button follows the design rules for tertiary navigation

      Test the lesson activity

      1. Navigate to the lesson activity named 'First Aid lesson'
      2. Verify the 'Edit lesson', 'Edit page contents', 'Grade essays' follow the design rules.
      3. Click the 'Edit lesson' button
      4. Verify the items 'Back', 'Collapsed' follow the design rules.
      5. Click the 'Overrides' tab in the secondary navigation
      6. Verify the items 'User overrides', 'Add user override' follow the design rules.
      7. Click the 'Reports' tab in the secondary navigation
      8. Verify the 'Overview' select follows the design rules.

      Test the quiz activity

      1. Navigate to the quiz activity named 'Demo Quiz with all standard Quiz Questions'
      2. Verify the item 'Attempt quiz' follows the design rules.
      3. Click the preview button
      4. Verify the item 'Back' follows the design rules
      5. Click the 'Overrides' tab in the secondary navigation
      6. Verify the items 'User overrides', 'Add user override' follow the design rules.
      7. Click the 'Question bank' tab in the secondary navigation
      8. Verify the 'Questions' select follows the design rules.

      Test the scorm activity

      1. Navigate to the scorm activity named 'Technology Talk for EFL Class'
      2. In the activity click the 'Reports' tab in the secondary navigation
      3. Verify the items 'Basic report', 'Download' follow the design rules
      4. In the list of users find user t1 and click on the number '1'
      5. Verify the items 'Back', 'Learning object' follow the design rules

      Test the survey activity

      1. Navigate to the survey activity named 'Critical Incidents survey'
      2. Click the 'Response reports' tab in the secondary navigation
      3. Verify the items 'Summary', 'Download result' follow the design rules.

      Test the wiki activity

      1. Navigate to the wiki activity named 'Course summary wiki'
      2. Verify the items 'View', 'Print' follow the design rules

      Test the workshop activity

      1. Navigate to the workshop activity named 'Limerics'
      2. In the 'Submission phase' column click 'Allocate submissions'
      3. Verify the item 'Manual allocation' follows the design rules
      Show
      For these test please restore a backup of the attached course ( backup-moodle2-course-2-activity_examples-20220217-1728.mbz ). Before you restore the backup change the username of your 'admin' user to something different, for example 'moodleadmin'. This is to avoid conflicts with the admin user in the backup file. Please also install the attached navtester.zip in your /admin/tool folder and visited the moodle admin pages to have it properly installed. It will be used in the tests for the Badges. The rules for the tertiary navigation is there should be 25px between the secondary navbar (or activity header) and the tertiary navigation. Note: You can check it by checking the bottom padding of the secondary navigation ( div.secondary-navigation ) or activity header (if present, div.activity-header ) and adding to it the top padding of the tertiary navigation container (div.tertiary-navigation) there should be 20px of spacing between elements in the tertiary nav. Some pages allow tertiary nav elements to be right aligned. Where there is more then one right aligned navigation element there should be 20px of spacing between these elements. on mobile, when there is not enough space to fit all elements of the teriary nav in one row, the elements should wrap with a margin of 25px below the elements If any of the pages do not follow the design rules please add a screenshot as evidence. Please do not add a screenshot for each tested page. There are too many pages to check and it would make the test results hard to read. Test the participant pages Login as admin and navigate to the restored course On the course navigate to these course pages and verify the tertiary navigation follows the designs requirements Go to the 'Participants' tab Select each of the options in the select menu and check if the tertiary nav is okay Test the grades pages Navigate to 'Site Administration' in the primary nav Search for 'enableoutcomes' Enable it in the search results Return to the restored course Go to the 'Grades' tab Select each of the options in the select menu and check if the tertiary nav is okay Test the report pages Go to the 'Reports' tab in the restored course Select each of the options in the select menu and check if the tertiary nav is okay Test the question bank pages Go to the 'Question bank' tab in the restored course Select each of the options in the select menu and check if the tertiary nav is okay On the Categories menu option, check if the 'Add category' button follows the design requirements Test the Badges pages Go to the 'Badges' tab in the restored course You should see the 'Manage badges' 'Add a new badge' and 'Nav test - Badge settings' buttons. (the last button will be visible after installing the navtester.zip in admin/tool). Check if the tertiary nav design is okay Add a new badge by only providing info in the required fields When done go back to the 'Badges' tab in the restored course Click the created Badge You should now see a back button and a select menu for the badge Try each option in the select menu and check if the tertiary nav design is okay Test the Course reuse Go to the 'Course reuse' tab in the restored course Try each option in the select menu and check if the tertiary nav design is okay Test the role assignments for categories Navigate to Site Administration > Courses > Manage course and categories On one of the available categories click the cog dropdown and choose 'Assign roles' check if the back button follows the tertiary nav design rules Test the grading setting pages Navigate to Site Administration > Grades > Scales check if the 'Add a new scale' button follows the tertiary nav design rules Navigate to Site Administration > Grades > Outcomes check if the 'Add a new outcome' button follows the tertiary nav design rules Navigate to Site Administration > Grades > Letter check if the 'Edit' button follows the tertiary nav design rules Test the assignment module Go to the restored course Navigate to the assignment activity named 'Online text assignment' Verify the buttons 'View all submissions' and 'Grade' follow the design rules. Click the 'View all submissions' button Verify the buttons 'Back' and 'Download all submissions' follow the design rules. Test the book module Navigate to the book activity named 'Departmental Policies' Verify the buttons 'Previous' and 'Next' follow the design rules., also verify the next button is always aligned to the right. Click the 'View all submissions' button (THIS does not appear relevant for Book - needs fixing, P. Kazubski 2022-02-19 13:59 CET) Test the chat activity Navigate to the chat activity named 'A repeating chat' Verify the 'Enter the chat' and 'use more accessible interface' follow the design rules.. Test the database activity Navigate to the database activity named 'A database of web links' Verify the top part of the page containing 'List view', 'Add entry', 'Import entries', 'Export entries' follows the design rules for tertiary navigation. Click the 'Fields' tab in the secondary navigation Verify the top part of the page containing 'Manage fields', 'Create a new field', 'Save as preset', 'Export preset' follows the design rules for tertiary navigation. Click the 'Templates' tab in the secondary navigation Verify the top part of the page containing 'List template', 'Save as preset', 'Export preset' follows the design rules for tertiary navigation. Click the 'Presets' tab in the secondary navigation Verify the 'Import' button follows the design rules for tertiary navigation. Test the feedback activity Navigate to the feedback activity named 'Course evaluation feedback' Verify the part of the page containing 'Edit questions', 'Preview questions', 'Ask the questions' follows the design rules for tertiary navigation Click the 'Responses' tab in the secondary navigation Verify the 'Show responses' select follows the design rules for tertiary navigation. Test the folder activity Navigate to the folder activity named 'Revision of papers' Verify the 'Edit' and 'Download folder' buttons follow the design rules. Test the forum activity Navigate to the forum activity named 'A standard forum for general use' Verify the 'Search forums' and 'Add discussion topic' follow the design rules. Click the 'Subscribers' tab in the secondary navigation Verify the 'View subscribers' and 'Subscription mode' follow the design rules. Test the glossary activity Navigate to the glossary activity named 'A FAQ-style glossary' Verify all items in tertiary nav (Add entry to Search) follow the design rules. Click the dropdown button in the tertiary nav and select 'Export' Verify the back button follows the design rules for tertiary navigation Test the lesson activity Navigate to the lesson activity named 'First Aid lesson' Verify the 'Edit lesson', 'Edit page contents', 'Grade essays' follow the design rules. Click the 'Edit lesson' button Verify the items 'Back', 'Collapsed' follow the design rules. Click the 'Overrides' tab in the secondary navigation Verify the items 'User overrides', 'Add user override' follow the design rules. Click the 'Reports' tab in the secondary navigation Verify the 'Overview' select follows the design rules. Test the quiz activity Navigate to the quiz activity named 'Demo Quiz with all standard Quiz Questions' Verify the item 'Attempt quiz' follows the design rules. Click the preview button Verify the item 'Back' follows the design rules Click the 'Overrides' tab in the secondary navigation Verify the items 'User overrides', 'Add user override' follow the design rules. Click the 'Question bank' tab in the secondary navigation Verify the 'Questions' select follows the design rules. Test the scorm activity Navigate to the scorm activity named 'Technology Talk for EFL Class' In the activity click the 'Reports' tab in the secondary navigation Verify the items 'Basic report', 'Download' follow the design rules In the list of users find user t1 and click on the number '1' Verify the items 'Back', 'Learning object' follow the design rules Test the survey activity Navigate to the survey activity named 'Critical Incidents survey' Click the 'Response reports' tab in the secondary navigation Verify the items 'Summary', 'Download result' follow the design rules. Test the wiki activity Navigate to the wiki activity named 'Course summary wiki' Verify the items 'View', 'Print' follow the design rules Test the workshop activity Navigate to the workshop activity named 'Limerics' In the 'Submission phase' column click 'Allocate submissions' Verify the item 'Manual allocation' follows the design rules

      There have been some comments about the difficulty in finding different pages around a Moodle course. One that has popped up a few times is finding student enrolment types or groups.

      Before these items were in a settings cog, and this was visually different to other navigation elements, but now we have moved them to a drop down and this blends in with other drop down menus on the page that are not navigation.

      Some ideas:

      • Add a label to the drop down to indicate that it's a navigation menu.
      • Add a chevron instead of the current arrows to make it different.
      • Move the other tertiary buttons away from this menu so that it is apparent that it is not an action associated with the navigation drop down.

      Any other visual means to distinguish this navigation element would be welcome.

      Updated 03 Feb 2022 SB

      Following review this issue will focus on ensuring the correct padding and spacing is applied across all tertiary nav, and for the participants page specifically; need to ensure page heading is 'Enrolled users'

      The following pages have tertiary navigation implementations https://docs.google.com/spreadsheets/d/1Xaa-H5nnntUUPd-BarS0ll5V0_RqW1QEUZXLHAJEex8/edit#gid=247538644

        1. 15px gap between secondary and h2.png
          15px gap between secondary and h2.png
          99 kB
        2. 25px gap between secondary and tertiary nav.png
          25px gap between secondary and tertiary nav.png
          125 kB
        3. 31px gap between secondary and h2.png
          31px gap between secondary and h2.png
          126 kB
        4. backup-moodle2-course-2-activity_examples-20220217-1728.mbz
          7.86 MB
        5. Grader report.png
          Grader report.png
          99 kB
        6. IMG_5E6BDB0E5CB8-1.jpeg
          IMG_5E6BDB0E5CB8-1.jpeg
          915 kB
        7. left and right aligned buttons on tertiary nav-1.png
          left and right aligned buttons on tertiary nav-1.png
          102 kB
        8. Left and right aligned tertiary nav.png
          Left and right aligned tertiary nav.png
          99 kB
        9. longer gap between secondary and tertiray nav.png
          longer gap between secondary and tertiray nav.png
          111 kB
        10. MDL-73595_database.png
          MDL-73595_database.png
          148 kB
        11. MDL-73595_grades.png
          MDL-73595_grades.png
          195 kB
        12. MDL-73595 assign 1.png
          MDL-73595 assign 1.png
          31 kB
        13. MDL-73595 assign 2.png
          MDL-73595 assign 2.png
          23 kB
        14. MDL-73595 feedback.png
          MDL-73595 feedback.png
          34 kB
        15. MDL-73595 folder.png
          MDL-73595 folder.png
          17 kB
        16. MDL-73595 glossary.png
          MDL-73595 glossary.png
          27 kB
        17. MDL-73595 grades.png
          MDL-73595 grades.png
          20 kB
        18. MDL-73595 quiz.png
          MDL-73595 quiz.png
          33 kB
        19. navtester.zip
          6 kB
        20. Participants.png
          Participants.png
          72 kB
        21. participants page 3.11.png
          participants page 3.11.png
          59 kB
        22. participants page 4.0.png
          participants page 4.0.png
          80 kB
        23. Right gap without desc and competion.png
          Right gap without desc and competion.png
          102 kB
        24. Screenshot 2022-02-15 at 11.44.10.png
          Screenshot 2022-02-15 at 11.44.10.png
          1.09 MB
        25. Screenshot 2022-02-15 at 11.45.11.png
          Screenshot 2022-02-15 at 11.45.11.png
          1.01 MB
        26. Screenshot 2022-02-15 at 11.47.03.png
          Screenshot 2022-02-15 at 11.47.03.png
          68 kB
        27. Without description and completion criteria.png
          Without description and completion criteria.png
          113 kB

            basbrands Bas Brands
            abgreeve Adrian Greeve
            Simey Lameze Simey Lameze
            Jun Pataleta Jun Pataleta
            Angelia Dela Cruz Angelia Dela Cruz
            Votes:
            2 Vote for this issue
            Watchers:
            17 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Time Spent - 2 days, 5 hours, 22 minutes Remaining Estimate - 3 hours
                3h
                Logged:
                Time Spent - 2 days, 5 hours, 22 minutes Remaining Estimate - 3 hours
                2d 5h 22m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.