Hacker News Reader

Comment by franciscop | Hacker News Reader

This is a very common issue. The best and most common solution (besides visual indicators for scroll) is to make sure you are always cropping some elements. Which is very tricky to impossible in a fluid general-purpose UI container.

This is very heavily used for horizontal scrolling e.g. in the Google Play Store for instance. IIRC it used to show 3.5 elements, now it's more like 3.1-3.2 elements.

Edit: example, you can see how this is used in apps as well as screenshots: https://www.androidcentral.com/play-store-getting-material-d...

View on HN

> besides visual indicators for scroll

These don't have to be scrollbars. A pattern I've seen lately is a semi-opaque white gradient to indicate "you can scroll more."

I used to use that about 5-6 years ago, you have to be very delicate with it because it can look extremely cheap, but if you make it too subtle it's impossible to see.

What's worse is that if there's enough of a bottom boundary to the last visible bit of content in the viewport, it doesn't look like there's anything below it at all, which puts you in the same position.

Also worth noting that people with vision difficulties/problems quite possibly can't see it at all unless it's super strong.

> Which is very tricky to impossible in a fluid general-purpose UI container.

In this case it's not in a fluid container. All of the elements shown are of a fixed size—the photo, the row of contacts, the row of apps, and then the actions. (Well, the list of actions is fluid, but those are mostly off-screen).

Plus, one of Apple's advantages is that they have a small set of possible screen dimensions, because there are only a few phones. This should absolutely have gotten caught.

> This is very heavily used for horizontal scrolling e.g. in the Google Play Store for instance.

I just did some testing:

• Play Store uses scroll-snapping for the horizontal scrolling

• Play Store doesn't use scroll-snapping for the vertical scrolling (they should adjust white space to ensure you see 0.1 of an item at the bottom). Fiddling with text size and display size in the display settings can cause vertical items to exact fit (unobvious that vertical scrolling is available).

• There is a CSS feature for this: https://caniuse.com/#feat=css-snappoints

Or you could use the solution that's worked great for 50 years: scroll bars

On viewports that are wider than than they are tall, scroll bars work well. On viewports that are taller than they are wide, they are not great.

The problem here is that Apple used no visual affordances. Scroll bars are the wrong choice, but there are others.

I thought about this and while it does work, there's not enough screen real estate on a phone for this to be efficient. Phone screens are already very narrow and vertical. So either the scroll bar would be too narrow to be useful or too large.

Keep in mind that this "scroll bar" would only have to indicate that there is more content, or at most, which part of the content you are looking at. It doesn't have to be interactive (tap/drag to scroll) because you can still scroll by swiping. So a few pixels would be enough if the color stands out enough.

In general I'd much prefer a scroll indicator to a scroll bar on mobile. Google Play Music gets this precisely wrong: the album list lets you click a play button on the album cover as a shortcut, but the button is so close to the edge of the screen that it's very difficult to avoid hitting the scroll bar area and scrolling to a random section of the list instead of hitting play. So you have to seek to the album you want again, and, because you are optimistic beyond rationality, you try again, and whoops! Did it again...

There are other ways. There could be some gradient faded chevron overlay near the edges where you can scroll would be one way to do try to solve it.

> (besides visual indicators for scroll)

Yes, but you normally cannot control that :)

I think the argument here is that Apple can/could control that here.

Reply on news.ycombinator.com