Mar 22, 2018
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.
In fact, according to Smashing Magazine, 52% of ecommerce websites utilize carousels on their home pages.
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:
- Most important content on first slide — this may seem like a no-brainer, but it’s pretty important if you use an auto-rotating slider. If your slides rotate, it can be hard to ensure your audience is truly seeing that first slide, and not landing on another. If people can access that same content on other parts of your website, it’s not a big deal if they miss the slide. But if it’s for a special promotion or deal, which is not mentioned elsewhere, it can be pretty detrimental to miss out on delivering them that message.
- Make sure the content in your sliders is repeated somewhere else on the website — this means that you should use your carousel real estate to highlight and reiterate features and information, and not rely on it as the sole path to important content.
- Use caution when using auto-rotating sliders — While studies have shown that manual carousels only get about a 1–2% click rate (according to Should I Use a Carousel?), auto-rotating sliders do get closer to 8–10% click rates (according to Erin Runyon). That being said, auto-rotate carousels must follow certain guidelines to be effective.
Don’t set them to rotate too quickly. If your slides rotate too quickly, your user will not have time to read them, and they will feel rushed. If your slides rotate too slowly, you get the opposite effect — your users lose patience. Nielsen Norman Group recommends 1 second per every 3 words as a guide for timing your slides. Smashing Magazine found in their testing that for the average slider with a large headline, 5–7 seconds is appropriate.
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.
