What should you care about when you create a hero image?

• Focus on the content. The power of a large hero image is in the content. Focus on the most important part of your text, catch the visitors’ attention with an interesting heading and description, and use a Call to Action button. Don’t use too much text, keep the harmony between the image and the content.
• Use the correct image size. The speed of your page really matters. Don’t work with too big images, because it can slow down the loading time.
• Make the text readable. If you have text on your hero, take care of the legibility of your text. Use one of the popular hero image techniques such as text background or blurred image.
• Take care of SEO. Never burn text in your hero image. Use a plugin like Smart Slider which works well with the searching engines, and fill the image alt tags.
• Check it on different devices. Always pay attention to make your hero responsive. The image and the text should be legible on each device.

Popular WordPress hero image techniques

Perhaps the biggest challenge for a non-design user is creating a beautiful new WordPress hero image with Smart Slider 3 because there are an infinite amount of ways you can start. Below, I will show you the most popular examples and basic techniques on how you can use the imagery in the header of your website and make an awesome first impression.

Overlay

It’s really hard to make text stand out when it’s been laid over an image or video. The lack of contrast will cause readability issues and the last thing a visitor wants is to guess what they are reading. The overlay is a really simple method to lighten or darken your background and get a higher contrast. In Smart Slider 3 simply pick a color and set the opacity for your background. Try to find a perfect color and balance with the overlay, over and above don’t hide too much of the image.

Text Background

If you don’t want to hide the background then you can add a background behind the text rather than the entire hero image. Basically, you can pick the color of the background for every heading and text element in the layer window in Smart Slider 3.

Blurred Background

Blurring is one of the best ways to capture the essence of an image and improve the legibility of the copy. You can add a blur effect to your background at the Style tab of the slide.

Composition

If you have a great photo that has a safe space for the text then you shouldn’t hide the background with an overlay. Try to find the best place for the text which doesn’t impede the visual flow. Don’t cover faces or busy parts of the image!

Solid Background Color

Sometimes less is more and your website can be better if you eliminate the background image entirely. This design technique allows typefaces to be dramatic and have a strong visual impact. It’s an ideal opportunity to experiment with typography, layout and colors!

Video Background

Using background videos and animations can also add an interesting dimension to a hero image. When executed well, this method can enhance a page’s content. With Smart Slider 3 you can use background videos easily and enhance your hero image and make the user experience better. The quality and length of the video have to be top-notch to convey the message because the video definitely slows down your site. Not every website can benefit from this technique but it can be an enormous benefit to the overall design and branding.

5 hero image examples

Do you want to get inspired? I’ve collected 5 beautiful examples of hero images, each hero block is special, and the best thing is that you can import all of them from the Smart Slider’s template library, and customize it as you like.

1. Security Block

The Security Block is a great example of a hero image that you can use on your service page. This block has 2 versions: a free and a pro that you can use in Smart Slider. All the content is customizable, you can freely change the heading, the text, the links, colors or the images.

2. Traveler Hero

Want a full-width hero image? The Traveler hero was planned to a traveler blog or page, where the featured image could be the destination that your page is about. The CTA-s like the Explore Now or the social buttons can help you to inform your visitors, and build a social community.

3. Podcast WordPress Hero Image

Do you want a focus on the content of your hero? In the Podcast Block, you can organize your podcast. There are trending colors and a well-structured design which you can fill with your own blog content.

4. Crypto Hero Block

The Crypto Hero block is a special hero with their animations and effects. The animated heading layer with the typewriter effect and the particles in the background make your page come alive. The focus is on the animated text, but the CTA stands out with its blue color.

5. Headphone product hero image

Do you have a product page? Display your product images in a hero block in an interactive way. The main picture is a big headphone, and under that, you can see small images, and if you click on them, you can check other images from your product in a lightbox.

Conclusion

There are many ways to design WordPress hero images with Smart Slider 3 and you can choose from lots of techniques and trends as well. Oftentimes, these hero images are the first things that people see on your website so try to help them to quickly understand the value of your website. Download Smart Slider 3 for free, or buy a license for the Pro version. Good luck with your hero image and happy designing.

The post All About WordPress Hero Images From Idea To Implementation appeared first on Smart Slider 3 — WordPress Plugin.

https://smartslider3.com/blog/full-page-slider/ Mon, 27 Apr 2020 12:00:35 +0000 https://smartslider3.com/?post_type=blog&p=15914 Sliders and carousels are popular web design trends in their own right. An interesting application of this type of web page element is the full page slider. I’m sure that you have encountered this type of slider on a lot of websites. But what is a full page slider and why is it good? Read […]

