9 ms·

Should I use a carousel?

483 points by skinofstars 13y ago

jaegerpicker 13y ago
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.
jmilloy 13y ago
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.
- sukuriant 13y ago
  Screen readers and other accessibility tools
- pseut 13y ago
  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.
murtali 13y ago
haha, the carousel is moving to the next slide too fast to read fully -_-'
MattJ100 13y ago
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.
- kalms 13y ago
  There's a place for carousels in some user scenarios, but there's never a place for a poor implementation of one. ;)
- pi18n 13y ago
  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.
- corresation 13y ago
  Metacritics seems to be perfectly timed to always advance exactly as I'm clicking on an item, leading to it navigating to something different entirely. Always meant to look if there's some troll code in there.
lubomir 13y ago
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...)
- crntaylor 13y ago
  Yes, it's intentional. That's part of the 'joke'.
- c-oreills 13y ago
  Yes, I think it's meant to illustrate the point that they're frustrating.
  - jasonlotito 13y ago
    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.
- rcruzeiro 13y ago
  I was about to ask the same thing.
- lubomir 13y ago
  Well, apparently it is: auto: { enabled: true, interval: 3000 // HA HA! I HATE MY USERS!!! Especially the ones that aren't speed readers. }
- Millennium 13y ago
  I'm pretty sure it's intentional. Even most native speakers would have trouble with some of those last few slides: the ones with lots of text.
  - btilly 13y ago
    I was puzzled about the fast switching comment. This was the comment that made me go back and re-read the pae. My reading speed is several times average. I had honestly not noticed that it would be difficult for most people. A good lesson to me on the importance of usability testing.
rcruzeiro 13y ago
I have already forwarded this to some people I know...
gordaco 13y ago
I was expecting a flat out NO in a big font, but the page manages to make the point much better.
- dasil003 13y ago
  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.
CKKim 13y ago
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!
- Dogamondo 13y ago
  I did the same, frustratingly (especially while reading the longer quotes) until I realised the carousel pauses if you hover your mouse over the slide you're currently reading.
- Adirael 13y ago
  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).
  - barrkel 13y ago
    I use adblock to eliminate all elements on the page that animate. I can't read blocks of text with animation running in the corner of my eye - it's too distracting. I run flashblock for similar reasons. Happens most often on newspaper and magazine websites. Some sites provide a pause button to kill the distraction, but many don't.
  - ewolf 13y ago
    Text in a carousel is a no-go; pausing when hovering is a neat idea, but not possible on touch screens, nor easily discoverable by the average user. Even if the timing is long enough, I still feel stressed out by the fact that I know the text could be dragged out of my sight any time, which stresses me out so much that I can't concentrate at all on the content. The second terrible mistake is using page indicator dots (which do a good job of indicating the page) for navigation, let alone using them as the only means of navigation! When you take into account these two things, a carousel can actually become comfortable to use and may no longer enrage its users. But that's still a far cry from being better than showing the content in a regular list: > I've used them and my clients and the customers of those clients were happy with them. What do you mean with "happy"? Did the customers actually understand how to use the carousel, did they discover its content, did they click on it? Not being annoying does not suffice to qualify as useful.
smnrchrds 13y ago
IMHO, the only use case suitable for a carousel is showing eye-candy pictures.
- vacri 13y ago
  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.
bigd 13y ago
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 13y ago
  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.
gprasanth 13y ago
Anyone notice the comment (view source) on the bottom in red? Whoa! How?
- gprasanth 13y ago
  It's a facepalm!
- shadeless 13y ago
  It's because of the "--" inside the "<-- -->" comment block. (only in firefox though)
- deleted 13y ago
  [deleted]
eterm 13y ago
// HA HA! I HATE MY USERS!!! Especially the ones that aren't speed readers. Teehee, a brilliant site.
- smoyer 13y ago
  True evil genius would require that you put a blinking marquee inside your carousel.
rightnow 13y ago
Nice looking carousel! I will have that for my webpage.
welcomebrand 13y ago
I only read the first slide.
lhnz 13y ago
Why not use it just to show pretty pictures? This is nice.
- the_ed 13y ago
  In the end I figure most people use it in exactly that way: it just presents a nice (big) header picture. (Based on actual content) And less in some idle hope of getting CTR's. But: that would mean you could probably do without a carousel as well. (Think about just the header picture of your latest article, the most popular one or just a random one)
