Carousel

From MobileDesign

[edit] Problem

Present a collection of images for selection.

[edit] Context

Use a carousel when information is displayed as selectable images, not all of which can fit in the available space. Due to the interactivity built into the pattern, there is an invitation to the user to explore the entire set.

The images presented should be similar in size and aspect ratio. If the collection is much larger than about two dozen items, the navigation process may become tedious, discouraging the user from exploring.

[edit] Solution

The solution must provide at least three things:

Indicate which item is in focus.
Allow scrolling through the collection.
The collection order must be planned.

[edit] Focus

The carousel should display three to five items at a time. Showing more than nine items at a time can be overwhelming. The total number of item should be no more than three times the number of items displayed at once.

The item with focus is generally in the center of the visible display. Because of this, the number of items displayed is usually odd rather than even.

Any visible item can be selected for further activities (such as viewing, playing or purchasing). On some devices the selected and focus state may be the same. When a non-focus item is selected, the item should be moved to the central focus position in the display, preserving the order of the set. Where device resources allow, animating this shift can help strengthen the carousel metaphor.

[edit] Navigation

Where possible, there should be multiple methods of navigating through the carousel. There should be next and previous controls to cycle the collection stepwise in either direction. Where appropriate these should be accessible through both on-screen scroll keys or indicators, and by the device’s pointing hardware. Where resources allow, a click and drag or a swipe interface (“spinning” the carousel) can add to the interaction. In a touch screen environment, keep in mind that you must make all selectable items large enough for use.

There are two common positions for the navigation arrows. The first is to put one arrow at each end of the visible items. Given appropriate visual styling, this can help the user discover that there are more items to be viewed. The second is to place the two arrows next to each other. This makes it much easier to switch directions while exploring the collection. Secondary navigation can be presented via pagination or scroll-position indicators. Wherever possible, keyboard navigation should also be supported.

[edit] Order

Because carousels are navigated in a two dimensional manner, they need to be ordered in a a reasonable way.

Carousels can have defined beginnings and endings but should always be implemented as circular sets.

[edit] Presentation

Carousels can be presented either vertically or horizontally. Which one to use depends on the space available in the layout, device display or interaction paradigms, the nature of the items being displayed, and user expectations.

Carousels can be either two or three dimensional. Two dimensional carousels can use use size differences to create a sense of perspective and to focus attention on the central item. Some two dimensional carousels will overlap the secondary items, but the items should be largely identifiable from the partially exposed image and you should still be able to select any visible image.

Three dimensional carousels usually make the entire circle of the collection visible by using perspective. When oriented horizontally, the back of the circle is tipped toward the viewer. And contrary to the physical metaphor, the items along the back edge of the display are shown as if the image was on the back of the card, or as if the image was two-sided.

Note that three dimensional carousels can present a more engaging interface, but they can also be a more cluttered and they tend to be more expensive in terms of screen real estate for the display and in processing needed for any animation.

[edit] Antipatterns

Preserve the integrity of the image used. Do not use programmatic shortcuts visible to the user:

If the image is skewed to create perspective, skew the entire image. Don’t clip off corners of the image to simulate a the skew.
Do not squish the image to change aspect ratio. If needed, add black bars or crop the image to fit a consistent space.
Do not flip the image when displaying the back of a card, as in 3-dimensional carousels.