Many websites leverage carousel design pattern.
I've seen many cases where on first page the "previous" arrow is either hidden, or disabled or active. Same is applied to the last page and "next" button.
What are the best practices and why?
12
-
16carousels are pretty poor UX for certain things. Are you thinking of using one?– colmcqCommented Nov 23, 2015 at 17:10
-
@colmcq is correct: this doesn't work well for everything. It's especially poor where discovery of the subsequent items is critical. On the other hand, I've had great success with carousels in e-comm settings where the additional items provide depth without overwhelming the user.– plainclothesCommented Nov 23, 2015 at 17:14
-
1You might be interested in this other question about carousels.– Ken MohnkernCommented Nov 23, 2015 at 18:39
-
1As an end-user I can say that this is an awful design pattern. I have not yet seen a single instance where carousel was better at presenting information than a flat list.– xxbbccCommented Nov 23, 2015 at 21:02
-
1@xxbbcc it may seem that way, but I've watched sales go up as a result of well used carousels. They don't belong everywhere, but plenty of tests have shown that they have their place. One important aspect is using machine learning to rank the items and continually update sorting.– plainclothesCommented Nov 23, 2015 at 21:34
|
Show 7 more comments
8 Answers
Visible not prominent
Within a given component, help users know what to expect by visualizing app state. IOW, keep the arrow visible but clearly inactive. This way users will know where to find it at a glance and will have visual confirmation that the carousel is at the beginning/end.
There has to be a better term for this but, recognition over recall comes to mind. Users see where things are rather that learning where they will be after some change in state.
answered Nov 23, 2015 at 16:54
I agree that carousel is not the best pattern in some cases, however when it is used ...
What are the best practices and why?
I've always been under an assumption that:
- If a carousel is endless (continues to scroll from last page to first) then you keep the buttons enabled ALWAYS.
- If there is no page / items to scroll to, then you still display the arrow but disable it (as suggested in one of the answers). This is done to educate the user about possible actions (even if those are disabled in this state of a pattern).
-
Endless carousels have proven to be disorienting in my tests. I've had better luck with offering page indication, eg
1 of 12, and a quick link to the beginning where necessary, egstart overorresetor ... . Commented Nov 23, 2015 at 17:31 -
Even if you display pagination (dots or similar) and keep the number of slides between 3 and 5?– IgorekCommented Nov 23, 2015 at 19:13
-
If you keep the number of pages and items per page short, it will probably work fine. I'd say no more than 12 items. I've concluded (entirely unscientifically) that the source of the problem is big sites like Amazon that have trained users to expect a lot of items in carousels. Too many, I think. Commented Nov 23, 2015 at 19:20
In my opinion the best practice depends on the modality.
- If you have inferiority-superiority (e.g. car upgrade in games) then the ends shall be blocked for good.
- If there is merely a difference in qualities (e.g. classes and races in games) then an open-ended solution is the best practice.
within carousel we can give images or textual stuff in order to draw user attention on part of view meanwhile as a UX developer route them from start to end of the carousel content by disabling caret(arrow mark) is best way let the users know that carousel slide is completed,so if not disabling that user try to access the carousel if they not able to get another slide on carousel possibly they user can blame UX developer as there is bug on the application isn't it.
Even betterment we UX developer can add title for each carousel slide so that user easily can remember index of particular carousel slide.
I think the best practice should be to have the items moving in the circular fashion so that both Next and Previous button are always visible and functional.
Seeing disabled buttons is an annoying experience. Also at the initial load time there should be equal number of items LEFT of the current view and RIGHT of the current view. This creates a sense of symmetry
-
1This is not always good since the user need not realize he is moving in circles. Imagine a user looking for a particular button in a carousel that is not there.– yo'Commented Nov 24, 2015 at 14:34
-
You are right here. I was talking in terms of images to display.– PavanCommented Nov 25, 2015 at 7:10
One best practice that's easy to forget about is to support right-to-left.
In right-to-left languages like Arabic and Hebrew, the next arrow should be on the left, and the animation (if any) should be from right to left.
If you're designing something that's going to be reused by others, please remember to add this option.
Some websites have a row of dots/blobs underneath the carousel, and when you are at the nth position in the carousel, the nth dot is highlighted with a different colour.
However, according to Norman Nielsen Group's research, most users don't see most of the content in a carousel.
Personally I'm not a fan of using image sliders or carousels. These will lead users to banner blindness as many will probably ignores assuming that it might be an advertisement.
These stats will help you to get a better idea http://erikrunyon.com/2013/01/carousel-stats/
If you really want to use it, you could try these tips;
- Keep the next/previous buttons visible on the slides.
- Connect the last slide to go back to the first slide when a user clicks on the next on the the last slide (you could do the same on the first slide and link the last slide) this helps the keep the interaction flowing.
- Avoid using auto sliding.