- icantthinkofone 13y ago
  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 13y ago
    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.
martin-adams 13y ago
So if not a carousel, an accordion, or maybe a wizard?
- btipling 13y ago
  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.
progx 13y ago
Iam not sure, but you should definitely use a faster Webserver ;-)
rschmitty 13y ago
Isn't it kinda weird to quote yourself? "It's kinda weird to quote yourself." -rschmitty
- oinksoft 13y ago
  While that quote has been attributed to rschmitty, I believe it is apocryphal.
sspiff 13y ago
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
- deleted 13y ago
  [deleted]
- dchest 13y ago
  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-with-5-users/ http://www.nngroup.com/articles/why-you-only-need-to-test-wi...
  - sspiff 13y ago
    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.
h2s 13y ago
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.
- coherentpony 13y ago
  Just FYI, I loved reading this comment.
- jd 13y ago
  With the exception of image gallery carousels for mobile devices. Those can work great.
  - lysol 13y ago
    They do, except when it's a desktop-targeted image carousel with no support for touch events other than simple presses.
- at-fates-hands 13y ago
  I would also add the inconsistency in how they are coded. Some allow pausing on the slide, others do not. Sometimes you can click the pagination buttons to get to the next slide, sometimes you can't. Some have arrows for moving to the next slide, some won't have pagination, and others are just a timed slide show - which is by far the worst. It's a user's nightmare anytime you're presented with a carousels since you never know what functionality, if any you're going to get. I'm thinking this is why so many people simply discard them entirely now. They've become the most useless web dressing ever.
mbesto 13y ago
Does anyone have an instance where a carousel has worked well (with A/B testing or something else scientific to back it up)?
- jrabone 13y ago
  When my Amazon colleagues first introduced a carousel implementation as an optional widget about 5 years ago, I believe they were wildly successful in A/B testing for a period of time; then we went through every page having about 6 of the damned things, then they basically disappeared... With enough users, sometimes A/B tests can degrade to novelty detectors.
- vermontdevil 13y ago
  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 13y ago
    ^ 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..
- snowwrestler 13y ago
  You can only answer this question if you clearly know what success looks like for your site. Most folks will default to web stats like click-through rate on the carousel elements, but that is not always the right metric! Not everything on a site is intended to be high-volume navigation. I work in the nonprofit space and we sometimes need to show that a certain topic is "important" to us, to help deliver on a fundraising or policy goal. Carousels are great for this, even though I know in advance that few people will click through. This success would be measured by directly checking with the desired stakeholders. Another use for carousels is if you want your homepage to communicate an emotional tone--as opposed to enabling a task. A carousel of big, vibrant images can deliver an emotional message almost as well as a short video, but with a much lighter implementation. This success would have to be measured via user surveys or focus groups.
deleted 13y ago
[deleted]
thomasfl 13y ago
They really seem to mean it: 
- psteinweber 13y ago
  <title>Should I Use A Carousel?</title>
supercoder 13y ago
I honestly found the presentation somewhat compelling.
davidbanham 13y ago
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 13y ago
  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.
philsalesses 13y ago
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 13y ago
  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.
dchest 13y ago
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 13y ago
  It didn't even work for me. Scrolling, clicking... nothing causes anything to change. The scrollbar in Chrome is missing.
  - 14113 13y ago
    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.
  - epochwolf 13y ago
    Apple.com does not work well on chrome. It hasn't for years.
- skeletonjelly 13y ago
  Only when Apple stops doing it I'm guessing. ducks I'm actually quite surprised they went with this. Maybe it tested well on touch surfaces...
- purephase 13y ago
  To be honest, that's one of the worst implementations I've seen of that effect. Personally, I'm a fan of it when it's well done. Here's one example: https://www.airbnb.com/annual/ https://www.airbnb.com/annual/
  - H3g3m0n 13y ago
    imho that irritates me more than the mac one since it's information and the mac one is a product review so the scrolling kind of gives you a way to get a feel for the product. Although it does have a working scroll bar which the mac one lack. On any of these how the hell am I supposed to navigate to a specific topic? or link any one to a specific point. The mac one does have tiny dots on the side. I think many people wouldn't even notice them. The entire scroll hack just seems like a gimmicky, non-intuitive, time consuming alternative to using a slider to forward though a animation/video or some kind of navigation buttons with an animated transition. Or just play a regular movie/animation.
