icon/dark/fileicon/dark/foldericon/dark/folde-openicon/dark/hashtagicon/dark/line-graphicon/dark/listicon/dark/localicon/dark/lock

We have previously written about home page design tips for optimized conversions. But today's topic of discussion is based on a particular home page web design element which is often used on websites but also criticized for poor usability. This element is none other than sliding carousels found on the top most prominent location of a home page.

Shown below is an example taken from modcloth.com that has three automatically moving carousels.

Modcloth.com homepage using sliding carousel

you may realize the first time you look at the moving carousels that you are not able to immediately interpret the messages each sliding banner seems to convey. It takes more than one or two times to concentrate and understand what each carousel message is. This trend used to be adopted by big business sites and was blindly followed by their smaller counterparts on a large scale. However, situations are changing and you will find more and more sites moving away from sliding carousels and replacing them with static banners, by both big and small businesses.

There are still some websites that use it, let's learn why.

Why Do Websites Prefer Sliding Carousels?

There are many websites such as e-commerce sites, web design or photography sites or even B2B sites that use sliding carousels to accommodate multiple offers on their homepage. Some of the reasons why webmasters prefer using sliding carousels are as follows:

1. Multiple Products And Services

Websites usually dealing with multiple products and services find they need to use sliding carousels. They want to have information about different products, services or discounts displayed all at once, above-the-fold on the most important page of their website.

2. Satisfy Internal Stakeholders

There are internal departments that may not know much about conversion or usability but would insist on having important news or details of an event or an offer on the sliding carousels. This gives them the satisfaction of featuring their business offering on the most important page of the website.

3. Allow Multiple Call-to-Action

Websites offering multiple products and services might have more than one important call-to-action (CTA). They accommodate all these within changing carousels.

Take for example Zappos.com that has three call-to-actions on their homepage sliding carousel.

An example of an inconspicuous call to action.

Shop Flats, Shop Jeans, Shop Yoga are the three CTAs used in the three-image rotating carousel. For someone who is new to Zappos or new to online shopping or someone who is from a non-English speaking country, may have to look through these rotating slides several times to get what it is trying to tell them. Also, the CTA button looks just like plain text rather an clickable button.

Zappos goes a step further and also uses part of the carousel real estate to offer static CTA towards the right. While having the content on static mode is a good idea, having so many CTAs with different CTA labels may confuse the user. A good way to do this would be to make the label the same for CTA and make it look like a button. The label could be called 'Shop Now'.

Why Are Sliding Carousels Considered Bad For Usability And Conversions?

According to usability expert Jakob Nielsen, sliding carousels have a disastrous effect on usability and conversions. It is even a scientific fact that the human eye reacts to movement which means even if what the site visitor was looking for is under the sliding carousels, the visitor is easily distracted and may lose focus.

Read more about it in this post that lists two main reasons why sliding carousels don't work and science is one of them.

The analogy of a rotating table top may explain this better.

Automatic rotating table top

Say, you have just moved into a neighborhood and you have invited a handful of neighbors to dinner for your house warming party. You do not know them that well and so you have put out a feast of food that is generally popular with people in your area. You have placed the food on top of an automatic rotating table top. The neighbors who do not like sushi skip the dish when it passes by and wait for pork chops to make its turn towards them. Sure, these are guests sitting in leisure who will not complain to have to wait for their favorite food, but are your website visitors that patient?

The sliding carousels are somewhat like the rotating table top, but the effects are far worse than having to wait for your favorite dish to arrive.

The following are a few quick reasons why automatically moving carousels may harm your site's usability and conversions.

1. Divides User Focus

Different image sliders usually focus on different sections of the site or announce discounts and offers irrelevant to the buyer. The buyer loses focus on his/her original intention to get into the site and gets easily distracted.

2. Frustration

