Designing Web Interfaces

Chapter 11. Transitional Patterns

We have chosen to use the term Transitions to describe special effects that happen over a specified period of time. The term transition seems to catch the right spirit of how these cinematic effects get applied. They provide the grease that smoothes out what happens in the interface. Without transitional effects the user can be left to wonder what just occurred.

There are a number of Transitions available for our use. Let’s take a quick survey of the most popular.

Brighten and Dim

Two patterns that go hand-in-hand are Brighten and Dim.

Brightening an area of the screen focuses attention there. Since there is no way to raise the brightness of a part of the screen, this is typically accomplished by dimming the entire application window and exposing a part of the interface at normal, full-brightness level.

Color changes do not generate the same level of attention in the brain as movement changes. How much attention the dimming and brightening of an area on the screen will get depends on the speed of the color change (faster is more eye-catching) and the contrast between the dimmed and brightened state (greater contrast equals more attention).

Tip

Use Brighten and Dim to control the user’s point of reference.

Considerations

Dimming and brightening an area is an effective way to communicate subtle or secondary changes in an interface. Using Brighten focuses attention on an area. Using Dim in an area causes the elements to be treated as secondary or not in use. ...