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 ??
closed as unclear what you're asking by Ken Mohnkern, Mike M, Shreyas Tripathy, locationunknown, JonW♦ Oct 31 '18 at 10:49
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
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.
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.
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.