Slider Best Practices: What You Need to Know
So you want to put a slider or carousel on your website? Before you do that, there are many factors to take into account. A misplaced, poorly configured slider doesn’t just go ignored; it can actually damage SEO and annoy visitors.
That certainly doesn’t mean they’re bad, just that, like with any other WordPress feature or plugin, you should be sure to configure it properly. Here are a few of the best practices to follow when implementing sliders into your WordPress website.
Make Your Slider Visually Pleasing
Along with general aesthetics, there are other factors to consider. The slider’s overall relevance, location on the page, and even the sequence of images are all important visual aspects to account for.
Keep it Simple
Especially if you turn on autoplay, it’s exceedingly important that slides are simple, effective, and get to the point. That doesn’t just apply to text; unless you’re using a slider as a gallery for your art or photography, use clean, uncluttered images.
Don’t Design It Like an Ad
Thanks to intrusive advertisements, many people develop “banner blindness” — and a misplaced, badly designed slider can be subject to this phenomenon. Avoid every design tip that an advertiser would follow, especially tactics employed by the most annoying advertisements.
That means don’t use flashing lights, garish flat colors, Impact and similar fonts, and other distracting techniques. Even if your carousel is selling or promoting a product, it should blend in with the website and look natural. You may want people to look at your sliders, but these aggressive tactics cause the opposite.
Make Your Slider Useful and Relevant
Every slider you place should have a clear purpose. Does it showcase your photography? Direct users to certain parts of the site? Explain what your site is about? Try to promote a product? Engage users?
And put your carousels in the right area. The placement of a slider is one of the most important factors in whether it will be noticed or forgotten. Make sure it isn’t buried in your page content or placed randomly. It should be somewhere strategic and noticeable, such as in a sidebar, near the top of the page, or below a blog post. Even the footer can be a good place to put a slider.
Choose Your Slide Sequence Carefully
Never assume that a visitor will stick around to see every slide. Choose your sequence very carefully. The first few slides should attempt to engage and interest the user, but if that fails, at least make sure you get your point across.
However, that’s no excuse to make your other slides less effective. No matter what slide someone happens to click on, they should all serve their purpose: talking about your company, showing off great photography, and so on.
Make Your Slider Usable
The cardinal rule of sliders: they must be easy to use and not cause visitors annoyance. There are many ways you can make a carousel more accessible, from optimizing for a large mobile-using audience to carefully tweaking the slide rotate time.
Consider Turning Off Autoplay
Movement can be distracting or annoying for some users. On blog posts, or on a sidebar that follows users throughout the site, always turn off autoplay; distracting visitors while they’re trying to read is never a good idea.
However, in some cases, you may want the carousel to be what all visitors pay attention to, or it may be important that they see more than one slide. When deciding whether to keep autoplay on or off, consider the location, content, and intent of the slider.
Increase Time Between Rotations
If autoplay is necessary for your design, make sure the slides don’t transition too quickly, especially if they involve text. It’s frustrating when a slider advances before you’re ready. Optimize for a slow reading pace; better a slow but well-designed carousel than one that shoves as many slides as it possibly can into ten seconds.
Optimize Navigation Options
There’s nothing more annoying than clicking a navigation arrow and having the slideshow advance at that moment, forcing you to skip a slide. Pausing on hover or navigation is a feature many expect. Soliloquy sliders have this function and it should be enabled on the majority of carousels you create. If you choose to keep autoplay, this is necessary.
Meanwhile, carousels that advance on their own, without so much as a navigation bubble or a pause button, can irritate many users as they’ll have to wait for the whole cycle to finish just to find that one slide. Be sure to add navigation controls to your slider as well.
You should also consider extra-large navigation controls, especially if you have a considerable mobile or elderly audience.
Finally, on carousels with many images, consider including thumbnails so that users can easily browse to the specific slide they want.
Avoid Damaging SEO
A misconfigured slider is a slider that isn’t search engine-friendly. Luckily, many measures that make your website and its carousel SEO-friendly also make them more user-friendly! These practices are the most important to follow.
Responsiveness First
If you’re using a slider plugin, you most likely won’t have to worry about its responsiveness. However, this part is crucial. Test to be sure your text and images look great on all devices. Tweak the button size, replace blurry images; whatever you need to do for a beautiful mobile slider.
Make sure swipe is enabled as well. Mobile users will expect swipe gestures to work for elements such as sliders, and if this isn’t the case, it can cause annoyance.
Design for Accessibility
While you should be designing your entire website with accessibility in mind, sliders should also be created this way. Not only does it help disabled people get around, it tends to improve SEO.
Some examples of good accessibility design include enabling keyboard controls, avoiding auto-scrolling or stopping under certain conditions, and making sure text has enough contrast.
Create a Great Slider Hero Image
One innovative tactic is to replace a “hero image,” or a banner on the landing page that explains what your website is about, with an animated slider. This technique has its upsides and downsides. A carousel can be as effective as a standard hero image, but it needs to be implemented carefully.
If you decide to put a slider on your homepage, remember that new visitors have one question: What is this website all about? Every single slide, on its own and without context, should answer this question.
Avoid H1 Headings
To search engines, H1 acts as the title of the page. So when there are multiple headings, such as within a slider, it can confuse the search engine and lower SEO. To be safe, avoid using these in a carousel.
Avoid Slider-Only Navigation Links
Is there a page on your website that can only be accessed through a slider? Try to avoid this; it’s confusing both for users and search engines. You can use link sliders as a navigation tool, but make sure there’s another option.
Creating Effective Sliders
One of the best practices you can follow once you decide to place a carousel on your website is to consider using a plugin, such as Soliloquy. Especially if you’re a new web developer, trying to create a slider yourself may end in an SEO disaster. A plugin is much easier to work with, and is specially optimized for WordPress and search engines.
Now that you know some tips on placing a helpful, useful, and engaging slider on your website, how do you plan on using it? We hope that this guide has helped you in your future web design endeavors. And in the meantime, connect with us on Twitter and Facebook.
Related Posts
