View All Blogs

Everything You Need to Know About Website Carousels

Updated on April 21, 2024
Posted on February 18, 2019 by Matt Stewart

Everything You Need to Know About Website Carousels

Website carousels or “sliders” are a popular element in modern web design. Shifting banners all occupying the top real estate of your homepage layout conveys a sense of dynamism, diverse imagery, and an opportunity for multiple different CTAs. At least that’s the drive behind the fad.

Sliders are one of those web design elements that pops up one day and immediately proliferates like a colony of rabbits that went on spring break. Suddenly, they’re everywhere. It isn’t hard to see why, as they seem to embody shifts in dynamic elements of web design like CSS animations, video, and other innovations that strive to corral the ever-roaming modern attention span. From an organizational standpoint, it’s obvious why.

Conflict Resolution

Whitewater kayaking photos are a recognizable symbol of risk and adventure. Maybe that’s why they come across as accessible to people struggling between deadlines and quotas. On the other hand, a well-groomed senior couple smiling over coffee at the dinner table seems to convey the comfort of a life well-spent and decisions well-made. But Janice in marketing wants to pitch her new promotion to young urbanites, and a night life photo with popping CTA colors would really hit the mark.

 

How, pray tell, could we make everyone happy at once?

 

The carousel is your answer. Everyone gets a spot above the fold. All the different members of your organization and angles of your branding efforts get to shine as a greeting to all incoming traffic. No CC emails, no extended meetings, no votes. It just works.

The Catch

Unfortunately, sliders don’t perform that well. Only 1% of visitors actually click on slides, and it’s usually the first one; they’re bulky in terms of bandwidth, leading to slower load times, and they’re difficult to make responsive for mobile users.

 

Part of the issue is that carousels look a lot like banner ads and are often employed as such, which triggers banner blindness. Years of unwanted audio blaring from a tangential animated ad banner have conditioned people to scroll down as fast as they can. So, while you and your designers breathe a sigh of relief at your ingenious solution to showcase everything you were hoping to incorporate into your new redesign, users whiz past without ever seeing anything but a flash of the first slide.

 

From a design perspective, sliders also come with a sense of false security. Using a static image hero means that you’re putting everything on the line with your choice of layout for the page. The one design you choose has to get the aesthetic and the messaging across in one fell swoop. There’s no on-page back plan for if it doesn’t land, so a lot of careful considerations go into cultivating the right static image layout. In contrast, website carousels offer a scattershot approach that lead to falling back on your top five choices or more, and some of those ideas should often be scrapped.

Doing it Right

All things considered, sliders don’t have to be a death knell for conversions. If you’re dead set on using a slider in web design, at least make sure that you’ve wrangled a set of best practices. Some tips include:

 

  • The Magic Number: Don’t include more than 5 slides in your carousel. Unless they were explicitly prompted, most users didn’t sign up for a slide show and won’t stick around for more than a few slides.
  • Keep an Eye on Your Typeface: Color palettes and branding aesthetic may tempt for unorthodox choices in fonts and sizing, but you will lose views on mobile devices if you don’t make the text sizable, crisp, and clear
  • Give the User a Sense of Control: It feels less like an impromptu PowerPoint presentation and more like an interactive design element when the user has some sense of control over the carousel. The key is to make the navigation apparent and simple in the slider and offer clear indications of how many slides there are. There’s a good chance that users will breeze through if they choose to interact with it, and the sense of a never-ending carousel isn’t doing wonders for your conversions.
  • Do Not Auto-Forward: Getting the timing right on a carousel is nearly impossible because users engage with content at different speeds. If your messaging or imagery lands with a visitor, the last thing you want is to pull the rug out from under him or her. On the opposite end of the spectrum, if the slider is the only element including a specific CTA, a restless user won’t sit through the whole show again just to get back to the relevant point, which brings us back to the previous point on UX and user control

The Bottom Line

Website carousels are a risky choice for the most valuable layout spot on your web page. There’s a good chance that much of it will go unseen, and users will avoid interacting with it. If you decide to use a carousel for your homepage, keep it brief, usable, and easy to read.

 

If your main drive is to keep with trends and give a dynamic feel to your website, subtle CSS animations are a better choice for specific elements. If the slider is a compromise between a clash of opinions on redesign or campaign launch, work on concessions and agreement for a single design in lieu of taking the most apparent route. Your conversions will thank you.

 

Want to improve your website UX?

Subscribe Here!