Most common bad slider practices

There are many ways to create a bad user experience. I’ve collected the 9 most common bad slider practiceshaving all texts needed on the picture that create a bad experience. The examples can help you learn from their mistakes and create better sliders.

1. Text on images

Placing text to images is a favored way of displaying content. Probably it originates from the desire of enriching blog posts with captivating visuals. A simple editor, like Classic Editor or Gutenberg, doesn’t allow placing text on top of the image. So, the only way of creating such visuals was to create an image that looks exactly the way you want. This includes having all texts needed on the picture.

However, if you use a modern solution to enrich your posts, you don’t need to create your visuals in an image editor. In fact, most modern sliders offer such functionality via layers. So, if you want text to appear on top of the image, you should use them instead.

What’s the problem with having the text in the image file? The first problem is the responsive behavior. Images are scaled down to fit into small mobile screens. The text on the image might look good on a 1920px wide monitor but it will be way too small for mobiles.

Additionally, these texts are not accessible by screen readers. So visitors using any assistive technology won’t be able to access the text. However, if you use layers the text will behave like any normal text on your site. So, the screen readers will have no trouble reading them. Moreover, if you add the text to your site instead of burning it into the image, even Google can see it. So, this method has SEO advantages.

2. Forcing the desktop look for mobile

Lots of people want their visitors to see the exact same page on all devices. This is rarely a good practice. The exact same layout can’t work well on large and small screens. For example, on a desktop you can easily fit two columns with text and buttons next to each other. They’ll be easy to read and have a nice white space. On the other hand, the exact same layout will not look good on mobile.

So, if you want to create a good experience for mobile, don’t try to force the exact same layout. Allow columns to break below one another. As a result, the visitors can see what’s on the images and can read the text without problems.

3. Using the wrong images

There are many ways to use images in the wrong way. The most common problem is using an incorrectly sized picture. For example, trying to show a portrait image in a landscape image’s place.

Another common issue with background images is not setting the focus point correctly. The focus point of an image says the most important part of the picture, that should always stay visible. For example, imagine that you want to display a picture of your team members. You need to set the focus point to make sure that the head of the people is not cropped.

Using stock photos is quite popular on the web. After all, not every business has perfect photos to display on their site. In fact, it can be so much easier to look for a free to use picture. When you use a stock photo, make sure it fits your business. For example, if you have a lawyer site, try to get pictures of people who wear suits. An image about a beach is not really suitable for such websites.

Another thing you need to pay attention to is the watermark. There are sites that sell images and put a watermark on the previews which people can see without paying. Using a heavily watermarked image makes your site look unprofessional. Additionally, it’s one of the fastest ways to make the visitors leave the site. If you use your own watermark, that’s fine, although try not to make it cover the whole picture.

4. Autoplay without control

Autoplaying slideshows are quite popular. They help show the visitor that there are more slides for them to see. In fact, when used properly, they can help save time and clicks for the visitors. However, it’s not easy to create a good automatically rotating slider. First, you need to consider the duration of the autoplay, so the time when each slide shows. You have to provide enough time for the visitor to read any text that’s visible on the slide. Keep in mind, they see the content for the first time, and they might read a bit slower, so they’ll need more time than you do.

The way to create an autoplaying slider is to give control to the visitor. Place a button to pause or resume the autoplay which they can use. Also, you can pause the autoplay when the visitor hovers on the slide. Hovering on the slide means the visitor wants to interact with the slider. The autoplay should not interfere with that. Additionally, it’s a good idea to resume the autoplay when the mouse leaves the slider area. This way the visitor can read every text on the slider which improves their experience.

5. Invisible navigation

When you create a slider, you want your visitors to view and enjoy all slides. To be able to do so, you need to give them clear navigation options. For example, add arrows or bullets to your slides.

While you set up the controls, make sure you choose their colors carefully. The colors should have a high contrast with the background of your slides. So, if you use dark images, make sure you choose light colors for your arrows.

