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.
