Mobile Design Pattern: Carousel
Article Metadata
This design pattern is part of the Mobile Design Patterns series.
Contents |
Description
A carousel is a list, which displays a sequence of visual items in a circular sequence. Only 4-8 items are visible at a time however the circular nature of the control implies that other items will appear as the carousel revolves. Carousels are most often arranged horizontally and incorporate animation to ease the transition from one focussed element to the next. Only one carousel item has focus at a time.
Use when
a. Media or application selection
The user needs to select (only) one out of a series of items which can easily be identified visually and/or would benefit from visual representation i.e. photos, album covers or icons. Once one of these items has been focussed and is subsequently selected, the entire view typically changes—in effect ‘opening’ the item in question.
Figure: The N95 uses a carousel to launch a variety of preinstalled applications.
While sometimes problematic, this use is becoming increasingly popular on mobile devices. In this case, each item in the carousel behaves in a manner akin to a tab, and is simply used as a means of triggering an adjacent mode or view. Selecting or focussing an item in the carousel merely toggles between these views.
Figure: Trutap uses a carousel to navigate between views using the Left and Right keys.
Advantages
- Can provide better use of on onscreen real estate than a grid or vertical list.
- Provides flexibility. Because the carousel is circular, users can reach items by pressing either of two keys (typically Left or Right). Depending upon the implementation, a carousel can simulate ‘browsing’ in a way that more closely resembles real life i.e. ‘leafing through’ media.
- Can be useful if displaying media in a specific sequence (i.e. alphabetical, chronological), as the next and previous items in the sequence are typically visible while the primary item has focus.
- Can provide an engaging alternative to simple list-based selection.
Disadvantages
- If the carousel loops, it can be difficult to locate the media’s ‘starting point’ once browsing is underway. If looping is not enabled, locating the start of the list is simple but actually getting to it requires the user to navigate back to the front of the list.
- While it’s tempting to use carousels to browse vast amounts of media (ex. Photo albums or mp3 collections), if the goal is to locate a specific media item, carousels can be tedious and inaccurate as they offer limited means of filtering or re-sorting media.
- Due to the highly visual nature and use of animation, carousels can be processor intensive on small devices and are best used where hardware accelerator graphics processing is available. (i.e. OpenGL ES)
Use How
- Items are aligned horizontally, vertically or in a semi-circular arrangement so that a 'strip' of items is created.
- Only a subset of items (typically 4-8) are shown at a time to ensure adequate space for the thumbnails.
- The selected or focussed item is highlighted in some way (i.e. through size, colour or position). The most common (and sometimes only) indicator of focus within carousels is to place the focused item in the middle of the view.
- Animation is used to enhance the transition from one focussed element to the other.
- Most carousels are designed to loop if there is no preset ‘beginning’ to the list. The most common example of a non-looping carousel is a chronological list of media displayed by date. As media created in the future does not yet exist, the list begins with the newest item and navigation only enables browsing ‘back in time’.
Figure: The Nokia VINE carousel always begins with the latest media item and does not loop. In this case, its location at the center of the view provides the only indicator of which item has focus.
Design Treatments
The following design treatments are common when displaying carousels on mobile:
- Flat: The items in the carousel are arranged in a flat, horizontal sequence. The circular aspect of the carousel is implied but there is no explicit circular arrangement.
- 3 Dimensional: The carousel items are arranged in a manner that simulates a three-dimensional grouping. The focussed item is in the foreground and therefore larger, while the remaining items are smaller and appear to recede.
Manipulation models
Carousels are a wonderful way to easily browse media on a direct manipulation device. Navigating a carousel via touch can be reminiscent of thumbing through a photo album or flipping through a collection of albums or posters on a rack.
On an indirect manipulation device, navigating a carousel is achieved via the 4-way navigation keys. If the carousel is merely used for selection of an item, carousels can be quite useful. If they are used as navigation however, they suffer from the fact that, while the carousel is visible, the Left and Right keys will likely be mapped to the carousel. If these keys are also required to interact with the actual content within the adjacent view, the carousel first needs to be hidden or disabled. This is the primary limitation of the ‘carousel as navigation’ approach.
Figure: The same keys cannot be mapped to two different actions within the same context. As both the carousel and main views require use of the Left and Right keys, the carousel must be hidden (and/or disabled) to enable use of these keys within the main view. In this case, this has been achieved with a softkey-mapped ‘hide menu’ toggle.
Platforms
Carousels are best implemented within native applications (or where hardware accelerated graphics are available) as they greatly benefit from the use of animation. Creating animated transitions is possible on the mobile web using JavaScript, however device and/or browser performance may be affected—which will in turn affect the smoothness of the animation.
Figure: These examples demonstrate a variety of approaches to carousel design.
Figure: This Nokia widgets web site uses JavaScript to provide short animated carousel transitions.
18 Sep
2009
This article demonstrates a concept of Carousel mobile design pattern. A Carousel is a list , which displays a sequence of visible items in a circular sequence.
The author has explained use of carousel in media or application selection and navigation with understandable screenshots.
A Carousel is used to provide better on screen real estate and it also provides flexibility. The author has also explained how and when should be used the Carousel design pattern.The author has also explained some design treatments when displaying carousels on mobile like Flat , 3 dimensional, manipulation models and Platforms with suitable screenshots.
This is very useful article which demonstrates a variety of approaches to Carousel design for developers.