2

I've been thinking about the way most OS's handle scrollbars. The general pattern is an invisible scrollbar that only appears when the user scrolls. This is the case on Mac OS, iOS and Android (see image below).

Is this a good pattern for UX?

In my opinion it is very important for users to know that you can scroll. Without this users might miss important content, grow frustrated and fail to complete user tasks.

I was wondering what your opinion on this is and if there's research that supports either way of handling scrollbars in UI/UX?

enter image description here

My own findings

Apple specifically states the behaviour of scrollbars in the iOS Human Interface Guidelines.

A scroll view itself has no appearance, but does display transient scrolling indicators as people interact with it.

Source: iOS Human Interface Guidelines

Material Design (Scrolling Techniques) describes a lot about scrolling behaviour but nothing about scrollbars. Some Android OS applications do not have scrollbars at all.

I see what the pros are. It saves space and looks good. However, there are some cons, too. For a user it is less clear that there is content below the fold. You can help the user by having content being cut off from the fold (see below), but that is not always enough.

enter image description here

Apple has an option in Mac OS to make scrollbars always visible, but not in iOS.

enter image description here

Windows uses scrollbars that are always visible.

Improve this question

1 Answer 1

Reset to default
2

As I understand it, a scrollbar main functionality is:

  1. Inform that there is overflow content, so the page can be scrolled to access it
  2. Give feedback on where we are within the overall scrollable area

Scroll in mouse devices is achieved with the mouse wheel. It might be the case that the mouse doesn't have wheel or that it doesn't work correctly, so the scrollbar can also be dragged to scroll (this could be a reason to always keep the scrollbar visible in these devices). In touch devices (and trackpads) what you drag is the page itself so there is no need to make the scrollbar respond to a drag, so its basically an indicator.

If it is understood that there is content outside of the current window, I believe nowadays the user understands that the way to get there is scrolling. There is a fine line here but if you can make the user understand there is content overflowed then you have fulfilled the first point above.

The second point is relevant in cases such as web pages where there are boundaries and we are in a certain part of the whole area. Contrarily to apps where there are no such boundaries, like some 3d modeling or 2d drawing apps where the canvas is infinite.

In my opinion the most relevant point is the second one. The scrollbars you describe in the question give this feedback. However, I would say that the main con is on touch devices where the scrollbar is only shown while you are scrolling. If you only want to know where you are in the document you are forced to touch the screen and scroll a little (not that it is a big deal).

There are other kinds of feedback used in scrollbars that can improve the experience of the site. These will be useful in specific situations. Some examples:

  • In Chrome searching the current web, it is indicated where are the matches:

  • Google Photos indicates in which year and period of the year we are as well as the block:

  • Sublime text shows the actual document:

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.