danso 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      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 13y ago
        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.
pallandt 13y ago
FINALLY! ahem...excuse the enthusiasm.
uxwtf 13y ago
Carousel is a bad practice.
toble 13y ago
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 13y ago
  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).
jriordan 13y ago
At least THIS carousel doesn't break the back button.
mercurial 13y ago
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).
yawgmoth 13y ago
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?
gboone42 13y ago
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.
jotade 13y ago
I just want to point out that buying a domain for this seems like overkill.
snowwrestler 13y ago
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.
- deleted 13y ago
  [deleted]
ck2 13y ago
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?
tootie 13y ago
“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.
rjvin 13y ago
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.
andyhmltn 13y ago
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.
bw2 13y ago
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.
semiprivate 13y ago
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 13y ago
  ^^^ 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.
gadders 13y ago
Worse than carousels - web pages that play videos or adverts with audio attached automatically. I thought we got away from that 10 years ago.
joebeetee 13y ago
I was expecting a site like http://www.arechairslikefacebook.com/ http://www.arechairslikefacebook.com/
tankbot 13y ago
> 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.
tomphoolery 13y ago
So much time wasted putting essential content into a carousel…and making it work.
robfig 13y ago
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.
thinker 13y ago
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
drcoopster 13y ago
The carousel rotates too fast for me to read the longer quotes.
- deadairspace 13y ago
  I think that might have been intentional :)
swamp40 13y ago
For sure, don't use a fast moving carousel with multiple sentences on each slide and no way to pause.
marssaxman 13y ago
I never thought of that mechanism as a thing which had a name. It was just "another stupid page-flipping site".
- nnq 13y ago
  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 :)
jim-greer 13y ago
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 13y ago
  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 13y ago
    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.
- roryokane 13y ago
  That reminds me that https://www.fimfiction.net/ https://www.fimfiction.net/ used to have a carousel in the header for featured stories, and it worked like you describe. Featured stories arrived at the left side and were gradually pushed to the right. It was kind of cool that the carousel started at a random featured story when I navigated to a new page – it increased the change that I’d find a good story, without making me read through all of the story descriptions at once. And I was successfully taught how to find old stories by moving farther right in the carousel. Now, FIMFiction.net moved the carousel from the header to the home page, and made it much bigger. I hadn’t really thought about whether I liked that change – I don’t see featured stories as often, but I don’t have to scroll down as much to see the content of each page.
rjuyal 13y ago
I read all slides. With no more than 12 clicks on those dots :likeAboss:
zunky 13y ago
Think of the kittens! lol.
davesmylie 13y ago
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.
GruppeC956 13y ago
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é!
drivebyacct2 13y ago
My favorite part: This carousel suffers from the same failure-to-reset-timer (timeout, in this case)

483 points by skinofstars 13y ago

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.

jmilloy 13y ago

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.

sukuriant 13y ago
Screen readers and other accessibility tools
pseut 13y ago
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.

murtali 13y ago

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

MattJ100 13y ago

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.

kalms 13y ago
There's a place for carousels in some user scenarios, but there's never a place for a poor implementation of one. ;)
pi18n 13y ago
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.
corresation 13y ago
Metacritics seems to be perfectly timed to always advance exactly as I'm clicking on an item, leading to it navigating to something different entirely. Always meant to look if there's some troll code in there.

lubomir 13y ago

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

crntaylor 13y ago
Yes, it's intentional. That's part of the 'joke'.
c-oreills 13y ago
Yes, I think it's meant to illustrate the point that they're frustrating.
- jasonlotito 13y ago
  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.
