A Design Critique of Canvas
Canvas was great when it launched, but it needs a refresh.
I’ve been using Canvas, a Learning Management System (LMS) by Instructure since 2013 at the University of Maryland. Compared to Blackboard and other LMS sites I’ve used in the past, I found it to be much better. The user interface is more intuitive and it’s easier to find what I’m looking for quickly.
That said, there’s a lot more they can do.
In this post, I’m going to discuss Canvas as it appears for a student of University of Maryland viewing the site on a PC in February 2019, features that work really well, and features that could be better. I’ll end with some proposed sketches of how the website can be improved.
Note: A product owner or power user of Canvas may say many of my criticisms or proposed features are in fact possible if the instructor enabled certain settings in the backend. An instructor may claim their experience is much worse than I am describing it. For this critique, I am looking at it purely from the perspective of a student who has used Canvas for over ten classes, only using what the instructors (which included CEO’s, PhD’s and UX Product Owners) were easily able to set up.
An Overview of Canvas
Canvas allows for the following affordances (defined as relationships between the virtual object and people that helps one understand what actions an object affords) for a student:
- Submit assignments or take assessments
- Check grades and forecast future grades
- Contact professors and students privately or on a forum
- Read syllabus, course assignments, classwork activities, and due dates
- Receive ad hoc communications from the instructor, such as announcements
- Collaborate on shared word documents through Google Docs
- Conduct other auxiliary tasks such as accessing a classroom chat area, class recordings, course surveys, and clicker registration
In terms of how well they work, some of the affordances work very well for students, such as checking grades and finding all assignments, quizzes, and discussions. Where I believe it really falls apart has to do with all of the sections dealing with file management. For most courses, this tends to be in the Files and Modules pages. Some of my professors have figured out how to organize it in a way that helps us as students. In other cases — as in the screenshot below — have fun trying to find what you exactly need without knowing which class week it corresponds to, or without the file having a descriptive file name that can help you.
As with any system, there are always opportunities to provide additional affordances. I believe it would help greatly if the following affordances can be added for students:
- Find purchase options for course books
- Integrate tools, such as Slack and Gmail, for easier communication
- Link to UMD student tools, such as Google Calendar, for organization.
- Display sign-up forms and shareable spreadsheets that can be used natively with Canvas.
The signifiers — ways to help the user understand the affordances provided — on Canvas are in the form of icons and buttons that are mainly found in the left menu. They are absolutely essential for a user to find the affordances, and would in fact be one of their more salient qualities, because a user is able to find what they’re looking for from one menu bar.
Unlike other popular websites however, such as on social media, Canvas does not display signifiers for notifications and messages in the top area. It would help fit the mental model of students and be a more appropriate usage of the space if that area was filled with signifiers.
Discoverability and Understanding of Canvas Affordances
For most of the core affordances, I would say they are discoverable and understandable. The notable exceptions are as follows:
- Finding critical course assignment through the syllabus: One would assume that the Syllabus page would have a standard course syllabus and curriculum that the users can follow along with. However, that was not always the case. Sometimes professors would just put a list of assignments. Other professors would just copy and paste the syllabus from Microsoft Word, which inevitably led to formatting issues. In the following example, there was nothing to be found in the Syllabus tab. I only found out later that the professor put the syllabus in the Files page!
- Find a central, standardized homepage that includes important information at a quick glance: Every course has a different home page. Some professors put their modules there, others have links to essential information, while others do not put anything, as in the example below. This makes it difficult for students to have a standardized experience across all courses.
- Sending a message to the teacher and fellow students: Being so focused on the inner menu that opens up when on the Courses tab, I would often click on the People tab or the Chat tab before I’d scratch my head and finally figure out that the Inbox was in fact on the larger menu. I can understand why it would be there, but why not put it in the courses section where we spend the majority of our time? There was definitely discoverability issues, though when I found it, it was understandable.
- Collaborations, Chat and Panopto Recordings
In a recent class, when my instructor was going through his set up of Canvas, he said about the last three links on the menu:
“These are the extra tabs. I never use them, they’re just there. Just ignore them.”
Though they are easy to discover, a student is often confused on how to understand its usage. Take Panopto Recordings. What is Panopto? Do I need a separate license? What type of recordings would be there? If it’s not being used, why can’t the instructor easily hide it.
And then I found out something.
When I clicked on Panupto Recordings and clicked on my class’s folder, it ended up showing recordings posted for classes since 2011. I definitely don’t think that’s how it was intended to be used. But hey, free education for all students, right? Perusing through this page ended up being a case of an affordance that was discoverable but not meant to be used.
Review from a UX perspective
If we are to look at this from within the five areas of UX (usability, utility, functional integrity, visual design and persuasiveness), Canvas performs adequately for usability, utility and functional integrity. It doesn’t fare as well when it comes to visual design and persuasiveness.
Students are able to use the site for their needs and comb through the site relatively bug-free, but the site looks outdated since the design hasn’t been updated since it has been launched. Students can also be incentivized to use all of the site affordances more regularly, but the site does not incorporate elements of persuasive design well.
In terms of its being in line with the Guidelines for Thoughtful Product Design, the product utilizes most of them well. It can do better on some of the guidelines, such as making the product memorable, persuasive, and free of extraneous or superfluous features (I’m looking at you, extra tabs). But overall, the site was leaps and bounds ahead of the LMS sites we were forced to use before this. This site was well-designed for when it came out, around 2011, but what they need now is a refresh of their design for 2019 and moving forward. Technology has evolved considerably over the last decade — particularly when it comes to communication and gamification — and Canvas would do well to integrate these newer facets into their design.
Proposed Changes to Canvas
In this design critique, I’ve shown multiple areas of opportunity for Canvas to improve the affordances they provide for students. I believe these proposed changes are essential for Canvas to have a much better user experience:
- Standardized templates for pages such as Home, Files, and Modules.
- Signifiers at the top for messaging and notifications
- Hiding unused allowances
- Better UI for specific pages such as the syllabus
Here is an example of how the home page can look. It includes sections for announcements, upcoming modules, helpful links, signifiers on the top right hand side, and an organized and streamlined menu based on what a user will need most.
Here is an example wireframe sketch of how a standardized Syllabus can look:
After completing this critique, I do believe a user-centered design process was followed when it came to involving the student as the end-user. There was a definite attention to detail in creating a comprehensive learning management system that is used by tens of thousands of students a day. However, as is the case with many products, Canvas needs a refresh. It is essential they check in with their users again and go through the design process again so that they stay competitive and provide an even better user experience.