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.
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.
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! 🙏🏻🙏🏻🙏🏻