Why I Hate Carousels

Written by Asanka Herath on  | #Usability #Engineering

A carousel interaction pattern looks like this:

A screenshot of dell.com from Nielsen Norman Group’s article on effective design of carousels.

Basically it’s a layout pattern where one starts out positioning content in vertical blocks. Some of those blocks are going to have content arranged in horizontal blocks.

So far so good. You might think this will result in a layout that roughly looks like this:

A layout consisting of vertically arranged blocks. One of the blocks contains a set of horizontally arranged blocks.

This is a pretty common block structured layout. So common in fact that most block structured layouts will flip orientation by nesting level. If you nest a layout block inside a block that has vertical layout then the inner block will automatically switch to doing horizontal layout.

Notice that the entire layout fits snugly within the viewport.

Layout Runneth Over

Interesting stuff happen when the layout doesn’t fit inside the viewport. When it doesn’t fit vertically, obviously you’ll have to scroll up and down to see the whole thing.

However, if only the horizontal block doesn’t fit, that’s when the carousel pattern kicks in. So now things start looking like this:

The layout no longer fits within the cofines of the viewport.

How do you construct a UI affordance that lets people pan around this? Of course you use … wait I already mentioned it .. pan. Maybe use scroll bars or just about any other scrolling affordance.

So would it look like this if you scroll both horizontally and vertically a little bit?

A viewport shifted a little bit both horizontally and vertically. The relative position of the blocks are still the same as before. Large portions of the viewport are now blank.

Sliiiiiide To The Right

To address all the blankness, the carousel pattern posits that the the overflowing horizontal bits should be moved around independently of the vertical bits. Like this:

Vertically arranged bits move vertically. Horizontally arranged bits move horizontally.

We once again have the problem of affordances. There are many ways of doing this. Most devices have some way of panning around both horizontally and vertically. So the solution is obvious. Right?

If people stop here and implement that, then that would’ve been over.

Uh oh. Here come the dots of stupidity…

Instead, they went with this:

Dots of stupidity. Little circles and left and right arrows. When you click/tap on the left arrow button, the carousal slides to the left. When you click/tap on the right arrow button, the carousel moves to the right.

Let me summarize this interaction pattern.

  1. Use scroll bars, or whatever scrolling afforance to scroll up and down to access bits that are above and below the viewport.
  2. Click/tap on little circles with arrows to access bits that are on either side of the viewport but only within the single sliding carousel block containing the arrows.

There’s a couple of problems with this:

Carousel sympathizers explain the reasoning for this as follows:

  1. What if there was more than one horizontally sliding thingies? How would one know which horizontally sliding thingy to apply the horizontal scroll operation to?

    This is a purely hypothetical problem that often doesn’t exist. But I understand that UX designers have to account for the possibility.

  2. It’s okay because the user doesn’t always need to or want to see everything in the carousal. Why bother them with details they don’t need?

    That’s nice, but how would the user know they don’t need to see the thing without seeing the thing? It might be possible if all the visible things in the carousel were irrelevant to the user then they’ll just ignore the whole carousel.

    But what about the very users who are interested? They need to jump through hoops to look at the things that are relevant.

  3. What if there’s sooo many things in the horizontal slidey bit that we can’t possibly accommodate all of it?

    Someone has to click on the little dot with the arrow enough times to see each one incrementally. The number of items for which such a UI works is far smaller than a UI where one scrolls past them using a much more ergonomic interface.

What’s Better?

Try wrapping the horizontal blocks so the page only overflows vertically.

If there’s too many things to fit in a vertical overflow layout, then there’s already too many things for anyone to click through individual cards to see.

Just show the user a good subsample. If it whets their appetite, then offer them a link to take them to a dedicated page.

Wrap the horizontal blocks so there’s only vertical overflow.

In Summary