
Should I Use a Carousel? - stepstop
http://shouldiuseacarousel.com/
======
geddy
Clever move to make the slide transition timeout juuust a tad too fast to
read, further driving home the point that carousels are a shit way to present
information.

~~~
ReactiveJelly
Every time I do UI stuff, I tell my boss that timers are a code smell.

They're either too long, and the user gets bored or confused, or they're too
short and the program bucks the user off and runs on without them.

"Skip" buttons don't work. If you can have a Skip button, just make it a Next
button and kill the timer.

~~~
aspyct
I mostly agree with this. I've seen one valid and helpful usage of timers
though: in Waze. Some things start automatically after some time, like
navigation after selecting and address, or dismissing a notification. The time
remaining is indicated on the corresponding button itself in a progress bar
fashion.

~~~
Xelbair
i would absolutely HATE if navigation started itself after i selected the
address after some time.

I'm forgetful when it comes to short term memory, and it would annoy me
deeply.

~~~
squiggleblaz
It's surely better than Google's Maps approach. They make Maps crash while
you're driving on the freeway, so you say "Okay Google, start directions home"
and it says "Would you like me to start directions home? We know you're
driving at bone crushing speeds on a road you've never been on in a country
you're not entirely familiar with. Just look at your phone screen and find the
button and crash into the side of the freeway and don't get home. It's not
like you need to keep your attention on the road while driving; we are quite
happy if you crash and die. But timers and explicit audio instructions are
just such poor usability."

~~~
btashton
If you tell it to _navigate_ home it will actually pull up the directions and
the go button will have a autostart timer so you don't touch anything. Ask for
directions and you will have to start touching the screen.

------
illyquilly
Here's my counter argument to that site. Big eCommerce sites will test and
optimize every pixel and if something doesn't work, they'll replace it with
something better. Now, go find a list of the top ten eCommerce sites and I'll
bet at least 50% have a carousel on the home page.

Google's first search result gave me Amazon, eBay, Walmart Target, Etsy, Best
Buy, Macys, The Home Depot,Wish and Craigslist. Only four don't have a
carousel: Target,Etsy, Macys and Craigslist.

