My Opinion of Colored Scrollbars

Authored July 2001

Microsoft has recently added a set of scroll bar extensions to its Cascading Style Sheet (CSS) and Dynamic HTML (DHTML) implementations. These extensions make it possible for a page author to control the look of Internet Explorer's scroll bars. Of course this also means that we now have thousands of authors creating horrific user experiences. (For technical info visit the Microsoft Developer Network here or here.)

Here's an example of the stylesheet code used to do this (the code would appear in a <Style> block) and an image of the resulting scrollbar:

body {scrollbar-face-color: #B9DB7D; scrollbar-highlight-color: #372869; scrollbar-shadow-color: #261758; scrollbar-3dlight-color: #372869; scrollbar-arrow-color: #261758; scrollbar-track-color: #cccccc; scrollbar-darkshadow-color: #372869;

The color scheme I chose is thematically acceptable to the Depressed Press site. It actually looks pretty good (if you like lime green). But still, it's a recipe for user interface disaster.

What's the Big Problem?

The problem here, my friends, is one of focus. Web designers, as a group, since the beginning of the web have often failed to take focus into account. Colored scroll bars are just the latest in a long line of similar phenomena which includes the "blink" tag, sliding marquees, animated gifs, background music, and other HTML "enhancements". When designing such things they are the focus of attention. However in practice they are rarely the focus of attention.

Scollbars (and advertisments, background music, animated menus, et al) are peripheral items. They rarely get the readers full attention. In the case of a scroll bar they may get used often, but such use is second nature to the majority of readers. So much so that scroll bars never get much focus.

That's exactly as it should be. Any usability guru will gladly tell you (at great length if you let them) how the perfect interface (if such a thing exists) would subsume the user in "pure" content. The interface would be so simple, so unobtrusive that it would scarcely be noticed at all. Although perhaps an impossible ideal such an interface is the goal. One of the most important aspects of modern UIs in relation to this is consistency. After a short time with a modern operating system people know how to perform basic operations (closing, opening, scolling, moving, etc) for any program that is consistent with the operating system's suggestions.

Colored scroll bars break that consistency. Worse yet they break the consistency of a single program. In other words multiple instances of Internet Explorer will have different interfaces. People must now, perhaps for the first time since they initially learned how to use the operating system, focus on the scroll bars. This not only distracts unneccessarily from the content of the sight, it can be enormously frustrating.

How About an Example?

Consider the image below. This shows the upper right corner of two instances of Internet Explorer. Note that the image depicts actual sites that I visit regularly and have not been "generated" to make a point.

Both sites feature a dark background and the window in focus has modified the scrollbar colors to match the site. Scroll bars, as noted, are viewed peripherally (from "the corner of your eye"). In this case the experienced user expects consistency and will often (at least the first time) attempt to use the standard, grey scroll bar to scroll the in-focus window. This of course results in a change of focus and a few moments of frustrated confusion. The reader must first figure out what happened, then "set things right" and from then on must give the scroll bars more attention that normal to use them.

This is generally only an issue when multiple applications are in use but of course the out-of-focus application in the image didn't have to be an instance of Internet Explorer. Any application that maintained interface consistency would have done just as well. A similiar problem can occur however if the author happens to change their scroll bar colors to match the users desktop color. There are also other potential problems.

For example, although color-blindness affects a significant portion of the public, very few web designers ever consider its effects on the usability of their sites. In the example another potential issue is the lack of distinction between the colors used. For people with poor eyesight there may not be enough contrast between the scrollbar "track" color and the actual tab. Even for people with perfect eyesight a lack of contrast makes it harder to note the scrollbar's position "at a glance".

Another problem is that very often authors taking advantage of this technique often choose colors which make it difficult to tell which component is the scroll bar tab and which is the the scroll bar track. This is because the colors used "reverse the positive" and make the track stand out much more than the tab. Also, as noted already, using low contrast colors contributes to this.

So Microsoft is Ruining the Web, Right?

Blaming abuse of this feature on Microsoft is like blaming Craftsman if your two-year old uses one of their hammers to smash a hole in your bathroom wall. Any feature can be abused or misused. You simply can't blame the feature unless there is absolutely no way that the feature could possibly be useful. Well then, how about that: is there any circumstances where controlling your scroll bar colors could be useful? Sure there are, but in my opinion they are quite rare.

Microsoft has done a fine job of turning Internet Explorer into a first class application platform. Although most applications should follow the rule of consistency some won't. Games, for example, often break the rule of consistency to enhance the suspension of disbelief and emotional response. Kiosk applications may wish to maintain consistency with their setting more than an unseen operating system. In these cases having control over the scroll bar color settings makes Internet Explorer a more attractive choice for application developers.

Like any other capability it is all too easy to misuse this one. The gains are few and negatives many. Although the control offered is applauded the situations in which it's needed are rare indeed. This feature does have its place, but using it properly requires a level of understanding most authors don't seek.