Scratch-blocks: Category color confusion

Created on 6 Jul 2017  路  8Comments  路  Source: LLK/scratch-blocks

In play tests, we often see kids searching for blocks by color, when are they copying a stack from a Scratch Activity Card. They will for example look for sound blocks in the looks category, or vice versa, because they are similar colors. The clusters that get confused seem to be:

  • Looks and Sound
  • Control, Events and Data
  • Operators and Pen
  • Motion and Sensing

screen shot 2017-07-06 at 10 57 53 am

design needs-discussion

Most helpful comment

Maybe you can add this as an accessibility feature, as older, more experienced Scratchers may get confused and irritated.

All 8 comments

I agree with the suggestion. The difference between the colors for Data and Control, for example, is too subtle for no real reason. This issue could also be a hindrance to colorblind users; they commonly confuse different types of blue and purple hues. Differentiating between Motion, Looks, Sound, and Sensing would be difficult for them.

A change such as this decreases ambiguity-

image

In this-
'Looks' color has changed to Red (#ff0000)
'Data' color has changed to Dark Red (#880015)
'Events' color has changed to Pink (#FFC4FF)
'Sensing' color has changed to Grey (#7F7F7F)
'Operators' color has changed to Yellow (#FFF200)
Actual ring color has not been established yet.

Note: This picture was only made to demonstrate visually that it would work better with less ambiguity in the colors. I understand if alternative colors would be preferred instead of my proposed colors.

Also (obviously) it is to be noted that if the category colors are changed, the correlating code blocks need to have their colors changed as well.

There was also some exploration of using icons for the categories in the palette, that might help to clear up the confusion: https://github.com/LLK/scratch-blocks/issues/262#issuecomment-288742696

Plus those icons are just really cool, kudos to carl for throwing them together just for the mockup

We plan to continue refining colors along with exploring addtional ways of clarifying categories. As @mrjacobbloom called out, we will experiment with iconography for the categories as a direction. That said, the sketches referenced above are purely to demonstrate the concept. The exact icons should not be taken literally.

This type of work will also have implications on the horizontal grammar. When we started work Scratch 3.0, we unified the visual language of the vertical and horizontal grammar to allow for more seamless transitions between the two grammars. This unification included proportions, shape, and colors.

Sorry to ping you but

The exact icons should not be taken literally

Those are some pretty icons you've made there :-)

OKAY WHAT HOW DID I MISS THIS

This issue could also be a hindrance to colorblind users; they commonly confuse different types of blue and purple hues.

YES! I am colorblind - in the 2.0 editor I can never use any Looks or Motion blocks without clicking the palettes twice! If the blocks themselves could have a change in colors, I would be forever grateful - as would any other colorblind users!
Please seriously consider this change - I have actually had the working time for motion-heavy projects DOUBLED because I had to click two palettes (Looks then couldn't find the block because it was in Motion).

Input from the discussion forums on a new set of category colours:
https://scratch.mit.edu/discuss/post/2761039/

Maybe there could be a high contrast mode option?

Maybe you can add this as an accessibility feature, as older, more experienced Scratchers may get confused and irritated.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tmickel picture tmickel  路  6Comments

thisandagain picture thisandagain  路  6Comments

MegaApuTurkUltra picture MegaApuTurkUltra  路  4Comments

jwzimmer picture jwzimmer  路  5Comments

cwillisf picture cwillisf  路  4Comments