Are there disadvantages to using an accordion instead of a carousel?

Question

I am required to use carousels very often in our designs - sometimes as many as 4 separate carousels on a homepage.

To increase engagement & conversions with website visitors (and of course reduce annoyance), I have tried to come up with an alternative to a carousel which I hope will negate some of the bad experiences that users have with them. Basically, I ended up with an accordion.

Here is a quick wireframe of the concept:

^{download bmml source – Wireframes created with Balsamiq Mockups}

I feel this is the right way to go in most cases, however it seems to me that most websites are trending away from accordions, and that while carousels may be more common, they are also in decline. (this is based on my own experience only).

So, I wanted to know if there was a good reason for this apparent decline, before deciding what to recommend.

Are there disadvantages to using an accordion like this, to display featured items, rather than a carousel?

Edit - the content of these features would be an image, title and possibly and excerpt, which would link to another page on the same site. For the purposes of this question you can assume they won't be promotions or link to an external site or service.

Answer 1

I don't think most websites are trending away from accordions towards carousels. Sites are trending away from carousels, and they are also trending away from accordions (if I were to speculate, perhaps at a slower rate).

---

Disadvantages

You asked specifically for potential disadvantages of using accordions instead of carousels, so:

• If you need to present content in sections, accordions wrap cells whereas carousels ensure that content appears on one line. This allows for clearer organization of sections, since each section occupies a predictable 1-line without wrapping.

  • For example, Netflix and iTunes both use user-scrolling carousels to present sections of movies, which allows them to give equal visual weight to each section:

  

• Accordions can be disorienting to users when they are activated because:

  • Users don't know how much content is going to show up when they press the button
  • Users can be disoriented if the content just appears suddenly without animation, especially if it pushes down other content on the page which just disappears below the fold.
  • It can be weird to figure out what to do with the See more button...do you hide it? If so is it confusing to users to have it disappear? If not, it creates an awkward break in the grid layout.

---

Addressing the disadvantages

• Some ways of managing the disorientation for users are:

  • Provide a preview of the content that is about to appear
  • Give users an indication of how much content is going to appear
  • Use animation to slide-down or reveal-down the accordion content.

• Here is a popular approach which uses all 3 techniques above...the gradient-faded previews helps users re-orient themselves after the accordion content is revealed:

Answer 2

With multiple types of content, it might be nicer to have tabs or vertically distinct sections, since with either the multiple carousels or the drop down, you're going to have a lot of potentially diverse content all showing up in the same place.

On the other hand, if clients have a few products that account for 90% of their sales, an accordion style display would allow users to pick the content that was appropriate to them.

If you need data to convince someone carousels are bad, check out Are carousels effective?.