Why Sliders Are Not Good for your website

Sliders are not good for your website. At the time of this writing which is middle of 2016, sliders are the most widely used element on website home pages. There are hundreds of slider plugins for WordPress, which are being downloaded by the millions.

How Widespread Are Sliders?

It seems that sliders are EVERYWHERE these days. If you’re in the market for a new website, carousels are unavoidable. Here’s a simple illustration of what I mean:

sliders

This is a gallery of the above the fold space on a number of randomly selected websites.

Out of these examples, only 3 do not have a slider on the homepage.

While it is possible to find a website that doesn’t feature a huge slider at the top, it is certainly a lot easier to find sites with a veritable carousel abundance.

 

Sliders: The Proof is in the Pudding

Whatever you think about how sliders look if the slider doesn’t help move your visitors towards your conversion goal.

There’s a a lot of stats that prove sliders having a negative impact on conversion rates. Here are some highlights:

Here’s what some experts in the fields of conversion optimisation have to say about carousels:

“Almost all the testing I’ve managed has proven content delivered via carousels to be missed by users. We’ve witnessed the banner blindness concept in full effect.” – Adam Fellows

“It gets ignored. It’s distracting. It’s confusing. It squeezes out relevant content. It slows down your site. It causes global warming.” – James-Royal Lawson

“Rotating banners are absolutely evil and should be removed immediately.” – Tim Ash

Actions Really Do Speak Louder Than Words

It is very interesting to see who does and doesn’t use sliders. Look at websites run by businesses who are known for a lot of testing and optimisation. For example:

Crowdvert

All these websites are run by people who live and breath testing and conversion optimisation – and none of them have a single slider.

Do Sliders Really Suck?

If you still don’t believe us then dig deeper into this topic, we encourage you to read some of the posts I have linked. They include studies and ideas about what makes sliders such a bad UI element.

One of the biggest issues I have with sliders is easily demonstrated below like this one:

Look at the example and read each slide. The text that appears try to understand what’s being offered for each slide. As soon as you do this, you’ll notice a major problem.

With any one of these slides, a couple of things apply: you’re either interested in what’s on the slide or you aren’t.

If you are interested, then the content is gone and replaced by some other slide before you can read it.

If you aren’t interested, then you’ll probably scroll down before the second slide even appears. When was the last time you stared at a website for 10 seconds, even though it contained nothing that caught your attention?

The main culprit that makes sliders and carousels suck is the auto forwarding or automatic rotation.

Hero to the Rescue?

So if the auto-forwarding that make a carousel so bad, the solution simply is to make a slider not move?

It’s better, but still not ideal. An example of this is a currently very widespread web design element: the “hero image”.

Here’s an example of a couple:

This kind of layout is dubbed a “watermark homepage”. Its defining feature is a large image with some text (and maybe a button).

Though visually striking, is it it effective?. There are two major flaws I see with most of these types of layouts:

  1. The image is generic. Because of the layout, the image almost has to be generic. The problem is that unless the image really adds meaning to the page, it’s just a waste of real estate and bandwith. And if the image is highly relevant and specific, then it probably shouldn’t be in the background.
  2. The image takes up all of the available above-the-fold space. This pushes all your important content too far down the page and it also means that some of your visitors won’t realise that they can actually scroll down to find out more.

But here are some good examples:

The image tells a story that is relevant to the product, there’s enough text above the fold to compel further reading and it’s obvious that more content is below the fold.

Hero images can be effective if you avoid those generic ones, give the users a clear signal to scroll and don’t use short bad headlines.

What’s the Alternative to a Slider?

If rotating sliders are so bad, and the hero layout fails too, then what is the best solution to a large slider?

Well, there is no one-size-fits-all solution and that’s why doing your own research is vital.

Here are three types of layouts you can use as inspiration for your website.

1) The Big Headline

To convey the value to your offer, text is more powerful than images. Text loads faster also and gets recognised and read faster by your visitors.

This means, the first and most important thing you need on any page on your website is an un-missable headline.

The headline should communicate your unique selling proposition, and it should arouse curiosity that can only be satisfied by reading further.

The example below from Braintree Payments shows that a big headline is sometimes the only thing you need.

2) Side-by-Side

This layout consists of two columns. One column is for a image that represents your product, the other contains a headline and usually text and a button.

This layout is a great example to communicate what your business is about, it does not use up too much space. The great thing about this layout is that it puts a lot of focus on the image without letting it overwhelm the text portion.

Examples of Side-by-Side:

The homepage shows a large screenshot that shows off their software, next to call to action headline.

3) Click Play!

Video is an effective way to grab your customers attention straight away. A video should not replace your main headline or your call to action, but it can be the star on the page.

You can communicate a lot more with video rather than just an image.

Examples of Video Homepages:

4) Figure of what works Best for Your Message

Let’s stop, and take a step back and talk about sliders.

