2

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:

mockup

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.

  • 1
    What sort of content is being shown? Because if it even slightly resembles promotional content then the button might as well read "show more adverts". And I'm sure we can all guess how popular such an option would be with users. – JonW Apr 30 '15 at 16:48
  • 1
    @JonW they would be push features with an image, title, maybe an excerpt, which would link to another page on the same site - for instance it could show 'Our Team', 'Contact Us', or similar - it would only be used to advertise products if the site sold those products. (edited question to clarify) – jammypeach Apr 30 '15 at 16:54
  • Do you get the chance to challenge design decisions?"4 separate carousels!" - dreadful! – DarrylGodden Apr 30 '15 at 19:06
  • @DarrylGodden yes I do, sometimes however the client will insist on their 4 seperate carousels (usually it's because they have more content types than they know what to do with and they all need to have some sort of prominence.). that's a more extreme example, the norm is 1 or 2. – jammypeach Apr 30 '15 at 20:12
4

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:

    netflix interface with multiple carousels

  • 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:

enter image description here

  • great answer - and a better solution too - thanks. – jammypeach May 1 '15 at 12:48
  • 1
    the solution which addresses the drawbacks is a better alternative to a carousel, but I understand the drawbacks you've mentioned and agree with them - I'll bear this in mind the next time there are carousels in the design. – jammypeach May 1 '15 at 13:03
0

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?.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.