MENU

How to Improve Your Landing Page Slider

A landing page slider draws attention to the essential features on the page. It gives you a chance to grab the user and pull them into your site, keeping them engaged along the way. When done well, a slider adds value to a landing page. When done poorly, it's a distraction at best and a turnoff at worst.

Search for the term "image sliders," and you'll get all kinds of opinions on how they're bad for conversions. While some studies point to this, others show they can be useful. How well sliders work for your landing page depends on how you use it. As with most online advice, study it, absorb it and do what makes sense for your needs.

If you believe a slider is the right choice for your landing page, learn how to meet the expectations of your site visitors.

1. Use Similar Images

If your slider has multiple images, make sure they all have a similar size and look. You don't want a sudden, jarring change that makes the visitor wonder if they've redirected to another website. Instead, try to keep a cohesive look by coming up with slider guidelines, such as specific image size, colors, filters and even typography used.

2. Highlight Key Content

One complaint from those against sliders is it pushes key content below the fold. However, you can use your slider to highlight crucial features on your site, such as a new product release or sale information. Pull the essential information to the top of the page to negate the criticism about sliders.

Panera Bread

Panera Bread features the latest recipes on their slider. This strategy works well for a restaurant because it highlights what people might like to try. The user can click to look at the next slide or rotate the tile. Each image has a similar background, coloring and size. This effort creates a cohesive look while highlighting vital information.

3. Test Load Speed

Users with slow internet connections may run into issues getting the images to load quickly. Conduct speed tests after installing your slider to ensure the coding doesn't slow download times. Optimize images used in your slider to speed up browsing. Users won't wait around for an image to load. They'll scroll on past or bounce to a new site.

4. Add Cool Effects

Think about ways you can highlight your slider with exciting effects and designs. Could one slide be a video on how to use your product? Maybe you want the slider to appear through a keyhole. Put on your creativity cap and come up with a design no one else has.

Holt Ag Solutions

Holt Ag Solutions adds a border to the bottom of their slider that looks like growing grass. Because they sell products like combines and farm equipment, the slider in the middle of a field works well. This example showcases creativity while tapping into the target audience's interests.

5. Make Sliders Responsive

By the year 2020, experts predict global smartphone use will reach 2.87 billion people. Roughly 63.4% of the population will access the internet via a mobile phone. With some sliders, the problem is they take over the entire screen, or they don't load correctly. It's vital to determine a plan for mobile users, either losing the slider or creating one that adapts to screen size.

6. Watch White Space

Have you visited a page with a slider where you can't read the text on the images? This error is due to a lack of negative space on the graphics themselves. Choose pictures with enough white space to add readable text. You can also apply filters to keep the look you want but darken or lighten them for added highlights.

Holt Ag Solutions

Home of the Arts (HOTA) features various artists in residence. Note how they use an image with plenty of negative space on the left and bottom. This technique allows them to add text and create a massive contrast. The message takes center stage, and the image becomes a backdrop.

7. Consider the Importance

Many visitors won't move past the first slide. It's crucial to place the most important image first. While all of the slides contain useful information, you must place essential details on top. Shuffle the slides around occasionally, depending on the seasons and current specials.

8. Improve Your Headlines

Headlines are necessary for your website description and content. They're also crucial to grabbing users' attention. Think about how to get your point across in as few words as possible. Use power phrases that convey a lot of meaning. For example, you can say, "go very fast," or you can say "quick!" Which conveys your message the best?

9. Include a CTA

Even though you're using slides, they should contain some call-to-action (CTA). This info tells users what to after they view the slide. Your CTA can be more information on the topic, a way to buy an item or a sign-up form for a list. Think about the goal of your landing page and how it ties into the slide. Then come up with an action that matches your intent.

Are Sliders Right for You?

You're the only one who can decide if sliders are an asset to your landing page. If you do choose to use a slider, make sure you have a purpose in mind. Utilize features users wants, like mobile responsiveness and cohesive design. Add a CTA to convert website traffic into long-term customers.

With a little practice, you can overcome the potential negatives and leave a positive impression on your audience.

Lexie Lu

Guest Blog Author: Lexie Lu

Lexie Lu is a freelance UX designer and blogger. She keeps up with the latest web design trends and always has a cup in close proximity. She writes on Design Roast and can be followed on Twitter @lexieludesigner.

Our Before & After Designs

Look at what a difference a website redesign makes!

sams1 old Before
sams1 new After

- Before and After- sams1.com