Carousel

Working Solution · Last modified July 15, 2009

The carousel allows a designer to better utilize page real estate while providing an engaging experience for object selection, when presenting a set of pictorial objects with limited screen real estate to accommodate all items at once. Planning the item order, providing different means for scrolling and communicating clearly the element in focus are essential for a successful design.


Delicious Bookmark this on Delicious

What Problem Does This Solve?

User needs to browse among a set of like objects represented pictorially.

When to Use This Pattern

Use when the user's mental model of a topic or of a set of objects is closely tied with imagery, such as a visual representation of the object, and the available screen real estate is too small to accommodate all the items at once.

What's the Solution?

  1. Provide focus
  2. Enable scrolling
  3. Plan the item order

Provide Focus

Display at least one item and (optionally) show one item in focus, which can, for example, may be the first or centermost item.

  • The item in focus might have "selected" state (if so, the carousel must support that state for all images).
  • The focused item may be given special visual treatment, such as a change in size (often increased size but possibly also decreased size along with additional info), or a clear indicator of being "in front" of the other items.
  • Functionality may be offered for a focused item, such as flag (to add to a list or save, as of favorites) or antiflag (for "don't show me again").
  • Carousels, whether or not they feature a single item selected in focus, must permit the user to select any visible item to act on it or obtain further information about it (except when the scrolling mechanism only allows for forward and backward movement, as in some phone interfaces).

Enable Scrolling

Provide a means for scrolling:

Plan the Item Order

Consider carefully the order of presentation of items in the carousel, bearing in mind that the user may very well not explore the entire set, thereby privileging the items shown first and shown relatively early.

Why Use This Pattern?

The carousel allows a designer to better utilize page real estate while providing an engaging experience for object selection.

Depending on the context, a carousel may be used to provide a peripheral browsing option when the users attention is primarily focused on something that demands a large portion of the available real estate (such as a video display). If the user is not "shadowing" simultaneous and possibly dynamic sources of info and just wants to see the maximum number of choices, either a list or grid view may be more appropriate. Thus, when deciding whether to employ a carousel, consider: How is system helping the viewer manage her attention? What is the task?

Special Cases

One common antipattern seen online is an implementation in which the center of the menu is the selection area and when the users move the pointer from the center, the menu scrolls in opposite direction. The speed of scrolling increases slightly when the pointer is further from the center. This can be a counterintuitive, frustrating experience in which the user ends up "chasing" the object and trying to stop the carousel in time to keep it in focus.

Don't use a carousel when all items can be displayed effectively in the real estate you've allotted.

Hide navigation when programmatic carousel content requires no scrolling, but when a page contains multiple carousels, one or more of which requires no scrolling, present the same affordances on each but deactivate (gray out) the scrolling mechanism on the static carousel(s).

An alternative way of showing variety is to present a different set of featured items each time a page refreshes.

Carousels are not suited for side-by-side comparisons, especially when all items can't be displayed at once. For this, use a data table.

Pattern Gallery

See the Carousel pattern gallery on Flickr.

Discuss Selection Patterns