Web Development: WordPress Sliders: When to Use Them and Tips for Good UX

WordPress Sliders: When to Use Them and Tips for Good UX

Sliders, slideshows, carousels: call them what you will, they're an incredibly popular way to enhance a WordPress site.

When I create a site for a client, they almost always ask me to add one to their home page, if not to every page in the site.

But although undeniably attractive, sliders aren't always needed in a website design. In this article, I'll look at the benefits of sliders with WordPress, and identify when you should use them and when you might not. I'll also look at some alternatives.

Benefits of Sliders

Sliders look great, especially on large screens. They give you an opportunity to showcase a bunch of products or to link to multiple pages in your site.

If every department in your organization wants to be featured on your site's home page, a slider can be the best way to achieve this: add a slide for each department, and you have your solution.

As they're so common on websites now, they can also give an impression of being modern and up-to-date, which in turn will give the business, organization or individual behind the site an impression of modernity.

But before you add a slider to your site though, take some time to consider why you're adding it, and what purpose it will serve. Of course you should do this for every aspect of your site, but lots of site owners skip this consideration with sliders.

Why Use a Slider?

Before you add a slider, take some time to consider why you are adding it:

Do you have visual information you need to convey, and does this apply to more than one piece of information or area of the site? (If you only need one image or link, a single banner image will load faster and do the job).
Will your audience be arriving via the homepage or via other internal pages in your site, in which case will the slider even be seen by a majority of visitors?
Will people be coming to your site on desktop or mobile? The standard letterbox-style slider design is less effective on mobile.
Can you add the information from the slider in the body of the home page instead?
Are you adding a slider to achieve an objective (communication, call to action, link etc.) or just because it looks nice?

Whatever your answers to these questions, consider what impact your slider will have on the experience for site visitors, and on their behavior when they land on your site. And consider this for each slide in the slider, too.

So you've considered this and decided that your site does need a slider. Here are some tips to help you get the best user experiencece (UX) from your slider.

Where to Place Sliders

Users are expecting a slider to appear on the home page of your site, near the top. This may be above or below your navigation.

