
Should I use a carousel? - skinofstars
http://shouldiuseacarousel.com/
======
h2s
I've been waiting and hoping for the anti-carousel movement to gain cultural
traction among web developers for some time. The fact that this page has made
it to the front page of HN gives me hope that momentum will begin to increase
more rapidly now.

Some people seem to think carousels are some sort of design cheat code, making
it possible to include five pieces of content in the space of one. It's almost
the front-end equivalent of a TODO comment.

    
    
        // TODO: decide which of these things actually matters.
        // In the meantime, let's just show all five one-by-one
    

They don't even work for images. When a person wants to browse a collection of
images, they'll want to choose when to skip to the next image themselves.
That's why Facebook's image albums don't automatically move to the next image
after five seconds.

And those fucking carousel pagination "dots"... just when designers had begun
to catch on to the fact that numbered pagination links need to be big enough
to click easily, along came carousels to preserve the tradition of impossibly
small UI elements that are difficult to interact with.

Fuck carousels.

~~~
lifeformed
What you guys think about my carousel implementation? IMO, it is done
tastefully. I made this site for a friend of mine:
[http://indieviddy.com/](http://indieviddy.com/)

It's just an aesthetic presentation of non-essential content (random portfolio
items).

~~~
laumars
Looks pretty, but there's no (obvious) way to control it (so when items drop
off you can't get them back - that is, until they eventually loop back around
again).

There's a couple of other issues with your site as well - it seems fixed to a
very wide width (possibly due to the carousel?) which is not only quite
significantly wider than many laptop displays / non-maximized browsers would
reach. And you seem to have some character encoding issues as you're
apostrophes are being replaced with �.

On a personal note, some of the fonts are too big as well. Your site reads
more comfortable when I've zoomed out twice (which also fixes the width issue
as well).

Aside that, the landing page looks well polished enough (I didn't venture
further in).

    
    
        Mozilla/5.0 (X11; Linux x86_64; rv:22.0) Gecko/20100101 Firefox/22.0

~~~
lifeformed
Thanks for the feedback. The portfolio wasn't meant to be solely accessed
through the carousel - there's a dedicated page for it, and the carousel was
just a "look at all these things I've worked on" statement. I guess I didn't
clearly communicate that. You aren't really meant to navigate it, rather just
to look at it's breadth and click on one if it caught you eye.

The width is indeed because of the carousel - I meant for it to go of the
page. Is that causing weird scrolling problems? It's supposed to be
overflow-x: hidden. Is that causing weird tablet scrolling issues? You're not
supposed to be able to scroll horizontally.

I'll have to look into the character encoding issue - thanks for that report.

~~~
laumars
_> Thanks for the feedback. The portfolio wasn't meant to be solely accessed
through the carousel - there's a dedicated page for it, and the carousel was
just a "look at all these things I've worked on" statement. I guess I didn't
clearly communicate that. You aren't really meant to navigate it, rather just
to look at it's breadth and click on one if it caught you eye._

I realised that was more a showcase than for navigation. What I meant was that
if one did catch your eye just as it was falling off the page - you can't
bring it back. It can be argued as a pretty miner issue I'll grant you. But
that was my immediate thought when I saw stuff drop off the side :)

 _> The width is indeed because of the carousel - I meant for it to go of the
page. Is that causing weird scrolling problems? It's supposed to be
overflow-x: hidden. Is that causing weird tablet scrolling issues? You're not
supposed to be able to scroll horizontally._

