4 ms·

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. Whi

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-design-face-lift https://www.androidcentral.com/play-store-getting-material-d...

lonelappde 7y ago
Or you could use the solution that's worked great for 50 years: scroll bars
- franciscop 7y ago
  > (besides visual indicators for scroll) Yes, but you normally cannot control that :)
  - nkozyra 7y ago
    I think the argument here is that Apple can/could control that here.
- sempron64 7y ago
  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.
  - moring 7y ago
    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.
    - regularfry 7y ago
      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...
  - greggman2 7y ago
    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.
- pwinnski 7y ago
  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.
mcphage 7y ago
> 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.
Andrex 7y ago
> 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."
- johnzim 7y ago
  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.
  - Groxx 7y ago
    Also worth noting that people with vision difficulties/problems quite possibly can't see it at all unless it's super strong.
robocat 7y ago
> 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 https://caniuse.com/#feat=css-snappoints

lonelappde 7y ago

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

franciscop 7y ago
> (besides visual indicators for scroll) Yes, but you normally cannot control that :)
- nkozyra 7y ago
  I think the argument here is that Apple can/could control that here.
sempron64 7y ago
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.
- moring 7y ago
  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.
  - regularfry 7y ago
    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...
- greggman2 7y ago
  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.
pwinnski 7y ago
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.

mcphage 7y ago

> 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.

Andrex 7y ago

> 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."

johnzim 7y ago
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.
- Groxx 7y ago
  Also worth noting that people with vision difficulties/problems quite possibly can't see it at all unless it's super strong.

robocat 7y ago

> 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 https://caniuse.com/#feat=css-snappoints