The post What is a Full Page Slider and How to Use it? appeared first on Smart Slider 3 — WordPress Plugin.

]]> Sliders and carousels are popular web design trends in their own right. An interesting application of this type of web page element is the full page slider. I’m sure that you have encountered this type of slider on a lot of websites. But what is a full page slider and why is it good? Read the article and you will know everything about the full page sliders.

What is a Full Page Slider?

A full page slider is practically synonymous with the concept of a hero image, which refers to any large header design. A WordPress hero image can be described as a large banner image prominently placed on a web page. More specifically, a hero image, like a full page slider, is generally placed at the top of a web page and fills the whole screen.

Many full page sliders are photographs that relate directly to the content, but several web designers have incorporated the use of additional types of media that include backgrounds, illustrations, and even videos. It can help create a positive first impression, and with the CTA elements you can navigate the user.

The full page sliders are available in the Pro version of Smart Slider 3, it is easy to use and fully responsive. Browse our gallery of full page sliders to see what this concept looks like in action!

Why should you use a Full Page Slider on your site?

Full Screen Sliders like Hero images, have earned their place in today’s top website design trends because of the many benefits they provide to those who use them. Here are just a few reasons to consider why to put full page sliders on your website:

• They catch attention. New visitors of your site only have 0.05 seconds to form an opinion about your website and you want your first impression to be a good one.
• They add a personal touch. Use a full screen slider to show off products or services (or both!) in a way that’s unique to your company and branding.
• They help build trust and credibility. Having a full page slider can help give your visitors an idea of what the site is about and can help build a positive first impression.
• They direct users to a link or call-to-action. You can use buttons if you want to give the visitors something to click and take an action.

Get on board! Join our 142,416 subscribers!

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

No spam. No charge. Just curated emails.

How to create a Full Page Slider in WordPress?

The simplest way to create a Full Page Slider in WordPress is to find a slider plugin that has an option to create full size sliders. For example, you can use Smart Slider Pro to create such sliders. In fact, Smart Slider makes it very simple to create a full size header slider for your website, as you can enable the full page behavior with one click.

Settings of Full Page Slider in Smart Slider 3

With Smart Slider 3 Pro you can easily create a full size homepage slider, all you need is to choose the Full page layout in the Slider settings. If you use this layout, your slider will have full width and 100% height of your screen. It is fully responsive, so in mobile and tablet you can achieve the same full page behaviour.

The Fullpage layout works the way that it calculates the size to the full screen. But it can happen that you have a menu above the slider and you want to decrease the slider height to adjust it to your menu. In this case you can use the modify slider height option with which you can set a smaller height to your slider.

A frequent usage is to navigate a full page slider with vertical scroll. You can turn on this scroll control at the General settings and even you can set the main animation to vertical.

Types of Full Page Sliders

Full page sliders can be configured to display many different types of content, and have a few practical usage:

• Product sliders. They give the visitor an idea of what your website is about right off the bat.
• Founders or owners of site. This is the most important for people who try to establish a personal brand. Showing prominent images of themselves makes visitors start to see and trust them.
• Contextual sliders. Best for services as they give visitors an idea of what the website is about by providing an image to demonstrate a concept.
• Non-contextual sliders. These sliders don’t necessarily give an idea of what the site is about but are used because they are trendy or look visually appealing.

How are Full Page Sliders used

There are multiple use cases to consider when it comes to using full screen sliders:

• Single page design: Full size sliders add a great aesthetic to single page designs, breaking up the rest of the text content in an appealing way.
• Full-screen background: If your company or offerings are visually-focused, using a full page slider can help you draw attention accordingly.
• Featured post content: Running a news site? Magazine type themes and featured posts that make use of full size sliders draw attention to trending content.
• Rotating Galleries: Great for showcasing products or portfolio work when there’s more than one item you want to draw attention to.

Full Page Slider Best Practices

If you’re still a little confused as to how your full page slider design should shape up, consider these best practices.

1. Be picky when choosing hero images

Non-contextual images can disrupt the UX and these types of images often distract from the message. So choose images that reflect the website’s theme, purpose or campaign. Watch out as to whether the image truly adds value or not.

2. Optimize image sizes

Using large images can affect loading times, especially for mobile. As a result, a delay in page loading time can affect multiple aspects on a website: customer experience, sales, SEO, conversion, and revenue among them. In Smart Slider 3, there is a lot of options with which you can speed up your slider, but the best is if you optimize your images before you upload it.

3. Choose images that have an emotional appeal

Humans are emotional creatures, if you want them to act a certain way, you have to make them feel emotional attachment to something.

4. Use high-resolution images

Your hero image will be located in the front and in the center on your website. Besides being aesthetically displeasing, having a pixelated image shows that you don’t care about the small details on your website and customers may assume that you don’t care about them either.

5. Emphasize the CTA

