Understanding the Carousel Design Pattern

What is Carousel Design Pattern

One of the best patterns for browsing a small collection of featured products is the carousel. The problem is that many mobile app implementations don’t offer an engaging or satisfying carousel experience and are not very effective at driving conversions.

In this article, we’ll use the analogy of a real-world amusement park carousel to explain what makes for an authentically mobile user experience. We will also give you the design and the complete source code for you to use to add an enjoyable and effective carousel to your own app on smartphones and tablets.

Carousel Design Pattern

The carousel is fairly simple. The customer can view several images of products across a row, and then they can swipe horizontally across the row to navigate to the next set of products. An arrow that indicates the direction of the carousel’s movement is usually provided as a clue to how you should interact with it. Optionally, the next set of products in the queue might be partially hidden. This creates what we call a “teaser,” indicating that more content will be visible just by swiping.

When and Where To Use It

The carousel is a fantastic pattern for you to show off featured items and relevant new arrivals. New items matching the customer’s last search in their local area would be a sure winner. In fact, consider using a carousel at any point you have a small set of products, perhaps from 8 to 20 items, that are easily recognizable from just their picture.Augmenting the mostly visual content using a small amount of overlaid text is also sometimes effective.

Why Use It?

The carousel is an attractive and still mostly underused control for presenting visual information. It takes full advantage of the multi-touch gesture of swiping that is available on a mobile device. The carousel is easy and intuitive to operate, and it takes full advantage of the compressed real estate on mobile devices, where fewer words are needed to support the content.

Other Applications

One of the best features of a carousel is that it works well for a wide variety of device sizes and different screen resolutions. This includes the always tricky horizontal orientation, where the carousel works even better than in the vertical orientation.

A carousel should be a high-end visual viewing experience that induces calm in the user, and not stress. All parts of the control, including transitions, should behave accordingly and work together smoothly.

Good carousel implementations indicate the end of the list with the same parallax treatment seen at the beginning, and they will present only 8 to 20 items. After that, the ride is over and the customer can get off the carousel. Most important, the customer needs to exit the ride with the feeling of wanting to ride even more.

A “More like this” link can be used to jump into search results, which are more efficient for scanning large quantities of data, and are more likely to be relevant because of the sheer volume of items. Think of the “More” link as a premium combo ticket that grants admission to all of the remaining delights at the amusement park, conveniently presented after the cheap introductory carousel ride is over.

No matter how smooth the ride is or how far or how fast the carousel goes, the best carousels will always have the best-looking horses. Make sure your horses (i.e. thumbnails) tell the story that you want your audience to be told. For example, Amazon’s thumbnails are much better looking than NewEgg’s, although sometimes even the e-commerce giant will screw up the ride, dropping thumbnails entirely:

It goes without saying that ghost horses make for a terrible ride, even on Halloween. The point is that some products are just not that visual, making them not such good candidates for a carousel.

Even for products with good thumbnails, presenting enough information can be a challenge. Including the most useful text in the individual tile is especially important for information scent; this could include some key specifications such as processor speed, hard drive capacity, etc. for specialized technical gadgets. Picking an image resolution that can handle the amount of detail you’re trying to show is also key.

Carousel code can be fairly straightforward. One way to implement an ultra-simple demo using Java. First, define how many items to show, and compute the width of the carousel item based on the screen’s width. (You might need to use more sophisticated code that computes a dynamic INTIAL_ITEMS_COUNT if you’d like to accommodatelonger carousels for tablet devices.)

/**

* Define the number of items visible when the carousel is first shown.

*/

private static final float INITIAL_ITEMS_COUNT = 3.5F;

// Compute the width of a carousel item based on the screen width and number of initial

items.

final DisplayMetrics displayMetrics = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);

final int imageWidth = (int) (displayMetrics.widthPixels / INITIAL_ITEMS_COUNT);

Next, for the purposes of this demonstration, we’ll create a static array of pictures. In a

real app, this list would come from a database.

// Get the array of puppy resources

final TypedArray puppyResourcesTypedArray =

getResources().obtainTypedArray(R.array.puppies_array);

Then, we simply populate the carousel with items in the array and display them by overriding the onPostCreate() function. While onPostCreate() is mostly intended for framework use (according to the documentation), we can use it for this simple demo to simplify things a bit.

// Populate the carousel with items

ImageView imageItem;

for (int i = 0 ; i < puppyResourcesTypedArray.length() ; ++i) {

// Create new ImageView

imageItem = new ImageView(this);

// Set the shadow background

imageItem.setBackgroundResource(R.drawable.shadow);

// Set the image view resource

imageItem.setImageResource(puppyResourcesTypedArray.getResourceId(i, -1));

// Set the size of the image view to the previously computed value

imageItem.setLayoutParams(new LinearLayout.LayoutParams(imageWidth,

imageWidth));

/// Add image view to the carousel container

mCarouselContainer.addView(imageItem);

}

This code is provided free of charge and distributed under the GNU General Public

License v3.

Try It Out

If you want to see how the carousel app runs, the completed puppy carousel mini-app is available for download. To install it, use an app installer which you can get free from the Play market).

Here’s how it works. Connect your Android device to your computer. You should see the Android file-transfer window open automatically. Then download the APK source file (download the entire package), and place it in the “App Installer” directory (you might have to create it).

Place the APK file in Android’s file-transfer window. Now you should be able to launch the app installer on your device. Just navigate to the right directory, and tap the icon for the APK file that you want to install.

Use the app launcher to install the app. After a few customary Android disclaimers, the app will be installed in the normal apps area on your device, and you can launch it from there.

The carousel pattern is a microcosm of mobile design, and deceptively simple. It is also a somewhat new Android pattern, with potential pitfalls. Nevertheless, if you take the time to get it right, the carousel is a fantastic pattern for showing off some featured items you like along with any items that are highly visual.

With the right implementation of the carousel, you’ll be supporting touch gestures on today’s Android devices to the fullest extent. Think of it as you would its real-world namesake, the carnival ride.