search

scratchfoundation / scratch-blocks

Scratch Blocks is a library for building creative computing interfaces.
https://scratch.mit.edu/developers
Apache License 2.0
2.6k stars 1.39k forks source link

Make the color of the block a comment is attached to more prominent #1853

Open towerofnix opened 5 years ago

towerofnix commented 5 years ago

Design/feature request! I noticed that the border color of a block comment is actually based on the color of the block it's attached to:

A comment attached to a variable block (which is inside another block); the comment's outline is the same red border of the variable block.

This is a really neat touch, but I think the idea could be emphasized a lot more. What if the entire comment was colored according to the block it was attached to? I created this sketch (with inspect element) to give an idea of what that might look like:

Several comments each attached to a block, taking a lighter version of the color of that block as the background color of the comment.

At its core, the reason for this change is that it looks cool. But that might have a greater effect: since it would make adding comments more fun, Scratchers would be encouraged to add comments to their code! This is a key practice in programming large projects, especially outside of Scratch, and making it more fun to add comments would really help ease budding programmers into the idea of documenting their code.

towerofnix commented 1 year ago

Hey @aoneill01 and @cwillisf, this isn't directly related to dropdown changes but it's in the same vein of extending the way colors are used in scratch-blocks, and I can't help but bring it up :)

Do you know if the editor design team would consider this idea interesting to explore further?

I think there is a real accessibility advantage to it — it can be tricky to tell exactly which block a comment is connected to. Comments are already subtly colored to match the block (check out the bold orange border in the first screenshot above!), which is a good touch, but is too small for most people to notice, let alone anyone with lesser eyesight (waves hi!).

I think it would also help to put a somewhat thicker white border behind the line connecting a comment to its block. It can be hard to tell the line from any blocks it's overlapping, see below:

Comment line, it's hard to distinguish from the blocks it overlaps

With a white outline it stands out and you can see the whole length of the line, which helps you tell what block it's connected to:

Comment line with white outline, making it easier to see which block it's connected to

Just for fun, here's a version with a thicker line too:

View of a whole comment connected to block, the line connecting them is thicker and even easier to see
aoneill01 commented 1 year ago

Thanks @towerofnix! I shared it with the designers. The consensus was they want to give it more attention before making a change. For example, they want to consider how it will look with the upcoming high text contrast theme. I don't think this one is at the top of our priority list right now, but I'm going to leave it open.