Carousels

A carousel settles the argument in one meeting. Everybody gets a slide, nobody is told no, and the page keeps one hero-sized space.

Erik Runyon put tracking on exactly that arrangement at the University of Notre Dame and published the numbers in January 2013. The home page slider drew barely 1% click-through, and 84% of those clicks were on the first slide. Four other university sites did better, one reaching 8.8% and the rest between 1.7% and 2.3%, with the same shape underneath.

So the meeting produced agreement rather than reach. Slides two through five belong to teams who believe they are on the home page and are not.

Anatomy of a Carousel

A carousel shows one item at a time from a set, in a fixed frame, with something to move between them. That description covers three components teams treat as one.

Three Things Called the Same Name

A carousel rotates comparable items through a single frame, often on a timer.

A gallery shows one large item with thumbnails of the rest beside it, so nothing is hidden and the set is visible at a glance. A scrolling row lays items out horizontally and lets somebody scroll, with no fixed frame and no notion of a current slide. The row is the one most likely to be the right answer on a phone, and it gets built as a carousel out of habit.

The Parts

Eight, and a typical build ships the first four.

The slides. The frame they appear in. The previous and next controls. The progress indicator. The crop, meaning the sliver of the next slide showing at the edge. The pause control, where anything moves on its own. The timer behind that movement. And the name of the whole thing, which is what somebody using a screen reader hears before any of it.

What Each Part Is For

Each one answers a question the frame creates by hiding things.

The controls answer how do I move. The progress indicator answers how much is there. The crop answers is there more at all, and it does that before anybody reads a control. The pause answers how do I make this stop. Ship four parts out of eight and three of those questions go unanswered.

The Property That Matters Most

One slide is visible and the rest are not, which is the whole pattern and the whole problem.

Everything hidden is content somebody has to choose to reveal, and Runyon's numbers say how often that choice gets made. So the design question is never how to style the frame. It is whether the set is worth the hiding, which article 3 settles.

Pro tip: Count the parts in the carousel you are reviewing. Four out of eight is the usual score, and the two missing most often are the crop and the pause.