Technically, your full page slider doesn’t have to have a call-to-action but you should definitely make use of this feature when relevant. Design the CTA in a contrasting color compared to the hero images color palette to truly catch attention and get people to act.

6. Consider designing for different screen sizes

More people use mobile devices to access the internet and mobile responsiveness is an important cornerstone of Google’s search algorithm. Because of this, make sure that you’ve chosen a responsive slider plugin like Smart Slider 3.

Full Page Slider Examples

Creating a gorgeous full size slider can be challenging. Here are 5 gorgeous examples to inspire you and give you cool ideas to create your own full page slider. All templates are included in Smart Slider Pro and you can download them with one click.

Full Page Portfolio

Live Preview

The Full Page Portfolio slider is a great way to introduce yourself or your business to the visitors of your site. It has a modern design that contains all important information. Additionally, it’s super comfortable to browse on all screens. On desktop, a single scroll can switch slides, while on mobile tapping does the same.

Static Slider

Live Preview

The Static Slider is perfect for creating a hero header. It’s content doesn’t move at all, however the images in the background keep rotating. There’s a Shape Divider on the template, that looks like a large, downward pointing arrow that indicates the visitors that there’s more to see below the fold.

Flower Shop

Live Preview

The Flower Shop slider grabs the attention with its modern animations first. The image slides in slightly, then the texts are revealed in perfect harmony. You can find trendy pastel colors in the template, which make it suitable for any modern website.

Cosmetics

Live Preview

The Cosmetics slider is a kind of full screen slider, that doesn’t look full screen. It takes up the whole width and height of the page, but it has a white border, keeping some distance between the edge of the screen and the images. As a result, the Cosmetics slider looks absolutely stunning and very unique.

Full Page Hotel

Live Preview

The Full Page Hotel slider, similarly to the Cosmetics above, is a kind of full size slider, that doesn’t completely look full page. At the bottom of this slider there’s a Shape Divider, creating the white line. This line covers the bottom of the image, but the slide content appears above it. As a result, the broken grid effect is created, which gives a modern look to the slider.

Final Thoughts

Full page sliders are not only design elements, they can be an important part of your page. They catch the visitor’s attention and add a personal touch.

Use it on your homepage and the full page slider will give the first positive impression about your website. With Smart Slider 3 Pro you can easily create a full page slider, and you can customize it to your website content. Give it a try, you won’t regret it!

The post What is a Full Page Slider and How to Use it? appeared first on Smart Slider 3 — WordPress Plugin.

https://smartslider3.com/blog/hero-slider-ideas-examples-and-inspiration/ Fri, 13 Jul 2018 08:00:14 +0000 https://smartslider3.com/?post_type=blog&p=9274 One of the biggest trends in web design and WordPress in recent years has been the use of big images. And not just large, but completely oversized images that come to life on screen. When used at the top of the page, they’re known as hero headers. But what I want to tell you more […]

The post Hero Sliders in Web Design: Ideas, Examples and Inspiration appeared first on Smart Slider 3 — WordPress Plugin.

]]> One of the biggest trends in web design and WordPress in recent years has been the use of big images. And not just large, but completely oversized images that come to life on screen. When used at the top of the page, they’re known as hero headers. But what I want to tell you more about today is hero sliders.

What is a hero slider?

A hero slider extends the idea of a hero image, allowing you to present multiple hero images in sequence, using captions, transitions, and animation.

A hero slider is defined as a large, featured series of images prominently displayed on the homepage.

What’s so impressive about this hero slider on the Lonely Planet website is a number of things:

• It features four stunning photos, which you can scroll through at your leisure, or sit back and watch it on autoplay.
• There’s clear navigation at the bottom – each image has a description that puts it into context.
• There are clear calls-to-action labelled “Read More” that direct the reader to complete the desired action.
• When you click on the navigation, the autoplay stops so you can focus 100% on each image.

First impressions count, and this hero slider makes good use of Lonely Planet’s extensive archive of beautiful travel photography, making a strong first impression on would-be travelers.

What’s more, Angie Schottmuller describes a hero shot as “a credible photo or video of a solution that encompasses relevance, context, value, and emotion to support, educate, or persuade”.

So a hero slider isn’t simply series of large photos – they are large photos that complement your value proposition – in the case of Lonely Planet, beautiful travel locations – to provide clarity and context to your visitors. It’s a series of photos with a purpose.

Why Use a Hero Slider?

To really understand why hero sliders work, it’s important to understand some basic psychology behind how people judge your website. How visitors perceive your website plays a crucial role in how they interact with it. People feel happy when they see a website that:

• instantly makes sense,
• is easy to read,
• clear, and
• understandable.