rcruzeiro 13y ago
I was about to ask the same thing.
lubomir 13y ago
Well, apparently it is: auto: { enabled: true, interval: 3000 // HA HA! I HATE MY USERS!!! Especially the ones that aren't speed readers. }
Millennium 13y ago
I'm pretty sure it's intentional. Even most native speakers would have trouble with some of those last few slides: the ones with lots of text.
- btilly 13y ago
  I was puzzled about the fast switching comment. This was the comment that made me go back and re-read the pae. My reading speed is several times average. I had honestly not noticed that it would be difficult for most people. A good lesson to me on the importance of usability testing.

rcruzeiro 13y ago

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

gordaco 13y ago

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

dasil003 13y ago
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.

CKKim 13y ago

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!

Dogamondo 13y ago
I did the same, frustratingly (especially while reading the longer quotes) until I realised the carousel pauses if you hover your mouse over the slide you're currently reading.
Adirael 13y ago
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).
- barrkel 13y ago
  I use adblock to eliminate all elements on the page that animate. I can't read blocks of text with animation running in the corner of my eye - it's too distracting. I run flashblock for similar reasons. Happens most often on newspaper and magazine websites. Some sites provide a pause button to kill the distraction, but many don't.
- ewolf 13y ago
  Text in a carousel is a no-go; pausing when hovering is a neat idea, but not possible on touch screens, nor easily discoverable by the average user. Even if the timing is long enough, I still feel stressed out by the fact that I know the text could be dragged out of my sight any time, which stresses me out so much that I can't concentrate at all on the content. The second terrible mistake is using page indicator dots (which do a good job of indicating the page) for navigation, let alone using them as the only means of navigation! When you take into account these two things, a carousel can actually become comfortable to use and may no longer enrage its users. But that's still a far cry from being better than showing the content in a regular list: > I've used them and my clients and the customers of those clients were happy with them. What do you mean with "happy"? Did the customers actually understand how to use the carousel, did they discover its content, did they click on it? Not being annoying does not suffice to qualify as useful.

smnrchrds 13y ago

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

vacri 13y ago
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.

bigd 13y ago

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 13y ago
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.

gprasanth 13y ago

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

gprasanth 13y ago
It's a facepalm!
shadeless 13y ago
It's because of the "--" inside the "<-- -->" comment block. (only in firefox though)
deleted 13y ago
[deleted]

eterm 13y ago

// HA HA! I HATE MY USERS!!! Especially the ones that aren't speed readers. Teehee, a brilliant site.

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

rightnow 13y ago

Nice looking carousel! I will have that for my webpage.

welcomebrand 13y ago

I only read the first slide.

lhnz 13y ago

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

the_ed 13y ago
In the end I figure most people use it in exactly that way: it just presents a nice (big) header picture. (Based on actual content) And less in some idle hope of getting CTR's. But: that would mean you could probably do without a carousel as well. (Think about just the header picture of your latest article, the most popular one or just a random one)
icantthinkofone 13y ago
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 13y ago
  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.

martin-adams 13y ago

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

btipling 13y ago
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.

progx 13y ago

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

rschmitty 13y ago

Isn't it kinda weird to quote yourself? "It's kinda weird to quote yourself." -rschmitty

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

sspiff 13y ago

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

deleted 13y ago
[deleted]
dchest 13y ago
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-with-5-users/ http://www.nngroup.com/articles/why-you-only-need-to-test-wi...
- sspiff 13y ago
  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.

h2s 13y ago

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.

coherentpony 13y ago
Just FYI, I loved reading this comment.
jd 13y ago
With the exception of image gallery carousels for mobile devices. Those can work great.
- lysol 13y ago
  They do, except when it's a desktop-targeted image carousel with no support for touch events other than simple presses.
at-fates-hands 13y ago
I would also add the inconsistency in how they are coded. Some allow pausing on the slide, others do not. Sometimes you can click the pagination buttons to get to the next slide, sometimes you can't. Some have arrows for moving to the next slide, some won't have pagination, and others are just a timed slide show - which is by far the worst. It's a user's nightmare anytime you're presented with a carousels since you never know what functionality, if any you're going to get. I'm thinking this is why so many people simply discard them entirely now. They've become the most useless web dressing ever.

mbesto 13y ago

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

jrabone 13y ago
When my Amazon colleagues first introduced a carousel implementation as an optional widget about 5 years ago, I believe they were wildly successful in A/B testing for a period of time; then we went through every page having about 6 of the damned things, then they basically disappeared... With enough users, sometimes A/B tests can degrade to novelty detectors.
vermontdevil 13y ago
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 13y ago
  ^ 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..
