Remove colour overlay from course cards that have an image

[stuart_ryan]

This idea has been developed and deployed to Canvas

Howdy all,

Firstly I have to say the new course cards image feature is awesome and a great leap forward. I have been using it a bit now and have a small request for a future revision.

When a course is given an image for the course card on a user's dashboard, I would really like to see the colour overlay removed (so that the image does not looked washed out with the user selected colour).

Ideally, I would love to see this configurable on an account level rather than an individual course level, but that is just from an administrator's perspective.

Just to visualise this more, the current behaviour with a couple of different colours:

And the ideal/requested behaviour:

Additional thoughts:

I do realise the colour is important for a few different areas in relation to the course, so perhaps the bottom bar could be extended as a border around the entire card (just as one example).

Many thanks  team,

Keep up the awesome work!

Comments from Instructure

For more information, please read through the Canvas Production Release Notes (2017-05-13) 

[jbrady2]

After having time to think about my previous post where I also expressed that the course card image should be consistent across all platforms, I now believe that this would be a bad idea as the loading of images would slow down the performance of certain mobile devices and also use more data for those not on wifi at the time they access the app. For this reason, if course card images were to be implemented in the app, there would need to be a toggle to allow the user to switch back to a simple color card as needed.

[James]

 @jbrady2 ​, why not extend that idea to the web-interface, too? Some of the mobile users use the browser rather than the app as it works better in some instances. Are they exempt from data plans?

So why not make the option to use the image part of the color-selection menu for the card? The more we talk about this, the more I feel it's the user's dashboard, not the teacher's or the institutions. The instructor should get to pick the image no more than the (s)he should be able to pick the color.

[jbrady2]

 @James   Actually, the more this is discussed, the more I am seeing that this was not necessarily a good idea to begin with. If the feature is not made consistent across platforms, then this could lead to confusion for users and defeats the entire purpose of having course card images for easy course identification purposes. If it is made consistent across all platforms, then it takes the choice away from the user and also unfairly penalizes those users who do not have access to sufficient devices or data plans. If an opt-out toggle is added, in the browser version as well as the app, to account for those users who either don't want to or can't afford to allow the course card images to display, then what is the point? In the end, it really becomes just an eye candy addition with too many possible issues to be truly useful.

I saw this in our institution's instance of Canvas in beta, and now I am hoping it isn't released

[John_Lowe]

I'm all about choice and options, so I totally support the idea of giving instructors the option of disabling the color overlay, but I'm also ok if Canvas just does away with the overlay in favor of a bar/border/whatever solution too.  I'll vote for this when it opens.

Meanwhile, for anyone struggling with the images and overlays as they exist right now, just know that full-color images look pretty bad (or at least can look pretty bad depending on the background color used by Canvas or selected by the students).  See this example:

However, if you are interested in using images now with the color overlays, as  @James ​ demonstrated above, B/W images seem to do great!  So while these aren't as fancy as you could get with full-color course cards, simple B/W images will help your class be distinguishable from others.  See these examples:

This even works if the students have selected #000000 as their color because the 60% overlay renders as a nice shade of gray.  White, as pointed out above, will hide the edit icon.  So hopefully students who choose a white color overlay will just mouse over and click on the right spot.

[kmeeusen]

Hey John, thanks for this. Been busy this week, but wanted to play some more to find the best way for me to gussy these up. You saved me a lot of work, and opened a few creative doors!

KLM

[rgibson1]

Not sure why this has to be so complicated. Just remove the hideous color overlay and do what you showed us in Colorado. That has to be the worst idea I've ever seen in a UI.

[stuart_ryan]

I can definitely see the benefit in that, however at the same time, I know certain institutions (I would anticipate mine included) that would want to standardise so that courses look the same across the board.

All just food for thought (happy that I could kick off some interesting discussion).

[stuart_ryan]

That is an awesome idea as a temporary solution. Ingenious work  @John_Lowe ​!

[rgibson1]

For us that have graphic design backgrounds, the color overlay is counter-intuitive. Give us the option to remove it at the very least.

[Renee_Carney]

This idea has moved to the next stage and will be open for voting among the Canvas Community, from Wed. September 7, 2016 - Wed. December 7, 2016.

Check out this doc for additional details about how the voting process works!