It doesn’t take long for people to make a judgment about who you are and what you represent, and a hero slider helps create a sense of ease, clarity, and understandability right away.

In fact, it takes only about 50 milliseconds (that’s 0.05 seconds) for site visitors to form an opinion about your site. That’s how long you have to convince visitors to stay and not abandon your site.

Inspiring Examples of Hero Sliders

Some of the world’s biggest brands have recognized the value of hero sliders and their ability grab a visitor’s attention, allowing them to deliver key information in an organized and focused way.

SpaceX hero slider

SpaceX, like Lonely Planet, provides navigation below its images so visitors know exactly what’s coming up – three images that promote the company’s endeavors around space technology.

What’s great about hero sliders compared to single hero images is that you can feature a mix of image in limited screen real estate while still keeping visitors focused on your key messages.

Hero slider at Lamborghini

Lamborghini also uses a mix of video and high-resolution imagery to show off its cars, because why not? An image of a car is good, but a video of a luxury sports car speed along an open stretch of road? Even better. It creates a visually stunning cinematic experience.

When viewed on mobile, the slider defaults to a hero image, allowing Lamborghini visitors to views the car without the need to download high-resolution images on devices with limited bandwidth or data allowances.

Spotify’s hero slider

Spotify’s hero slider is simple yet effective. It maintains the same gradient background image, but allows visitors to scroll through a number of messages and corresponding CTA buttons. Why does this work? It’s easy, clear, and understandable – users don’t have to think too hard about what Spotify is offering, just click a button and download Spotify for free.

Stunning Examples of Smart Slider 3 Hero Sliders

With Smart Slider 3, you can easily recreate any of the slider designs above and make customizations to suit the look and feel of your WordPress site. Give Smart Slider 3 a try for free! and s Here are a few great examples that show off what you can achieve with this versatile plugin.

Virtual Conference

This gorgeous slider is a great example of modern hero sliders. It’s large, features a nice image and has spectacular effects. For example, it uses an Animated Heading Layer on the first slide, immediately catching the visitor’s attention. It has textual thumbnails for navigation. They’re great to explain what’s on the slide for the visitor before they decide to switch to it. Also, it has a cool Morph animation to switch slides

SEO Agency

Introducing your business is one of the most important aspects of having a website. The SEO Agency hero slider is a great way to do that. It’s a full width slider that uses pastel colors and nice illustrations. This vertical slider has a custom navigation (with emojis) on the first slide, and also next and previous arrows at the bottom. Apart from these the mouse wheel can be used to switch slides, which makes the experience super smooth.

Flower Shop Slider

This beautiful layered slider is a great example of how you can achieve a simple overlapping look, complete with animations, using several transparent layers and elements. The focal point is the main image of flowers on the right with transparent images of plants layered behind it; on top, there’s the name of the flowers arrangement and the price, all put together in a neat, eye-catching stack. The “shop now” CTA offers clear guidance to visitors who are ready to purchase, while the thumbnails on the right help the visitor scroll through the flowers and see what’s coming up next.

Rotating Hero Slider

This example, designed for web development and hosting companies, features a bright and clean WordPress design. But what catches the eye is the smooth wave effect at the bottom of the slider that adds a sense of movement. Again, there’s a clear CTA. Above it are icons that visitors can click through to see the other slides. Or, they can use the navigational arrows in the bottom-right. This slider also features a smooth fade transition that’s pleasing on the eye.

Common Problems with Hero Sliders (and Their Easy Solution)

Unfortunately, hero sliders do have haters. It’s true. And it’s a shame because, as I’ve outlined above, hero sliders have clear benefits for both site owners and users. Some of the common misconceptions include:

• “Sliders are confusing.” – WiderFunnel, 2011
• “People ignore sliders.” – Nielsen Norman Group, 2013
• “People consider sliders as advertising and don’t take in the messages they display.” – Neilsen Norman Group, 2013
• “Sliders are bad for SEO.” – Search Engine Land, 2013
• “Sliders don’t always work well on mobile devices.” – Brian Krogsgard, 2013

What you’ll notice about each of those links is that they were published in 2013 (with the exception of one review, which is even older). Well, it’s now 2018, which in tech years is a lifetime! Design techniques have advanced immensely over the past five years, nullifying many of the assertions made against hero sliders in these posts.

For a start, hero sliders back in 2013 (thanks to Wayback machine) looked a lot like this:

Ugly, right? No wonder people hated hero sliders. In 2018, hero sliders look like this:

Stunning! I often trot out this example because it’s so freaking beautiful. If it’s not already obvious, the difference between hero sliders from 2013 and those created in 2018 is design. It all comes down to good design. But also, modern slider solutions, such as Smart Slider 3, provide modern features, such as layers, transitions, text editing, custom CSS, and more – that make it easier than ever to design stunning sliders like the Squarespace one above with little effort.