snowwrestler 13y ago
You can only answer this question if you clearly know what success looks like for your site. Most folks will default to web stats like click-through rate on the carousel elements, but that is not always the right metric! Not everything on a site is intended to be high-volume navigation. I work in the nonprofit space and we sometimes need to show that a certain topic is "important" to us, to help deliver on a fundraising or policy goal. Carousels are great for this, even though I know in advance that few people will click through. This success would be measured by directly checking with the desired stakeholders. Another use for carousels is if you want your homepage to communicate an emotional tone--as opposed to enabling a task. A carousel of big, vibrant images can deliver an emotional message almost as well as a short video, but with a much lighter implementation. This success would have to be measured via user surveys or focus groups.

deleted 13y ago

[deleted]

thomasfl 13y ago

They really seem to mean it:

psteinweber 13y ago
<title>Should I Use A Carousel?</title>

supercoder 13y ago

I honestly found the presentation somewhat compelling.

davidbanham 13y ago

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 13y ago
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.

philsalesses 13y ago

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 13y ago
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.

dchest 13y ago

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 13y ago
It didn't even work for me. Scrolling, clicking... nothing causes anything to change. The scrollbar in Chrome is missing.
- 14113 13y ago
  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.
- epochwolf 13y ago
  Apple.com does not work well on chrome. It hasn't for years.
skeletonjelly 13y ago
Only when Apple stops doing it I'm guessing. ducks I'm actually quite surprised they went with this. Maybe it tested well on touch surfaces...
purephase 13y ago
To be honest, that's one of the worst implementations I've seen of that effect. Personally, I'm a fan of it when it's well done. Here's one example: https://www.airbnb.com/annual/ https://www.airbnb.com/annual/
- H3g3m0n 13y ago
  imho that irritates me more than the mac one since it's information and the mac one is a product review so the scrolling kind of gives you a way to get a feel for the product. Although it does have a working scroll bar which the mac one lack. On any of these how the hell am I supposed to navigate to a specific topic? or link any one to a specific point. The mac one does have tiny dots on the side. I think many people wouldn't even notice them. The entire scroll hack just seems like a gimmicky, non-intuitive, time consuming alternative to using a slider to forward though a animation/video or some kind of navigation buttons with an animated transition. Or just play a regular movie/animation.

danso 13y ago

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 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      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.

pallandt 13y ago

FINALLY! ahem...excuse the enthusiasm.

uxwtf 13y ago

Carousel is a bad practice.

toble 13y ago

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 13y ago
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).

jriordan 13y ago

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

mercurial 13y ago

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

yawgmoth 13y ago

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?

gboone42 13y ago

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.

jotade 13y ago

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

snowwrestler 13y ago

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.

deleted 13y ago
[deleted]

ck2 13y ago

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?

tootie 13y ago

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

rjvin 13y ago

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.

andyhmltn 13y ago

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.

bw2 13y ago

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.

semiprivate 13y ago

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 13y ago
^^^ 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.

gadders 13y ago

Worse than carousels - web pages that play videos or adverts with audio attached automatically. I thought we got away from that 10 years ago.

joebeetee 13y ago

I was expecting a site like http://www.arechairslikefacebook.com/ http://www.arechairslikefacebook.com/

tankbot 13y ago

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

tomphoolery 13y ago

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

robfig 13y ago

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.

thinker 13y ago

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

drcoopster 13y ago

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

deadairspace 13y ago
I think that might have been intentional :)

swamp40 13y ago

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

marssaxman 13y ago

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

nnq 13y ago
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 :)

jim-greer 13y ago

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 13y ago
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 13y ago
  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.
roryokane 13y ago
That reminds me that https://www.fimfiction.net/ https://www.fimfiction.net/ used to have a carousel in the header for featured stories, and it worked like you describe. Featured stories arrived at the left side and were gradually pushed to the right. It was kind of cool that the carousel started at a random featured story when I navigated to a new page – it increased the change that I’d find a good story, without making me read through all of the story descriptions at once. And I was successfully taught how to find old stories by moving farther right in the carousel. Now, FIMFiction.net moved the carousel from the header to the home page, and made it much bigger. I hadn’t really thought about whether I liked that change – I don’t see featured stories as often, but I don’t have to scroll down as much to see the content of each page.

rjuyal 13y ago

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

zunky 13y ago

Think of the kittens! lol.

davesmylie 13y ago

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.

GruppeC956 13y ago

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é!

drivebyacct2 13y ago

My favorite part: This carousel suffers from the same failure-to-reset-timer (timeout, in this case)