I had read some article that we shouldn't use auto slide carousel in website but I have question on Facebook messenger platform since many ppl use carousel to present menu to user. Should it auto slide to make user know that it has many menu or it shouldn't slide ??

  • 1
    It's unclear what you're asking. Can you link to the article you reference? And post a screenshot of the piece of Messenger that you're asking about? Commented Oct 30, 2018 at 13:40
  • Sorry, Here's link that I read about carousel in website. conversionxl.com/blog/… But I don't see any article on Autoslide carousel in messenger yet. Commented Oct 31, 2018 at 2:30
  • And here's some example of messenger carousel developers.facebook.com/docs/messenger-platform/send-messages/… Commented Oct 31, 2018 at 2:31
  • Questions asking why a specific piece of software does / doesn't do something are questions we can only speculate on. You'll need to contact the company themselves - maybe on a support forum - to get the actual answer.
    – JonW
    Commented Oct 31, 2018 at 10:50

1 Answer 1


Auto-scroll / auto-advance is probably inappropriate for a Facebook Messenger carousel UI component. I’ll get to why below, but first some context...

In the comments below your question you added some important context: a UX critique of traditional website carousel sliders (Fig. 1) and a link to Facebook Messenger developer documentation for a carousel payload template (Fig. 2). I’m including screenshots from those pages below for context.

Traditional website carousel Fig. 1: Traditional Website Carousel

Set of items Fig. 2: Carousel of Facebook Messenger generic templates

You are correct that recent UX articles discourage designers from using carousel sliders (Fig. 1) on websites. Common criticisms are:

  • Sliders monopolize screen space
  • Sliders hide content
  • Auto-advancing sliders can require users to wait for a slide to return
  • Auto-advancing sliders can cause a user to click the wrong slide by advancing during a touch or click interaction

The Facebook Messenger carousel of generic templates (Fig. 2) is a different kind of carousel. It is very similar to carousel style advertising elements that appear in the Facebook mobile app. The intent of the Messenger carousel is to allow a user to scroll through a menu of up to 10 closely related options or purchases, for example a set of t-shirts available in a variety of different colors.

A Facebook Messenger carousel is different from a website carousel, both in how it is encountered by user and how it is structured. A website carousel slider appears in the context of a web page, while a Facebook Messenger carousel is a standard UI component people expect to encounter in the Messenger app. A website carousel is often a slideshow of pictures, while a Facebook Messenger carousel is intended to show a clear set of options with clear action buttons (in the example “view details” and “shop now”). Because Facebook has built this UI component into their Messenger platform, users expect to see it and are trained to use it by Facebook. There may be better UX options, but it is likely Facebook has done significant experimentation to determine this UI component delivers results for advertisers on their platform.

Why Auto-scroll is Probably Inappropriate

Since each item in the carousel is interactive, auto-scroll is probably inappropriate. Auto-scroll requires the user to learn the speed of the scroll so they know when it is safe to tap the button. That may be fun in a game, but not in a shopping experience. Using the t-shirt shopping example, Auto-scroll could cause a user who intends to pick a grey shirt to tap the blue shirt if the carousel advances while the user is in the middle of tapping the “Shop Now” button. Imagine how much frustration that might cause as the user has to figure out how to remove the unwanted item from their cart. The sale might be lost.

Possible Alternatives to Auto-scroll

Google’s Material Design guidelines have a section covering scrollable tabs, a related interaction pattern that is worth reading about. Google talks about two overflow patterns when there are more tabs than fit on the screen: allowing a tab to peek and showing a more arrow. It may be that Facebook’s Messenger platform handles this sort of hinting for you or that you, as the developer, can force some sort of hinting. A “peek” hint might look like Fig. 3 below where a full message is shown and a slice of the next scrollable message peeks from off the page.

Possible solution: peaking item Fig. 3: Peeking item concept

A visual indicator like a more arrow may also work.

A quick animated bounce when the carousel is first rendered might be used to show the UI component scrolls horizontally and might be visually fun. The animation might repeat until the carousel is scrolled for the first time.

Not the answer you're looking for? Browse other questions tagged or ask your own question.