Table of Contents
You’ve likely heard both the positives and the negatives of using sliders in your web design. The positives far outweigh the negatives when sliders are done right. Sliders are particularly effective for showcasing a portfolio of images, telling a story or selling products and services.
It’s easier to understand why sliders are effective when you look at specific examples of slider elements done well.
Appearing Above the Fold
Most carousel-type sliders occupy space above the fold on the webpage (near the top). This allows more than one piece of content to rotate in and out of the prime space on a site. Think about your own behavior when you land on a website. Where do you look first?
If the site interests you, you may scroll further down and, if not, you might just bounce away. A carousel allows you to feature several of your best pieces of content along with an eye-catching image.
A great example of a carousel-type slider can be found on the Corning Museum of Glass website. The slider appears at the top of the page and has tabs for the images/features yet to be shown. They automatically slide in, or you can click on the tabs that say “Explore,” “Watch,” “Make” and “Discover.”
Highlighting New Content
If you have a lot of content on your website, sliders can be used to effectively highlight what’s new. This means that those who visit your site regularly will be able to click on new content and go to fresh pages quickly.
MTV.com shows how you can use a slider to highlight new content. Note that big, beautiful images are used along with text indicating the topic. An arrow takes the site visitor to the new content with a single click.
A Fresh Look at All Times
Utilizing rotating images is a great tactic to keep your site looking fresh and new. Keep in mind that a slider doesn’t have to be relegated to a rectangle at the top of the page. You can even have the image make up the majority of the background on the page, create small circles with sliding images and many other options.
On Instrument.com, you’ll find they’ve used large images and they automatically rotate. When the image shifts, it grabs your attention and encourages you to click on the words “View More.”
A slider can also be used to encourage quick navigation through the key features of your site, or to guide customers to key products. Your website might have multiple categories, but most visitors come to the site to look at three or four. By showcasing those popular categories in the slider, you can encourage visitors to check them out first. You can also highlight new products or sale items.
A good example of this technique can be found at CJ Pony Parts. Their slider features their newest and most popular products. Simply click on the right or left arrows to scroll through the images and click on any image to be taken to more information on the product.
You can create a clean look that’s organized and easy to navigate with a pop-up slider. This is a slider that features one main image plus smaller images the visitor can click on, which will then pop into the slider instead.
A great example of this design can be found on the Travel Buzz website. The pop-up images are linked to the latest articles posted on the site, so the look consistently changes. However, it also has a general design that’s recognizable no matter what the images are.
Add a Touch of Creativity
There are so many websites on the World Wide Web that people have become a bit cynical. They might think they’ve seen your design 100 times before. That is why it’s good to do something unexpected, especially with your slider. Place it inside another graphic, place it to the side of the page or add something unique.
Take a (tea) leaf out of TeaTimeApp.com’s book by adding a touch of creativity to your slider. Their home page is an image of a steaming tea kettle, some text and a smartphone on the left. The slider is within the screen of the smart phone. So, as it goes through the steps of using the app, the screen on the iPhone changes. It’s unique and eye-catching!
Use Hover Arrows
Hover arrows can encourage your site visitors to click where you wish for them to. This is almost as powerful as using a Call to Action (CTA). One of the best combinations is when you use hover arrows combined with a slider.
One example of this type of design can be found at Saville’s Hand Crafted Dovecotes. Notice how the slider shows a larger image on top, with arrows on either side to navigate through the images. However, underneath are smaller images you can also use for navigation. You’ll also find hover arrows next to the smaller images.
With more and more people using high-speed internet, sliders have become more popular. There are many positive ways to use this design to reach out to new site visitors and also keep long-time fans interested and entertained. Used correctly, sliders can encourage your visitors to click where you want them to and to come back again and again for fresh content.