Mobile: Enhancement: Consider Ways to Incorporate Clearer Scroll Indicator on Block Settings

[SiobhyB]

Description

While reviewing a PR of mine, @guarani shared an interesting post in which the writer shared a personal struggle in finding a setting on iOS due to a lack of a scroll indicator:

The "Copy" action is perfectly spaced from the bottom of the screen to appear like it's the only option. And since iOS (and in some places now macOS, too) doesn't offer visual affordances like scroll indicators, she had no idea there was any content further below.

This was related back to a new block setting that is only available on scroll. There are, in addition, a few more blocks with settings that require scrolling on mobile, which may not always be clear to users due to a lack of visual indicators.

Although this may not be an easy fix, as it's ultimately in line with the way most mobile apps treat scrolling, I wanted to bring it up for discussion as it reminded me of conversations throughout the years with users who've faced similar problems. I think it's a worthwhile discussion to have on our radar.

Step-by-step reproduction instructions

1. Add an image block via the mobile app and tap the cog/gear icon to access its settings.
2. Under the BottomSheet's Link Settings section and add a link.
3. Observe how the last few settings are now only available upon scroll, but there's no visible indicator to prompt users who may not be aware of that.

Other blocks with settings that overflow the BottomSheet's max-height include the Cover Block and the Latest Posts Block.

Expected behavior

I'd expect all available settings to either be clearly visible to me or for there to be some type of visual indicator to inform me of additional settings.

Actual behavior

BottomSheets with overflowing content don't have any visual indicators to prompt users to scroll, which may mean that settings sometimes go unnoticed.

Screenshots or screen recording (optional)

You'll see from the following screen recording that the block's settings originally appear "complete", with no visual indicator that more settings are available upon scroll:

Screen.Recording.2021-06-02.at.18.43.09.mov

Device information

• Device: iPhone 11 Pro Max
• Operating system: iOS 14.4
• WordPress app version: 17.4

[mchowning]

Thanks for reporting this @SiobhyB ! 🙇

This does feel like a place where a small change could have a big impact for users who don't realize there are more options. Do you have any thoughts here @iamthomasbishop ?

[guarani]

BottomSheets with overflowing content don't have any visual indicators to prompt users to scroll, which may mean that settings sometimes go unnoticed.

I do see scroll indicators on our bottom sheets (when I scroll), but before scrolling, there's no real indication that there's more options off-screen. The fact that the bottom sheet only takes up half the screen I think also suggests that if there were more options, the bottom sheet would have grown taller.

Here are some ideas I had:

• Flash the scroll indicators when the bottom sheet opens and there are off-screen elements (RN docs)
• Allow the bottom sheet to grow taller as more options are added (I can see this not being ideal for settings like rounding images, where ideally the user should still be able to see the block they're editing)

[iamthomasbishop]

@SiobhyB thanks for raising this! It's a tricky one, and while it's definitely not unique to our app, I agree it's worth solving.

I think I'd like the solution here to be a subtle hint rather than a new explicit UI element. One design pattern that I've seen and thought was effective is where you animate the scrollable content with a subtle motion (usually a "wiggle" or scroll up/down of the content after ~1-2 seconds of inaction) to give the user a hint that the content is scrollable. In most cases, all it would take is ~20-30px of movement upwards for the user to see there is more content below.

@guarani @mchowning thoughts on that approach? I'd like to avoid adding a new visual element if possible because it might clutter the content and I don't know if it will really be any better than something gestural like this.

[guarani]

I think I'd like the solution here to be a subtle hint rather than a new explicit UI element. One design pattern that I've seen and thought was effective is where you animate the scrollable content with a subtle motion (usually a "wiggle" or scroll up/down of the content after ~1-2 seconds of inaction) to give the user a hint that the content is scrollable. In most cases, all it would take is ~20-30px of movement upwards for the user to see there is more content below.

I like this approach where you give the content a bit of a bounce if there's inactivity ❤️. I think I've seen this in apps but can't find any right now. Do you have any links or the name of an app that does this well?

[iamthomasbishop]

@guarani I can't remember off the top of my head, but I will try to find an example. 😄

[hypest]

We could also consider making the scrollbar persistent though that's only available on Android.

[guarani]

Update: In offline discussion with @iamthomasbishop, it was decided to show a persistent scrollbar on Android and a flashing scrollbar on iOS.