Clearly, designing and choosing images and video for your hero sliders is as much art as it is science. It’s also just as much about branding as it is conversions. Fortunately, there are frameworks that can help guide decisions around hero slider design.

Angie Schottmuller’s 7-step framework provides a set of questions to ask yourself when judging hero images and video:

1. Keyword Relevance – Does the image visualize the targeted keyword or referring link text?
2. Purpose Clarity– Does the featured image help identify the page purpose and/or offer?
3. Design Support – Does the featured image support and enhance seamless flow of page design leading to the CTA? (i.e. photo size, complementary CTA color, contrast, complexity.) Does the featured image have a subtle cue pointing in the direction of the CTA? If yes, +1 bonus! (e.g. eye path, lines, shadows)
4. Authenticity – Does the featured image represent the organization and offer in an authentic, credible fashion? (i.e. genuine, honest, believable, actual vs. stock photo, brand-aligned)
5. Added Value – Does the featured image add value by showing detail or context to improve relevance, demonstrate benefits, and answer questions?
6. Desired Emotion – Does the featured image portray desired qualities or emotion to resonate and inspire action? (Considerations: mood, lighting, scene, body language, colors, urgency)
7. Customer “Hero” – Does the featured image depict the customer as the “hero” once equipped with this solution?

The hero slider above from 2013 lacks all of these points. But when you look at the Squarespace slider from 2018, it’s obvious a lot of thought has been put into its design, and it checks off each and every one of the 7 steps in Schottmuller’s framework.

Ultimately, great hero sliders have great design. They aren’t simply a sliding series of images. They are designed with purpose and with the user at the center of that purpose. Because when you ignore the user, and basic design considerations such as clarity, authenticity and emotion, you’ve really just got a boring set of images that don’t make any sense.

Again, with your hero slider, you’re looking to complement your value proposition and create a great first impression. And a well-designed slider will help you do exactly that.

What About SEO?

“Sliders are bad for SEO.”

Yes, this is true of some poorly-designed slider solutions. But modern options, like Smart Slider 3, make SEO a priority. This WordPress slider plugin allows you to add alt tags for each of the images in your sliders, as well as each layer in your slider. This ensures your images are not only accessible, but searchable in Google.

What About Mobile?

“Sliders don’t always work well on mobile devices.”

This might’ve been the case five years ago, but nowadays, slideshow plugins like Smart Slider 3 provide responsive solutions for different devices, including:

• The ability to swipe through slides rather than click
• You can turn layers on and off for different devices
• The ability to optimize fonts for smaller devices

With these features at your disposal, you can ensure your hero sliders look fantastic on all devices, including desktop and mobile.

Ready to Create Your Own Hero Slider?

Hero headers are among some of the best and most visually appealing trends in web design in recent years, but paired with sliders, they have even more visual punch. When done correctly, hero sliders deliver context and clarity, helping visitors quickly understand what your site is about and what you have to offer.

A great hero slider needs great design, and thanks to solutions like Smart Slider 3, anyone can create a beautiful slider with little effort, using features like drag-and-drop, animations, transitions, buttons, and more.

I hope this tutorial has inspired you to experiment with hero sliders. Feel free to share your thoughts and questions in the comments below!

The post Hero Sliders in Web Design: Ideas, Examples and Inspiration appeared first on Smart Slider 3 — WordPress Plugin.

https://smartslider3.com/blog/why-the-research-against-sliders-is-wrong/ Tue, 12 Dec 2017 13:48:00 +0000 https://smartslider3.com/?post_type=blog&p=5010 I’m tired of all the negative talk around sliders so I’m just going to leave this here… Yes, I know it’s the Squarespace homepage and yes, I’m well aware that this blog is on a site for a WordPress plugin. But you know what? The Squarespace website kicks WordPress.org’s ass. Why? Well, it’s beautifully designed […]

The post Why the Research Against Sliders is Wrong (and They Don’t Suck) appeared first on Smart Slider 3 — WordPress Plugin.

]]> I’m tired of all the negative talk around sliders so I’m just going to leave this here…

Yes, I know it’s the Squarespace homepage and yes, I’m well aware that this blog is on a site for a WordPress plugin. But you know what? The Squarespace website kicks WordPress.org’s ass.

Why? Well, it’s beautifully designed for one thing. And you know what else is really cool? Its sliders. That’s a big ol’ slider right there in the header.

When I first visited the redesigned version of the site after having not seen it for a while (I love WordPress, why would I visit Squarespace?!), it took me a few moments to realize I was looking at a hero header slider because it looked gorgeous. I mean, look at it. It’s stunning!

