13.8. Cross-Fading Rotating Images

13.8.1. Problem

On pages that contain a large masthead or “hero” image, often seen on e-commerce sites, many different products and/or departments are vying for that top spot. Often, the compromise is to simply have a series of images fade in and out, repeating on a loop. This is all well and good but can often be frustrating to use, because far too many sites overlook the need to pause the rotation in order to glean the very information that is attempting to be conveyed.

The implications of a constant animation should be considered. Most users have learned to ignore annoying ads that contain a lot of motion. The designer/developer must take into account those users who might not want to see the animation, while also trying to read the rest of the page. Worse yet is when a user attempts to read one of the rotating slides, only to have it continue to animate. Therefore, play/pause functionality is be included in this recipe, lest our users be caught in an endless, animated loop.