5 Big Usability Mistakes Designers Make on Carousels

by on 08/02/11 at 4:25 pm

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.

5 Big Usability Mistakes Designers Make on Carousels

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.

5 Big Usability Mistakes Designers Make on Carousels

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.

5 Big Usability Mistakes Designers Make on Carousels

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 Big Usability Mistakes Designers Make on Carousels

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.

5 Big Usability Mistakes Designers Make on Carousels

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.


5 Big Usability Mistakes Designers Make on Carousels 5 Big Usability Mistakes Designers Make on Carousels

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

19 Responses to “5 Big Usability Mistakes Designers Make on Carousels”

  1. Steven Noble

    Aug 2nd, 2011

    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.

    • Mary

      Aug 4th, 2011

      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?

    • Ryan

      Aug 5th, 2011

      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.

      • anthony

        Aug 6th, 2011

        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.

    • Sri

      Mar 28th, 2014

      As workaround, I would refresh the page ;)

    • Shelton

      Jun 3rd, 2014

      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.

  2. Anthony Sonego

    Aug 2nd, 2011

    Great points Anthony – really appreciate the clear explanations and sound reasoning to back up the designs.

  3. Greg

    Aug 3rd, 2011

    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.

  4. Pablinho

    Aug 5th, 2011

    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.

  5. Paul annett

    Aug 7th, 2011

    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.

  6. René Keller

    Aug 7th, 2011

    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!

  7. Bill Bone

    Aug 7th, 2011

    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!

  8. kevin

    Aug 7th, 2011

    Thanks for sharing. good points.

  9. Justin Avery

    Aug 8th, 2011

    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.

  10. Sonia

    Aug 24th, 2011

    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

  11. saas86

    Aug 31st, 2012

    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

  12. Matt Peskett

    Feb 24th, 2013

    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.

  13. adrian

    Mar 29th, 2013

    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.

  14. Sophie Exintaris

    Nov 12th, 2014

    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.

Leave a Comment