Shazam Flashing Scrollbar

Screenshots powered by

GetScreenshot Screenshot API

✋ What is it?

This is a solution found in the Shazam iOS app. A hidden scrollbar flashes briefly when a user navigates to 'Related' screen. This subtle interaction indicates that the view is scrollable.

🤲 How does this interaction or solution work?

The Shazam app has several master views. One of those views is the "Song" detail. This detail has several sub-views that can be navigated with a tab-bar control placed at the top.

The last sub-view of the 'Song' detail is the 'Related" view. This particular screen is a list of related songs to the one you are currently browsing.
When a user navigates to the 'Related' view, the screen shows the hidden scrollbar for a brief moment.

At the time of this writing, we couldn't determine if this behavior is intentional. Since it only occurs in this particular view, there's a chance that this behavior is a side-effect of some event that is firing the scroll in the background.
However, it's also possible that this a test or a small experiment to enhance scrolling discovery.
Either way, we felt that this solution could benefit designers/developers dealing working on scrollable views.

🙌 How does this interaction or solution work?

Discoverability.

As mentioned before, there's a chance that Shazam didn't intentionally create this behavior. However, this is particular interaction could be very helpful with the discoverability of scrollable views.

In some instances, mobile screens show dominant elements that could distract users from discovering content that lives below the screen fold. Flashing the scrollbar can help users to understand that there's relevant content or interaction hidden below.

This interaction can also be helpful for fixed width or height elements like toolbars or multi-tab controls.

This interaction can also be helpful in websites with scrollable fixed elements like sidebars or floating views. This effect could be achieved with a tiny scroll movement after loading the page.


That's it! If you like the content, consider subscribing to Waveguide Next, a newsletter / blog where I share new examples and lessons on User Experience.