If the slider is the single most important thing on your home page (i.e. if it's taking users to a link you want them all to follow, such as a subscription page), then you should make it big. Size your images so that they will fill the screen, and users will have to scroll down if they want to consume the rest of your home page.

SpaceX is an example of a site whose slider takes up almost all of the home page. It's big enough to dominate, but not so big that you don't see you can scroll to find out more.

The SpaceX home page with slider on 80 of the visible page

If the slider isn't integral to the purpose of the home page, then you should make it slimmer. Crop any images to letterbox-like proportions and make sure they all render correctly when displayed by the slider. And if your slider isn't integral to the home page, then you might want to consider whether you need it at all.

If you don't want your slider to dominate the page, you could consider using it at the bottom of the page, as an additional form of navigation. This could replace the footer as a visual way of encouraging people to visit other pages in your site.

Another consideration is which pages the slider should go on. A slider will slow down page loading, so shouldn't be included in every page in your site. You might decide to include it only in the home page, or in static pages but not blog posts.

Alternatively, you might have different sliders for different sections of the site. For example in a fashion site, you might have a different slider for each department in your store.

Each slider you add to your site needs to have a purpose. Remember to identify what the slider is there to do; that will help you identify where to place it and how big it should be.

Sliders and Mobile Devices

It used to be that many websites didn't send sliders to mobile devices because of concerns over bandwidth and loading times. That's less of an issue now for many audiences, as a 4G connection will often be faster than domestic WiFi. But that doesn't mean you should just send the slider to mobile devices without making adjustments.

The majority of website visits now are on mobile devices, and for some industries and audiences the proportion is well above 50%. So it's important to get this right.

A standard wide slider won't look good on a small screen; it will shrink down to barely anything and any links it contains will probably be too small to tap with a finger or thumb.

So you have two choices: you can restrict your slider to desktop computers, or you can send a different version of it to mobile devices.

If you don't think it's worth sending your slider to mobile devices, I would question whether you really need the slider at all. If the slider is there to fulfill a function, then it will need to fulfill that function for visitors on mobile just as much as for those on desktop. If you're not planning to send your slider to mobile devices, pause and consider whether you really need it.

If you are planning on sending a slider to mobile, it makes sense to use alternative dimensions. It may well consist of the same images and links as the desktop slider, but with the images cropped to different proportions. Or you might decide to use alternative images that work better on mobile.

For example, the Microsoft site includes a prominent slider designed to encourage you to buy.

On mobile, this resizes so the image dimensions fit better.

You can either do this by sending alternative sliders to desktop and mobile, with different images, or by using a slider plugin that will resize images on the fly so they fit well in the screen size available. For example, the Slider Revolution plugin automatically resizes your images so they work in the device they're being viewed on.

If you create an alternative slider manually, how you crop your images will depend on the purpose of the slider.

If the slider is the most important element on the page and you've designed it to fill the whole page on desktop, then you should do the same on mobile. Create images that are approximately 1440px by 2560px in size and use these in your mobile slider.

Users will then have to either tap on the links in the slider or scroll down to see any other content. If there is more content for them to scroll down to, make sure that the entire image in the slider isn't a link. Otherwise when they attempt to scroll, they'll tap the link.

If the slider isn't the most important element in the page, then make it smaller. A size that takes up approximately half the screen, or a little less to accommodate any header above it, will make the images prominent enough while also giving weight to the content beneath them.

Sliders and Accessibility

Sliders are an inherently visual medium, so it's easy to forget the accessibility issues they might cause.

Once again, this takes you back to the question: is the slider really needed? Does it fulfill a purpose?

If that purpose is navigation, then you'll need to include text for use by screen readers so that visitors with visual impairments can still access the content the slider is designed to point to.

If the purpose is informational, then text is necessary to convey any information that might have been conveyed by images. Any text in your images should also be coded into the page.

If the slider is purely decorative, then as with images, you don't need to provide alternative text for screen readers, as it won't impact on the user experience. Instead, use language in your content to convey the same impression your images are communicating. So if your site is for a boutique hotel and the slider shows images of the bedrooms, make sure that you have text in your site that describes those bedrooms in a way that helps people with visual impairments get the same impression that a visitor looking at the photos would get.

If you need to include alternative text in your slider, use a plugin that lets you do this. The RoyalSlider plugin is designed for accessibility and lets you include text in place of your images.

Alternatives to Sliders

Even if you use a slider, it's important to provide the same information elsewhere in your site as well.

The usability guru Jakob Nielsen ran a test in which users were asked to find a key piece of information from the Siemens website. This information was featured prominently in a slider but because of 'banner blindness', they didn't see it, and weren't able to find the information.

So if you use a slider for navigation or to convert information, make sure you add this in the content of your homepage too. Include a call to action button for navigation and simple text for information.

If you decide not to use a slider at all, you might be wondering what to use as an alternative. Here are some options:

A Single Banner Image

If you only have one place you want visitors to go, or one offer you want to highlight, consider using a banner image instead of a slider. It will load faster and be more reliable. Make sure you include the content in the text too, because of banner blindness.

Improved Navigation

Instead of using your slider to direct people to key pages in your site, review the navigation so it directs people to where you want them to go instead. Consider rationalizing your top-level navigation and focusing on the priority links.

Forms

If you want users to go to a page with a form, why not just have that form on the home page instead?

Better Content

Instead of relying on your slider to encourage people to take action, review your home page content. Use good copywriting to win conversions, in a similar way to a great landing page.

Spotifiy is an example of a site that uses a single banner image instead of a slider, because it has one thing it wants you to do: sign up.

Sliders Have Their Uses—If Used Wisely

Sliders do have a role to play. If you have very visual information to convey, and consider the placement and design of your slider carefully, it can enhance the design of your WordPress site.

But it's important to take time to be strategic and considered when adding a slider to your site. Consider how it will look on mobile, how it will impact on accessibility, and what alternatives you have to it. If you adopt this approach, you can't go far wrong.

And if you are going to use a slider on your website, you might consider one of the outstanding premium slider and carousel plugins available at CodeCanyon. A purchase entitles you to lifetime updates and free technical support for 6 months.

Web Development

Friday, November 22, 2019