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.
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.
Display at least one item and (optionally) show one item in focus, which can, for example, may be the first or centermost item.
Provide a means for scrolling:
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.
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?
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.
See the Carousel pattern gallery on Flickr.
As Used on Yahoo!
Similar Patterns in Other Libraries