If you’ve been listening to the anti-slider brigade bleat on about how bad sliders are, spend a couple of minutes scrolling through the Squarespace homepage and then come back and tell me why sliders are terrible for user experience design, distracting, unattractive, slow and difficult to use… Those are some of the popular arguments against sliders.

Because I just don’t see it. Yes, sliders were pretty damn ugly five years ago, but I’d argue that they’ve come a long way since then and are now an essential web design tool that everybody’s using whether you realize it or not.

So in this post, I’m going to state my case for why sliders are making a comeback, attempt to shoot down the haters, and, hopefully, open your eyes to the possibilities that sliders offer.

Why Sliders Suck

Okay, you got me, sliders do suck – but only when they aren’t used or designed well.

Here are some of the commonly cited arguments used against sliders that have contributed to its bad reputation:

• Sliders are confusing – WiderFunnel, 2011
• People ignore sliders – Nielsen Norman Group, 2013
• People consider sliders as advertising and don’t take in the messages they display – Neilsen Norman Group, 2013
• Sliders are bad for SEO – Search Engine Land, 2013
• Sliders don’t always work well on mobile devices – Brian Krogsgard, 2013

Did you notice the commonality between the articles attached to those arguments? They’re all from 2013 except one (which was published in 2011, even older), which in tech terms is a lifetime ago. Web development and design have changed enormously since then, nullifying many of the assertions made against sliders as we count down the days to 2018.

It’s also important to note that the sliders talked about in those posts haven’t been designed all that well and are mostly hero headers – sliders aren’t exclusively used in headers anymore (though some are) and shouldn’t be.

To prove my point that sliders were ugly back in 2013, I used the Way Back Machine to find an example. Here you go:

Yes, it’s a slider for a competing plugin. Interestingly, Meta Slider is still the most popular free slider plugin in the WordPress Plugin Directory. Currently, it has 800,000 active installs and the same design it had back in 2013.

No wonder people think sliders suck.

Why Sliders Actually Work: The Research

Let’s take a look at a more recent study that shows – gasp! – sliders are a worthy design tool.

Kyle Peatt from Mobify, a mobile commerce and engagement platform, spent 11 months sampling approximately 7.5 million slider interaction events on several mid-sized to large eCommerce websites that do at least $20 million in sales per year.

Why invest so much time and effort into this research? Well, as a company that develops large-scale eCommerce sites for mobile devices, many of which have at least one slider, Peatt wanted hard evidence on whether the company was doing something wrong, i.e. doing a disservice to its customers by using sliders.

Instead of being reactionary and blindly following the negative noise around sliders, Peatt decided to do his own research.

The sampling he carried out on customer websites uncovered some interesting results, which I’ll compare here with data gathered by Erik Runyon. Runyon’s analysis of sliders for the University of Notre Dame is the most cited research when it comes to sliders sucking.

Get on board! Join our 142,416 subscribers!

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

No spam. No charge. Just curated emails.

1. People Do interact with Sliders

Runyon found that only 1.07% of visitors clicked on sliders in the featured banner sliders he examined for the university. For his research, he counted an interaction as a user clicking on a slide.

Peatt’s results, on the other hand, found that users interacted with product image gallery sliders at a high rate: 72% of users swiped through sliders at least once, while 23% directly interacted with sliders by zooming.

2. People Don’t Only Interact with the First Slide

Back to Runyon’s research. Of the 1.07% of people who clicked on the university’s sliders, 89.1% clicked on the first slide. The assumption would be that clicks on the second slide would trend down, right? Instead, Runyon found that clicks fell off the face of the earth – just 3.1% of all clicks.

Looking at Peatt’s results, he found that people directly interacted with the second slide of product image gallery sliders at a rate of 15.7%, and at least 64% of people advanced to the third slide – a roughly linear rate, not a steep drop.

3. Sliders Are Accessible

A lot of people assume that sliders aren’t accessible. I mean, you need to click the navigation arrows to see the next slide, right?

That may have been the case in years gone by, but nowadays sliders – like everything else on a website – are required to meet accessibility guidelines. The Web Content Accessibility Guidelines (WCAG) 2.0 provides rules for how to make sliders accessible for anyone.

Here are the guidelines in the WCAG 2.0 that relate to sliders and modern day sliders meet the requirements:

