Carousel-Based Web Design

It’s time to stop this ridiculous talk about semantics, multi-platform, accessibility and universal web bullshit and start talking about… carousels. That’s right. Carousels.

No one actually expected a new solution to the problems of stakeholder pacification and attention-grabification after the untimely demise of blink and marquee, but we certainly found it. The carousel. Beautiful. Dynamic. There’s no getting around the carousel. It’s here to stay. Let’s talk about why.

Departments, stakeholders, and the push mentality

You can blah blah blah all you want, but the only responsible way to make every single stakeholder happy is to put all of their stuff on the home page, and do you really want to make the home page that big? No way in hell. The answer is, as you might have guessed: a carousel. Works just as well for three departments as for 15. All of these stakeholders get their Very Important Information on the home page.

That said, you can’t simply create a normal carousel and call it a day. Forward-thinking web developers always write some kind of algorithm to make sure that each department gets the proper amount of “first views” on the carousel. Stop the Math.random madness before it gets out of hand.

Sites need movement

This isn’t 1996. With billions of sites that the user is not looking at while they’re looking at yours by choice without any goals in their mind whatsoever, we need to use movement to turn their attention to the things they’re not looking for. And what better way to do that than use some kind of jQuery plugin. Experienced developers choose a plugin that will slow the page down a bit, giving users time to read the stuff in the carousel. All that bullshit about performance simply makes it harder for users to read the copy that people painstakingly write to fill the same amount of characters that was in the design’s Lorem Ipsum.

Good design has movement, which makes it “dynamic”. All clients want a dynamic site, since dynamic is the opposite of static. When you think about it, this makes perfect sense. Without light, there is no dark.

What the critics say

Some (ignorant) critics will say that users don’t want to sit there and wait to see the next item in the carousel. This is, well, just plain stupidity. Obviously, that’s why we have those little dots in there, but the skeptics fail to notice the thought that has gone into that.

And to those who say that those dots only tell us how many items there are but nothing about the content, forcing users to click on each one, well… isn’t that the whole point? We are the ninjas of the user experience, the conjurors of marketing. We are leading the users into the experience we want them to have.

At the end of the day, users don’t just want to get the information they want. They want an experience. We know this because we present statistics in such a way that they support our opinions on these matters. It’s called research, and you can’t argue with research.

Carousels save money

Let’s face facts: carousels are easy to make because the Not Invented Here syndrome means that we have 12,347 different carousel options to choose from, depending on the size of dots we want and if they are presented horizontally or vertically. Almost all of these are free to use, so we can charge our clients for implementation. They are okay with these charges because of the value the carousel brings to the project. Carousels allow us to present all of the content the client wants to present, which saves the client money because they no longer need a content strategist.

The mobile problem

The whole idea that carousels might be a problem on mobile is debatable. On the other hand, we know based on factual guesswork that mobile users (as opposed to desktop users) prefer to get straight to the information they need, so we can simply use browser detection and use display:none for carousels on mobile devices. Mobile users are in a hurry and need information, not entertainment, so in this case, CSS is our friend. Stakeholders accept this, and are usually willing to accept hiding carousels, although as mobile browsers become more capable, we might consider supporting more of them.

Use carousels for the serious stuff

If we want to do things right, we need to start putting other content into carousels as well. As we say in the industry, “carousels are the new tabs”. Why not put sections of the main content into carousels? And yes, I will even go so far as to suggest that navigation be placed a carousel. We need to encourage users to really think about what information they need. Seeing “Products” for a few seconds before seeing “About Us” really gives them the opportunity to think about their navigational choices. Seriously, our world’s fast enough as it is. Give the users some time to think, for goodness’ sake.

In conclusion

In summary, this approach, which we’ll call CBWD (Carousel-Based Web Design) for easy remembering, can help you please your clients by giving them more opportunity for publishing trivial content in less space. It will save money by eliminating tiresome considerations like content relevance and importance, accessibility (oh man talk about time-consuming), and website performance (as trendy and overrated as the whole “standards” thing, which has made it almost impossible to sell good Flash intros nowadays).

