TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Should I Use a Carousel?

290 pointsby stepstopalmost 5 years ago

31 comments

geddyalmost 5 years ago
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.
评论 #23756189 未加载
评论 #23755142 未加载
评论 #23755182 未加载
评论 #23756258 未加载
评论 #23756707 未加载
评论 #23755040 未加载
评论 #23757230 未加载
illyquillyalmost 5 years ago
Here&#x27;s my counter argument to that site. Big eCommerce sites will test and optimize every pixel and if something doesn&#x27;t work, they&#x27;ll replace it with something better. Now, go find a list of the top ten eCommerce sites and I&#x27;ll bet at least 50% have a carousel on the home page.<p>Google&#x27;s first search result gave me Amazon, eBay, Walmart Target, Etsy, Best Buy, Macys, The Home Depot,Wish and Craigslist. Only four don&#x27;t have a carousel: Target,Etsy, Macys and Craigslist.<p>Lot&#x27;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&#x27;s the home page at the time : <a href="https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20121214022552&#x2F;www.nd.edu&#x2F;" rel="nofollow">https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20121214022552&#x2F;www.nd.edu&#x2F;</a><p>- The Neilson Norman Group sample size was ONE.<p>- If you read the all of the Weilder Fuller comment, he says &quot;Now, I’ll preface the remarks below by saying that there are some excellent uses for a rotating gallery. &quot;<p>- <a href="https:&#x2F;&#x2F;www.accessibilityoz.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.accessibilityoz.com&#x2F;</a> - accessibility specialists have a carousel on their home page.<p>The Adam Fellows quote isn&#x27;t from the page that&#x27;s linked. It&#x27;s from <a href="https:&#x2F;&#x2F;ux.stackexchange.com&#x2F;questions&#x2F;10312&#x2F;are-carousels-effective" rel="nofollow">https:&#x2F;&#x2F;ux.stackexchange.com&#x2F;questions&#x2F;10312&#x2F;are-carousels-e...</a> where he also says &quot;“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.”
评论 #23756069 未加载
评论 #23757238 未加载
franga2000almost 5 years ago
Yes, but carousels are rarely added because they provide a good UX. They are added because motion draws attention and attention sells. Let&#x27;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&#x27;t (&#x2F;s) and they know that if the visitor sees the word SALE just as it slides away in the carousel, they&#x27;ll want to know more. But now they&#x27;re already staring at the next slide, so they read that one, then the next, then they&#x27;re finally back at the first one. Even if they don&#x27;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.<p>AliExpress is notorious for this, with even the &quot;you might also like&quot; 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&#x27;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.
评论 #23757275 未加载
评论 #23757513 未加载
antiblandalmost 5 years ago
Carousels are the type of UI pattern that is only okay if you <i>ask</i> 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&#x27;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&#x27;s not disturbing or annoying at all. It&#x27;s there because I asked for it.
评论 #23755064 未加载
评论 #23755281 未加载
评论 #23755607 未加载
Wowfunhappyalmost 5 years ago
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.<p>A lot of our clients are obsessed with what content is &quot;above the fold&quot;. Never mind that &quot;that fold&quot; doesn&#x27;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.<p>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&#x27;t actively detrimental to the overall user experience.
评论 #23755359 未加载
评论 #23755150 未加载
jalgos_eminatoralmost 5 years ago
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.
评论 #23760498 未加载
superasnalmost 5 years ago
I&#x27;ve often found Carousels do a good job when there is repetitive information,<p>E.g. testimonials - you got one big testimonials but you also have a dozen more and you don&#x27;t want to fill up your page with just that.. so you use a carousel.
评论 #23756532 未加载
评论 #23777017 未加载
dpcanalmost 5 years ago
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.<p>It needed to portray:<p>“We are big enough for you to consider doing business with us and to buy our services”
评论 #23759852 未加载
评论 #23756545 未加载
arnalmost 5 years ago
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?
评论 #23756916 未加载
评论 #23755463 未加载
评论 #23755304 未加载
hardwaregeekalmost 5 years ago
Another design issue that I see are landing pages for sites that don&#x27;t need landing pages. My university&#x27;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&#x27;s it.
rchaudalmost 5 years ago
A few cherry-picked quotes doesn&#x27;t really tell me anything, since the value of a carousel depends on a number of factors:<p>- how is the carousel being used? To display similar products, to show latest blog posts?<p>- are your users primarily on desktop or mobile?<p>- have you A&#x2F;B tested carousels to see if users interact with them more, less or the same?<p>I see carousels on sites like Ikea and Best Buy and IMO it&#x27;s a useful way to get a quick glimpse of what categories of products are currently on sale.
LeoPantheraalmost 5 years ago
&gt; &quot;Carousels are this decade&#x27;s &lt;blink&gt; tag.&quot;<p>The person who wrote that has never heard of &lt;marquee&gt;.
gitgudalmost 5 years ago
It&#x27;s the classic <i>false economy</i> you&#x27;re saving vertical space, but nobody wants to scroll your carousels, or wait for it to transition. It&#x27;s always easier to just scroll down the page, especially on mobile.<p>Apps like Instagram have a standard carousel for photo albums and people use them and can trust the functionality.<p>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...
评论 #23754976 未加载
评论 #23756727 未加载
评论 #23755769 未加载
ComputerGurualmost 5 years ago
They should collect stats on how many clicked the previous slide link immediately after the slide changed (slide changes too fast).
hristovalmost 5 years ago
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.<p>These news can be about your participation in widget related conferences, about you passing obtaining environmental goals, about some R&amp;D project promising some better widget some time in the future, about community involvement of your company etc.<p>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&amp;D leader, participates in the community, etc.
评论 #23755687 未加载
评论 #23755069 未加载
edoceoalmost 5 years ago
A moment to call out the laggy, janky carousel on Zillow mobile interface. Ugh. Opening images to scrolly mode is smoother but that left&#x2F;right flick on their carousel is even bumpy on Pixel&#x2F;Chrome
rahimnathwanialmost 5 years ago
I expected this to be a flow chart like this:<p><a href="http:&#x2F;&#x2F;www.toothpastefordinner.com&#x2F;index.php?date=020605" rel="nofollow">http:&#x2F;&#x2F;www.toothpastefordinner.com&#x2F;index.php?date=020605</a>
clairityalmost 5 years ago
worked great for me... with javascript turned off. just scrolled down the page and read all the content at my leisure.<p>the only glitch was the sticky footer that fixed itself in the middle of the page instead of at the bottom of the viewport.<p>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.<p>(like others, i think image carousels with galleries are fine)
评论 #23756048 未加载
rustyboltalmost 5 years ago
&gt; “Carousels are effective at being able to tell people in Marketing&#x2F;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.” &gt; &gt; lee duddell<p>This tells me I should absolutely use carousels. Just don&#x27;t expect people to read the text in there.
arc-in-spacealmost 5 years ago
And yet: <a href="https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20190913224546&#x2F;https:&#x2F;twitter.com&#x2F;garybernhardt&#x2F;status&#x2F;1172610099136716800" rel="nofollow">https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20190913224546&#x2F;https:&#x2F;twitter.co...</a><p>(I&#x27;m unsure why Gary removed these tweets, maybe something did change his mind on this.)
评论 #23757469 未加载
axegon_almost 5 years ago
I&#x27;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 &quot;slide&quot; or whatever they are called. So yes, you should not. And I really don&#x27;t understand why so many people are obsessed with them.
dawnerdalmost 5 years ago
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.<p><a href="https:&#x2F;&#x2F;swiperjs.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;swiperjs.com&#x2F;</a> Is probably one of the best out there.
flixicalmost 5 years ago
From what I can remember, Apple.com never had a carousel.<p>Microsoft.com has two on the homepage right now.
评论 #23757347 未加载
durnygburalmost 5 years ago
Any UI, accessibility, or common sense reasons are irrelevant.<p>It&#x27;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&#x27;ll request.
artsycaalmost 5 years ago
I feel the same way about radar charts.
ulisesrmzrochealmost 5 years ago
I had a music video app which was a carousel with YouTube embeds<p>The use cases for a carousel are fairly limited
slmjkdbtlalmost 5 years ago
Cannot agree more. Another general tip I want to share to people who are bad at design:<p>* { transition: 0; }
fermienricoalmost 5 years ago
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.<p>Use tables to organize information. Make it dense.<p>When you think you stick 24px padding and it “looks” right to you? Now cut that by 75% to just 6px.
评论 #23755569 未加载
clarlealmost 5 years ago
I&#x27;d argue this is different on mobile compared to the web.<p>It&#x27;s pretty common in mobile onboarding flows to use a carousel like UI. It&#x27;s much easier to swipe on a carousel-like UI and it&#x27;s enough of a common design pattern there that people are used to it.
评论 #23755692 未加载
mattoxicalmost 5 years ago
Manila Folder Boeing 777 guy. Please take note.
airstrikealmost 5 years ago
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&#x27;s home page with a gallery of images &#x2F; things to do isn&#x27;t bad for a carousel. CMV
评论 #23755128 未加载
评论 #23754932 未加载