• Guideline 1.1 – Text Alternatives: Any text you create for a slider can be read by reader software.
• Guideline 1.2 – Time-based Media: Like any type of time-based media that is added to a slider, such as audio, video and captions, it’s up to the user to provide alternatives.
• Guideline 1.3 – Adaptable: Sliders can use both aria and role attributes to identify regions such as navigational arrows. Other semantic elements, like highlighting parts of the text by making it bold or italic, can also be done by sliders.
• Guideline 1.4 – Distinguishable: Depending on the sliders you’re using, it’s easy to adjust the color of every textual element, shape, arrow or bullet. For example, you could create a greater contrast between background images and layers by setting up a background color and lowering the image’s opacity.
• Guideline 1.4.2 – Audio Control: Sliders usually provide some way to control the volume or pause it.
• Guideline 1.4.4 – Resize text: Unfortunately, this can’t be controlled by sliders as the size of the text is usually based on the screen size.
• Guideline 2.1 – Keyboard Accessible: Sliders allow you to use your keyboard, including for links, arrows, bullets and other slide changing controls. For some sliders, when the keyboard captures the slider itself, you can use the arrow keys to switch slides.
• Guideline 2.2 – Enough Time: Autoplay and intervals are easy to set with sliders so you can ensure users have enough time to interact with the slider.
• Guideline 2.3 – Seizures: Sliders generally don’t force any kind flashing. While some sliders do feature flash effects, using it is the slider creator’s choice.
• Guideline 2.4 – Navigable: This guideline relates more to the general design of the website containing the slider, but for most sliders, you can select heading tabs and include links.
• Guideline 3.1 – Readable: It’s up to slider creators to provide text content that’s readable and understandable. As far as sliders are concerned, you can set font sizes and control their legibility.
• Guideline 3.2 – Predictable & Guideline 3.3 – Input Assistance: To meet this guideline, it’s up to the slider creator to consider the design of their site and slider.
• Guideline 4.1 – Compatible: The most popular sliders have been developed using valid code, the latest HTML standards, and work on any browser and device.

I should point out that the developers behind Smart Slider 3 have closely followed the WCAG 2.0 guidelines to ensure the plugin meets the relevant accessibility guidelines. This means that any sliders that are powered by Smart Slider 3 are accessible – so long as the user also considers the WCAG 2.0 guidelines and fulfills their responsibilities in satisfying the guidelines.

Is Slider Use Growing in Line with Mobile Use?

There are two important things to keep in mind when reviewing the findings above: Runyon’s data focused on a higher education website while Peatt’s looked at mobile eCommerce.

As Peatt highlights, sliders are “much more than a method of displaying marketing information on a homepage”, aka using a header slider.

“Because we focus on designing for mobile, one of our biggest concerns is making sure that we’re balancing information density with the limitations of small screens. That means making sure we’re always making the best possible use of horizontal and vertical real estate.” – Kyle Peatt

For Mobify, this means using sliders to maximize information density and maintain context without forcing users to scroll further down the page.

Sliders are better suited to retail and image-heavy websites, and when you pair these elements with mobile devices, you’re onto a winner. On mobile phones, it’s far easier to swipe through a slider of images than it is to click through a slider with a mouse.

It’s worth noting that the number of mobile phone users worldwide has grown from 4.01 billion in 2013 to 4.77 in 2017, and is anticipated to reach 5.07 billion in 2019. In addition, mobile now represents 65% of digital media time, while desktop is becoming a “secondary touch point” for digital users.

So as mobile use continues to grow and more and more people do their shopping online, I’d wager that slider use will grow too.

So… Should Websites Use Sliders?

Overall, Peatt concludes that the data opened his eyes to how much research is still needed on sliders. He suggests more data is needs to be collected on different types of sliders, how interaction with a carousel affects a user’s actions, and why swiping is one of the least-used interaction types.

Sliders aren’t automatically the best or right solution for every website. When it comes to marketing banners where users often exhibit “banner blindness,” the data shows sliders aren’t necessarily the best option. However, for product image galleries, they’re ideal because in this context, users know what the next slide holds and why they should view it.

Out in the wild, sliders are used liberally across the web – you’ve probably seen a bunch of them today and didn’t even realize it. So I’ve rounded up a collection of examples to show you how sliders are being used for just about any purpose and to show you the types of sites that are well-suited to sliders.

(I should also point out that you can create each and every one of the examples below using Smart Slider 3. It’s that good.)

Image Sliders

Marketplaces like Etsy, eBay and ThemeForest also use sliders so users can easily slide through product items.

You’re almost guaranteed to find sliders on any real estate website you visit, like realestate.com.au, for example. When you view a property on the site, images of the home are displayed using a gallery.

Even Tesla uses a slider to display the interior and exterior of its cars.

You’ve already seen one example from Squarespace’s homepage in this article, but if you scroll further down the site you’ll see the page is chock-full of sliders – and they all look stunning.

Sliders are ideal for hotel and accommodation sites like Airbnb that want to display a scrolling selection of options for users.

Amazon makes liberal use of sliders to display products on its homepage. The sliders it uses have been designed so you can see a hint of the next product in the carousel. It peeks out from the right, prompting you to click on the arrow so you can see the product image and description in full.