Site visitors may get frustrated by these moving carousels and move onto the next available website in the same niche. This is also true for image carousels that have videos on auto-play. Having absolutely no control over what is being viewed may not be a preferable selling point for some users.

3. Limited Attention Span

Site visitors usually have a limited attention span of only a few seconds. They want the information they're looking for, real fast. If you bundle up all your business USP's onto multiple image sliders your site visitor's limited attention span is divided into even smaller parts eventually leading to nowhere. Too much information takes a lot longer to process and with their limited attention span you can only hope they stay on your site and browse for more content and not leave.

4. Too Fast

In most usability studies it is found that users ignore the moving carousels and scroll down to find further information or navigate the internal pages of the site or use search options. This is usually because the content on the carousels change too fast.

Also, for those visitors from non-English speaking countries with lower literacy rates, it may take a longer time to process what each carousel message conveys. Sometimes, even if you do know English, a moving carousel is never slow enough for a reader to understand the message in full.

5. Inconspicuous CTA

Moving slider images may have CTAs that go unnoticed. Even if the CTA is noticed, a moving carousel does not give enough time for the user to decide to click the CTA.

6. Unnecessary On Mobiles

In cases where you do not have a separate mobile website having a sliding carousel in a responsive site may be bad for your mobile users. Carousels take unnecessary space above-the-fold on your mobile website.

Take Zappos mobile website for example:

Carousels used on mobile websites are ineffective

Alternatives To Sliding Carousels:

Now let's list a few tips to rectify each of these drawbacks with alternatives and better solutions to automatic sliding image carousels:

1. Links To Landing Pages For Different User Types

Webmasters may not be able to display one information that works for every visitor type and hence feel obligated to use a automatic sliding carousel. The good news is that you have a viable alternative to a image slider in this case.

Take a look at Aflac.com, for example.

An example of how carousels help to cater for different audiences visiting a landing page

Aflac home page design may not be the best of all designs but it does cater to the interests of all user types in a way that it doesn't divide the focus of a potential visitor. It offers an option below the carousel that takes the four user types of their site to respective landing pages and narrow down their focus further.

The site also offers a static carousel which is yet another good example of sites that absolutely have to have the carousels on page.

2. User Controlled Carousels

As an alternative to sliding carousels some usability experts suggest giving the control to users, as shown in the Aflac example above. These are carousels that show you the first slider image by default and users can click the circles or squares or arrows on either sides of the image to browse through the rest of the carousels.

But there is a limitation here as well. What if users are unaware of the fact that there are multiple carousels in the first place? For such situations, nyandcompany.com is an inspiring example

An example of carousels allowing users to have partial control

They give a quick scan through all the carousels automatically as soon as the site loads and then stops at the first image leaving the control in the hands of the site visitor.

3. Use No More Than Two Automatic Sliding Carousels

If you do have multiple offers, decide two of the most important offers and display two automatic sliding carousels. You must fight the urge to accommodate many offers into a single page. Two automatic sliding carousels would not divide your users attention as much as five automatic sliding carousels would.

The content on the carousels should be limited to a few words and make the prominent message bold with big fonts. Use images to divert users attention to the important message such as eyes or fingers pointing towards it.

The rest of the information that you initially eliminated from your carousels can be displayed below them as static images. Chances are user activity would be more on the static images or text than the moving ones above.

4. Have a Static CTA

Moving carousels are considered practically useless by usability experts. However, you could take advantage of its above-the-fold placement on a website by adding a static call-to-action to it. Take for example royalmail.com that not only adds a CTA to its carousels but also a static CTA that leads to its various tools, which is useful to a site visitor. Moreover, the site also gives the user control over the movement of the carousel.

Static call to action on user controlled homepage carousel

These were the possible alternatives to having carousels on your home page. The objective of having carousels must always be user-oriented. If you already have sliding carousels or are planning to implement them anyway, get a A/B test done and see how well it works for your users.

What do you think of sliding carousels on websites? Are you in favor of it or against it?