Should you use a carousel?

Published on December 13, 2014 under Web Development

Web Carousel

Ah the web carousel. For the years since its inception, it’s been a wonder for many who wanted to cram more content into one space without creating a long scrolling home page. Clients and others who do not design/code for a living have seen carousels as a way to add some motion and potentially “excitement” to a home page, because who just wants to see items sitting in one spot?

Unfortunately, the results are in. As visually interesting as carousels have been, they are being proven as useless from the perspectives of accessibility, SEO, and overall effectiveness. However, we still see new sites launched with carousels used in some manner.

Why I stopped using carousels

The original redesign of Culinaria with a carousel
The original redesign of Culinaria with a carousel

When I had redesigned and relaunched Culinaria back in 2014, I had installed a carousel on the home page. My thought process was that new blog entries would get the main spot in the hierarchy of information shown on the home page. It was difficult to get this carousel working with the responsive setup, but I was proud of my efforts.

Unfortunately, the results didn’t lie. Looking at Google Analytics, I saw how the carousel on the homepage barely saw any interaction. About 8% of the visitors to the home page ever clicked on any of the slides, and it was part of why I had such a high bounce rate.

Beyond that, I’d constantly see troubles with how the carousel rendered in mobile, and the timing would never work well depending on the content. It just felt more like a nuisance than a benefit, so I took it out on the “tweak” I did this past summer.

Is a carousel right for you?

If you ask many in web design and development about using a carousel, they’ll simply push you to avoid it at all costs for any reason. I can’t blame them either. I had thought about some potential uses for a carousel beyond the home page, but when I think about the issues of responsive breakdowns and usability, it just doesn’t seem worth it anymore. Even sites noted to have “well built carousels” have since abandoned them.

Beyond the SEO and effectiveness issues I described, the accessibility issue is also a big problem. Imagine a blind person on your website, and his/her web reader is constantly reading off those slides. If they move too fast, then the copy will be cut off and discombobulated. Even worse are sites with carousels that only show images (text flattened into the image) and thus a web reader reads nothing more than a short alt tag.

Now I could see some potential “carousels” being used more like image slideshows, but then I would say to disable any automatic motion, and make sure there are clear thumbnails or navigation, and let the user control the action. If you notice much of the success stories of UI animation, it’s been where the user clicks something and then movement happens, or the user hovers over something and then motion happens. Automatic motion seems to annoy users over enticing them.

Using tiles to replace the carousel on Culinaria
Using tiles to replace the carousel on Culinaria

When it comes to your homepage, go for simple solution with a solid hierarchy of information. On Culinaria I simply put five thumbnails with captions in a way that fills in the “carousel void” without it being a carousel. I did also use a carousel on the Brightline Remodeling homepage, but only as a visual slideshow of work. The carousel has no bearing on navigation or content delivery, thus I felt it’s ok.

I’ve also noticed some using carousel setups on websites where it was more a massive slideshow presentation. Again, the navigation and movement is fully controlled by the user, and navigation is fully clear. Some designers also will use carousels with thumbnails to display work, but as stated before, they put the control into the hands of the user. Do you see a pattern here?

Do you still use carousels? Have you found ideal ways to use them that does not hurt the bottom line?

Tags: web design, carousel, SEO, usability

comments powered by Disqus