A Definitive Guide To The Android Carousel Design Pattern

Advertisement

One of the best patterns for browsing a small collection of featured products is the carousel. Unfortunately, many mobile app implementations do not offer an engaging or satisfying carousel experience and are not 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, and we’ll give you the design, the complete source code and a downloadable mini-app, which you can use today to add an enjoyable and effective carousel to your own app on phones and tablets.

How It Works

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

Example

One excellent example of this pattern is the Amazon app’s home screen.

Mobile figure 1.1
The carousel on the home screen of Amazon’s app is excellent. Larger preview2.

This implementation of the carousel uses the teaser method to hint at the required interaction, showing only a small tantalizing glimpse of the naked CAT5E Ethernet cable, which is (and I have this from most reliable sources) completely irresistible to Amazon’s more impressionable customers, who can’t help but swipe across to see more of the naked cable and get to more of the content.

When And Where To Use It

The carousel is a fantastic pattern to show off featured items and relevant new arrivals. For example, new items matching the customer’s last search in their local area would be a sure winner.

In fact, consider using a carousel any time you have a small set of products (8 to 20 items) that are easily recognizable from just their picture. Augmenting the mostly visual content with a small amount of overlaid text is also sometimes effective. For example, in the screenshot below of the Pulse app on a 7-inch Android tablet, the carousel’s visual content is augmented with a semi-transparent dark-gray overlay, which provides the date and name of the comic. Without this overlay, the thumbnails of the carousel, especially in the first row, could be easily misinterpreted as belonging to a single comic.

mobile_figure23
The visual carousel content with semi-transparent overlay helps with comprehension in the Pulse app. Larger preview4.

I am a huge fan of semi-transparent layers in mobile design. This example is particularly effective because the overlay on the thumbnails is semi-transparent and thus does not interfere with viewing the thumbnails, all the while augmenting the carousel experience in a way that is both visually appealing and informative. (Well, it does interfere just a bit, but it keeps interference down to a minimum while making best use of the small screen space.) The example also demonstrates that a carousel is an exceptionally great pattern for the large swiping gestures that small and large tablets invite.

Why Use It?

The carousel is an attractive and still fairly underused control for presenting visual information. It takes full advantage of the multi-touch gesture of swiping available on a mobile device. The carousel is easy and intuitive to operate and takes full advantage of the compressed real estate on mobile devices, where few 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 screen resolutions. This includes the ever-tricky horizontal orientation, for which the carousel works even better than in the vertical orientation.

mobile_figure35
The carousel adjusts to various screen sizes, and it works even better in a horizontal orientation. Pictured here is Amazon’s app. Larger preview6.

Whereas the usefulness of traditional search results is severely hindered by the lack of vertical space, a well-designed carousel shines by showing off even more inventory.

Also noteworthy is the presence of the “See all” link, which points to the featured products.

mobile_figure47
The “More like this” link in this carousel navigates to a list of search results. Larger preview8.

A “More” link is an excellent idea if your carousel has a small subset of items (8 to 20) that fails to meet the customer’s desires but piques their interest. In this case, the entire carousel control serves as advertising of sorts, enticing the customer to explore the relevant area of Amazon’s massive inventory.

Caution

As with any pattern, many implementations of the carousel do not feel quite right. One instance is NewEgg’s “Shell shocker” carousel:

mobile_figure59
NewEgg’s carousel has a few issues. Larger preview10.

Some recommendations based on the UX problems in NewEgg’s implementation might help.

Make the Scrolling Smooth

To begin with, NewEgg’s carousel is structured more like the iTunes cover flow feature on iOS, with a large central element and two partial elements on the periphery of either side.

mobile_coverflow11
The cover flow screen in iTunes on iOS emphasizes the central element. Larger preview12.

