Everyone knows about carousels on the web. They’re used to showcase photos, help sell products, and capture attention from new visitors.
But do they really work? There are many arguments against carousels and research focused on using carousels for better performance. But how does a carousel affect usability on the web?
In this post I’d like to delve into the beloved carousel to find out how it works and how users interact with them.
Carousel Design Basics
What exactly constitutes a carousel and what makes it a good design choice?
These are tough questions because they can be different for each website. The unifying factor is that every carousel has multiple pages or slides each with different content.
Slides may include photos, text, buttons, or anything similar.
Most web carousels have the same features and these are the most common:
- Multiple slides with images/text
- Dynamic pagination
- Arrow navigation
- Rotating animations
- Some type of CTA(optional)
But one of the worst features is auto-rotate. This works like a timer where the carousel automatically moves onto the next slide after X seconds.
There was a study done by NNGroup which concluded that carousel information is often ignored. They tested a case where a user wasn’t able to find what they were looking for, even though it was in huge letters, because it was fixed inside a carousel slide.
You can seen an example of the rotating effect on the Au Lit Fine Linens homepage.
The carousel automatically moves through different slides with different buttons and text.
The text contrast isn’t great and the slides move pretty quickly. What if the user wanted to click but the slide advanced forward? Most users will not try to go back and click on that slide. Out of sight, out of mind.
UI/UX designer Erica Augustine wrote a great post on this topic.
One solution is to stick with the manual rotation where the user needs to click to move between slides. You can see this on the portfolio of Mathieu Clauss.
It doesn’t matter much whether you design a fullscreen carousel or an in-page carousel. Rotation is never a great choice from a usability perspective.
If you must use the auto-rotating feature at least make sure you add a pause button. This gives the user more control over the experience so they don’t need to hurriedly read each slide.
But most carousels lose attention because they force too much information onto new users. They can work at times, but most studies indicate that carousels are a tough sell.
How Carousels Perform
Carousels are often found on a homepage and they’re used to push visitors further into the site. This is true for portfolios, corporate sites, and eCommerce stores.
This typically includes some type of link or button which leads to a specific page. But most of the time carousels are just ignored, and sadly this means the effort put into designing one is wasted on very few eyeballs.
Another interesting point is that even with a CTA (call to action) most users won’t click. Check out this survey by Search Engine Land which pulled data from a handful of B2B sites. The highest CTR of a homepage carousel was 0.65%, a measly 32 clicks out of almost 5,000 visits.
This whole concept is actually somewhat humorous in UX circles. This site pokes a bit of fun at carousel design with sources to back it up.
These aren’t inherently bad ideas. Carousels do perform well when expected, like in a slideshow or a digital portfolio gallery.
But they should always be manually controlled to let visitors choose when to advance or move back a slide. Pointless carousels add nothing and usually damage the UX by wasting a lot of space on the screen.
Take a peek at the Common Deer homepage.
This carousel takes up a tremendous amount of space for almost no reason. The carousel images link to internal pages, but nobody can tell what these pages are just by the carousel photos.
Not to mention the carousel slides don’t even have CTAs. So how would users know to click? Most would assume it’s just a banner image or an advertisement.
Don’t get me wrong, their site is well designed. I don’t want to disparage the entire layout. But this is a great example of a carousel that impedes rather than improves the interface.
Designing A Better UX
There are few good reasons to use a carousel on the web because it simply doesn’t produce the best experience. But there are many alternatives you can use in its place.
If you want a large image on your homepage you should instead try hero images. These can look like a carousel but they don’t rotate. Just one single photo with some text and maybe a CTA.
Hero images are much better since they stay fixed and don’t use any animation. Everything is visible all at once so nothing is hidden down into the 3rd or 4th slide like with a carousel.
The homepage of Barbell Apparel is a great example of a non-carousel hero image.
This takes up the entire page and at a glance this could be the first slide in a carousel. You’d think this wouldn’t perform as well but without all the extra controls these images are easier to use than carousels.
And if you work to design a great CTA you can see much higher click through rates compared to a homepage carousel.
You might also try carousel alternatives like a grid system or a larger static banner. These can perform much better since they take less time to load and require fewer resources.
And not all homepages even need a carousel CTA. Take for example the Etsy homepage which uses a small background image linking to an Etsy store.
The background is only used for aesthetic effect to draw attention to the search feature. There’s a small credit link in the corner of the image but it’s not the focal point of attention.
Not every website needs or benefits from a hero image or carousel. As a designer you’ll need to decide this on a case-by-case basis.
But just because you can add a carousel doesn’t always mean you should.
Carousels In Practice
If carousels produce horrible CTRs and most visitors ignore their existence, then why are carousels worth using?
I think they work best when used for their main purpose: slideshows. This could be a portfolio gallery or a series of slides presenting information.
But the interface has to be well designed to keep people engaged. Large slider arrows, clear navigation elements, and a way to possibly view all slides(if needed).
Portfolio sites like Ken Barthelmey use a carousel at the top of the homepage.
However the images don’t link anywhere. They’re strictly for show, and this is usually a good enough reason to have a carousel.
However this slideshow has no controls like arrows or dot navigation elements. It just cycles through pieces of work. Not great from a usability perspective, but also not terrible as a way to showcase his art.
Also think about a photo album hosting on a site like Imgur or a presentation app like Slideshare.
In this scenario carousels make sense because it’s the traditional method of viewing information in sequence. But most users would also appreciate a way to view all images in an album or all slides in a slideshow.
Ultimately the use of a carousel comes down to intent.
If you want visitors to click or browse further into your site then a carousel is not great. But with visual content that’s just for show carousels can blend well in the right context.
Final vote: carousels are okay, sometimes
I’d hate to label all carousels as liabilities, but they also don’t belong on most websites. They can work but not as well as static hero images or thumbnail galleries.
Stick to carousels only for the purpose of showcasing visuals or slideshows. Anything more than that is a disservice to the user experience and likely won’t push visitors any further into your site.
Want to add a carousel to your site? Here are some of the top rated plugins on the Envato Market:
- Slider Revolution Responsive WordPress Plugin
- RoyalSlider – Touch Content Slider for WordPress
- Master Slider – WordPress Responsive Touch Slider
- Slider Pro – Responsive WordPress Slider Plugin
- Logos Showcase – Multi-Use Responsive WP Plugin
- Master Slider – jQuery Touch Swipe Slider
- TouchCarousel – jQuery Content Scroller and Slider
- Global Gallery – WordPress Responsive Gallery
- WooThumbs – Awesome Product Imagery
- TouchCarousel – Posts Content Slider for WordPress
- Unite Gallery – WordPress Gallery Plugin
- Super Carousel – Responsive WordPress Plugin
Featured image: gksd777
The post Design debate: are image carousels UX assets or liabilities? appeared first on Envato.
envato.com coupon from Envato http://ift.tt/2l8VgeW
envato.com coupon
