×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Design Pattern: Carousel

From Nokia Developer Wiki
Jump to: navigation, search
nirpsis (Talk | contribs)
(Review logo)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix ArticleMetaData and RevieweApproval)
Line 1: Line 1:
{{ReviewerApproved}}
+
{{ArticleMetaData <!-- v1.1 -->
[[Category:Mobile_Design]]
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
[[Category:Mobile_Design_Patterns]]
+
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090506
 +
|author= [[User:Yiibu]]
 +
}}
 +
 
 +
[[Category:Mobile Design]]
 +
[[Category:Mobile Design Patterns]]
  
 
This design pattern is part of the [[:Category:Mobile Design Patterns|Mobile Design Patterns]] series.
 
This design pattern is part of the [[:Category:Mobile Design Patterns|Mobile Design Patterns]] series.

Revision as of 00:05, 10 February 2012

Article Metadata
Article
Created: User:Yiibu (06 May 2009)
Last edited: hamishwillee (10 Feb 2012)

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.


01-N95-media-selection.jpg


Figure: The N95 uses a carousel to launch a variety of preinstalled applications.

b. Navigation

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.


02-trutap-navigation.jpg


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’.


07-non-looping-flat-carousel.jpg


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.


04-carousel-approaches.jpg


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.


05-carousel-issues.jpg


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.


03-carousel-designs.jpg


Figure: These examples demonstrate a variety of approaches to carousel design.


06-HTML-carousel.jpg


Figure: This Nokia widgets web site uses JavaScript to provide short animated carousel transitions.

95 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×