Like Amazon’s carousel, NewEgg’s can be swiped faster to advance more quickly through the list of products. However, NewEgg’s carousel moves very jerkily because of the structure of the central element, making it hard to see the intermediate states while scrolling — a major disadvantage. Seeing the two peripheral elements change is particularly hard — things hop all over the place, instead of smoothly swimming by the way they do in Amazon’s app. Higher-end and traditional carousels accelerate and decelerate smoothly and provide a pleasant, mellow, smooth ride. A carousel should be a high-end visual viewing experience that induces calm in the user, not stress. All parts of the control, including transitions, should behave accordingly and work together smoothly.

Indicate the Scrolling Direction

NewEgg’s carousel appears to be scrollable in both the left and right directions, causing a confusion: Is this carousel meant to represent a circle? Have I seen everything already, or do I need to keep scrolling? Amazon uses Android 4.0’s standard “blue parallax” visual treatment to signal the end of the line, a much better approach.

mobile_amazon_paralax_treatment13
Amazon uses Android 4.0’s standard “blue parallax” to signal the boundaries of the carousel ride. Larger preview14.

Just as a real carousel has papier-mâché horses that point you unambiguously in the right direction (you wouldn’t sit backwards on a horse now, would you?), so must your own carousel show which way the ride goes.

End the Ride Quickly

Good carousel implementations indicate the end of the list with the same parallax treatment seen at the beginning, and they present only 8 to 20 items, after which the ride is over and the customer can get off the carousel. Most importantly, the customer needs to exit the ride with the feeling of still wanting more. By contrast, NewEgg’s carousel seems to go on forever, so the customer does not get off until they feel bored (or, more likely given the jerky transitions, weak in the stomach). A much better approach would be to accompany the last element in the carousel with an obvious built-in “More like this” link, as shown below.

mobile_figure615
Show a “More like this” tile at the end of the carousel. Larger preview16.

A “More like this” link can be used to jump into search results, which are more efficient for scanning large quantities of data and which 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. Kind of puts a different spin on the entire carousel pattern, doesn’t it?

Make Sure Your Horses Look Amazing

No matter how smooth the ride is or how far or how fast the carousel goes, the best carousels have the best-looking horses, period. Make sure your horses (i.e. thumbnails) tell the story 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 screws up the ride, dropping thumbnails entirely:

mobile_figure717
Amazon’s carousel sometimes misses thumbnails. Large preview18.

It goes without saying that ghost horses make for a terrible ride, even on Halloween (unless you’re the Headless Horseman). Which brings up my next point: some products are just not that visual, making them poor candidates for inclusion in a carousel. A classic example from my first book, Designing Search: UX Strategies for Ecommerce Success (Wiley 2011), is coffee — Peet’s Coffee to be exact. Even though Berkeley, California-based Peet’s makes some of the world’s most divine premium coffee, all of the thumbnails are identical pictures of a generic coffee bag and some spilled beans.

mobile_figure819
Some thumbnails, like these coffee bags from Peet’s, are not good candidates for the carousel pattern. Large preview20.

Carousels are way more fun when the horses are all different; likewise, these generic bean-bag thumbnails are not good candidates for inclusion in a carousel pattern. A much more interesting horse would have been a close-up photo of a bean variety, or a map of a coffee-growing region, or a Tufte-style diagram of coffee taste attributes such as acidity, earthiness and body.

Even for products that have good thumbnails, presenting enough information can be a challenge. Including the right text in the individual tile is especially important for information scent; this could include key specifications such as processor speed, hard drive capacity and so on for the kind of technical gadgets sold by NewEgg. Picking an image resolution that can handle the amount of detail you are trying to show is also key. For example, can you tell what the item below is by looking at the small thumbnail and truncated description?

mobile_figure921
A small thumbnail and overly short description lead to “pogo-sticking.” Large preview22.

Only by drilling down into the item do we see that it’s actually a screwdriver set. A larger thumbnail and better description would have helped a great deal and reduced the “pogo-sticking” (i.e. the frustrating navigation back and forth between carousel control and details page), which ruins the entire ride.

mobile_figure1023
Having to pogo-stick between the carousel and details page ruins the ride. Large preview24.