6. There’s no connection between slides of the slider

When a visitor checks a slider, they expect it to act as a container of similar content. So, if you create a product slider, they want all slides to be product related. However, in a testimonial slider visitors want to see how satisfied your customers are. They don’t want to see, for instance, a slide that tells them to subscribe to your newsletter.

Adding slides that have no relevance to the slider’s content distracts visitors. Additionally, it ruins their experience. Moreover, these unrelated slides can be very confusing for them. Since they will not understand what happened, they might leave your site.

7. Using too many slides

Sliders are great tools to create a visual presentation. However, it’s not easy to keep the visitors interested in browsing through too many slides. You need to find the right amount of slides for your particular slider.

Generally, we don’t recommend creating more than 5-6 slides per slider. Of course, if you create a carousel where more slides are displayed next to each other, you can have more slides. However, in this case you shouldn’t really have more than 12-16 slides either. Otherwise, the visitors won’t check the slides because they’ll feel they don’t have that much time.

8. Using sliders for tasks they were not meant for

Sliders are versatile design tools, and you should always think of them this way. So, you should use sliders to create a visual presentation or an image gallery. But you should not try to use the sliders, for example, to create a complex menu for your website. Additionally, using a slider for displaying a blog content is not a good idea either.

What are good slider practices?

A good slider practice is what makes your slider and site stand out from the crowd. It makes your visitors like your site and enjoy their time interacting with your slider. So, following the best slider practices helps creating a better user experience. Additionally, they can increase your conversion!

Good Slider Practices

Creating a slider is easy, but creating a good slider is not. A good slider needs to have a purpose and help your website and its visitors. So, you should make sure you create your slider with a clear goal in mind.

Here are some good practices you should keep in mind when you create your next slider.

1. Create clear navigation

People don’t like having to guess or search for the next course of action on a website. So, they don’t like sliders where it’s not clear that there are more slides for them to see. Additionally, they don’t like to wonder how to get to these other slides.

So, make sure you offer them clear navigation. This can be a simple arrow which they can immediately notice. Or, it can be a dot, numeric or text bullet. Additionally, you can use thumbnails for making the navigation clear for the visitors.

2. Design for all screens

Nowadays lots of people use their phones for browsing. When you create your website, you need to make sure it looks good on all screens. In fact, the same is true for your sliders as well. You need to check them on different screens and make sure they look good.

For instance, to create a good mobile look, you might want to hide some content. Or you can change the order of the content to make the layout more mobile friendly.

3. Use sliders with a clear purpose

Anything you add to your website should have a purpose. In other words, you should have a reason why you add the slider to your site. For example, if you create a hero slider, you want visitors to learn more about your site. Or, if you have a testimonial slider you want to build trust in your visitors. As a result, they’ll be more likely to spend money on your product or service.

In other words, use a slider to help you and your website, not because all other websites have a slider as well. It’s a bad practice to copy the slider of your competitor’s site so you can have one, too.

4. Make sure the slider fits into your website

Sliders need an attractive design to catch the visitors’ attention. However, this design needs to fit into your website. For example, if your site’s main colors are white and red, you should use these colors in your slider as well. Avoid creating a slider that uses completely different colors, such as blue and yellow. It will make the slider look like it’s not part of the website. Additionally, it can lead visitors to believe the slider is an advertisement. As a result, not only will they not check out the slider, they’ll completely ignore it.

Conclusion

Creating a good slider is not so easy. You need to think about how the slider will benefit your website. Also, ask yourself how it will create a good experience for your visitors. To create a good slider that your visitors will enjoy, make sure you avoid the bad practices listed above.

The post Good and Bad Slider Practices appeared first on Smart Slider 3 — WordPress Plugin.

