Designing Web Interfaces

Chapter 12. Purpose of Transitions

We pointed out in the previous chapter that objects don’t just pop in and pop out in the real world, appearing and disappearing suddenly. We usually see them go away or go somewhere in particular. An interface that does not mimic some aspect of this real-world behavior will be harder to understand.

Our eyes are wired to react to movement. The world doesn’t flicker. It doesn’t disappear or suddenly change and force us to look for the change. Things move smoothly in the real world. They do not “pop up.” Transitions smooth out the jarring world of the Web, making changes appear more natural.

The main purpose for Transitions is to provide an engaging interface and reinforce communication.

Engagement

Transitions can be used to increase engagement.

Interacting with an area on the screen that responds by growing slightly, or seeing an accordion pane “snap” into place creates a richer and more compelling experience. The interface seems more alive and reactive. Of course, going overboard with these techniques can distract from what is being communicated and become just a Web 2.0 version of the horrendous blink tag.

Certain contexts tip the scale more toward the engagement side and less toward the communication side. In areas like game or car sites, engagement can take on a more important role. However, in most websites, communication is the most important purpose for transitions, with engagement being a secondary consideration.

Communication

Transitions are first ...