Sliders Don’t Suck and Here’s Why Your WordPress Site Needs One
Sliders and carousels were a really hot design trend a few years ago. You would’ve been hard-pressed to find a website that didn’t have some sort of rotating element on the homepage – especially above the fold.
But then something changed. Designers and developers started to abandon sliders for static imagery. As the interest in minimalistic designs and longer scrolling websites grew, sliding banners became a perceived distraction and threat to the rest of super simple designing. And if designers had chosen to apply any sense of movement to a website, it was contained in a parallax scroll, animated icons, or a video player.
Still, there are some designers who will argue that sliders and carousels are effective design elements that help improve user engagement, when used correctly. We’re going to explore the validity of this argument today and give you pro-sliders some helpful tips and tools to use in order to ensure user engagement within your website’s sliding elements.
To Slide or Not to Slide, That is the Question
Most design trends will face doubt or criticism at some point as newer, cooler ways of web design take over. So for many designers who are focused on simplicity right now, it may be difficult for them to understand how rotating content can fit into that ideal.
Not to Slide?
Here are some of the most common arguments we hear from the naysayer camp:
- Slow to Load: The addition of sliders and carousels slows down a website’s load time, which will not only drive visitors away but will also negatively affect SEO.
- Bad for SEO: Since so much content is jam-packed into a single slider, it’s difficult to optimize the page and SEO for all of that content.
- Unnecessary Distraction: The rotation of sliders keeps visitors distracted from the content around it.
- Difficult to Use: Multiple slides give visitors too many options to keep track of and it’ll require too much effort to dig back through the slides to find the one they want.
- Interrupts UX: For visitors who prefer a quick vertical scroll for their content, sliders can wear on their patience as they have to sit and wait for each one to rotate through.
- Poor Click-Through Rate: According to some studies, sliders are ineffective at getting visitors to click. While visitors may be interested in reading one or maybe even a few slides, most don’t take any action.
- Unattractive: Many designers believe that sliders and carousels look tacky, especially when used to promote advertisement-looking images and messages.
Many times, the slider and carousel opponents will cite the 2013 study conducted by Erik Runyon on the Notre Dame University website. In his study, he tracked information on the number of clicks for each slide, the manual rotation of slides, as well as the performance of auto-forwarding slides. These are the numbers most anti-sliders will bring up:
- Of the total site visitors, only 1% clicked on a call-to-action (CTA) in the slider.
- When someone did click on a slide, 84% of the clicks were on the first one. All subsequent slides received 4% each of the total amount of clicks.
If you read the one-page study closely though, you’ll see that Runyon isn’t making the argument that carousels are a weak or even obsolete design trend. In fact, the other stats included in his study (which most people leave out of their argument) showed that visitors were more receptive to carousels when used on different types of websites or when used in other ways (auto-forwarding vs. manual rotation).
Like with anything in design, there’s a proper time and place for everything. You just have to know when it’s right for you.
Now, let’s take a look at the argument for the supporters of sliders and carousels:
- Space Saver: Carousels allow for a large number of images or content to exist within a single space instead of forcing visitors to scroll down a too-long page.
- Reduce Clutter: For some websites, it’s important to showcase different products, work samples, team members, and more. Sliders can reduce the clutter which may inevitably come with all those moving, yet related pieces.
- Attention Grabber: Adding the right type of movement to a website’s design can help draw visitors into high quality and relevant content.
- Provide Perspective: Some websites have a product or service that needs to be highlighted from different angles. A great example of this is a phone retailer who wants to display a number of images of their mobile devices from different viewpoints.
- Multi-Purpose: While the University of Notre Dame’s website didn’t work well with the carousel, there are other business types that will. Retails, freelancers, and others looking to highlight their products and services (rather than random promotions) can benefit from a sliding design element.
- Video Replacement: Video is “in” right now… but it’s not that affordable of a marketing investment for smaller businesses or those with a tight budget. Slideshows are a great alternative that still allow for creativity in design and movement.
For those that support the slider and carousel movement, you should check out this study conducted by Mobify. While the results cannot be placed side-by-side with the Notre Dame study since the variables don’t align, the end results do show that, when used in the right setting, carousels work very well with an online audience. Here are some of the results that came out of this experiment:
- The very nature of e-commerce websites makes them a better breeding ground for carousels than education websites.
- Mobile users may be more receptive to a carousel because it’s easier to swipe on a device than to click or wait for auto-forwarding on a desktop.
- Visitors find carousels showcasing a variety of marketing messages as irrelevant and too salesy in the wrong setting.
- The definition of “success” (number of clicks on a CTA vs. number of clicks to the next slide) is relative. You just need to have a solid understanding of what they really aim to achieve.
While the results from the Mobify and Notre Dame tests are not definitive proof regarding the performance of carousels and sliders on a website, they do demonstrate one very important fact: Designers and developers need to know their audience fairly well before applying any design principle to a website. It’s ultimately the pains and goals of your customers and prospects that drive them to visit the website in the first place. If a carousel can be effectively used to deliver content around those ideas, then there’s a good chance they’ll be well-received.
15 Ways to Add Value to a Website with a Slider or Carousel
Your website is expected to function properly. That’s why many of the concerns of anti-sliders are valid. If you’re using a slider for the sake of appeasing a client just because they really want one or you just haven’t taken the time to research the tips and tools you need to properly pull it off, you could end up putting your website’s performance and reception in danger.
If user engagement is what you’re looking for, then the user experience always needs to be top-of-mind in web development. So when adding a slider to your website, keep the following tips in mind:
#1: Optimize Placement
When sliders came into prominence, they would’ve sat right at the top of the home page where most designers currently place hero images. As a WordPress developer though, you know there are other areas of the website that have the potential to make good use of denser sliding content.
The Zappos website features a centrally placed slider.
#2: Consider the Size
Do you need to include a full-width slider or is it taking up unnecessary space? Consider the purpose of the slider, the size of the images within it, and the balance it can create with the rest of the elements on a page to determine what will be the best size for it.
#3: Use High-Value Content
If the studies above proved anything, it was that your visitors want to view content that provides some sort of value to them. Make sure the images and copy used in your slider reinforce your website’s mission and messaging and give visitors the motivation to look through it in its entirety.
The Visit Philadelphia website features professionally shot photographs of the city.
#4: Select High-Res Images
In general, it’s a bad practice to use images of low resolution or poor quality on your website. The same should apply to a slider or carousel—especially since the big draw for this type of design element is usually the photos included within.
#5: Keep Text to a Minimum
Sliders and carousels are fantastic at showing off imagery, but text can detract from that experience. Busy images can often make text placed on top of them hard to read. Also, if a slider rotates too quickly, visitors may not have enough time to read. And then you also need to consider that text embedded in an image probably won’t display properly on mobile devices. If possible, avoid using text as it will only complicate matters. If it can’t be avoided, try to keep it to a minimum.
#6: Pay Attention to the Scroll
There are a number of ways you can approach scrolling controls. The decision to choose one over the other usually depends on the content contained within the slider. Auto-scrolls work fine for image-only sliders, so long as the scroll doesn’t happen too quickly. Your best bet may be to force-stop the slide as soon as someone clicks or views the slider. It will then be up to them to click or swipe when they’re ready for the next slide.
We use a slider on our homepage (when you’re logged out) to display testimonials.
#7: Give Visitors Control
Whether your slider is an auto-scroll or manual scroll, make sure slider controls exist for when your visitors are ready to take over the scrolling experience. Keep in mind that arrows, buttons, and dots can distract from the content in the slide, so see if you can find a way to display them only once a visitor hovers or clicks on a slide.
#8: Create a Subtle Slide
Sliders don’t need to be jarring in their motions in order to gain attention. There are a variety of transition movements that are much subtler—like a fade—that will still grab attention enough to get your content viewed.
#9: Emphasize the Important Stuff
In the contrasting studies mentioned above, they both noted that the first slide is always the most looked at and clicked. That’s why it’s important to sort your slides strategically. If there is a product or service element that is most important for your audience to see, put it in the first position.
#10: Limit the Slides
On a related note, there will be some visitors who want to view more than just the first slide or image. However, that doesn’t mean their patience won’t wear thin after a while. Use your slides to share your message, but be brief. Cap it at four slides where appropriate.
#11: Focus on Speed
It’s always difficult to get excited about adding more images to your website when you already know how much the current ones bog down your site’s speed. So if you’re going to use a slider, make sure you have a good image optimization tool to keep them from slowing things down.
#12: Customize Each Slide
If you’re going to include a CTA on your slides, try to keep the design and placement consistent for each of the CTAs. However, if each slide links to a different service or product, you might want to apply a unique color to each. If someone wants to scroll back through the slides and find the one they were interested in, the colors will more easily set them apart from one another.
#13: Consider Accessibility Obstacles
There are a number of accessibility considerations you’ll need to take into consideration before adding a carousel to your website. W3C has done a great job in detailing what you’ll need to do in order to make your carousels keyboard- and screen reader-friendly.
#14: Make It Responsive
Carousels and sliders can be tricky to pull off on mobile devices if you’re planning to include text, oversized images, or scrolling buttons/arrows. There are ways to make this work though, so be sure that you start by using a slider plugin that advertises itself as “responsive.”
#15: Use Plugins
Last, but definitely not least, you’ll need plugins to help you create your website’s slider, capture the desired effects you want it to have, and optimize the content for high performance. Here are some of our top picks:
If you don’t already have a way to compress your website’s images, this is a great place to start. This plugin will automatically downsize and optimize the images you use inside and outside your slider, and ensure they never get in the way of your website’s load time or performance.
Typical website designs call for no more than 3 or 4 columns of horizontal widgets or blocks of content. With a carousel though, you can now showcase multiple batches of content within a single space. In addition, this plugin offers various transition effects, pagination options, and is fully responsive.
If you’re planning to use your carousel to show off logos—be they of your partners, clients, sponsors, or something else altogether—this plugin will do the trick. You can also play around with greyscale coloring if you want to give all your logos a muted, but consistent look (which is great if you want to keep the focus on your own website’s logo and brand). With a drag-and-drop interface, this plugin is an easy one to use if all you want to do is showcase logos.
This is by far the most popular slider plugin available on WordPress at the moment. If you’re looking for a responsive slider for your website’s videos and images as well as one that’s chock-full of customizations, go with this.
So let’s say you do end up adding a slider or carousel to your WordPress site, but you’re worried it’s just clogging up space or driving people to click away. It might just be that you haven’t used the right transition effects, colors, images, size, or placement, right? With A/B testing you can test out different versions of your slider before completely dumping it and jumping on the anti-slider bandwagon.
The most important thing to remember in all this is that if you choose to use a slider or carousel on your website, that it needs to serve your audience’s needs. It can’t just be to stuff a bunch of product images or testimonials into a small space on your sidebar. Everything about your slider element should be strategically designed, from the placement of it to the transition styling. If you have content worthy of displaying in rotation on your site, then make sure you’re using the right design element to let it shine.