Scrollbars are multitudinous & awkward on low-res screens

[kaaaaathy]

Overview

When the screen resolution is below our minimum supported resolution, the GUI gets cropped more dramatically. This often creates additional "levels" of scrolling, which makes the GUI hard to use. We noticed this at a couple of workshops where the screen resolution was ~ 800x600.

This is a design audit of GUI scrollbar issues on lower res screens. (1024px and below.)

This list will probably continue to grow, and I'd also appreciate anyone's contributions from different resolutions/machines. 👍

---

Related issues:

Hard to use workspace scrollbars on touch
Blocks categories are cropped when scrollbars are present
Investigate small screen resolutions
Comment: "The costumes area has an extra scrollbar due to all the padding"

---

What resolution are you using?

I'm finding most of these at 1024x640 on a Macbook Retina 15", which is the lowest resolution for my machine.

Note that the GUI is made even shorter by the browser bar UI, which gets pretty large on low res displays.

---

Issue: Workspace vs. page scroll

It's easy to accidentally scroll the page when you mean to scroll the workspace– and vice versa. This depends on where your cursor is on the screen.

This actually happens on all resolutions of screens when you resize the browser, so this is kind of impossible to avoid. It just so happens that on low res screens, you can't avoid it even if you fullscreen.

Possible remedies:

• While we can't "solve" this, we can take a closer look at browser-level scrollbars and style them so at least they are always easy to see. (For instance, browser scrollbar on Chromebooks is tiny and disappears often.)

Issue: Paint editor area "overflows" beneath backpack

It is easy to accidentally scroll the editor UI, instead of scrolling the canvas. Also, the "Convert" button gets cut off slightly in today's design.

Possible solutions:

• Reduce vertical padding in the paint editor
• Shorten height of canvas area

Issue: Extension categories become hidden after adding one block

Any more than 1 extension will fall below the fold. It is also not visually clear that you can scroll the area.

Possible solutions:

• Change the vertical padding so extra extensions appear partly revealed (giving you an affordance that there's more)
• Add a subtle arrow when your block categories overflow

Issue: Sprite area is hard to scroll

This applies for projects which have many sprites (more than 4-5.) This isn't really a game-changer, although we could maybe improve the experience.

Possible solutions:

• Is there a way to make the sprite tiles smaller while not compromising legibility of text/icons?

[Alzter]

I actually made a bit of a critique on Scratch 3.0's UI (including the costume editor).

I feel some elements of the design are rather unbalanced, padding being placed in unnecessary places instead of between objects to not make the design feel cramped. An example of this is how the costume editor has a cluster of buttons with nothing in-between (cramped) and then has a bar on the right which is completely empty (unnecessary padding).