This is was in Firefox on ArchLinux (laptop). I definitely have a scrollbar at
the bottom. Sorry mate :(

 _> I'll have to look into the character encoding issue - thanks for that
report._

I notice you don't have any meta tags for encodings. I wonder if that might be
causing the issue (I should stress - I'm not an expert on these matters):
[http://www.w3.org/TR/html5-diff/#character-
encoding](http://www.w3.org/TR/html5-diff/#character-encoding)

------
CKKim
I love the short timers on blocks of text too large to read properly before it
moves on. I kept clicking back and of course starting from the beginning of
the quote to remind myself of the flow and then SWOOSH it moved onto the next
one. I did that about half a dozen times and definitely felt my stress levels
rise. It makes the point very well!

~~~
Adirael
The point should be "don't use a bad carousel" then. It frustrated me that it
didn't paused when my mouse was over the slide and that the timing was badly
done (on purpose, I guess).

I've used them and my clients and the customers of those clients were happy
with them. I did not through paragraphs of text on them, just pretty images
and headlines (featured content).

~~~
potatolicious
> _" It frustrated me that it didn't paused when my mouse was over the slide"_

Even if you did this, your mobile users will still be mad, because they cannot
hover.

The question isn't if you or your clients are happy with them. The question is
if your _users_ are happy with them, and if they generate better business
results (conversion, clickthrough, whatever is relevant to you) than the
simpler, less Javascripty, less timing-based, less gotcha-with-the-mouse-hover
implementation.

I sincerely hope you A/B tested this.

~~~
roc
And present the A/B results to the client.

Though some have a habit of stubbornly ignoring any professional advice
against a feature they have an emotional attachment to, raw data can sometimes
snap them out of it.

------
thomasfl
They really seem to mean it:

    
    
        <!--
        Hold on now! If you're looking here to figure out how to use this carousel, STOP!
        Read this site carefully, then go smell some flowers or do something else instead.
    
        Every time you use a carousel, a kitten dies.
    
    	    /\_/\
    	____/ o o \
          /~____  =ø= /
         (______)__m_m)
    
        Think of the kittens!
        -->

~~~
psteinweber

      <title>Should I Use A Carousel?</title>
      <!--
      SPOILER ALERT: No!
      -->

------
danso
Is there another design pattern that is so universally appealing to clients
but reviled by developers than the carousel? I don't like them either but
honestly, it's such a great idea _theoretically_...we're all accustomed to the
pattern of a box with moving images, since at least e 1960s...and we also know
the frustration of cramming a variety of content into a screen size worth of
real estate...so why wouldn't a web carousel work?

Unlike other flawed design patterns, such as horizontal scrolling or a
reliance on mouseover popups, it's hard to assert, without referring to
"studies", why the carousel is just bad in a way that doesn't sound like I'm
only stating my hoity-toity developer preferences.

~~~
jcromartie
How about the "splash page"? Clients want to shove their brand in the user's
face, but users just want to get to the content/work already. 90% of the time
(doing iOS apps) I have to fight over ditching this anti-feature.

~~~
cloverich
Honest question - isn't the point of the splash page in iOS to present
something to the user while the content is loading. i.e. can't the Splash be
(one way or another) instantly loaded. In that regard, is it supposed to be
used to reduce the perceived load time of the app?

~~~
tsm
If you read the HIG, Apple wants devs to use the splash page to show a picture
of the app's UI elements--just with not text. All of Apple's apps do this--if
you open up the address book, for example, it'll show you a picture of an
empty UITableView and such. And once the app loads peoples' names will appear
in it.

They specifically recommend _against_ using your logo as a splash page, but
most people do it anyway.

~~~
potatolicious
There are good reasons to use a splash page rather than a "fake UI" image. For
single-purpose apps (say, Calculator, or Weather) the state of the UI post-
launch is easily predictable, so you can actually make a splash image that
lines up with what the user sees after.

For more complex apps, especially apps that maintain state, this becomes
impossible. You can make your splash image your "home" view controller, but if
the app is launched from a URL (a large use case for many apps) the user will
see an "empty UI" that is not what they're looking for, suddenly replaced by
UI they _are_ looking for.

Making matters a bit worse is that, at least up until iOS6, switching between
apps (not just a cold launch) can also show the splash image briefly - but
your app snapshot remains in memory, so you cannot guarantee the "empty UI" is
what your user actually ends up looking at.

Splash images suck, but for a lot of apps they are the least of several evils.

------
snowwrestler
The objection to a carousel is really an objection to the reasons that people
use carousels--to satisfy a few high-maintenance stakeholders, whether
internal or external. But satisfying high-value stakeholders is a real
business goal on a lot of websites. Carousels are a great way to manage that.

People also tend to overstate the negative impacts of carousels because they
have not internalized the patterns of search and social traffic. On the
websites I manage, 80-90% of visits do not start on the homepage! So only a
very small number of visitors are actually seeing the carousel at all.

Most homepages today are really just another landing for a particular subset
of your traffic. You'll get people who are totally unfamiliar with you, and
need an intro. Or you'll get people who are intimately familiar with you and
want to see if their pet thing is important to you--a good fit for a carousel.

Carousels are for promotion, not navigation, so task-oriented usability
studies are not really applicable. Online promotions deliberately reduce
usability in the interest of capturing attention.

------
dchest
Could we also stop using silly scrolling hacks like here
[http://www.apple.com/mac-pro/](http://www.apple.com/mac-pro/), please?
Thanks!

~~~
nly
It didn't even work for me. Scrolling, clicking... nothing causes anything to
change. The scrollbar in Chrome is missing.

~~~
14113
It's incredibly buggy for me - chrome on windows. Even when it allowed me to
scroll, it was slow and jerky. I suspect it's designed for the acceleration
based scrolling on mac touchpads however, so I'm not too surprised that the
scrollwheel on my mouse disagreed with it.

------
gordaco
I was expecting a flat out NO in a big font, but the page manages to make the
point much better.

~~~
dasil003
Yes I was pleasantly surprised as well.

To me the big NO meme is the epitome of the hipster dismissal—that is the
soulless critique of someone who does not create but rather defines themselves
by their impeccable taste cultivated with a constant barrage of acerbic
criticism punctuated by eye-rolling and justified by a pervasive nihilistic
sense of irony.

------
davidbanham
I spent a while getting mad that arrow keys didn't work and that the timers
were too short to read the text.

Then I got it.

~~~
jasonlotito
That they went out of their way to make it a bad experience?

I'm not going to disagree with their assessment, but I'm more annoyed by them.

------
lubomir
Is it intentional that the carousel switches so fast that reading the whole
text displayed is almost impossible? (It may be due to my not being native
English speaker, but it anyway...)

~~~
c-oreills
Yes, I think it's meant to illustrate the point that they're frustrating.

~~~
jasonlotito
Yeah, poorly implemented UI elements generally are. So, at best it's a joke,
but doesn't really try to solve anything.

It's ego stroking.

------
sspiff
After reading the Nielsen' article [1] this page links to, I was wondering:
this article keeps talking about "their user". Does that mean they tested this
on one person, and then passed those findings as universal, or did they
properly test this on dozens or hunderds of people?

I'm not contesting that carousels are bad (I'm not a web designer, but as a
user I ignore most, except the one on the front page of Steam [2], but that
may well be because I'm used to their biggest promotions and releases being
there.) I'm just concerned about the quality of the test the Nielsen people
did.

[1] [http://www.nngroup.com/articles/auto-
forwarding/](http://www.nngroup.com/articles/auto-forwarding/)

[2] [http://steampowered.com](http://steampowered.com)

~~~
dchest
NN/g are well-known for developing methodologies for usability testing. They
promote tests with only a few people, e.g. see
[http://www.nngroup.com/articles/why-you-only-need-to-test-
wi...](http://www.nngroup.com/articles/why-you-only-need-to-test-
with-5-users/)

~~~
sspiff
Thanks for the link! That explains their sample size. I don't necessarily
agree with using a single tester though, the numbers in this post speak only
of averages, which means you can still get a bad seed.

------
MattJ100
The worst things about carousels that I find are when 1) it's not obviously a
carousel and 2) when it auto-advances on a fixed timeout, and it's impossible
to stay on one 'page' and actually read it. Extremely frustrating.

~~~
pi18n
I'm always irritated that when they move beyond the last page, it scrolls in
reverse to the first page.

EDIT: This sarcastic carousel gets it right.

------
jmilloy
As others have mentioned scattered through the comments, of _course_ you
shouldn't use a carousel like this one. It's easy to make a feature so poorly
that it doesn't work. Show me the best carousel you can find, in the most
appropriate situation, and then explain why there was _still_ a better option.
That would be convincing.

It is funny, though.

~~~
pseut
Pretty sure that if you link to the best carousel _you_ can find, you'll find
plenty of people willing to go off on it.

------
philsalesses
I often find myself having to display a wildly unpredictable number of images
on a page. The image size ratio is about 3 height x 1 width and I can have
anywhere from 1-40 images.

Carousel's do suck, but what other options do I have?

~~~
tekmate
op uses textblocks with extremely fast autoscrolls to convince you of
something he believes in.

that doesn't mean there is no place for carousels anywhere.

take the new youtube profile pages for example.

the carousels are used to show unpredictable number of videos in specific
lines (recent videos, playlist) without littering the screen with videos, not
creating empty spaces where video numbers aren't divisible by 4 or 5
(depending on how many elements are supposed to be shown on one line)

this makes it much easier to scan several playlists on one page.

------
smnrchrds
IMHO, the only use case suitable for a carousel is showing eye-candy pictures.

~~~
vacri
Our company website's "who we are" page has a carousel. The centre person is
large and smaller ones off to the side, and you can scroll through them. You
get a little bio with the highlighted person (which is not necessarily related
to the things you wrote down for your bio...). The carousel works in that
context, but that's well off the home/production pages.

------
eterm
// HA HA! I HATE MY USERS!!! Especially the ones that aren't speed readers.

Teehee, a brilliant site.

~~~
smoyer
True evil genius would require that you put a blinking marquee inside your
carousel.

------
robfig
How about "Right tool for the job"?

I think using carousels for content that is non-essential but that the user
may want to see more of is fine. For example, photos -- some users are happy
with 1 photo, and some want to see them all.

This is a straw man that demonstrates hiding the main content behind a
carousel is bad.

------
toble
Carousels/sliders are fine so long as the content is mostly superficial and
they aren't huge (which is an annoying trend). I wouldn't use them for
anything important, I would use them for some nice pictures to make a homepage
less boring.

~~~
Millennium
This. Don't put text on a carousel slide unless it's the title of a book, and
even then, limit it to one capitalized word per second that the slide will be
shown.

(You can use other text of comparable length, but make sure that, if you were
to capitalize it like a book title, it would still fit the rule).

------
rschmitty
Isn't it kinda weird to quote yourself?

"It's kinda weird to quote yourself." -rschmitty

~~~
oinksoft
While that quote has been attributed to rschmitty, I believe it is apocryphal.

------
mbesto
Does anyone have an instance where a carousel has worked well (with A/B
testing or something else scientific to back it up)?

~~~
vermontdevil
There's this study of the carousel on Notre Dame's home page

[http://weedygarden.net/2013/01/carousel-
stats/](http://weedygarden.net/2013/01/carousel-stats/)

Seems head honchos of marketing depts love these things because it satisfies
inner politics of putting important stuff on the home page.

~~~
sbarre
^ This..

While the user experience can be lacking with a carousel sometimes, I've
definitely seen it used as an internal solution to deal with competing
stakeholder interests that fight over homepage real estate, and would
otherwise turn into a huge waste of time.

You can arm-chair argue about fixing the underlying problem instead, but
sometimes you have to be pragmatic and just placate and move on..

------
jim-greer
Rate my carousel:

[http://www.kongregate.com/](http://www.kongregate.com/)

In our case, the whole homepage is links to games. The real reason we use the
carousel has been mentioned in this thread - there is a lot of pressure to put
things in a featured position. The fact is, only the first few positions are
effective, particularly the first. But everything that goes in is initally in
the first position, then gets demoted.

One benefit of that is that if someone comes to the site, plays the first
game, then comes back 5 days later, they can expect to find the same game in
3rd or 4th position.

I'm open to other ideas, of course.

~~~
nollidge
I actually think they're OK for promotional purposes like this, although I'd
prefer to see the arrow buttons bigger to call attention to them, and then it
should _not_ auto-switch. Also the switching animation should be snappier -
faster, with no or very short accel/decel intervals.

~~~
jim-greer
Once you press an arrow, we don't auto-switch any more. Having a faster
animation is a good suggestion. I'd like to make the buttons bigger, but space
is at a premium there.

------
rjvin
My personal rule on carousels is that they're okay to use if you don't care if
your user only sees one of the slides. But if that's the case then you might
as well just not have a carousel in the first place.

------
lhnz
Why not use it just to show pretty pictures? This is nice.

~~~
icantthinkofone
Nobody's going to sit and watch your movie one frame at a time. People go
there for information, not static pictures. Making you wait to see things
serves no purpose.

~~~
lhnz
People go where for information?

If you are talking about e-commerce sites and think that a higher density of
information will win-out over a pretty site you need to start being more data-
driven.

------
progx
Iam not sure, but you should definitely use a faster Webserver ;-)

------
tankbot
> 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.

That is gold. Pure gold.

The suits will love the flashy new thing that shows the world their 'genius'.
Meanwhile you're just using it to balance a layout, knowing that users will
gloss over it 99 times out of 100.

------
jaegerpicker
This is more a case of "Should I use carousels poorly?" No!

They have there place, but when overused it's a poor use just like the the
"Web 2.0 drop shadow on everything icons" and the blink tag before it. People
see a element and decide that everything needs that element.

Carousel do work well for displaying a large/unknown number of images. Text
and autotimers are almost always a bad idea IMO.

------
bw2
I love that the carousel on this site also moves too fast for you to digest
what the hell it's saying, further enforcing its point.

------
bigd
Very neat example. But OP raises a point, and as we see there's the issue but
no proposed solution. What should be used instead?

~~~
weego
The point is wedging N-times content into 1 content space is a bad design and
interaction choice. There isn't a good solution to wedging too much content
into a small space, rather the content should be sympathetic to the medium in
the first place.

------
davesmylie
I'm probably not the typical carousel user (or the target user of this
article), but I'm using the bootstrap carousel on my site (learning2spell.com)
in what I think is a successful manner.

It's not on the landing page, but as part of a test. I have one question
presented at a time, and the user is moved on to the next question once a
question is answered. The carousel lets them easily see how many questions are
in the test, how many they have answered and have left to answer, as well as
moving back and forth in the test.

I think like most things it not inherently bad in itself - its how you use it
that matters.

------
semiprivate
I agree they can be annoying, but teaching that all and every use of carousels
is devastating to your business is careless and wrong. All of these very
profitable companies use carousels and probably laugh at the short-sightedness
of this sentiment.

    
    
        http://www.amazon.com/  
        http://store.apple.com/us/browse/home/shop_mac
        http://www.rakuten.com/
        http://www.ebay.com/electronics
        https://www.youtube.com/
        http://www.microsoft.com/en-us/default.aspx
        etc..

~~~
inthewoods
^^^ This. Making absolute statements about what works and doesn't work in
marketing ignores, imho, an important point: each audience is a different
audience. So what might work for some will not work for others.

Example: My company tested landing pages using all the best practice rules out
there on the web - outcome: lower conversion.

What the lesson should be is that testing is incredibly important - and not
prescribing something that may or may not work for a given audience.

------
andyhmltn
This page has one of my biggest gripes with poorly implemented carousels: Stop
moving the darn thing when I've clicked to navigate! I'm trying to read
something and the thing is spinning all over the place.

------
tootie
“Carousels are effective at being able to tell people in Marketing/Senior
Management that their latest idea is on the Home Page."

Precisely correct. This is why they exist and why they are so useful at
resolving disputes.

------
gboone42
Another item to add to the list is: you can never make the thing slow enough
for your average visitor to actually read the thing. Maybe this was in there,
I'm not sure because each slide whizzed by too fast.

------
gprasanth
Anyone notice the comment (view source) on the bottom in red? Whoa! How?

~~~
shadeless
It's because of the "\--" inside the "<\-- -->" comment block. (only in
firefox though)

------
GruppeC956
I looked at this article expecting something that was related to the
[http://en.wikipedia.org/wiki/Kodak_Carousel](http://en.wikipedia.org/wiki/Kodak_Carousel).

So I clicked on the link, didn't see a Kodak Carousel to my surprise, and
started reading the text. I got annoyed very quickly ("why is this moving so
fast? Did I click on anything?"). And just when I was ready to say "screw
this" I got that my very behavior had just exactly proven what Jared's point
was.

Touché!

------
martin-adams
So if not a carousel, an accordion, or maybe a wizard?

~~~
btipling
You only have a few short seconds to keep a user's attention. So optimally
probably not to have anything that requires clicking or scrolling or is out of
view or hard to read.

------
rcruzeiro
I have already forwarded this to some people I know...

------
gadders
Worse than carousels - web pages that play videos or adverts with audio
attached automatically.

I thought we got away from that 10 years ago.

------
ck2
I'm guilty of clicking the carousel on Newegg a few times and I've actually
caught some news from carousels.

But still if they all vanished in the night I would not complain.

Are "slideshows" considered the same or something different from carousels?

------
yawgmoth
In the corporate world, a demo isn't a demo until someone does something with
a grid. For landing pages, is a demo not a demo until someone steps through a
carousel?

------
jriordan
At least THIS carousel doesn't break the back button.

------
thinker
The YC landing page has had an image carousel for a while. I don't think it
has hurt them but then again that page hasn't been redesigned in years

------
joebeetee
I was expecting a site like
[http://www.arechairslikefacebook.com/](http://www.arechairslikefacebook.com/)

------
marssaxman
I never thought of that mechanism as a thing which had a name. It was just
"another stupid page-flipping site".

~~~
nnq
The other (more) popular name for it is "slider", the word Americans also use
for hamburgers.

...even the name for these things is a complete fail :)

------
swamp40
For sure, don't use a fast moving carousel with multiple sentences on each
slide and no way to pause.

------
pallandt
FINALLY! ahem...excuse the enthusiasm.

------
tomphoolery
So much time wasted putting essential content into a carousel…and making it
work.

------
welcomebrand
I only read the first slide.

------
jotade
I just want to point out that buying a domain for this seems like overkill.

------
uxwtf
Carousel is a bad practice.

------
rjuyal
I read all slides. With no more than 12 clicks on those dots :likeAboss:

------
drcoopster
The carousel rotates too fast for me to read the longer quotes.

~~~
deadairspace
I think that might have been intentional :)

------
mercurial
I'll be the one to come out and say I don't mind carousels, as long as it's
not overdone (don't give me 50 different animations on the same page, thanks).

------
murtali
haha, the carousel is moving to the next slide too fast to read fully -_-'

------
zunky
Think of the kittens! lol.

------
supercoder
I honestly found the presentation somewhat compelling.

