Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.
Mobile Design Pattern: Carousel
This design pattern is part of the Mobile Design Patterns series.
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.
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.
- 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.
- 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)
- 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.
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.
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.
Figure: These examples demonstrate a variety of approaches to carousel design.