Carousels come in handy when you need to promote certain products on your homepage. They save a lot of space as they allow you to fit more items in a relatively small area that can be scrolled horizontally.
To get the most out of your homepage carousels, you’ll need to design them with a focus on user experience.
Amazon homepage carousels
This is how Amazon implements product carousels (on their homepage) on desktop.
- Clicking a Previous or Next button scrolls by several products, not just one
- The scrolling bar makes it much easier to scan quickly through the products
- A common shortcut on desktop for horizontal scrolling is shift+mousewheel, but that is not supported
- In contrast, Amazon does NOT have any carousels on mobile, which I thought was quite interesting. The sections are fixed.
When designing your carousels…
Group related products together in separate rows of carousels
You can have multiple rows of carousels on your homepage (about three rows can fit in the desktop viewport). Therefore, products that target a specific subset of buyers (say gym rats) should be separated from those targeted at an unrelated group (say wine moms).
Keep controls clearly visible
Controls for scrolling through the slides should be clearly visible, preferably arrows. The controls should also be within the image itself or to the right and left of it at worst. Don’t have controls below or above the carousel.
Have five items or fewer
Five is about the ideal number of items a person can see and still remember. If you cram too many (say 20) products into your carousel, customers will have forgotten the first items by the time they get to the last. And that’s assuming they sit through the whole thing.
Keep text legible
Carousel slides do you no good if the text is hard to read. Use a large easily readable font on the slides.
If you have auto rotating carousels:
Optimize the rotation speed
If your carousels rotate too fast, customers won’t have enough time to grasp what they’re communicating. On the other hand, slowly rotating carousels are bound to be confused for stationary images and therefore fail to do their job. Five to ten seconds per slide is a generally good rule of thumb.
Pause autorotation on hover and upon any user interaction
People often hover the mouse pointer over an object in order to see additional information. When this happens, the carousel shouldn’t keep rotating. Autorotation should also be stopped whenever a customer interacts with the carousel.