https://smartslider3.com/blog/slider-autoplay/ Fri, 08 May 2020 10:47:43 +0000 https://smartslider3.com/?post_type=blog&p=18500 Slider autoplay is popular in web design, you can encounter that kind of slideshow on a lot of websites. This way you can share more content with your visitors and call their attention. The slider switches between slides after a period of time, and you can display other content on each slide. Of course, autoplay […]

The post Configure Slider Autoplay and Create Automatically Rotating Slider appeared first on Smart Slider 3 — WordPress Plugin.

]]> Slider autoplay is popular in web design, you can encounter that kind of slideshow on a lot of websites. This way you can share more content with your visitors and call their attention. The slider switches between slides after a period of time, and you can display other content on each slide. Of course, autoplay should happen after the visitor has had enough time to check it.

How to create autoplaying slider?

You can create autoplaying slider even in the free version of Smart Slider 3, but the Pro version offers more features for you. All you need is to enable the Autoplay on the slider autoplay configuration page and customize it.

You can set a ton of options for example the interval or when it should stop, continue or finish the autoplay. The most common setting is to stop the autoplay when the mouse is on the slider and then continue the autoplay when the mouse leaves the slider. Also, you can pause the autoplay when a video plays in the slider, which function can be useful at video sliders.

In the Pro version you can configure more specific settings, for example with the finish autoplay setting you can set the autoplay to stop after the first slide. You can make an introduction slide with that option, and you can show the actual content after that.

🎓 Check our documentation and learn how to use the autoplay feature!

How to stop the autoplay?

Use the autoplay button! As you might already know, you can add multiple different control elements to your slider. One of them is the autoplay button which can start or stop your slider’s automatic sliding.

Please note: If the slider’s autoplay is not enabled, the autoplay button won’t be visible. Of course you can change the design of the Autoplay button easily or you can create your own with the Style Manager.

Indicator for slider autoplay

Autoplay indicator indicates the elapsed time in the current autoplay interval. It is a good feedback when the slider switches to the next slide. You can choose from a pie type and a stripe type indicator. Both of the types have several customization options so you can create your own.

Why should you use slider autoplay?

If you use the same slider on all your pages without autoplay, and the visitors don’t decide to interact with them, they will only see the first slide. This isn’t really good, and this is where the autoplay option can help. If you set a main animation, which attracts the eye, your slides won’t just appear, but they will surely be noticed. Also, this tool is great to make an automatic image viewer, just enable the fullscreen option, and let the images automatically change.

Always give control

There are many different ways of using the autoplay feature, but there is one thing I would suggest: always allow your WordPress or Joomla users to be able to stop and resume the rotation.
If people see something interesting, and would like to take his time to check out your slide, they should be able to do so with at least a mouse enter event.

But you can make a more obvious option, put a pause/play button into your slider with the autoplay control. The autoplay can also be paused by videos, and the lightboxes, as you don’t want your slide to go away while you are watching something.

If you don’t give control to your visitors, it can cause that they choose not to wait for another round, so this can be a deal breaker for example to buy a product or not. It is critical to leave enough time for visitors to read the content on your slider, otherwise they can be frustrated.

To solve this, I would suggest using the autoplay indicator or the autoplay control, and the visitor can control over the automatic slide switching.

Where the controls don’t matter

There can be use cases where the controls don’t matter, and the goal is that the autoplay should never stop. The logo slider can be a good example for that. In this case you can share more information with the visitor at the same time, but the content of the slides aren’t too important, but informative.

However I can suggest letting the basic mouse enter and leave stop/resume autoplay options, and the visitors will feel that they have control over the slider which gives a good experience for them.

Final Thought

When you create an autoplaying slider, you should always take care of the quality of your content. It is good, if you put CTA buttons on your slider, which the visitor can navigate to other pages. What is important is that you should not forget to configure your slider autoplay so that the user has enough time to read it.

The post Configure Slider Autoplay and Create Automatically Rotating Slider appeared first on Smart Slider 3 — WordPress Plugin.