A carousel isn’t just a device you’ll find at the airport or amusement park. It’s also a widget that’s found on websites. Designers use them to display visual items in a way that’s quick for users to browse. Designers use them a lot, but making them usable is a different story. There are five big usability mistakes designers make when they design carousels. Are you making these mistakes on your carousel?
1. Auto-sliding after the user has already taken control
Just like how a news ticker automatically slides headlines across the TV screen, carousels can automatically slide visual items across a page. This technique is commonly used on home pages to engage users with featured content. However, the problem is that sometimes the default auto-sliding won’t stop after the user has taken control of it. When users are browsing through the items in a carousel, the auto-sliding should stop and switch to manual sliding so that users can browse at their own pace. It’s quite annoying to have the carousel automatically move to the next item when the user is trying to view the previous one.
2. Displaying new items in a row one at a time
When a carousel displays multiple items in a row, users have the benefit to browse the items in batches. However, sometimes when the user clicks to view the next batch of items, the new items show up one at a time. Displaying new items one by one can take the user a lot of time and clicks to get through. It’s more efficient to display new items row by row. This way users can view more at a time with less clicking.
3. Showing item progress in a confusing way
Since a carousel can only show a limited number of items at a time, it’s important for users to see where they are in their viewing progress. Users can get confused if you show your item progress in a non-intuitive way. This happens when designers point out the number of items shown out of the total number of items. Showing users the range of items they’re looking at with the total number of items in the carousel is a lot of unnecessary information for the user process. Instead, what the user really needs to know is how many item rows they have left to view. You can show this in a simpler way by pointing out the number of the rows in the carousel and which row the user is on. This approach is more intuitive for users to understand.
4. Infinite sliding
It’s not only important for users to know where they are in a carousel, but it’s also important for them to know when the carousel ends. A carousel that infinitely slides is one that loops back to the first item without telling users the carousel has ended. This can cause users to unintentionally view the same items over again. Add a constraint to your carousel by disabling the arrow when the carousel has gotten to the last item.
5. Tiny click targets
There’s no debate that tiny targets are harder to click. If the arrows on your carousel are smaller than the size of the mouse cursor, you have a problem. Make the target of your arrows larger and easier to click by placing them on the surface of a button. This gives users a larger click area so that they can use the arrows without accurately click on the arrow. The size increase also makes the arrows easier to see.
Avoid the Common Carousel Mistakes
Now that you’re aware of the five big usability mistakes on carousels, make sure they’re not found on yours. Carousels should make viewing content quick and easy for users. The way your carousel slides, shows progress and its arrow sizes are all important factors that make up a good carousel. Keep these factors in mind when you’re designing your next carousel so that your users can slide without a usability headache.
Book
Affiliate
Regarding Pt 4, could you not just visually mark the “end” of a carousel, and then let users cycle through to the start again anyway? Personally, I find it frustrating when I can’t just cycle through to the start of a loop.
Also, if someone wanted to compare popular carousel plug-ins to these standards, then that would be a useful service that would make for a great blog post.
I agree with Steven’s point, especially if you are running through a long carousel. It would be frustrating to have to scroll ALL the way to the beginning rather than just continuing the loop (with the end pointed out). What are your thoughts?
I also agree with Steven. It’s typical (and more importantly less frustrating) for the user to have to scroll back to the beginning instead of automatically looping back to the start.
As long as you are clearly showing the current position in the total set of items then it’s perfectly fine to have infinite sliding.
Infinite sliding might not be as bad of a usability mistake as the other ones, but it’s still a mistake if the user expects to see the next slide on click, but instead gets a previous slide they have already seen.
It’s not so much of a problem if you clearly let users know that they are at the end of the carousel. You can do this by visually marking the carousel’s progress. Most of the time it’s good to make users click the left arrow to go back because it maps to user’s intention.
As workaround, I would refresh the page 😉
Would a solution to this problem also be to auto scroll to the beginning of the carousel when you get to the end? It will give the visual hint you have reached the end and starting over and not make the user have to scroll all the way back.
Great points Anthony – really appreciate the clear explanations and sound reasoning to back up the designs.
Nice article. Number 1 is probably the most annoying to experience! If you hover over items it should switch to that item but then switch back to auto once you’ve hovered away. But on click it should switch to manual. IMO of course!
I think the carousel at the top right of the BBC News website is one of the best examples of a good carousel. Although I’d like to see more items in the visible area.
Good points.
I do kind of disagree with #4 as I see no issue with the Carousel that loops itself continuously. It also depends on the specifications and number of slides being used for it to make a significant difference applying what you suggest.
Any auto-scrolling is a big accessibility no-no. It’s not good for anybody with cognitive disabilities or some motor impairments. Your article should really highlight this.
Thanks for your article. Great considerations! Just a thought on pt. 2:
Sliding the thumbs one by one let’s the user cycle trough the images by clicking the thumbs without moving the cursor, which I prefer in certain cases (ie. a photographers portfolio), specially if the previous/next image buttons are omitted.
To give the user a quick overview, you can still implement additional UI elements (as show in pt. 3).
Ok, it all depends on the final implementation!
Great article!
I also find it really annoying when carousels autoplay with no forward, back or pause mechanisms. Hard to believe it actually happens, it’s like an elevator that automatically stops at every floor and you just gotta wait it out!
Thanks for sharing. good points.
An additional pet hate that I have is when the implementation falls over when there is no JS. I know that we’re in a time of nearly full JS implementation, but it doesn’t change the fact it’s not always available.
If you’re going to hide the additional DIV’s try and apply the display:none through JS and ensure that all the elements can be viewed without breaking the design.
Useful article!
I hate when everything in a page is a slider.
After first BN.com slider , I see sliders everywhere .
We need to use them to transmit variety and usability, but not in every place of the homepage.
Thank you,
Sonia
Awesome article,
All the mistakes pointed out in this article are true. I was aware of these (and was committing one or the other on my different sites) and I am sure no more repeating same mistakes.
Thanks,
Syed
A very helpful article with useful illustrations, I’ve just factored all of these points into some new site wireframes. Especially like the ‘Viewing 1-4 of 20’ suggestion to avoid confusion.
Please add ‘no stop button’ to the list of worst mistakes. It’s implied by the first point but if you don’t want to visit a carousel link, it’s a frustrating, distracting flicker when you’re looking elsewhere on the page.
1) Guilty of forgetting to spec manual override in once…
2) Absolutely: batches are better!
3) Pagination is useful, but is it always necessary? On smaller sets, it may be too much information.
4) Disagree with this, I like infinite loop. As long as carousel shows where in the sequence you are clearly (with something bigger than a full stop…), looping back to the start is fine.
5) Agree, small targets are bad. Even better: click target could be 1/3 of image…
Saw “stop button” in the comments. Interesting.
Carousels give me migraines, and trying to find a stop button when I already have a migraine and it;s probably next to the blinding migraine trigger is not a good solution.