If the picture tells only half the story and you have to include a great deal of text, then you might find yourself having to increase the size of the individual element to the point that the carousel is no longer the best choice of presentation. For such items, think twice about whether you even really need a carousel, and whether a simple vertical list (more akin to a themed roller coaster) would make for a better experience.

Code

Carousel code can be fairly straightforward. One way to implement an ultra-simple demo using Java is shown below. Plugging cute pictures of puppies into the carousel, you should end up with a mini-app that looks something like this:

mobile_figure1125
Mini-app with a puppy carousel. Large preview26.

First, we define how many items to show, and compute the width of the carousel item based on the screen’s width. (You may need to use more sophisticated code that computes a dynamic INTIAL_ITEMS_COUNT if you’d like to accommodate longer 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 demo, we will create a static array of pictures. In a real app, this list would come from a database, of course.

// 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 it 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 v327. See the README_LICENSE file for details. Download the complete source code for the app28.

Try It Out

If you want to see how the carousel app runs, the completed puppy carousel mini-app is available for you to download and try out. To install it, I recommend using an app installer (I use the one made by FunTrigger, 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. Download the APK source file (download the entire package29), and place it in the “App Installer” directory (you may have to create it).

mobile_figure1230
Place the APK file in Android’s file-transfer window. Large preview31.

Now you will be able to launch the app installer on your device, navigate to the right directory, and tap the icon for the APK file that you want to install.

mobile_figure1332
Use the app launcher to install the app. Large preview33.

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.

Conclusion

The carousel pattern is a microcosm of mobile design: deceptively simple. It is also a somewhat new Android pattern, and pitfalls abound. Nevertheless, if you take the time to get it right, the carousel is a fantastic pattern for showing off featured items and relevant new arrivals, as well any items that are highly visual. It dovetails perfectly with the local context by showing new items that match the customer’s last search in their local area. Finally, with the right implementation of the carousel, you will be supporting touch gestures on today’s Android devices to the fullest extent, fitting more products on the screen and making them accessible with a natural swiping gesture.

When designing your carousel control, think of it as you would its real-world namesake, the carnival ride. Make sure your horses look amazing; indicate the scrolling direction; make the scrolling smooth; and end the ride quickly, providing an exit to more of your inventory. We’ve provided you with the Java code and a demo implementation of the carousel pattern, so now you have no excuse not to try it!

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure1.png
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure1.png
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure2.png
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure2.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure3.png
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure3.png
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure4.png
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure4.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure5.png
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure5.png
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2013/01/coverflow.png
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2013/01/coverflow.png
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2013/01/amazon_paralax_treatment.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2013/01/amazon_paralax_treatment.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure6.png
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure6.png
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure7.png
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure7.png
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure8.png
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure8.png
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure9.png
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure9.png
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure10.png
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure10.png
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure11.png
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure11.png
  27. 27 http://www.gnu.org/licenses/gpl.html
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2012/12/CarouselDemo.zip
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2012/12/CarouselDemo.zip
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure12.png
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure12.png
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure13.png
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2012/12/figure13.png

↑ Back to topShare on Twitter

Greg’s DesignCaffeine designs stuff that works for today’s top companies. Be sure to watch his free webinar: How to make Agile RITE work for your Mobile Design project.

Advertising
  1. 1

    Easily one of the best articles on SmashingMag,ever.

    Written by a grown up FOR grown ups (in a grown up style), it not only sets you to the right path, but helps to keep you there with best practice SOURCE CODE.

    Kudos!

    9
  2. 2

    Great article – although, is this strictly a “design pattern”? In the traditional sense of the phrase? It’s definitely a recognised type of interface implementation for browse and selection, but “design pattern”?

    0
  3. 4

    Thank you for such informative article!

    Currently, we lack of such articles that discuss about the mobile design patterns.

    I would like to share another 2 sites that also talking about Mobile Design pattern to you guys:
    Android Pattern: http://www.androidpatterns.com/
    Mobile App Design Pattern: http://www.onlymobilepro.com/category/design-patterns/

    Have fun! :)

    1
  4. 5

    One thing about the Amazon carousel (and perhaps carousels in general): I noticed a delay in page load time when I accessed it via 3G on my Samsung Note. Could be the multiplicity of small image downloads, yes?

    0
    • 6

      a delay in page load times when accessed via 3G …very odd!

      Is that anything like me noticing a delay in highway acceleration and speed when driving the rental Ford Focus vs my BMW at home?

      1
    • 7

      Thank you all for the kudos — I really appreciate it! I have quite a few more of these types of articles planned (design + code), based largely on my research for the upcoming Android 4.x book and your feedback to my previous articles. Glad to hear you all find this useful — much more good stuff still to come!

      Lucky — ahh the good old 3-G, yes indeed :-)
      As I discuss in the Android Design Patterns book: http://www.androiddesignbook.com/
      you can’t always count on great bandwidth in mobile, so one of the tricks you can play to improve the speed is to start loading more images as soon as the page loads, that is similar to what ajax does on the web. Pre-loading is very expensive though, bandwidth-wise, so you have to have a balance. I recommend doing it for 2-D More Like This pages, that is another of 70 design patterns that I describe in the book — basically a while scrollable page of carousels (think Netflix app).

      Tap-ahead is the subject of one of my previous Smashing articles that also takes advantage of this pre-loading, only using text, which is much more economical: http://mobile.smashingmagazine.com/2011/04/27/tap-ahead-design-pattern-mobile-auto-suggest-on-steroids/ This design is no longer under any patent-panding on my end, so ignore the 40 comments about intellectual property and just feel free to use it.

      -Cheers,
      Greg

      2
      • 8

        Thanks Greg, I can’t wait for your future articles. You take us through every step in this article. Both from the user and the designer perspectives.

        I agree that carousel in Android is an underused technique and I wonder why people haven’t caught on yet.

        I can’t count the hours I’ve wasted scrolling just that “one more” item, but it keeps enticing me to stay and check out more items.

        I’m eagerly waiting for more of your articles, you are both a great communicator and highly knowledgeable about your topics.

        -Cheers,

        Johnson – http://designhandbook.net

        0
  5. 9

    Very nice & helpful insights. A delightful read. Look forward to reading more of your stuff.

    0
  6. 10

    Perfect reading and informative material. love smashing mag.com.
    http://searchinghunt.com/motorola-razr-i-jelly-bean-4-1-2-update/

    0
  7. 11

    I’m searching for a carousel with multiple rows, currently any carousel display content by column or by row. But no script on the net provide a version of horizontal carousel with multiple rows…

    0
    • 12

      Shane, if I understand you correctly, that’s a different pattern — I call it 2-D More Like This. It follows slightly different design considerations, as I describe in my new book, Android Design Patterns: Interaction Design Solutions for Developers:

      http://www.androiddesignbook.com/

      Cheers,
      Greg

      1
  8. 13

    This article is completely based on design pattens and I am really thankful to you for providing such a kind of design patterns for android developers. Keep it up!

    0
  9. 14

    This is more a navigation pattern than a design pattern.
    Google’s adaption of Apple’s carousel can be implemented by using the Gallery, the horizontal scroll view (with a snap in) or a modified ViewPager.

    I miss the usability and accessibility view of those patterns. Horizontal scroll views inside of vertical scroll views (especially in landscape mode) are bad UX patterns (functionality over design). You can eliminate the loading issues on mobile networks using a LRU Cache and asynchronous loading (don’t make the user wait, responsive design).

    More efficient (lazy loading) are endless grid or list views, with auto-sized columns on orientation change. A golden desing rule: only present on Topic/item at a time with an unique Navigation pattern – two way Navigation gestures (beside a Image or webview) are not optimal.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top