Now here’s an interesting take on slider design. On the Google Home Mini site, you can slide through different colored versions of the product using navigational arrows or by clicking on the corresponding colored buttons. As you advance through the colors, the background color also changes.

Testimonials

Almost every testimonial you see these days is in a slider, whether you’re conscious of it or not.

Take Help Scout, for example. The customer service and support platform uses sliders to display scrolling testimonials. Check out how awesome they look – the quote really “pops” thanks to the clean and focused design.

Uber uses testimonial slider to introduce a few of its drivers. The cut off image and text on the right indicates that there’s more to read.

Hero Sliders

Sliders are traditionally associated with hero headers and have copped a bad rap, mostly because they used to look really ugly and were difficult to use. Nowadays, improvements in web development and design have vastly changed how sliders look and function.

Microsoft uses a hero header to advertise its Surface Pro. There are multiple ways you can advance through the sliders – navigational arrows on either side of the image, buttons at the bottom of the image and a “play” button. It’s obvious that there are just two sliders thanks to the buttons at the bottom. The slider is also accessible so you can easily tab to move between the two slides.

McDonalds also has an accessible header slider, with clear navigational controls. It’s also obvious how many slides there are. The incentive for advancing through this slider is the chance of finding a deal.

Spotify uses a good old-fashioned hero header to advertise its premium sale. The messaging is clear and the CTA is obvious and highly clickable thanks to the use of contrasting colors. There’s nothing confusing about this slider – Spotify just wants you to “learn more” already.

The SpaceX hero slider scrolls through its missions quickly but the text navigation at the bottom lets you see what’s coming up so it’s clear what’s coming next.

Showcases

Sliders allow you to showcase your work or product, and even tease visitors with FOMO, as Lonely Planet does in the showcase slider below.

Likewise, National Geographic tell you “your wine adventure starts here” in its slider. Using a showcase slider, the magazine invites users to click through the images to see what else they might be missing out on.

Again, Microsoft uses a slider to showcase its Xbox One and the range of games available to play.

Like with anything in web design, there’s a place for everything and everything in its place. You just have to know when sliders are right for your users – and then design and configure them appropriately.

Tips for Creating Beautiful Sliders

If using a slider, or sliders, is a good fit for your website and would benefit your users, here are some tips to ensure you use them well.

• Design, design, design – The best sliders are beautifully designed (remember the Squarespace homepage?) and use high-resolution images.
• Use responsive design – Make sure your sliders are responsive and look great on every device, from big desktops to small mobile screens.
• Optimize images – Always use correct images sizes and ensure they’re compressed for fast loading. To help further speed things up, consider lazy loading images.
• Limit number of items in slider – As the research above clearly shows, interaction with slides tends to drop off after the first image. It’s best to stick to a maximum of 3 or 4 slides.
• Keep text to a minimum – A slider isn’t the place to display a lot of text. Instead, ensure any message you want to convey is clear and concise. And if you’re using a call-to-action button, use one or two at most.
• Use clear navigation – Ensure your sliders are easy to use. The idea here is that users shouldn’t need an instruction manual to work out how to use your slider. Sliders that use clear controls help to encourage interaction.
• Consider SEO – Ensure you’re using correct HTML tags with the right attributes.
• Consider Accessibility – Don’t forget accessibility. For more, check out the W3C’s guide to sliders and carousels.
• Always A/B test content – Hope isn’t a strategy – always A/B test your sliders so you know what content, navigation and other elements are working and not working.

Should YOU Use a Slider?

Yes… and no. Whether you use a slider or not all depends on the context. It’s silly to use a slider purely because you want to jam more content into a tight space. It’s important to think about whether the slider is appropriate for the page and the content you want to display and whether it will be useful for the user.

More research is needed into sliders and their effectiveness. The research often cited by slider haters is old and outdated. Web development and design have advanced considerably since 2013 when most of the research was released. While the Mobify data offers some insights into how mobile users interact with sliders on eCommerce sites, it would certainly be interesting to see new data on how users are interacting with sliders on non-eCommerce sites that use sliders for other purposes.

However, the Mobify research does clearly show that sliders are an ideal design tool in the right situations. Retail, fashion, photography, real estate – these types of businesses that heavily rely on imagery are ideal candidates for sliders, particularly as users have come to expect them when scrolling through image galleries when buying online.

If you do decide to use a slider on your site, be sure to consider the tips included in this article. No one likes a boring header slider – they’re so 2013. So do us all a favor and ensure you put time into designing your slider, optimizing images, using responsive design and making it accessible and easy for anyone to use.

The post Why the Research Against Sliders is Wrong (and They Don’t Suck) appeared first on Smart Slider 3 — WordPress Plugin.