Should I use a carousel?(shouldiuseacarousel.com)
shouldiuseacarousel.com
Should I use a carousel?
http://shouldiuseacarousel.com/
161 comments
You're right about what you said, but web designers and developers aren't usually to blame for this.
The problem isn't cultural traction among web designers and developers, but among the CEOs and marketing guys and VPs who, for egotistical or political reasons, order the designers to implement the site in a certain way.
They love carousels because, as you said, carousels feel like a design cheat code that let you fit 5 (or more) times the amount of content in the same amount of space. Instead of actually researching your niche and making a choice about what content is most important to solve your customers' problems and your own goals and what content gets priority on a page, they take the lazy way out and order the designer to fit everything on the screen.
Most decent web developers who place a premium on UX will not usually suggest a carousel as the best way to display some content on the screen, and they may fight those decisions as best as they can, but at the end of the day the people who pay the bills will make these decisions.
The problem isn't cultural traction among web designers and developers, but among the CEOs and marketing guys and VPs who, for egotistical or political reasons, order the designers to implement the site in a certain way.
They love carousels because, as you said, carousels feel like a design cheat code that let you fit 5 (or more) times the amount of content in the same amount of space. Instead of actually researching your niche and making a choice about what content is most important to solve your customers' problems and your own goals and what content gets priority on a page, they take the lazy way out and order the designer to fit everything on the screen.
Most decent web developers who place a premium on UX will not usually suggest a carousel as the best way to display some content on the screen, and they may fight those decisions as best as they can, but at the end of the day the people who pay the bills will make these decisions.
It's very much the fight of simplicity versus committee-think.
What you guys think about my carousel implementation? IMO, it is done tastefully. I made this site for a friend of mine: http://indieviddy.com/
It's just an aesthetic presentation of non-essential content (random portfolio items).
It's just an aesthetic presentation of non-essential content (random portfolio items).
Looks pretty, but there's no (obvious) way to control it (so when items drop off you can't get them back - that is, until they eventually loop back around again).
There's a couple of other issues with your site as well - it seems fixed to a very wide width (possibly due to the carousel?) which is not only quite significantly wider than many laptop displays / non-maximized browsers would reach. And you seem to have some character encoding issues as you're apostrophes are being replaced with �.
On a personal note, some of the fonts are too big as well. Your site reads more comfortable when I've zoomed out twice (which also fixes the width issue as well).
Aside that, the landing page looks well polished enough (I didn't venture further in).
There's a couple of other issues with your site as well - it seems fixed to a very wide width (possibly due to the carousel?) which is not only quite significantly wider than many laptop displays / non-maximized browsers would reach. And you seem to have some character encoding issues as you're apostrophes are being replaced with �.
On a personal note, some of the fonts are too big as well. Your site reads more comfortable when I've zoomed out twice (which also fixes the width issue as well).
Aside that, the landing page looks well polished enough (I didn't venture further in).
Mozilla/5.0 (X11; Linux x86_64; rv:22.0) Gecko/20100101 Firefox/22.0Thanks for the feedback. The portfolio wasn't meant to be solely accessed through the carousel - there's a dedicated page for it, and the carousel was just a "look at all these things I've worked on" statement. I guess I didn't clearly communicate that. You aren't really meant to navigate it, rather just to look at it's breadth and click on one if it caught you eye.
The width is indeed because of the carousel - I meant for it to go of the page. Is that causing weird scrolling problems? It's supposed to be overflow-x: hidden. Is that causing weird tablet scrolling issues? You're not supposed to be able to scroll horizontally.
I'll have to look into the character encoding issue - thanks for that report.
The width is indeed because of the carousel - I meant for it to go of the page. Is that causing weird scrolling problems? It's supposed to be overflow-x: hidden. Is that causing weird tablet scrolling issues? You're not supposed to be able to scroll horizontally.
I'll have to look into the character encoding issue - thanks for that report.
> Thanks for the feedback. The portfolio wasn't meant to be solely accessed through the carousel - there's a dedicated page for it, and the carousel was just a "look at all these things I've worked on" statement. I guess I didn't clearly communicate that. You aren't really meant to navigate it, rather just to look at it's breadth and click on one if it caught you eye.
I realised that was more a showcase than for navigation. What I meant was that if one did catch your eye just as it was falling off the page - you can't bring it back. It can be argued as a pretty miner issue I'll grant you. But that was my immediate thought when I saw stuff drop off the side :)
> The width is indeed because of the carousel - I meant for it to go of the page. Is that causing weird scrolling problems? It's supposed to be overflow-x: hidden. Is that causing weird tablet scrolling issues? You're not supposed to be able to scroll horizontally.
This is was in Firefox on ArchLinux (laptop). I definitely have a scrollbar at the bottom. Sorry mate :(
> I'll have to look into the character encoding issue - thanks for that report.
I notice you don't have any meta tags for encodings. I wonder if that might be causing the issue (I should stress - I'm not an expert on these matters): http://www.w3.org/TR/html5-diff/#character-encoding
I realised that was more a showcase than for navigation. What I meant was that if one did catch your eye just as it was falling off the page - you can't bring it back. It can be argued as a pretty miner issue I'll grant you. But that was my immediate thought when I saw stuff drop off the side :)
> The width is indeed because of the carousel - I meant for it to go of the page. Is that causing weird scrolling problems? It's supposed to be overflow-x: hidden. Is that causing weird tablet scrolling issues? You're not supposed to be able to scroll horizontally.
This is was in Firefox on ArchLinux (laptop). I definitely have a scrollbar at the bottom. Sorry mate :(
> I'll have to look into the character encoding issue - thanks for that report.
I notice you don't have any meta tags for encodings. I wonder if that might be causing the issue (I should stress - I'm not an expert on these matters): http://www.w3.org/TR/html5-diff/#character-encoding
It looks really pretty. However, it frustrates me the same way that using Netflix's UI does. The scroll speed on the carousel is crazy slow! I'm not going to sit for 45 seconds waiting to see what else is in the carousel and if it's interesting enough to warrant me clicking on it.
Not sure if that's the feedback you were looking for, but there it is ;) As I said, I do dig the overall aesthetics of the site.
Not sure if that's the feedback you were looking for, but there it is ;) As I said, I do dig the overall aesthetics of the site.
Dang. It wasn't meant to be a thing that you navigate through - it was just a little preview of the actual portfolio page. I guess I didn't communicate that clearly. Thanks for the feedback.
I just thought I'd chime in that I thought the carousel looked good and it was pretty apparent that it was just a grab-your-attention thing, but that the content was further down the page. Other than the issue of screen scrolling horizontally (I also had a vertical strip of whitespace fixed to the left of the page) it looks pretty good
I think this is actually a pretty good use of a carousel. It's nice looking, and like you said >It's just an aesthetic presentation of non-essential content (random portfolio items).
The only thing I would add is a way for the user to interact with the carousel if they needed to. Most people will ignore it, but if a game does catch someone's eye, it's currently impossible to scroll backwards to check it out.
The only thing I would add is a way for the user to interact with the carousel if they needed to. Most people will ignore it, but if a game does catch someone's eye, it's currently impossible to scroll backwards to check it out.
I think I can best express what I think of it in code.
<marquee 0, 0);" 6, 0);">
Not a fan. If the user wished to interact with it, you can't advance/rewind slides manually, so it's annoying. If the user doesn't wish to interact with it, it's still moving and distracting and wasting space, so it's still annoying.
The carousel isn't 'loud', but it's still being ignored. And as someone actually uses the page, it's quickly scrolled off the page.
I think he might have been better served by putting those portfolio items in the sidebars.
I think he might have been better served by putting those portfolio items in the sidebars.
That's okay, it wasn't meant to be the focus of the page - just a little banner of imagery. I guess it would've made more sense if it wasn't clickable and didn't move. The clickable content is meant to be primarily navigated on the Portfolio page.
It's an interesting take, but is still extremely frustrating to interact with. I would like to navigate through the images at my own pace and click forward/back exploring content, which the carousel prevents me from doing. It's also not obvious to me where I can find the same content in a different format- it looks like mostly they're taken from the portfolio section but I didn't know that until I drilled around the site for a while. I'd at least include a "view all" link below the carousel.
> It's also not obvious to me where I can find the same content in a different format- it looks like mostly they're taken from the portfolio section but I didn't know that until I drilled around the site for a while.
I guess that's the main problem. It wasn't meant to be a navigable thing, just a preview of the portfolio content. I figured once someone clicked on one of them, they would see the other games. I think maybe it looks more important than it's meant to be. It was just a little graphical banner that became fancy.
I guess that's the main problem. It wasn't meant to be a navigable thing, just a preview of the portfolio content. I figured once someone clicked on one of them, they would see the other games. I think maybe it looks more important than it's meant to be. It was just a little graphical banner that became fancy.
Not a site critique, but nice business idea. Posted it /r/gamedev subreddit:
http://www.reddit.com/r/gamedev/comments/1i1amy/marketing_fo...
http://www.reddit.com/r/gamedev/comments/1i1amy/marketing_fo...
Animation is kinda janky on Chrome 28... mystery meat navigation, seems like I'm interacting with a train (slowdown on hover, speed up on hover out). Yeah, you're better off without it.
Just FYI, I loved reading this comment.
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.
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.
I love the ones that advance slides on a timer regardless of user clicks, so you can manually advance from slide 1 to slide 2 and the timer will kick in 100ms later, advancing you to slide 3.
Since you mention the dots, I wonder if carousels gained traction after smartphones (i.e. the paging dots on the iOS home screen).
I don't think so. Back in 2009 I was responsible for adding another carousel monstrosity to the world and that was just before smartphones exploded. Certainly not what I had in mind.
I like carousels when they're used for the right purposes ... it's my favorite way to view a slide-show (so long as I can control how it advances). On the other hand, I can't think of any other valid reason to use one.
op's page ironically made the carousel useful
Really? You must be a speed reader. The first couple of images seemed to stick around forever, but there wasn't nearly enough time to read the denser ones. It also makes a difference that it was the entire content of the page, so there were no distractions. That will never be the case on a real page.
>>That's why Facebook's image albums don't automatically move to the next image after five seconds.
Well, now that you opened your big mouth... :)
Aside from showing upper management that their latest bullshit idea is on the website, carousels also serve another purpose, which is to make the website look "alive" and "dynamic" and "interactive." And that's just the tip of the buzzword iceberg.
Ultimately it is one of the many symptoms of a very common phenomenon: design decisions made by people who don't know anything about design. In most cases these people are directors and C-level executives.
Well, now that you opened your big mouth... :)
Aside from showing upper management that their latest bullshit idea is on the website, carousels also serve another purpose, which is to make the website look "alive" and "dynamic" and "interactive." And that's just the tip of the buzzword iceberg.
Ultimately it is one of the many symptoms of a very common phenomenon: design decisions made by people who don't know anything about design. In most cases these people are directors and C-level executives.
The only place I've seen appropriate use of a carousel is on game review websites where they're showing the latest news/reviews/whatever. Those seem to work pretty well, although I rarely use them to navigate, sometimes an interesting image or piece of text will pop up on it and I'll find a new game I didn't know about.
just when designers had begun to catch on to the fact that numbered pagination links need to be big enough to click easily
You may have dreamed this part.
You may have dreamed this part.
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.
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.
Rate my carousel:
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.
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.
That reminds me that 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.
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.
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.
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.
> 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.
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.
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.
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.
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.
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..^^^ 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.
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.
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.
I looked at this article expecting something that was related to the 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é!
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é!
Worse than carousels - web pages that play videos or adverts with audio attached automatically.
I thought we got away from that 10 years ago.
I thought we got away from that 10 years 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
I was expecting a site like http://www.arechairslikefacebook.com/
I never thought of that mechanism as a thing which had a name. It was just "another stupid page-flipping site".
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 :)
...even the name for these things is a complete fail :)
For sure, don't use a fast moving carousel with multiple sentences on each slide and no way to pause.
So much time wasted putting essential content into a carousel…and making it work.
I read all slides. With no more than 12 clicks on those dots :likeAboss:
The carousel rotates too fast for me to read the longer quotes.
I think that might have been intentional :)
Think of the kittens! lol.
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.
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.
EDIT: This sarcastic carousel gets it right.
There's a place for carousels in some user scenarios, but there's never a place for a poor implementation of one. ;)
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.
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...)
Yes, it's intentional. That's part of the 'joke'.
Well, apparently it is:
auto: {
enabled: true,
interval: 3000
// HA HA! I HATE MY USERS!!! Especially the ones that aren't speed readers.
}Yes, I think it's meant to illustrate the point that they're frustrating.
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.
It's ego stroking.
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.
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.
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.
I was about to ask the same thing.
I have already forwarded this to some people I know...
I was expecting a flat out NO in a big font, but the page manages to make the point much better.
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.
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.
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!
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).
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).
> "It frustrated me that it didn't paused when my mouse was over the slide"
Even if you did this, your mobile users will still be mad, because they cannot hover.
The question isn't if you or your clients are happy with them. The question is if your users are happy with them, and if they generate better business results (conversion, clickthrough, whatever is relevant to you) than the simpler, less Javascripty, less timing-based, less gotcha-with-the-mouse-hover implementation.
I sincerely hope you A/B tested this.
Even if you did this, your mobile users will still be mad, because they cannot hover.
The question isn't if you or your clients are happy with them. The question is if your users are happy with them, and if they generate better business results (conversion, clickthrough, whatever is relevant to you) than the simpler, less Javascripty, less timing-based, less gotcha-with-the-mouse-hover implementation.
I sincerely hope you A/B tested this.
And present the A/B results to the client.
Though some have a habit of stubbornly ignoring any professional advice against a feature they have an emotional attachment to, raw data can sometimes snap them out of it.
Though some have a habit of stubbornly ignoring any professional advice against a feature they have an emotional attachment to, raw data can sometimes snap them out of it.
I am a mobile user, and I can hover. In Chrome on Android, when I tap on an element that doesn’t have an action of its own, that element always acts like the cursor is hovered there. I was able to use this to pause the carousel on http://shouldiuseacarousel.com/. And on other sites, if I tap and hold on a link, then close the dialog that pops up, the link still acts like it is hovered over.
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.
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.
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.
Happens most often on newspaper and magazine websites. Some sites provide a pause button to kill the distraction, but many don't.
Another site fixed by noscript. I just read a vertically arranged set of scrollable statements. Although there was an orange bar stuck across one of them as the footer didn't move.
If you missed the slideshow your probably missing half the point. You should inspect the JavaScript, verify it safe and private, and turn on JavaScript. It's naughty, but a lot of people seem to like it.
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.
IMHO, the only use case suitable for a carousel is showing eye-candy pictures.
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.
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?
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.
I only read the first slide.
Why not use it just to show pretty pictures? This is nice.
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)
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)
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.
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.
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.
So if not a carousel, an accordion, or maybe a wizard?
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.
Iam not sure, but you should definitely use a faster Webserver ;-)
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/
[2] http://steampowered.com
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/
[2] http://steampowered.com
NN/g are well-known for developing methodologies for usability testing. They promote tests with only a few people, e.g. see http://www.nngroup.com/articles/why-you-only-need-to-test-wi...
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.
[deleted]
Does anyone have an instance where a carousel has worked well (with A/B testing or something else scientific to back it up)?
Ones that present data in order, like chronologically, and don't auto-scroll, leaving manual control to the user, work okay. Like "related products" on some websites, where the most relevant ones are first, but you might find something more interesting to you if you click a few pages in.
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.
There's this study of the carousel on Notre Dame's home page
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.
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.
^ 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..
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..
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.
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]
They really seem to mean it:
<!--
Hold on now! If you're looking here to figure out how to use this carousel, STOP!
Read this site carefully, then go smell some flowers or do something else instead.
Every time you use a carousel, a kitten dies.
/\_/\
____/ o o \
/~____ =ø= /
(______)__m_m)
Think of the kittens!
--> <title>Should I Use A Carousel?</title>
<!--
SPOILER ALERT: No!
-->I honestly found the presentation somewhat compelling.
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.
Then I got it.
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.
I'm not going to disagree with their assessment, but I'm more annoyed by them.
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?
Carousel's do suck, but what other options do I have?
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.
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.
Could we also stop using silly scrolling hacks like here http://www.apple.com/mac-pro/, please? Thanks!
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/
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.
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.
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...
ducks
I'm actually quite surprised they went with this. Maybe it tested well on touch surfaces...
It didn't even work for me. Scrolling, clicking... nothing causes anything to change. The scrollbar in Chrome is missing.
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.
Apple.com does not work well on chrome. It hasn't for years.
hell yeah, carousels/sliders are harmless in comparison with these UX abominations...
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.
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.
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.
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?
I'm not just talking about using the iOS launch image for branding. I'm talking about delaying the user after the app is loaded and ready to go. People ask for it to display their logo a little bit longer than it actually takes to load the app, sometimes 3 seconds or so.
If you do this, as an iOS developer, you should have your developer program revoked...
If you do this, as an iOS developer, you should have your developer program revoked...
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.
They specifically recommend against using your logo as a splash page, but most people do it anyway.
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.
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.
I actually really, really hate that concept and I wish Apple didn't try to get people to use it. Numerous times I've tried to interact with a UI that is actually just a flat PNG image.
It feels like Apple is advocating using a really ugly hack to make it look like app loading times are shorter than they really are.
It feels like Apple is advocating using a really ugly hack to make it look like app loading times are shorter than they really are.
Exactly. From the Apple Human Interface Guidelines (https://developer.apple.com/library/ios/#documentation/usere...)
"Avoid using your launch image as an opportunity to provide:
- An “app entry experience,” such as a splash screen - An About window - Branding elements, unless they are a static part of your app’s first screen
Because users are likely to switch among apps frequently, you should make every effort to cut launch time to a minimum, and you should design a launch image that downplays the experience rather than drawing attention to it.
Generally, design a launch image that is identical to the first screen of the app."
"Avoid using your launch image as an opportunity to provide:
- An “app entry experience,” such as a splash screen - An About window - Branding elements, unless they are a static part of your app’s first screen
Because users are likely to switch among apps frequently, you should make every effort to cut launch time to a minimum, and you should design a launch image that downplays the experience rather than drawing attention to it.
Generally, design a launch image that is identical to the first screen of the app."
Don't forget end users. They hate carousels just as much as developers do, and maybe even more.
But do they? I've worked with clients who are, at some degree, just normal web users who now want their own website. And "how about a carousel?" is a very common request...I think that end users may get annoyed by them when actually trying to use them but as passive viewers of most webpages ("Oh there's a carousel. That's a pretty picture. OK time to do a search query for the shoe brand I'm looking for") they probably don't give them any mind...which is, of course, dangerous if you're the site owner...but end users themselves shouldn't really care because they just don't use the carousel.
So the argument is that users don't hate carousels, because they've learned that they're useless and to be ignored?
I'm not sure that's a strong argument in their favor.
I'm not sure that's a strong argument in their favor.
FINALLY! ahem...excuse the enthusiasm.
Carousel is a bad practice.
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.
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).
(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).
At least THIS carousel doesn't break the back button.
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).
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?
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.
It is funny, though.
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.
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.
haha, the carousel is moving to the next slide too fast to read fully -_-'
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.
I just want to point out that buying a domain for this seems like overkill.
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.
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]
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?
But still if they all vanished in the night I would not complain.
Are "slideshows" considered the same or something different from carousels?
“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.
Precisely correct. This is why they exist and why they are so useful at resolving disputes.
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.
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.
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.