How to Successfully Use Carousels on Your Home Page

There are exceptions to the “never use a carousel” rule

Before I started grad school, I was working full time as a graphic designer for a natural retail company. I actually still work there as a part time designer, and my duties mostly align to being a digital designer. When I started, at the beginning of every month, I would design 5 different sliders for our home page carousel. Every week of the rest of the month, I would create up to 2 new sliders to keep our content fresh. Designing all of these sliders took up a significant amount of time out of my already full plate.

Shortly after starting graduate school in User Experience Design, my class visited an agency in Denver called Cactus. During the presentation they gave us, the number one thing that stood out to me was when they were showing us an example of a website redesign they were doing, and they pointed out how outdated it was that the older site used multiple carousel images. Naturally, I asked why — since my company was doing the same thing.

What I learned (and it makes perfect sense), is that most people rarely ever see all of your carousel images. You’re lucky if they stay on your home page long enough to scroll through all of them, but most people simply are landing on the home page for a few seconds and then quickly navigating away or scrolling down so the slider is out of the screen. That meant that most likely 3–4 of my weekly and monthly designs were never even seen by people. It felt like I was wasting my time designing things that weren’t relevant or seen by the end user.

I told my marketing team about this, and though we didn’t get rid of carousels entirely — we did cut it down to 2 new carousels a month and 1 new one a week. Which in my book, is a vast improvement (and much less work). Now there’s a good chance our audience does see and absorb the content of our slider images.

Since we did decide to stick with carousels, and we are in the middle of a web rebrand, I did want to know how to use those carousels effectively, however. So after some additional research, I’d like to share what I learned about using carousels effectively:

They should pause on hover. A user’s mouse movements usually relates to their focus, so if they hover over the slider, it usually means they want to read it. The slider should pause when this happens, to encourage the user’s interaction with it. If it doesn’t, users can end up on the wrong page which can lead to frustration, or they will be on a page of very little relevance to themselves, which may ultimately prevent conversion and increase bounce rate.

It should permanently stop rotating after any user interaction. A click from a user is a strong indicator of interest and intent — so if a user interacts with your slider at all, whether to click to the previous slide, or pause, it shows their focus is on the slider. When this happens, you want your carousel to stop rotating. Allowing auto-rotate to continue contradicts the user’s intent and prevents them from reading the information they are looking for.

4. Carousel controls have two main functions — Giving your user access to controls in the carousel is very important to whether or not your user will interact with them. Therefore, your carousel should offer two functions: you must indicate what slide they are currently on, and allow them to navigate back and forth through the slides. Showing your user where they are in relation to the number of slides encourages them to read through more content and provides them context.

This is traditionally shown by using a series of dots. You’ll see above that Gap placed their dots outside of the carousel — which is more effective. Placing the dots over colorful images creates visibility issues for users and it can often be hard for them to see that they are there. Smashing Magazine recommends detecting the brightness of the area in the image where the dots will appear, and then adjusting your dots’ colors accordingly.

4. Touch devices invalidates a lot of what was working on desktops — Smartphones and other touch screen devices have forced us to have very different requirements on the home screen than on desktop. The interactive methods we discussed above become irrelevant in regards to touch screen devices.

The inability to hover invalidates the use of auto-rotate. Auto rotation should never be used if the user does not have the means to be in hover state. Manual sliders would be more effective in this situation.

Your carousel should always support swipe gestures. Users intuitively use a swiping gesture and have come to expect it in gallery situations. You should still keep your controls, but they should support swipe gestures.

Make the carousel artwork responsive to the screen. It’s ok to reuse your desktop artwork for the carousel, but make sure the text and imagery is still legible on a mobile phone. In addition, slow loading imagery in mobile can be frustrating because on a desktop they can scan other information while they wait for the carousel to load, but on a mobile the carousel is likely the only imagery on the screen at first.

— —

These are the things you need to consider when trying to implement a carousel system on your home page. It can be difficult to accommodate this list — and not accommodating it poses a risk to the usability of your site for your user. However, the advice to avoid carousels entirely may not be the solution for your website, and when used properly in the ways described above, carousels can still be an effective tool for providing various content to your user upfront.

Related posts:

Mobile has become the leading way for financial institutions of all shapes and sizes to acquire new customers, with more than 57 percent of new customer accounts coming from this channel. Today’s…

My son is 6 months old, and since he’s been born, we keep getting sales materials from Gerber regarding their Whole Life insurance plan. It sounds great, but I am clueless about this kind of stuff…

This article is an extract from the RSA report Universal Basic Opportunity Fund: Pathways to Universal Basic Income In the UK, millions of people circle in and out of poverty; are exposed to insecure…