Discuss Scratch
- Discussion Forums
- » Open Source Projects
- » New Blocks are too Cartoony/Bulky
- karatebuilderboy
-
100+ posts
New Blocks are too Cartoony/Bulky
Hi, everyone! I know this might be a picky complaint, but it's something I've seen a lot of recently, and would have to agree with. Don't take this the wrong way– I love the new Scratch blocks, but the vertical look is a bit too cartoony. I understand that you (ST) want Scratch to appear comforting and unintimidating for newcomers to the world of programming, but for us more experienced folk, the blocks look too cartoony.
In 2.0, blocks make great use of space. The height and width of the blocks match the height and width of the text written on them, allowing more blocks to fit on the screen in a comfortable, easy-to-read fashion. In scratch 3.0, however, blocks appear unnecessarily bulky/fat. For example, look at the new move block.

Note the overly large integer input space. (It's nearly twice the size of the number!) This causes the block to become larger, bulkier, and thicker.
Now compare it to the old move block:
In the old move block, the integer input is only slightly larger than the number inside of it. Also, the borders of the block fit closely around the text and input. This makes the block appear clean and appealing. Also, the font is crisp, unlike the new smooth font. This allows it to be readable at a small size, so more blocks can be shown on the screen at once.
I'd like you, the ST, to take this argument into consideration when designing Scratch 3.0 Thanks! If anyone else has comments on this, feel free to say so.
EDIT (8/22/2016):
Take a moment to compare the sizes of a script written in 2.0, and the same one in 3.0:

In the first picture, the one of Scratch 3.0, the script is significantly larger than in the second. This will make it more difficult to create a project because it will be harder to see more blocks on the screen at once. The blocks can be made smaller in three simple ways: changing the font to a crisp, aliased, easy to read, and less rounded font will allow the whole block to be made smaller. Also, like I mentioned earlier, the input regions of blocks can be made to fit around the text more easily, allowing the block to become skinner. (Variables would also have to be resized like this.) Finally, the borders of the block should fit more closely around the text. This would make the block more compact, and skinnier, so more could fit on a page at once.
Thanks again for reading through this!
In 2.0, blocks make great use of space. The height and width of the blocks match the height and width of the text written on them, allowing more blocks to fit on the screen in a comfortable, easy-to-read fashion. In scratch 3.0, however, blocks appear unnecessarily bulky/fat. For example, look at the new move block.

Note the overly large integer input space. (It's nearly twice the size of the number!) This causes the block to become larger, bulkier, and thicker.
Now compare it to the old move block:
move (10) steps
In the old move block, the integer input is only slightly larger than the number inside of it. Also, the borders of the block fit closely around the text and input. This makes the block appear clean and appealing. Also, the font is crisp, unlike the new smooth font. This allows it to be readable at a small size, so more blocks can be shown on the screen at once.
I'd like you, the ST, to take this argument into consideration when designing Scratch 3.0 Thanks! If anyone else has comments on this, feel free to say so.
EDIT (8/22/2016):
Take a moment to compare the sizes of a script written in 2.0, and the same one in 3.0:


In the first picture, the one of Scratch 3.0, the script is significantly larger than in the second. This will make it more difficult to create a project because it will be harder to see more blocks on the screen at once. The blocks can be made smaller in three simple ways: changing the font to a crisp, aliased, easy to read, and less rounded font will allow the whole block to be made smaller. Also, like I mentioned earlier, the input regions of blocks can be made to fit around the text more easily, allowing the block to become skinner. (Variables would also have to be resized like this.) Finally, the borders of the block should fit more closely around the text. This would make the block more compact, and skinnier, so more could fit on a page at once.
Thanks again for reading through this!
Last edited by karatebuilderboy (Aug. 22, 2016 11:51:27)
- mewtaylor
-
100+ posts
New Blocks are too Cartoony/Bulky
@karatebuilderboy thanks for the feedback! It's always helpful to hear perspectives from you all on this.
One additional thing that I would like to add as a consideration is accessibility. The size of the input fields, and the padding around the text on blocks is larger – as you pointed out, it makes scripts taller. But also, it makes input regions easier to click inside, and blocks easier to drag and drop. This could be useful for people who are still developing fine motor control, and also for people who are visually impaired, but can still see.
One additional thing that I would like to add as a consideration is accessibility. The size of the input fields, and the padding around the text on blocks is larger – as you pointed out, it makes scripts taller. But also, it makes input regions easier to click inside, and blocks easier to drag and drop. This could be useful for people who are still developing fine motor control, and also for people who are visually impaired, but can still see.
- liam48D
-
1000+ posts
New Blocks are too Cartoony/Bulky
Here's some interesting options in View Options for Finder:

IMO options like this (that saves!!!) could be convenient for the scratch-blocks editor. Not everybody has trouble with their fine motor skills
EDIT: save -> saves typo

IMO options like this (that saves!!!) could be convenient for the scratch-blocks editor. Not everybody has trouble with their fine motor skills

EDIT: save -> saves typo
Last edited by liam48D (Aug. 29, 2016 18:01:56)
- LegusScratcher
-
500+ posts
New Blocks are too Cartoony/Bulky
You know, I think that would actually be really nice. That way, users can change the sizes depending on what they want/need. Here's some interesting options in View Options for Finder:
IMO options like this (that save!!!) could be convenient for the scratch-blocks editor. Not everybody has trouble with their fine motor skills
That would solve both issues:
People who are visually impaired/lack of fine motor skills
Everyone else who likes the current sized blocks.
- card100
-
1000+ posts
New Blocks are too Cartoony/Bulky
Yes, That would be a good idea. That way everyone can have what they want! Only thing is if they do that for everything then we will be stuck with settings that is very cluttered.You know, I think that would actually be really nice. That way, users can change the sizes depending on what they want/need. Here's some interesting options in View Options for Finder:
IMO options like this (that save!!!) could be convenient for the scratch-blocks editor. Not everybody has trouble with their fine motor skills
That would solve both issues:
People who are visually impaired/lack of fine motor skills
Everyone else who likes the current sized blocks.
- fezzinate
-
100+ posts
New Blocks are too Cartoony/Bulky
I'm assuming that they have exaggerated height so they can remain “touchable” on mobile devices. Apple recommends a 44px height for touchable rows, and these are just slightly under. I think the best solution isn't a pure zoom setting, but a set of styles that apply specifically to the desktop version, and styles that apply specifically to mobile. On desktop you can remove quite a lot of the vertical padding.
Here's an example of reducing the padding without scaling the whole thing:

Note, it also still aligns well to the design grid
Here's an example of reducing the padding without scaling the whole thing:

Note, it also still aligns well to the design grid
Last edited by fezzinate (Dec. 5, 2016 11:09:47)
- Saiid
-
1000+ posts
New Blocks are too Cartoony/Bulky
I agree. I also think they should bring back the block shadings I'm assuming that they have exaggerated height so they can remain “touchable” on mobile devices. Apple recommends a 44px height for touchable rows, and these are just slightly under. I think the best solution isn't a pure zoom setting, but a set of styles that apply specifically to the desktop version, and styles that apply specifically to mobile. On desktop you can remove quite a lot of the vertical padding.
Saiid
- theonlygusti
-
1000+ posts
New Blocks are too Cartoony/Bulky
I don't really like the new designs very much.
The blocks without inputs are far too disproportionately tall:

The blocks without inputs are far too disproportionately tall:

- awesome5185
-
1000+ posts
New Blocks are too Cartoony/Bulky
<Snipped> Read my bottom post V
Last edited by awesome5185 (Feb. 8, 2017 02:50:34)
- muellly
-
1000+ posts
New Blocks are too Cartoony/Bulky
When scratch 3.0 comes out I wish there will be a option to toggle between how the blocks look like in scratch 2.0 and 3.0
The way the blocks look like in 3.0 actually tempt me to download the 2.0 editor when the release of 3.0 nears.
The way the blocks look like in 3.0 actually tempt me to download the 2.0 editor when the release of 3.0 nears.
- awesome5185
-
1000+ posts
New Blocks are too Cartoony/Bulky
When scratch 3.0 comes out I wish there will be a option to toggle between how the blocks look like in scratch 2.0 and 3.0
The way the blocks look like in 3.0 actually tempt me to download the 2.0 editor when the release of 3.0 nears.
I agree, there should be a toggle, but make the new blocks default to be welcome for new scratchers, then a toggle hidden in the settings
Last edited by awesome5185 (Feb. 8, 2017 02:50:00)
- redglitter
-
1000+ posts
New Blocks are too Cartoony/Bulky
Yeah, not a lot of Scratchers like the new designs.
That would be a great idea, but I'm sure the blocks aren't actually going to stay like this as I think I saw in the Scratch 3.0 Forum Thread that the Scratch Team are only experimenting with the new look for the blocks and might change them back to their original size? Please correct me if I'm wrong. I'm assuming that they have exaggerated height so they can remain “touchable” on mobile devices. Apple recommends a 44px height for touchable rows, and these are just slightly under. I think the best solution isn't a pure zoom setting, but a set of styles that apply specifically to the desktop version, and styles that apply specifically to mobile. On desktop you can remove quite a lot of the vertical padding.
Here's an example of reducing the padding without scaling the whole thing:
Note, it also still aligns well to the design grid
- Discussion Forums
- » Open Source Projects
-
» New Blocks are too Cartoony/Bulky