scroll bars

One more element to take into account in web interfaces are the scroll bars, located in the right side area (vertical scroll bar) and in the lower area of ​​a web page (scroll bar…

One more element to take into account in web interfaces are the scroll bars, located on the right side (vertical scroll bar) and at the bottom of a web page (horizontal scroll bar).

The mission of the scroll bars is to allow the user to scroll through the contents of the page when the size of the page is greater than that available in the web browser window. They therefore play a fundamental role in the accessibility to the contents of any page.

Scroll bars have a standard design in each web browser, although their graphic properties may vary from one browser to another. Its maximum dimension has a size that depends on the resolution used by the user, covering all the available space (height or width of the window). Instead, the size of its smallest dimension depends on the web browser and operating system: on Windows, 18 pixels on Internet Explorer and Netscape 4x, and 14 pixels on Netscape 6x.

As for its colors, the classic combination has been a game of gray, until the appearance of Internet Explorer 6x and Netscape Navigator 6x, in which blue colors are used for the main elements and bluish gray for the backgrounds.

These colors can be modified in Internet Explorer since version 5.5. through the application of Cascading Style Sheets (CSS), which allow you to configure the color of up to eight elements of the bars (backgrounds, shadows, arrows, etc.). Therefore, we can currently consider scroll bars as one more graphic element of the web interface, with its own visual weight and its own style characteristics.

The CSS code that allows you to configure the colors of the main navigation bars is the following:

Being:

* base: base color of the entire bar

* track: bottom of the bar

* face: closeup

* highlight: arrow box light

* 3d-light: 3d light

* dark-shadow: shadow of the foreground

* shadow: background shadow

* arrow: arrow

Scroll bars don’t just appear on the edges of the browser window, there are other internal interface elements where they can exist, such as frames, iframes, and layers. These elements create internal “windows” in the interface, displaying their own content that can exceed its size, a situation in which scroll bars are necessary.

In these cases, and always working in Internet Explorer 5.5 or higher, it is possible to individually configure the appearance of the scroll bars of each one of the windows, with which these elements can be very important visual tools when defining in the zones and pools interface.

The only downside is that in other browsers, including Netscape Navigator, the bars will always appear in their standard set of colors, which can be inconvenient in the overall interface design.

An important aspect to take into account is that the scroll bars appear in a block, that is to say, it is not possible to indicate in a web page that only one of them appears. There are currently three appearance options for the bars:

1. They don’t show up. This option is only valid when we are sure that the content of the page will not exceed the available space in the browser window or when we are going to implement artificial “windows” on the page that have particular bars, as is the case of layers with scroll. If the appearance of the scroll bars is prevented, it must be taken into account that users who use a screen resolution lower than the design resolution will not be able to access all the contents.
2. They appear automatically when necessary. It is a good alternative, but special care must be taken to avoid the appearance of the horizontal scroll bar as far as possible, which causes usability problems and discomfort for users. To do this, the contents of the page must be designed in such a way that its width never exceeds the available width of the window. The same considerations regarding the resolution used by the user as in the previous case.
3. May they always appear, whether they are necessary or not. Not recommended, as the horizontal scroll bar will always appear, even if it is not necessary, creating a series of undesirable shadows at the bottom of the page and reducing the vertical space available for content.

As a general rule, it is always a good idea to design the interface taking into account the presence of the vertical scroll bar, but avoiding the horizontal one, which is the general appearance of an empty window in any browser.

Properly combining the colors of the vertical scroll bar, you can eliminate the strong contrast between the standard browser bar (especially in its latest versions, which presents it in blue colors) and the general design of the page, making the itself one more element of the composition.