Musings on (OS X Lion) scrollbar alternatives

Alas poor scrollbar, we knew thee well.

Will Windows 7 be the last mainstream OS to use the elevator + track + clickable arrows UI element for scrolling? Given where Microsoft are going with Metro and Apple with homogenising elements of iOS into OS X, it seems eminently possible.

OS X Lion replaces the traditional scrollbar of Snow Leopard with the slim lozenge from iOS... and most significantly: hides it by default.

A good summary of the usability disadvantages of this behaviour are made halfway down this page of John Siracusa's in depth Lion review.

Jon Whipple has an idea he calls the 'Scroll Compass' (found via Daring Fireball) to solve these problems, although as John Gruber notes, it brings with it its own problems: mainly that it's an arbitrary new interface abstraction.

The other issue with the Scroll Compass is that it clashes with Apple's current drive towards making OS X feel more physically 'real' and directly touchpad manipulable through bringing iOS interactions to the desktop. The most significant of these in Lion is the switch to 'natural' scrolling and the adjustment of other gestures to be naturally mapped to the user's touchpad actions.

As soon as I read Jon's post I had the same idea that numerous posters in the comments also had: why not indicate there are extra items off screen by modifying the window's background directly?

This has a couple of advantages:

• It makes the background look more like a physical object inside the window, reinforcing the behaviour of natural scrolling.
• It's not an abstraction: it's actually suggesting the presence of extra content directly via a psuedo-physical visual cue.

To my mind, there are two obvious implementations of this idea:

1. Modify the edges of the background so that the very edges are marked with a subtle frame. When these elements aren't visible on all 4 sides, the user knows that they can scroll, and in which direction.

   The primary gotcha with this is that it can't maintain the physical illusion in the face of a user adjusting the window size to larger than the document size.

   The frame would of course stick to the edges of the window but that also means it would move resize, subtly breaking the concept of there being a real physical background present.

2. Use a drop shadow or gradient effect just inside the edges of the window so that it appears to be slightly raised / separate from the background, subtly indicating where the background extends 'under' the window in a given direction.

   My Photoshop skills definitely aren't up to this task*, but I'm certain a more talented UI artist could devise a subtle but definite visual indicator that could be very effective used in this way.

   Nevertheless, here are some examples I've attempted:

An unadulterated Lion Finder window

A Finder window hiding content to the left, top and right

A Finder window demonstrating it can be scrolled downwards

With cues like these in place, the user knows they can scroll, and as soon as they do, the iOS style lozenges appear and impart the rest of the missing information, and are available to be grabbed.

The significant limitation with both Jon's idea and the ideas I've visualised above come when you get to the web.

Although a drop shadow or gradient (fading to transparent) could work well for the vast majority of websites that scroll within the browser window, it would be difficult to apply to the appropriate elements on pages that have scrollable areas within the page. 

Having said that, this is also a page design that behaves poorly on iOS already, both through lack of discoverability and because the vast majority of iOS users don't know that you need to perform a two finger drag action to scroll areas within a web page.

Nevertheless, with appropriate iteration and testing, I think a gradient style implementation could very subtly enhance the physicality of Lion windows whilst adding some of the visual feedback lost with the new default scrollbar behaviour back in.

* Apologies to Jon for Photoshop abuse of his Finder window image, which I hope he doesn't mind me borrowing for demonstration purposes.