Photo of a fairground carousel

Carousel best practices

The carousel is one of the most common website widgets. They are often found front-and-centre on homepages displaying larger ‘feature’ content (usually image-heavy), or in smaller form, displaying featured products and the like.

Carousels may be everywhere, but they are most certainly not all equal. Here are some areas to focus on:

Rotation speed, and auto rotation

Many carousels are set to rotate automatically, which is not always the best choice. It’s also common to see overly-speedy rotations – creating a frantic UX. Constant movement in your peripheral vision every 4 seconds as you’re trying to read a block of text is annoying.

Both these things can be a problem, but the combination of automated rotation and overly-speedy rotations can be a killer death blow. Watch your rotation speed, and consider turning off auto-rotate altogether.

Quality of the content

Carousels give you the chance to showcase your site’s most important content, so don’t use cheesy stock photography! B2B sites are often main culprits here. Yes, a close-up photograph of a hairy-wrist-and-Rolex business handshake still looks bad, even if delivered via a fancy carousel.

Cheesy photo of a business handshake
NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!!!!!

Put some thought into what you’re trying to communicate, and be creative.

Descriptive info for items

Carousels usually display images, but most images benefit from some sort of labelling, to provide context and to remove ambiguity. For large ‘feature’ carousels, you’ll certainly need a header per-slide, and a short descriptive sentence can help, depending on the content. For smaller ‘product’ carousels, include the product title and price at a minimum.

Next / previous preview

There are a few ways to provide a preview. One way is to show short slivers of the previous / next items in the main content area. Another way is to provide text info on the actual ‘Next’ and ‘Previous’ buttons.

Paging controls / step indicators

The best approach to controls and indicators depend on how many items are in the carousel.

A slider is an effective control for smaller lists of items, removing the tedium of paging forward or back multiple times to find a previously-displayed item. Make sure the ‘mouse over’ target areas of the controls are large enough, to avoid a fiddly feel.

If buttons are used instead of a slider, let users jump multiple steps at a time if they want to – don’t condemn them to seven laborious clicks to get back to an item seven slides ago.

Homepage carousel on Steam. Slider paging controls are a dream to use. (Side note: Mmmmm... Rome Total War II. Time to dust off the Carthaginian War Elephants).

 

No way to go back!

This is rarely, but sometimes seen – particularly on Mobile. Yes I’m looking at you, LinkedIn.

LinkedIn homepage carousel on Mobile. Want to view that really interesting article which just got replaced? Too bad.

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.