Lot's of cherry picking. The 1% nd.edu stat ignores the 8% clicks a similar
carousel was getting on a different ND web property. For giggles, here's the
home page at the time :
[https://web.archive.org/web/20121214022552/www.nd.edu/](https://web.archive.org/web/20121214022552/www.nd.edu/)

\- The Neilson Norman Group sample size was ONE.

\- If you read the all of the Weilder Fuller comment, he says "Now, I’ll
preface the remarks below by saying that there are some excellent uses for a
rotating gallery. "

\- [https://www.accessibilityoz.com/](https://www.accessibilityoz.com/) \-
accessibility specialists have a carousel on their home page.

The Adam Fellows quote isn't from the page that's linked. It's from
[https://ux.stackexchange.com/questions/10312/are-
carousels-e...](https://ux.stackexchange.com/questions/10312/are-carousels-
effective) where he also says "“Of course in some situations a carousel is
exactly the right means to deliver content and so we need to try and
importantly test every situation.”

~~~
Sohcahtoa82
> Big eCommerce sites will test and optimize every pixel and if something
> doesn't work, they'll replace it with something better.

Define "better".

A carousel might cause some users to buy more, but others to get annoyed and
frustrated.

~~~
illyquilly
"better" is whatever will positively impact the goal of the website or page.

A carousel could cause some users to but less and annoy even more users. It
comes down to testing, but I've never seen any clear cut data saying that as
soon as you put a carousel on a page it will always have a negative impact.

------
franga2000
Yes, but carousels are rarely added because they provide a good UX. They are
added because motion draws attention and attention sells. Let's say you have 3
big sales going on on your site: do you put them next to each other so
visitors can see all three right away? If so, congratulations, you are a moral
person. But marketing people aren't (/s) and they know that if the visitor
sees the word SALE just as it slides away in the carousel, they'll want to
know more. But now they're already staring at the next slide, so they read
that one, then the next, then they're finally back at the first one. Even if
they don't go through the whole thing and just click back to see the first
one, they have now spent far more time looking at your ad than if they were
only idly scanning the site.

AliExpress is notorious for this, with even the "you might also like" items on
a deliberately too fast slider, so something can catch your eye, but then you
already have to interact with it to get it back before you've even had the
chance to think about it. And once you get someone to interact with your ad,
the chances of them clicking it and possibly buying it go up by a lot.

~~~
gwd
So really, carousels are most effective as a a dark pattern; you shouldn't be
using them unless you are trying to be evil^H^H^H^H manipulative, and know how
to use them properly for that purpose.

------
antibland
Carousels are the type of UI pattern that is only okay if you _ask_ for it.
Amazon is a good example of a carousel done right. If I want to see the full-
sized images which are part of a customer's product review, I click on the
thumbnail representing these images, with the expectation that some larger,
more obvious version of the images will be made available. Once a carousel
appears in an overlay, it's not disturbing or annoying at all. It's there
because I asked for it.

~~~
ctidd
If you're not familiar with the term, this image viewer pattern is generally
called a lightbox rather than a carousel. I generally don't see the two used
interchangeably, but there's similarity to the prev/next controls, of course.

~~~
petepete
Doesn't a lightbox make the rest of the page dark? Amazon doesn't do this, the
carousel doesn't take up any more space than the original image.

~~~
wonderlg
The core difference is that a “carousel” as intended here generally contains
text, and that’s specifically why it’s a bad pattern.

“Scroll-through” photo albums are a fair way to display photos, however I
still personally prefer a gallery for photos instead, exactly like it works on
your phone for example (gallery + “lightbox”)

------
Wowfunhappy
I work at a design agency. Most of my coworkers have seen this site before,
and generally agree with it. But we still propose designs with carousels to
clients.

A lot of our clients are obsessed with what content is "above the fold". Never
mind that "that fold" doesn't really exist on the web given different screen
sizes, and never mind that users are more likely to scroll down than click
slides. Every executive simply must have their all-important tidbit at the top
of the page.

A carousel is a way to solve this perceived problem. As long as no one
actually needs to see the content anyway, they at least aren't actively
detrimental to the overall user experience.

~~~
SOLAR_FIELDS
If you click through the website, the 8th slide of the carousel actually
states this exact point:

 _Carousels are effective at being able to tell people in Marketing /Senior
Management that their latest idea is on the home page. Use them to put content
users will ignore on your home page_

~~~
jonbennett18
I’ve found carousels are a great way to hide bad content that senior
stakeholders insist have to be given prominence.

------
jalgos_eminator
I love these snarky novelty sites making fun of bad UI trends. As soon as the
carousel started going too fast I almost rage quit the tab. Well done.

~~~
koheripbal
I felt that detracted from the argument since it was really just demonstrating
that a badly implemented carousel is bad - which isn't a strong argument
against a well designed carousel.

------
superasn
I've often found Carousels do a good job when there is repetitive information,

E.g. testimonials - you got one big testimonials but you also have a dozen
more and you don't want to fill up your page with just that.. so you use a
carousel.

~~~
dredmorbius
Repetitive ... useless ... information.

How much does "My daughter loved the gift. Sue K., Topeka" add to your
impression of an offer or product?

~~~
squiggleblaz
It's non trivial. If you heard someone liked it, you're more likely to buy it.

~~~
jmiserez
If it's an actual review on a trustworthy 3rd party site, yes. Otherwise no,
as most of these testimonials are just completely fake.

------
dpcan
I had a client that said they wanted one because it made them look like they
did all kinds of stuff. They didn’t care if it was used. It was all an
illusion.

It needed to portray:

“We are big enough for you to consider doing business with us and to buy our
services”

~~~
apocalyptic0n3
As a developer at an agency, this is far more common than you think. Most of
the sites we build are for small businesses that only have one or two
products/services. By putting a few carousels with stock images and some
meaningless language or testimonials, it makes it look (or at least makes them
feel like it looks) like they do a lot more and are a lot more important and
bigger than they are actually are. Half of our job is to make the client seem
bigger and better than they really are and carousels are one of the ways that
designers and clients like to do that.

------
arn
Facebook and Instagram use carousels for their Stories feature. Google uses
carousels for News stories and product results. Are they the exception and if
so, why? Or are they not aware of the user data?

~~~
jfoster
A few things to note, at least about the Instagram stories:

1\. It's primarily mobile, by far.

2\. The story is the only thing on the screen and the entire experience is
focused on it.

3\. You can hold down the story to prevent it from continuing onto the next
one for the duration of your hold.

~~~
jmiserez
Wow, first time I've heard of 3. Not a very discoverable interaction.

------
hardwaregeek
Another design issue that I see are landing pages for sites that don't need
landing pages. My university's course selection site has a landing page
with...yep a carousel. Why? None of the information on said landing page is
useful. I want to see my schedule and courses. That's it.

------
rchaud
A few cherry-picked quotes doesn't really tell me anything, since the value of
a carousel depends on a number of factors:

\- how is the carousel being used? To display similar products, to show latest
blog posts?

\- are your users primarily on desktop or mobile?

\- have you A/B tested carousels to see if users interact with them more, less
or the same?

I see carousels on sites like Ikea and Best Buy and IMO it's a useful way to
get a quick glimpse of what categories of products are currently on sale.

------
LeoPanthera
> "Carousels are this decade's <blink> tag."

The person who wrote that has never heard of <marquee>.

------
gitgud
It's the classic _false economy_ you're saving vertical space, but nobody
wants to scroll your carousels, or wait for it to transition. It's always
easier to just scroll down the page, especially on mobile.

Apps like Instagram have a standard carousel for photo albums and people use
them and can trust the functionality.

But most websites have varying implementations of carousels, with weird
functionality (autoplay, transitions, no-swipe, randomized). Users get
confused by each implementation and eventually just ignore them...

~~~
pure-awesome
"Apps like Instagram have a standard carousel for photo albums"

Yeah, but that only applies to users who are used to Instagram. It's
definitely not an INTUITIVE feature.

I've had friends and family link me to Instagram posts, and though I've
learned now, for a long time they'd have to explicitly mention there were
additional pictures in the post, or I'd miss them.

(I don't know if it's different in the app, but certainly in the webpage those
little dots at the bottom are non-obvious to a first-time user.)

~~~
squiggleblaz
I think it's more of a mobile-first design. It would be super weird to see it
and do it with a mouse, but it's a common enough ui on mobile apps that I
think a lot of people will be accustomed to it. But Instagram also has a
feature where the second time you see a post that you haven't scrolled
through, you see the second photo. This might server as a discoverability aid.

It is 153% the case that mobile user experience is almost entirely happened
during the epoch when helping your user understand how to use the app rates
second, and keeping some hidden features for expert users rates highly (the
feeling of being a power user since you know some features others don't -
making the user feel a little bit loyal to your app).

So if it's not perfectly discoverable, that's probable something the designers
are happy with.

------
ComputerGuru
They should collect stats on how many clicked the previous slide link
immediately after the slide changed (slide changes too fast).

------
hristov
Carousels are good for things users should be vaguely aware of but are not
likely to click on. For example if you have a company that sells a widget, you
can have the important menu about buying a widget on the top and below it a
carousel of recent news with pictures.

These news can be about your participation in widget related conferences,
about you passing obtaining environmental goals, about some R&D project
promising some better widget some time in the future, about community
involvement of your company etc.

Most customers will not click on those stories and they are not intended to.
But they will get a changing site with changing pictures and will peripherally
learn that you are a forward thinking socially involved company that is an R&D
leader, participates in the community, etc.

~~~
khamba
I agree with what you are saying.

> Carousels are good for things users should be vaguely aware of but are not
> likely to click on

Carousels should be used to set the _tone_ of the webpage, and not be meant
for content to be clicked on.

For example, all major fashion e-commerce website dedicate large amount of
homepage screen-estate to a carousel showing their major brands, current
discounts, etc. The user can still use the search or menu functionality to
look for what they want (and I think majority do), but now the tone of the
business has been set.

------
edoceo
A moment to call out the laggy, janky carousel on Zillow mobile interface.
Ugh. Opening images to scrolly mode is smoother but that left/right flick on
their carousel is even bumpy on Pixel/Chrome

------
rahimnathwani
I expected this to be a flow chart like this:

[http://www.toothpastefordinner.com/index.php?date=020605](http://www.toothpastefordinner.com/index.php?date=020605)

------
clairity
worked great for me... with javascript turned off. just scrolled down the page
and read all the content at my leisure.

the only glitch was the sticky footer that fixed itself in the middle of the
page instead of at the bottom of the viewport.

so my takeaway is, use good markup for carousels, in case users have js turned
off, and sticky footers should use css (position: sticky), not js on top of
position: absolute.

(like others, i think image carousels with galleries are fine)

~~~
onion2k
I made an example of a 3D carousel using just CSS a couple of days ago -
[https://codepen.io/onion2k/full/xxZYBVj](https://codepen.io/onion2k/full/xxZYBVj)

It's not a serious suggestion for a UI component but it does demonstrate that
a proper carousel doesn't require JS to work.

~~~
clairity
that's awesome! i really like these css-only explorations and hope they
continue to drive html/css advances. lots of interactions and controls we use
js for can, and should, be subsumed by html/css instead.

------
rustybolt
> “Carousels are effective at being able to tell people in Marketing/Senior
> Management that their latest idea is on the Home Page. Use them to put
> content that users will ignore on your Home Page. Or, if you prefer, don’t
> use them. Ever.” > > lee duddell

This tells me I should absolutely use carousels. Just don't expect people to
read the text in there.

------
arc-in-space
And yet:
[https://web.archive.org/web/20190913224546/https:/twitter.co...](https://web.archive.org/web/20190913224546/https:/twitter.com/garybernhardt/status/1172610099136716800)

(I'm unsure why Gary removed these tweets, maybe something did change his mind
on this.)

~~~
chrismorgan
I can guess why he removed them: it’s a _really_ bad example in support of
carousels.

The carousel on that page is one of the very few clickable things, and
literally _the only thing on the entire page_ that doesn’t either take you to
obviously-unrelated content (by which I mean a different site, or the blog or
privacy links in the footer), or start the program (log in, sign up, get
started, start now)—that is, if you want to know more about what this thing
actually is, the carousel is your only hope, if you don’t want to sign up or
start the program yet, and I expect that to be true for most visitors.

The measurement is made even more bad by the fact that the carousel inherently
encourages a large number of clicks: there are three slides, but because
there’s no indication of that (no progress indicator, and no transitions) I
honestly expect the typical person that interacts with that carousel to click
the arrow at least eight times: maybe once and a half through, then “wait, was
that it? Did I waste my interaction time on _that_?” and a bit more fiddling
to confirm that yes, that actually is all that’s there. So in that heat map,
divide the carousel arrow clicks by at least eight to get a more realistic
picture of things. (The heat map reveals other problems with the site, too,
things that look like they might be links and people click on them, but
they’re not.)

The carousel on that page is _terrible_ and should be abolished with
prejudice. Just flatten the slides, lay them out vertically! It’d be
substantially superior, make the concept much easier to grasp.

------
axegon_
I've always hated carousels with a passion. Even if they provide some sort of
valuable information, by the time your attention is focused on it, it usually
jumps to the next "slide" or whatever they are called. So yes, you should not.
And I really don't understand why so many people are obsessed with them.

------
dawnerd
At least if you’re going to (or forced to) at least use a good well tested
library. I’ve written more than I want to count myself over the years and
they’re just such a pain to get right.

[https://swiperjs.com/](https://swiperjs.com/) Is probably one of the best out
there.

------
flixic
From what I can remember, Apple.com never had a carousel.

Microsoft.com has two on the homepage right now.

~~~
pwign
Apple has always had one until 2017.

[https://web.archive.org/web/20170228232206/http://www.apple....](https://web.archive.org/web/20170228232206/http://www.apple.com/)

------
durnygbur
Any UI, accessibility, or common sense reasons are irrelevant.

It's the UX, managers, marketing people asking for more clicks, ad
impressions, user engagement... and you will make a carousel for them each
time they'll request.

------
artsyca
I feel the same way about radar charts.

------
ulisesrmzroche
I had a music video app which was a carousel with YouTube embeds

The use cases for a carousel are fairly limited

------
slmjkdbtl
Cannot agree more. Another general tip I want to share to people who are bad
at design:

* { transition: 0; }

------
fermienrico
We need one for excessive padding. STOP please. Have a completely separate
style sheet for mobile devices where you can use padding for larger touch
areas.

Use tables to organize information. Make it dense.

When you think you stick 24px padding and it “looks” right to you? Now cut
that by 75% to just 6px.

~~~
systemvoltage
And don't forget hamburger menus, even for desktop sizes.

------
clarle
I'd argue this is different on mobile compared to the web.

It's pretty common in mobile onboarding flows to use a carousel like UI. It's
much easier to swipe on a carousel-like UI and it's enough of a common design
pattern there that people are used to it.

~~~
pnine
I agree in most cases. I think they should be avoided in hero scenarios but a
small flickable carousel to show product photos or something below the fold is
reasonable.

------
mattoxic
Manila Folder Boeing 777 guy. Please take note.

------
airstrike
Would love to know these stats adjusted for age. I would expect anyone younger
than 35 to know how to interact with a carousel. And some content like a
resort's home page with a gallery of images / things to do isn't bad for a
carousel. CMV

~~~
Shared404
Anecdotal but... I am considerably younger then 35, know how to interact with
it, and hated this page with a passion.

I do think that sometimes a carousel can be fine for images, under the
condition that it is only for images, and that those images can be found in a
gallery that is easy to find.

~~~
arn
This page was designed to be intentionally frustrating.

~~~
Shared404
Indeed. I should probably have made it clear that I find these incredibly
frustrating almost any time I find them in the wild as well. Sorry for being
unclear.

