winfred.nadeau

Great software speaks for itself.

JS Carousels Are For Selling Depth, Not Breadth

originally written January 15, 2016

There’s a thousand jQuery implementations of them.

And a thousand ways for your users to pass right by them.

But why?

It goes against user tendencies to scan content.

By far, the most important case against a carousel is derived straight from user behavior patterns.

Eyeballs scan content. Don’t hide it from them.

So often will I see extremely important value-prop-communicating content stuffed away behind the second or third panels of a carousel component.

Because human eyes scan web documents. We have to maximize the surface area exposure to the core parts of the product’s value proposition, or else we leave the customer’s fate to chance.

Don’t actively hide the breadth of your offering from your users.

It perpetuates above-the-fold myopia.

Myopic managers will insist that a carousel keep 100% of value-prop touchpoints “above the fold”. The fold is long-dead on the web and you severely limit the possibilities for communicating value by aiming to keep everything above the fold. Besides, people just scroll past it anyway…

Especially with the take-off of mobile, people are thumbing past content faster than ever.

Don’t wait for a user to maybe flip a carousel or stick around long enough for its timer to flip the panel for you.

It’s non-trivial to build & nail the UX.

Are you sure yours is mobile-friendly? What does the animation look like when cycling back to the first panel? They aren’t trivial to build & maintain.

Sure, there’s a thousand of them out there as plugins, but each has its own trade-offs.

Unless exactly what I need is already built, I’d seriously question the business value of investing in a hand-rolled solution.

As with most product development decisions, it’s largely about managing trade-offs. Now that we are pretty much squared away with the draw-backs and when not to use one, there is a case where a carousel makes a lot of sense.

1. After the value-prop wording strategy has been validated.
2. About the time you're looking for the last 20% gains on a landing page.
3. When you have one dimension of the pitch to allow a user to go deeper on.

One classic example is a ‘testimonials’ or ‘social proof’ component where the first ‘pitch’ is more or less the same as the other panels in the carousel, but the weight of them all together provides more value than any one of them could alone.

But inevitably you could allow a user to ‘go deep’ on any single dimension of the value prop, such as showing other related products. (Amazon does this well.)

TL;DR

Don’t use a carousel to pitch each dimension of your value prop. Users literally won’t be able to see the breadth of your offering.

Do use a carousel to go deep on a single dimension of your value prop. Those who need to drill deeper are more likely to do just that instead of bouncing.