Should I Use a Carousel? | Hacker News Reader

Should I Use a Carousel?

shouldiuseacarousel.com

290 pointsstepstop94 comments

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.

Agree, it took me a second to realize what he was doing, then I did smile. Well played.

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.

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.

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.

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

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.

Timers can be useful, for example ensuring a slight (500ms) delay when a user expects an interaction to be non-instant (like saving or transmitting data). I wrote about this case here: https://medium.com/@graycoding/detect-slow-and-fast-asynchro...

It's not an axiom. We can see plenty of successful realizations of carousell pattern for touch screens. Most famous is Instagram stories

Are those carousels? I can’t easily go back to the beginning after watching a user stories. A carousel automatically does this.

I'm not sure if that was a design decision or just a natural artifact of using a carousel. They have a natural uncanny ability to rotate precisely when you don't want them to.

I find it weirdly infuriating. It feels like the whatever I just tried to focus on is being pulled away by someone being annoying.

That, in combination with the inevitable gimme-your-email and some other gate between me and whatever I tried to view is usually enough to make me leave the site and wish I could tag sites in my browser as "do not activate links to".

That's a great idea for an extension.

From the source:

  auto: {
      enabled: true,
      interval: 3000
      // HA HA! I HATE MY USERS!!! Especially the ones that aren't speed readers.
  }

Top-notch trolling, 10/10 haha

But yeah, carousels moving too fast is almost always an issue when I actually want to read the contents. It's one of those design patterns that just makes me want to close the website.

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.

I don’t think there’s such a thing as a well-implemented carousel. Maybe in theory you could have one, if browsers could do eye-tracking, such that you could stop the carousel’s rotation as soon as the user looks at it.

But without that, users are always going to land their eyes on the carousel and start reading an item in it some random interval after the carousel’s rotation timer last fired. (As, remember, users like to look away from the browser while pages load, and it takes them a random amount of time to look back.) Then, with this random "misalignment" of engagement times, the carousel content will inevitably transition out from under them.

IMHO, this is exactly why users choose to not engage with content in carousels (according to the studies the author cited.) They know they’re going to not get to fully read whatever it is the carousel currently says; and they don’t know for sure how to stop the carousel from progressing; so they don’t bother with it.

If there's no such thing as a well-implemented carousel, then the demonstration shouldn't have needed to use an obviously nerf'd carousel.

Its easiest to point out an issue by first pushing it to the extreme, and then re-evaluating whether the middle-ground does not exhibit the flaw (in lighter fashion)

And clicking the next button just before the timeout makes it skip the 2nd slide.

Too slow is also a thing. They always seem to scroll the second you try to click on them. There's a neuroscience phenomenon whereby the mind fills in for the motion of the eyes, I forget what it's called but it was on HN a little while ago about how crazy the human brain really is.

Does that drive the point home or undermine it?

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/

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

Sure, but they all use it where they <could have> divided the content with white-space. You could argue that the carousel is just a divider here - that there's no intention of user engaging with it and that it just exists to divide the content.

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

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

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.

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.

Yeah. Though the OP is still doing an important job: giving people ammo to call out these faux UX justifications in internal meetings.

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.

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.

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.

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

The author seems to be talking about the carousals on the top of the homepage. Those thumbnails and photo preview is everywhere, from FB to any photo viewer app you find in the market.

As others have pointed out, that's called a light box, not a carousel. And while light boxes are not in principle bad UI, they are often poorly implemented.

On many pages, clicking a thumbnail opens a light box that adds so much margin "for design considerations" that the image ends up actually shrinking. Drives me nuts every time. I think twitter recently fixed this. Only took them a few years to notice, yay!

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.

every executive simply must have their all-important tidbit at the top of the page

I run into this with the healthcare web sites I build, especially in the age of COVID. Every middle manager thinks that whatever they're doing is the most important thing that's ever happened.

It's very hard to make them understand that when everything looks urgent, nothing looks urgent.

This has been going on for decades. Websites are a battlefield in the eternal war for supremacy between factions inside an organization. Tufte talked about this effect in print material in VDoQI. Carousels are a strategy designers use to get these factions to temporarily agree on a home page design.

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

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

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.

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.

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.

Repetitive ... useless ... information.

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

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

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

well, if Sue K liked it...

Then don't include the others.

Only add testimonials that help convert visitors to customers.

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”

Bigger lesson here is that a carousel is virtually alway subtexting:

- Web design is politically subordinate to marketing/product.

- We don't value your time or attention.

- This website was expensive and we can afford it.

... etc.

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.

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?

Carousals on Stories usually don't have actions. I simply swipe to the next photo/video if there's anything like "view post" or "swipe up for more" links. So I can agree 1% click rate might be close to accurate.

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.

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

I don't know about Google's News and Product results, but Instagram stories aren't really carousels, which are headlines that rotate because you can't decide what to headline. Stories are intentionally transient communications from a range of users. It is part of the design experience.

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.

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.

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

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

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

I would posit that the only good use for carousels is with images. Craigslist is a good example of this with the thumbnails below the carousel. Its very natural with images, like flipping through a picture book. This way you can keep the relevant text in view while you look at all the pictures in the album.

The best part is when carousels show up on game consoles or kiosks when you're trying to log in or something that makes what you're trying to do impossible.

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

True but that's just the first time experience, once they understand it, then user's will trust that the scrolling function will work on subsequent sessions.

With websites, every implementation is slightly different... so user's get that confusing "first time experience" every single new website they visit...

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.

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

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.

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.

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

I expected this to be a flow chart like this:

http://www.toothpastefordinner.com/index.php?date=020605

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)

I made an example of a 3D carousel using just CSS a couple of days ago - 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.

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.

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

And yet: https://web.archive.org/web/20190913224546/https:/twitter.co...

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

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.

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.

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/ Is probably one of the best out there.

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

Microsoft.com has two on the homepage right now.

Apple has always had one until 2017.

https://web.archive.org/web/20170228232206/http://www.apple....

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.

I feel the same way about radar charts.

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

The use cases for a carousel are fairly limited

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

* { transition: 0; }

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.

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

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.

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.

Manila Folder Boeing 777 guy. Please take note.

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

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.

This page was designed to be intentionally frustrating.

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.

I would expect anyone younger than 35 to know how to interact with a carousel

Interesting viewpoint, as a middle manager in my company requested a carousel specifically for content aimed at older users. She said that younger people don't need the carousel because they know how to scroll.

Reply on news.ycombinator.com