In Search of a Better Scroll UX Pattern
As touch screens continue to dominate our digital interfaces, scrolling is becoming a critical part of our UX.
Scrollbars have cemented their place as the de-facto scroll affordances for over a decade, and “end of scroll” feedback for touch screens was added to iPhones and Android devices shortly after they were released. Check out these examples from the Flutter documentation:
Scroll-bars are helpful, but with design trends pushing hard for minimalism, (even at the cost of transparency) they’re starting to feel antiquated. Personally, I think they’re still useful for areas with lots of content to scroll, and almost all browsers and apps auto-hide their scrollbars these days.
Bridging the gap with a new pattern
Similar to the “overscroll” pattern from the animation above, we can do a similar effect to communicate how far into the scroll we are, if we’re approaching the end of the scrollable area, or that we’re thoroughly in the middle with no end in sight.
It’s not new per se, but it hasn’t spread much in UX trends, and to my knowledge scroll effects like this haven’t been utilized beyond a “neat effect”. I also don’t think it can replace scrollbars, though it could work nicely in combination with them. So here’s my solution to toe the line between affordance and minimalism.
Oh, let’s break it down!
Here is a “material” scroll-box which is scrolled about ¾ down the page. Can you tell just by looking at it? It’s no where near as obvious as a simple scrollbar, but it also doesn’t take up space or cover any of your content. It also doesn’t have to fade out after a second to be less obtrusive — it just is less obtrusive.
There is a subtle top and bottom effect (left and right on a horizontal scroll-box) which fades in as you get farther from that edge. In the case of this material example: at the top of the scroll, the two “sheets of paper” are aligned, making no shadow. As the content “sheet” scrolls under the header, the header casts an increasingly strong shadow. The absence or presence of the overflow shadow lets the user know if they’re at the top or bottom, and also gives them a sense of how close they are. The vertical shadow on the right acts as a traditional scrollbar with the notable difference that it fades out near the top and bottom.
Why is all this fading in and out necessary? Isn’t the scrollbar a simpler solution?
If you’re okay with the scrollbar taking up space on the screen, or making it an overlay which hides and unhides, then it is simpler. But if you’re like me and crave utilitarian minimalism, neither of those cases feel right. This proposed pattern gives the advantage of never covering the user’s content — and if it does, it’s just a soft shadowing, nearly imperceptible on photos.
I just don’t like how it looks
First of all, how dare you. Second of all, this pattern is completely customizable! If you follow the source code, you’ll see that the important logic is knowing when to fade each side of the scroll-box in and out. Apart from that, the look and feel are completely up to the UI designer!
opacity: 1 - Math.abs((scrollPos / scrollEnd - 0.5) * 2)Two style examples to whet your appetite
In the codesandbox, you’ll find two styles: Material, and… not material. The Material Design variant is based on paper and shadows, turning the scroll-box into a subtly intricate paper construction. The other is just a style I wanted to try out, which features solid lines for end-caps and a thin light for the “scroll-bar”. I left the styles separate in my code to allow you to abstract them away and try your own variations!
So, what do you think?
Leave a comment, positive or negative—I’d love to hear your take on it! If you make your own variation or implement this idea in a project of your own, tell me about it on twitter!
