How and When To Use Over-scroll Effects in UX Design

KaiOS Technologies
Oct 18, 2018 · 3 min read

By Scott Wu, UX Designer at KaiOS

Navigation on non-touch feature phones is a critical element of the user experience and has ripple effects on other areas of design. One such component we have focused on is scrolling and different over-scroll effects, or the methods a designer can incorporate that indicate to a user that they’ve reached the beginning or end of scrollable content. Depending on the screen architecture, these elements generally appear at the top, bottom, right, and left sides of the screen and signal to users no more content is available.

While over-scroll effects are common on smartphones and desktop computers, they’ve not yet been introduced on smart feature phones. In this article, I will showcase explorations by our UX team into how these effects can be implemented on KaiOS-powered devices.

1. List view

List view displays a list of scrollable items. It’s arguably the most common view in mobile operating systems like Android and iOS, as well as KaiOS. Several types of over-scroll effects can be used to mark the end of scrollable content for this view.

Bounce with a blink

Bounce with top and bottom visual hints

2. Grid view

Grid View displays items in a two-dimensional, scrollable grid of rows and columns. It is particularly useful for organizing images in a structured fashion, for example when you’re designing a gallery app. The below animations work particularly well for this view.

Push off

Bounce with Top & Bottom Visual Hints

3. Page scroll view

Page scroll view is a generic solution for displaying multiple components and views; it can be formatted both vertically (e.g., card view) and horizontally (e.g., tabs, full-screen images). Below are several animation concepts that can be applied to the page scroll view format.

Scale bounce for tabs

Rotation Bounce for Cards

Stretch Bounce for Cards

Scale Bounce for Full Screen Images

As with so many things in design (and life!), you can have too much of a good thing; apply over-scroll effects sparingly. For example, when you’re designing an app with static and limited content that can be looped, you should not apply these effects as they will work counterintuitively against the user experience.

Conclusion

Over-scroll effects subtly inform users there’s no more content to view. They’re a great example of how simple, visual cues can convey and communicate important information to the user.

I hope this exploration inspires you to think about the use of visual cues in your own UX designs and how they can help inform your users. And if you enjoyed the post, or if you have feedback or ideas, please do share them below and leave a clap! 🙏🏻🙏🏻🙏🏻

Design at Kai

Behind-the-scenes stories from the UX Design team at KaiOS Technologies.

KaiOS Technologies

Written by

KaiOS Technologies powers an ecosystem of affordable digital products and services, and exists to empower people around the world through technology.

Design at Kai

Behind-the-scenes stories from the UX Design team at KaiOS Technologies.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade