UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 808 March 22, 2012

The Extinction of the Scrollbar

In the new Mac OS X Lion operating system, there has been a noticeable change to the interface: the removal of the scrollbar. Users can adjust their settings to add scrollbars back in, but the fact that this option is even offered speaks volumes about the diminishing role of this once-indispensable interface element.

Since the early days of GUIs, the scrollbar has provided a way for users to navigate around an object that’s too large to fit within a window. However, over the past few years, users have been given other ways to scroll: mice with scrollwheels, laptop trackpads with scrolling capabilities, and a new set of gestures for mobile devices and tablets. With this reduction of the role of scrollbars, it’s important for designers to be conscious of the scrollbar’s benefits and drawbacks, and to know how to replace it with other elements that have similar benefits.

Benefits of the Scrollbar

In addition to allowing the user to scroll, the scrollbar has several other 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.

Drawbacks of the Scrollbar

Despite these benefits, the scrollbar has several 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 scrollbar 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 or a slideshow).

Scrolling on Computers and Mobile Devices

For web pages and mobile devices, scrolling vertically is very standardized. Content almost always extends vertically, so an indication of how to find hidden content is rarely needed.

Due to the drawbacks mentioned above, the scrollbar has been replaced with other methods of navigating content panes. In mobile devices, users swipe vertically upon the content itself in order to scroll. In most cases, the scrollbar briefly appears when the content loads, then quickly disappears. It only reappears again when scrolling is activated. This gives users a sense of orientation and scope without consuming precious screen real estate.

On computers, the scrollbar’s primary function—scrolling—has been made almost irrelevant by hardware innovations. Apple laptop trackpads enable users to scroll with a two-finger swipe, and their touch-sensitive mice allow scrolling with a vertical swipe. On many Windows-based computers, the right edge of the trackpad has a defined area for scrolling, while mice commonly have a scrollwheel. In web browsers, using the up and down arrows scrolls the content as well.

In addition, sites such as Google, Facebook, and Foursquare are overriding the standard browser scrollbar with a narrower, lighter version, matching Apple’s slimmed-down scrollbar.

Scrolling on the iPad

Unlike mobile apps and websites, iPad apps are extremely variable in terms of their layouts, often utilizing multi-column, magazine-style displays. Designers of iPad apps are also much more experimental in their use of gestural interactions. Consequently, interfaces are very unstandardized, so having indicators that show how to navigate is important.

The Mint app (below) provides some examples of these indicators. The top graph area uses a series of dots as a clear indicator that a horizontal swipe reveals more content. By showing a specific number of dots, and the user’s position within the set, it also provides orientation and scope.

In the lower right, the row of spending categories fades off the screen to the right, which is an often-used indicator of continuation, suggesting that content curves off the screen like a scroll.

In this example, users can actually vertically scroll the lower-right area as well. But this capability lacks any visual indicator, making it difficult to discover.

Like the Mint app, the USA Today app uses a subtle fade at the bottom of their main screen to suggest continuation. They also cut off the content at the bottom of the screen, suggesting that you can scroll vertically to see the rest.

To compensate for an unclear scrolling mechanism, the Wall Street Journal app shows detailed scrolling instructions. This technique is used in other apps as well; Flipboard and The Daily provide instructions on some screens to “flip” or “swipe” to continue.

This type of instruction is often necessary for apps that allow innovative gestural interactions. However, for an action as basic and essential as scrolling, apps should adhere to conventions and include visual affordances that clearly imply the interaction method.

Wired actually created a custom scrollbar for quickly scanning through their magazine. While it doesn’t exactly have the traditional scrollbar functionality, its benefits match those described above: it allows the user to scroll, indicates how to see hidden content, and provides a sense of orientation and scope.

Conclusion

Since the early days of GUIs, scrollbars have been built into windows so designers could just take them for granted. However, as the prominence of system scrollbars has reduced, designers need to be more conscious of them, and understand the benefits of scrollbars that are lost when they’re not shown. For all platforms, it’s increasingly up to designers to decide whether to use scrollbars, how to format them, or how to use other methods to replace the many benefits of this once-indispensible element.

ABOUT THE AUTHOR(S)

User Profile

Andrew Turrell lives in Los Angeles and is Director of User Experience at RED Interactive Agency. He is also an adjunct professor of Interaction Design at the University of Baltimore M.S. in Interaction Design and Information Architecture program. Follow Andrew on Twitter: @andrewturrell, or check out his LinkedIn profile.

Add new comment

Comments

0
0

For me the fading scrollbar on Mac OSx causes frustration especially when in Google Agenda, I sometimes cannot finish my action and wait till I have access to another machine that does give me the scrollbar options. To me that is bad UX when someone cannot finish their actions. I never do anything with my settings, the intuitive option should be offered at first glance, all the alternatives should be options

0
0

Also for users that suffer from repetitive strain injury forcing them to use a mouse wheel is like putting a few knives through their fingers

21
26

You forgot to tell, that in tablet scrolling by fingers make content hidden behind your hand ans fingers. Thst's why i still miss and want usual scroll bar, and even a little wider for finger to touch it.

(sorry for bad english)

19
24

Dots: I believe my first experience with the dots were when I was looking for flash photo slideshows many years ago to use in my designs. Now I see them everywhere. When a user sees this interface for the first time as an auto-advancing slideshow, it is an instant learn. The current dot changes when the slide changes. This subtle activity draws curiosity and the user explores by clicking on one of them and before you know it, another user is fully trained on the dots as used for this and other purposes.

20
24

Hi all, for what its worth, I believe Apple has patented the fading scrollbar as seen on their products. I suppose this could be seen as a blessing and a curse: I love a pure content page, but this now forces everyone else to "think different" and dilutes the interaction from achieving widespread usage.

23
23

Two things: (1) As others have stated, the dots do not "clearly indicate a horizontal scroll, at least not to me. (2) The area occupied by the three dots is at least as tall as what would be occupied by a horizontal scrollbar, and takes up more valuable real estate, so what have they really accomplished?

22
24

for a UX mag, your comment sections is ugly :)

24
23

Dots aren't always used to indicate scrolling... The times I've seen them used, they indicated different images/screens within a designated area. You'd click the dot and that image/screen in the assigned area would change to the next one in the list. Click it again and that image/screen changes, once again. Definitely not the same as scrolling.

25
24

The scrollbar was one of the first things I missed in Lion. Scrolling in long lists with the scrollbar is much more effective and faster than with the mouse wheel. And I haven't seen a working alternative approach to this problem. This is not the only drawback in usability with the new OS version. We should not blindly praise all the stuff that Apple is doing.

22
20

This is a stupid, stupid trend that needs to die. Not everything Apple does is worth copying or adopting, and this is really just annoying. Even by killing the scrollbars, Microsoft has done a much better job with Metro to give the user hints on what is scrollable and what not.

25
19

@kasperns @Will Hughes @steve Thanks for the comments! In regard to the dots, I would say that intuitiveness is always in the eye of the beholder. What's intuitive to a particular user is always based on what that user already understands. If you've never seen the dots, of course you don't immediately know what they do. But the same could be said for the scrollbar, or any interface element for that matter. In many cases, the best chance you have for creating something usable is to use something standardized, and the dots are one of the more standardized interface elements on the iPad and iPhone, and variations on the model have been used on websites for years (look at the main banners on Yahoo!, MSN, ESPN, GE, etc).

In addition, I also think the dots are an efficient, nicely designed element. They communicate a great deal at a glance, and share many benefits with the scrollbar. Their horizontal orientation relates to the direction of scroll (the panels often transition with a horizontal slide). Also, like scrollbars, they provide a sense of scope, indicated by the quantity of dots.

In response to the issue of scalability, which Steve mentioned, imagine stringing the dots together instead of spacing them apart, making room for more dots. In this case, what do you have? A scrollbar! But you're right, Steve, using dots works best when you're dealing with a reasonably small amount of data.

16
16

"The height of the scrollbar relative to the window corresponds to the height of the visible content relative to that of the full content." The scrollbar is always the height of the window - it's the thumb that you are thinking of, and that is not always the case.

22
21

This really makes me wonder when reading that the author believes that the three dots are 'clear indicators'... The dots are in no way clear - they are a highly symbolical and indirect way to guide the user, which will only work if the user can translate that a dot means another page. This takes knowledge or a lot of calculation. No exactly intuitive... Apple already did this mistake also.

25
25

Sorry, but the dots for pagination / scrolling are NOT a clear indicator of anything unless you've already been introduced to that UI concept.
New or non-technical users are unlikely to discover that functionality without prompting.

Also, the title and premise of the article is misleading... The scroll bar is not going extinct, and the rest of the article talks about how the scroll bar lives on. Albeit modified to suit new tasks.

19
20

The edge fade is great invention. But nothing says scroll like scrollbar and being reduced to including navigation instructions sounds like a usability fail to me.

23
23

The dots Mint uses have been all over the web for years. They are a web designer staple. The problem is that many users still don't know what they mean. Also, they are a pagination element and look terrible if you have many dots. Won't work vertically either. The fade is nice but gives no indication of orientation.

21
27

The Mint app dot indicators are so clever. Clean and simple, the dots replicate the experience of gauging the scope of the information, much like a scrollbar. Providing the user with the tools to judge how much time they can anticipate to invest in the site can be as simple as this.

Cheers,
Sarah Bauer
Navigator Multimedia