The Definitive Guide To The Android Carousel Design Pattern
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.
One excellent example of this pattern is the Amazon appâ€s home screen.
The carousel on the home screen of Amazonâ€s app is excellent.
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.
The visual carousel content with semi-transparent overlay helps with comprehension in the Pulse app.
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.
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.
The carousel adjusts to various screen sizes, and it works even better in a horizontal orientation. Pictured here is Amazonâ€s app.
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.
The â€œMore like thisâ€ link in this carousel navigates to a list of search results.
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.
As with any pattern, many implementations of the carousel do not feel quite right. One instance is NewEggâ€s â€œShell shockerâ€ carousel:
NewEggâ€s carousel has a few issues.
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.
The cover flow screen in iTunes on iOS emphasizes the central element.
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.
Amazon uses Android 4.0â€s standard â€œblue parallaxâ€ to signal the boundaries of the carousel ride.
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.
Show a â€œMore like thisâ€ tile at the end of the carousel.
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:
Amazonâ€s carousel sometimes misses thumbnails.
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.
Some thumbnails, like these coffee bags from Peetâ€s, are not good candidates for the carousel pattern.
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?
A small thumbnail and overly short description lead to â€œpogo-sticking.â€
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.
Having to pogo-stick between the carousel and details page ruins the ride.
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.
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:
Mini-app with a puppy carousel.
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.)
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.
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.
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 package), and place it in the â€œApp Installerâ€ directory (you may have to create it).
Place the APK file in Androidâ€s file-transfer window.
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.
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: 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!