Pros vs Cons of a vertical scrollbar on a smartphone UI (app)

Question

Nowadays it's totally common to see mobile UIs without any visible scroll bars.

But I'm wondering if there actually are benefits with adding a vertical scroll bar on a mobile UI and if these benefits outweigh the possible drawbacks. ( ← this is the question)

The first benefits I can think of are :

• The possibility to judge the page height on a single glance.
• In the same vein, avoiding non-viewed content when the overflow isn't apparent (text/image not cut at the bottom).
• The possibility to tap the bottom of the scrollbar in order to reach the very bottom of the page.
• The possibility to scroll faster.

As for the drawbacks, there is the loss of horizontal space (when you don't want to have your scrollbar float above your content).

Answer 1

The scrollbar has several important benefits.

The height of the scrollbar relative to the window corresponds to the height of the visible content relative to that of the full content. This provides an at-a-glance sense of scope and orientation. In addition, the mere existence of the scrollbar indicates that content is hidden, and communicates the direction users must scroll to find it. Furthermore, when navigating a long piece of content, the scrollbar offers a way to rapidly move to a specific point within that content. Finally, the universal familiarity with the scrollbar makes it a very intuitive interface element for the vast majority of users. It provides all these benefits elegantly and efficiently, without distracting from the page content.

The scrollbar also has few drawbacks that have led to its diminished importance.

First, it adds to interface complexity at a time when designers are striving for, and users are demanding, simplification. Secondly, it’s positioned inconveniently. If you’re within the flow of a task, moving your mouse all the way over the right side of the window to scroll up and down is distracting. Another drawback of the scroll-bar is that it moves on a continuum and not in defined increments, which isn’t optimal in some situations, such as paging through eBooks and navigating a series of objects e.g. a photo album.

The choice to use it depends on the preferences and the type of application you are developing.

Answer 2

Mobile UI nowadays uses the accelerated scroll method. The faster you scroll up or down the faster the content moves up or down. It therefore becomes very easy for users to reach the bottom or top of the page easily.

If the page is for reading content where I'm not wanting to get to one end or the other very quickly, I would suggest a scroll bar of some sort to indicate where I am on the page. If I'm reading an article and my interest in it starts to wane, I might keep going if I see I only have a bit more.

For pages where its navigation or quickly digestible pieces of information it might not be required. Many mobile devices also have the "double tap" on the top and bottom edges of the page to snap you back to the top or bottom too.

Answer 3

The possibility to judge the page height on a single glance.

But does it matter? (I'd argue, no, as research shows that people are just fine scrolling)

In the same vein, avoiding non-viewed content when the overflow isn't apparent (text/image not cut at the bottom).

Always an issue, but I'd argue less-so on mobile, as nearly all mobile web pages scroll.

The possibility to tap the bottom of the scrollbar in order to reach the very bottom of the page.

Is that useful? Maybe. Sometimes. But usually not all that needed. And flicking to the bottom of a page on a touch device is quite easy.

The possibility to scroll faster.

I disagree with this. It's already very easy to scroll on a mobile device and there's no detailed 'hot spot' that you have to hit to do it.

Keep in mind that OSX has also gotten rid of scroll bars on the desktop UI as well. The apparent assumption is that people know how to scroll--especially on touch devices (which MacBooks arguably are these days).