Be sure to follow us on Twitter, and check out our GitHub repo for the newest code. A one-page site with a cute logo of a cartoon animal and the text npm install cbwd in a low-vision user font is coming soon. CBWD is node.js based but we’ve got ports in ruby, python, even C++ and SWI Prolog. Proudly using Sass, Compass, Grunt, Yeoman, Angular.js, offered as a Flask, Django, or Rails app, with some Ember.js, D3, and we’re using HTML5 localStorage instead of cookies to store carousel view user info. All of this is packed into a fork of Bootstrap weighing a tiny 6MB (minified, gzipped and microwaved).

Enjoy!

(2013-09-22) Just to be on the safe side: This article is sarcasm. I do not advocate using carousels. Read that again. It pains me to have to point out what I think is obvious, but English is not everyone’s first language, and my sense of humor is hit-or-miss on some people. The last thing we want is for this post to land in someone’s web design curriculum. Now relax and have a nice day.

13 thoughts on “Carousel-Based Web Design

  1. Hi! I really hope you not take this in the bad way, as I write from the bottom of my heart, but I highly disagree with almost all of this article, which I believe hurts what we, as designers, stand for.

    It is not time to stop arguing about carousels. It is time to develop another solution to our clients’ whims. For example, convencing them to think about their users needs, or new creative ways to get conversions. And for that, we need to be clear on what a conversion means for every specific website.

    Websites need movement? I agree, but movement can be accomplished by static design, not only by jQuery.animation. Architects and artists know this better. But there is something that websites do ultimately need, which is to help users accomplish specific tasks. If our visitors need actual movement in order to clearly understand something about our content, then let’s jQuery.animation-it all the way. Otherwise, we should avoid confusing UI elements.

    I don’t actually know about what (ignorant) critics say, but I have seen many users fail to understand the carousel-and-dots metaphore. We should really understand who we design for before making decisions about the UI. Clients stakeholders should learn more about what their visitors need; deploying carousels is just pure guessing.

    Carrousels save money? Of course, but they are also cheap design. Using carousels, specially via plugins, is the worst way (i believe) to address the challenge of having a nice, compelling homepage. In terms of money, what clients would really need is a home page that *converts*, not one that confuses. That’s wasting money, rather than saving, from my point of view.

    Now, when talking about mobile, users want to go straight to the content. Agreed. But what about desktop users? Do they want to see ads, get a little lost in the UI, miss-click on an image and be led to god knows where, and then finally make their way to the content they need? I don’t think so.

    Personally, I believe that, as designers, it is our responsability to design for the final user. We also have to pay the bills, so we won’t throw away whimmy clients with nice budgets (unfortunately), but we should at least try to fight the fight for our users. They deserve it.

  2. Hi there, Rodrigo. No, I’m certainly not taking your comment in a bad way. If we ever meet, I’ll buy you a drink.

    In fact—unless your sense of humor is drier than mine—you just spent about 15 minutes typing out why you agree with me. :)

    Yours is a valuable comment.

    (To be totally clear: your comment might have been serious, but my post was not.) To be clear to passionate and well-meaning designers like yourself, I added a little note to the bottom of the post. It would be unfortunate to get wires crossed between people in agreement.

  3. Hey Stephen.

    Too bad I failed to notice the sarcasm yesterday (and the Humour tag). I re-read the post today, and had some good laughs ( it is embarrasing though that the joke had to be explained ). Maybe I’m letting carousels drive me way too mad.

    Anyways, thanks for the reply (and the note =P ).

  4. Hi Rodrigo, I’m glad you didn’t notice! I loved your comment; it makes the whole thing complete and your points are just great.

    And rest assured that you were not the only one who took it seriously at first glance. :)

    Cheers!

  5. The next revolution in computing is in fact a carousel-based operating system.

    Why having that ugly start button when you can put the whole effing interface in six thousand two hundred and forty two convenient carousel pages?

    Oh wait… someone’s already done that?

    ;)

  6. It is a bad idea to cram everything in a certain home page since this will look undesirable to viewers. The carousel-based web design though is great because it allows for easy browsing. Just make sure that each part of the carousel is just as interesting. Designers can be very creative. That is why they are called that after all.

  7. This is fantastic. Something needed to be said about it!

    (Also sarcasm. Seriously. Really! You guys!!)

  8. I understand the frustration with carousels. Trust me. But, it’s easy to slam pretty much any design feature, development framework, language, trend, etc. It’s like a carpenter writing sarcastic commentary on the shape of today’s hammers. An interesting read, but ultimately, it severely underestimates the ingenuity and creativity of great designers and engineers.

Comments are closed.