Quick summary: Carousels on touch screens are plagued by low discoverability and sequential access, and not all designs implement swipe as a carousel control.

On mobile, carousels increased in popularity when the iPad was first introduced.

Like menus and accordions, carousels have an important advantage on mobile: they fit a lot of content into a relatively small footprint. Their second big plus is that they may solve content-priority quarrels within the organization by allowing everybody to make their mark on the main screen (even though it often turns into an invisible mark). However, carousels also have some important disadvantages:

• They are based on sequential access: users must go through all the items in the carousel one by one in order to get to the last one. This interaction is inefficient.
• They are not always discoverable. Even if people recognize the carousel, they will often have no way to know what types of items are hosted in it without interacting with the carousel.

Additionally, not all carousel controls are implemented correctly on touchscreens.

The article discusses a few usability guidelines meant to alleviate these issues on mobile devices.

Sequential Access

Going through items one by one with the hope of possibly finding one of interest is no fun: most people stop after viewing 3–4 different pages in the carousel.

Recommendation: users should be able to reach the last item in the carousel in 3–4 steps (i.e., taps or swipes).

Note that the recommendation of 3 to 4 steps to reach the last item does not necessarily mean that the carousel should have only 3 or 4 items. If multiple items per page are displayed, then the carousel may fit more, like “Popular on Netflix” row in the example below:

Discoverability

A hurried mobile user looking for specific content may never notice a carousel. Even when the carousel is self-animated, a mobile page is so small that by the time the carousel image has changed, the user may have scrolled down and not see it anymore.

There are three types of carousel cues traditionally used to signal carousels on mobile:

• Dots or lines
• Arrows
• The illusion of continuity

Some carousel cues are stronger than others. Dots are generally weak signifiers: because they are small, people often don’t notice them. The illusion of continuity, created by half images or text that look like they are continued beyond the vertical edge of the screen, is a strong carousel cue — users quickly understand that they can get more content by moving beyond screen edge.

Weak carousel cues: Stocks for iPhone showed low-contrast dots under the carousel.

Strong carousel cues: Half images (like in the FilmStruck app for iPhone — left) and incomplete words (like in the OpenTable app for iPhone — right) signaled users that there was more content to the right or left.

The first item acts as a letter of recommendation for the rest of the content in the carousel and effectively is a source of information scent for the other items — people will browse through the carousel if the first item seems related to their goal, and will ignore it if it doesn’t (although, in fact, other elements in the carousel may be relevant).

Controlling the Carousel

When people want to engage with a carousel on a touchscreen, they swipe. Not supporting this gesture for advancing a carousel is completely unexpected and makes for a bad user experience.

Using swipe to control the carousel creates the problem of swipe ambiguity on iOS. Swipe ambiguity refers to the fact that the same swipe gesture can be interpreted to mean different things depending on the precise location where it is executed.

For instance, in the Safari browser, a horizontal swipe on the left edge is synonymous with Back: it takes users back to the previous page. With iPhone X, swiping horizontally close to the lower edge of the screen will switch applications.

Net-a-porter.com (left) and Macys.com (right) made it easier for users to swipe through the image carousel by leaving some white space between the carousel and the screen edges. The arrows on Net-a-porter provided extra insurance against swipe ambiguity (users could always choose to tap the arrow instead of swiping to protect themselves against swipe ambiguity).

Conclusion

The temptation to use a carousel to save space on a small screen can be big, yet carousel items can have little discoverability, especially when not advertised well with strong cues such as the illusion of continuity or arrows. If you end up with a carousel on your mobile site or in your mobile app, make sure that it doesn’t have an excessive number of elements and that it supports swipe.

Carousels on Mobile Devices

PS. And for the love of god, never use carousels on desktop.