Enhanced Rubrics Feedback and Suggestions (with mockups)

[ChrisSchons]

Earlier this year I reviewed our faculty’s experience as we transitioned to Canvas and one of the key areas that needed improvements was the rubric table in the Speedgrader. The rubrics were getting cut off and do not display well, even when there was ample horizontal space. I implemented a number of CSS customizations to clean up the rubric’s design and make them more flexible, but since Instructure is already working on a redesign that work is on hold.

I thought I’d share my design work here in hopes of influencing the ongoing redesign. There are some good improvements being made, but the overall design is still jumbled and not very cohesive. I extended the work I was doing with the traditional table view to the new horizontal and vertical views.

NOTE: Please note that these are all recommendations and do not fully represent a final design. The feedback is only focused on the Speedgrader and we have no issues with the new create/edit rubric UX. If you have any additional thoughts or comments, let me know!

Overview

• All 3 views are more closely aligned visually while maintaining their distinct formats.
• We think semantic names for the views would be better for our users so we’d propose the following naming conventions:
  • Traditional -> Table
  • Horizontal -> Numeric
  • Vertical -> List
• Each view uses a consistent structure of Criteria > Ratings > Comments > Score
  
  

Table View (traditional)

• These tables are busy with content so I looked for ways to simplify the design where possible.
• Used a stacked layout where the ratings get their own row. This makes both the criterion and the ratings easier to read.
• Removed excess borders from the ratings and let whitespace separate the copy.
• Used a more subtle selected state for ratings, just a background color and bold underline.
• Added the Clear button to all comment fields for consistency
• Added a gray background to emphasize the points input and act as a visual separation between criterion sections
  
  

Numeric & List Views (horizontal and vertical)

Numeric View (horizontal)

• Simplified the design to match the other views
• Moved the full rating to underneath the number boxes to prevent the UI from shifting around when content varies in length.
  

List View (vertical)

• Ratings display as a criteria list with checkmark for selected option.
• Replacing the rating range with the actual criterion title is more direct. Less information is hidden, the content has more room, and it still fits well in a narrow width.
  

Narrow View Details

• The Table view switches to a stacked view in narrow views, either via css media queries or a javascript check on the container width.
  

CSS customizations

• These are screenshots of the CSS overrides I had been working on. If the redesign does not address the usability issues, we plan on implementing customizations in the future.

[tomdavis]

@ChrisSchons the "Numeric View (horizontal)" is outstanding, and I agree 100% that the current/native layout is cumbersome for grading, taking some of the Speed out of SpeedGrader for sure. Thanks for raising this *and* proposing some alternative layouts/solutions.

[ChrisSchons]

Thanks! The new options they are introducing are nice and just need some small tweaks to keep everything consistent. The traditional tables still need work but all I can do is make suggestions and hope for the best.

[RaviKoll]

We appreciate the considerable time and effort you’ve taken to review the faculty experience with SpeedGrader and provide such detailed suggestions for improvement. Your insights into the rubric table’s usability are invaluable, and we recognize the importance of creating a cohesive and user-friendly interface.

We’re excited to share that, as part of our ongoing enhancements, we are releasing a significant update that addresses several usability concerns in SpeedGrader. Specifically, we have resolved issues related to the rubric tray's fixed width and row height. In response to user feedback, we’ve removed the Tray and introduced the Enhanced Rubrics UI, which is now integrated within the sidebar. This change streamlines the grading process, particularly for more complex rubrics with five or more ratings, while maintaining the traditional rubric assessment view for consistent grading.

We will also take your detailed suggestions into consideration as we continue to refine the design further. Your recommendations regarding naming conventions and visual alignment resonate with our goals, and we are committed to ensuring that the final design meets the needs of our users.

Thank you once again for your thoughtful contributions. If you have any further thoughts or feedback, please feel free to share.