What’s the purpose of your’e page?

It needs to communicate the right message to the right audience.

If your page fails to do this, you’ll lose the majority of visitors quickly.

The bottom line is that you should do whatever is best for your audience.

Talk to us at DesignLab to see how we can help your website work better for your customers!

 

How to create a High Converting Landing Page

How do you create a high converting landing page that drives maximum conversion rates in Google?

What’s a landing page?

A landing page is what your customers view after clicking through Google’s search engine.

These web pages are designed for one purpose: to convert a visitor.

Whether that conversion goal is to get people to either buy a product, or to book an appointment, it can be done by strategically arranging elements on your landing page.

What’s the difference between a landing page and all the other pages on my website?

Most businesses have an “About us” page, a variation of a “What we offer” or “Services” page, and a web page dedicated to your customers. These pages, help make your website — the purpose of which is to teach your customers more about you’re business.

Landing pages work different. They’re designed specifically to convert visitors into leads, which means they need to be persuasive than any of the other pages on your website.

The people who land on these pages don’t want to learn your vision, or meet your team. They’re there because they’ve been enticed by your promotion and want to see what you’re offering.

So how do we go about creating a landing page layout that will boost the chances your visitors convert?

The best landing page layout, above the fold:

If you want to make a good impression, place your important elements above the fold. They will help you quickly convey the benefit of your offer, and show prospects what they need to do to claim it.

Your logo

If you don’t include your logo somewhere on the top of your landing page, your’e visitors may wonder who are you. It’s important to practice consistent branding, so that customers know they haven’t been redirected to some spammy site.

Like most sites, this company has placed their logo in the upper-left corner

Landing Page Logo

You need to do the same, because the upper left corner is where most of your customers will look to find you.

No navigation

A landing page is a little bit like a well-designed trap. Your customers should be able to get in, but not leave, unless they buy.

That means no navigation menu across the top for visitors to escape with. The only three ways they should be able to get off your landing page is:

  • By buying
  • Or by hitting the “x” in the corner of their screen to exit the browser window
  • Or by clicking the back button

A strong call to action

Your call to action should be the first thing your customers read when your page loads. Use big, bold text to draw attention, and communicate your unique selling proposition in a way that explains how it will benefit them.

Here’s is a great example from Five Four Club:

Call to Action headlines

Their unique selling proposition is that they deliver your clothing to your doorstep. So how does that benefit the customer?

They don’t have to go actually go shopping.

When thinking of your headline, think about the problem your customers face, and communicate how your business is going to solve it for them.

Without a great call-to-action, your landing page is could fail.

Remember, the entire purpose of a landing page is to get your customers to take action, and this is how it happens. Your visitors have to click a button to convert.

If you have a contact form, position your Call To Action button just below.

Engaging media

More and more these days we process the world visually through gestures and facial expressions. We’ve evolved to prefer images to text when processing information.

The quickest and most efficient way to get information across is to show it.

Hero shot helps your customers imagine their lives after they have bought your product; infographics like charts and graphs help them better conceptualise the information; videos and case studies help them understand your product in a easy way.

Engaging Media

A detailed form

You may or may not require your customrers to hand over information about themselves in exchange for what you’re business is offering.

If so, you will need a lead capture form, like the one below from Salesforce:

lead capture form

These contain a combination of fields, allowing customers to submit more information about themselves, but forces them to at least give you the bare minimum you need.

Include a lot of required fields and you’ll get more information from your customers who may convert. More information allows you to deliver marketing messages, on top of giving you a greater insight to your target audience.

But, sometimes the more you ask, the likely your customers are to fill out the form properly. They may not have the time to finish a form that is too long.

On the flip side, the less you ask, the more likely it is your customers may finish filling out the form, which means the more leads you may generate. But, they won’t be as much as the leads you generate from a longer form.

Benefit-oriented copy

“What’s in it for me?” That’s what your customers want to know when they land on your page. Don’t waste time getting to the point by fluffing around. The more direct, the better.

Something else to keep in mind when writing your landing page copy is that people don’t like to read block text. Big text blocks were the last thing people want to look at.

Make it simple and small.

Minimal footer

There should only be a couple of ways off your landing page: the back button, the little “x” in the corner of the browser window, and your call to action button.

When it comes to creating a footer, it shouldn’t include a sitemap, or links to your social media sites. The only thing you should have in your footer is:

  • Terms & conditions
  • Privacy information
  • Copyright information

Here’s an example of a footer.

simple Footer

Remember that any link that isn’t your CTA button simply acts as another way for your customers to escape your page without buying.

Contact information

If your landing page has done the job, your customers will be able to decide whether or not to buy your offer.

But it’s not always easy to anticipate all your customers questions. Sometimes they want to talk to a person, and a contact information lets them do it.

Add yours to your footer, or even to your header.

contact info