At first glance, website carousel sliders seem like a great way to feature content through a series of images and text. On second thought, website carousels can also prove to be an eyesore and distraction for visitors. Hubspot’s very own Website CRO Strategist & Copywriter, Rebecca Hinton, shares that while carousels may not be ideal, they can be a great way to personalize content for different types of customers.

Download Our Free UX Research & Testing Kit

A well-designed carousel not only features your highlight content, but it can also fascinate your visitors and improve the overall user experience (UX). Your carousel should intrigue visitors to learn more about what you have to offer and spark their interest.

Now, let’s review some website carousel best practices to help you do just that.

Website Carousel Best Practices

1. Ditch autoplay.

It’s common for carousels to flip through content automatically, with a new image popping up every couple of seconds. However, it might be better to stray away from autoplay for various reasons.

The purpose of carousel sliders is to attract and further inform the viewer. With automatic carousels, readers may not be given the time needed to fully comprehend a slide before they’re introduced to the next. This can confuse or distract the visitor from your message, which could potentially snap them out of their buying journey.

From a technical standpoint, autoplay carousels can also interfere with a webpage’s performance by lengthening loading times and causing lag. These issues can be frustrating for the user and drive them away from your website.

By allowing users to decide when they’d like to move forward in the carousel, they’ll stay engaged and learn about concepts at their own pace, ultimately lending more power to your customers.

2. Provide easy navigation.

Speaking of power, another way to provide your website users with full control when it comes to carousel sliders is through navigation tools. Navigation tools in the carousel should be straightforward and clear, and usually appear as arrows or dots.

Left and right arrows are easily identifiable ways for those interacting with sliders to advance or move backward whenever they’re ready. Arrows pointing right will help the user move to the next slide, while arrows pointing left will show the previous slides.

arrow web carousel example
 

A dot-based navigation system will show a number of dots in a row based on the amount of frames in the carousel. The dots will either be solid or hollow, depending on which slide the viewer is on. The displayed slide dot should be filled while the rest should be hollow.

dot-based web carousel example

Source 

No matter which type of navigation you use in your carousel, the user should always be able to see their progress in the sequence. The dot-based system is a great way to indicate how far they’ve moved along. As for the arrow system, it may be helpful to include a sign that shows which slide the user is on out of the total number such as "2/3.”

3. Adapt to all devices.

According to Statista, worldwide mobile web traffic has consistently hovered around 50% since 2017. With a host of devices from mobile, tablet, to laptop nowadays, it’s important to adapt your website accordingly.

This means website carousels must have a responsive design. Double-check that all images and text associated with your carousel are clear and display properly on the page. Remember, mobile users are also limited to tapping, pinching, and swiping, so make sure these gestures are functional on your for web carousels as well.

On mobile, try to keep the carousel proportional to the rest of the page so it doesn’t take up too much screen space. Extra attention to the carousel will risk the user overlooking your other content or even worse, distract and annoy the reader.

4. Optimize for SEO.

When creating carousel sliders, you’ll want to set yourself up for success by flattering Google to increase your search engine rankings. And no, compliments won’t score you brownie points. The key areas to focus on for search engines are headings and image alt text.

More often than not, people use H1 headings for their carousel frames, which may seem harmless from the outside. However, excessive use of H1 headings confuses Google and other search engines because each H1 heading essentially represents the title of a page. With multiple H1 tags/titles, search engines struggle to understand the information on the page which will negatively impact your ranking.

Image alt text also plays an important role in SEO ranking. Alt text is a written description of an image that displays when images fail to load. They can also help visually impaired readers to better understand the content. Be descriptive, specific, and relevant in the image alt text, so Google can crawl through and extract the necessary information for the searcher. Well-written alt text will improve your rankings on page and image search.

5. Curate your carousel sequence with intention.

There’s a saying that goes “save the best for last.” So naturally, we’re going to do the opposite.

Carousels are meant to capture the reader’s attention, so put your best foot forward with your strongest slide to kick off the series. You should also assume your visitors have limited attention spans and will not work through your entire sequence. It would be a waste of effort to give your readers a last hurrah if most of them might not even make it to the end. If they’re really interested, this tactic will encourage the viewer to look more into what you have to share.

When creating your sequence, think of each slide as the last impression the reader has of your company or product. What would you want them to remember? Emphasize that point and make sure each frame only speaks to one point. It may be confusing otherwise if you’re trying to squeeze multiple stories into one picture.

Over to You

Website carousels can organize content on your website in a visually interesting way while also engaging your audience to help you drive conversions. Be sure to keep the above best practices in mind when incorporating carousels on your website to ensure yours are effective.

ux templates

 ux research kit

Originally published Aug 3, 2020 2:44:31 PM, updated August 03 2020

Topics:

User Experience