8

I'm reviewing a client's site and their designers have used an unusual element to present some of their key points. The element is called SlideDeck and it's basically an accordion menu that is turned counter-clockwise to be used as a fancy carousel.

sidedeck screenshot

The content that the client has put into the slider is a separate & straightforward story so I'm concerned with the appropriateness of such an element. Vertical accordion menus are used to conserve vertical space and to provide quick access to the 2nd level of navigation. However, when you go horizontal, regular carousels do the trick just fine and they require less distance to switch between slides with selectors being on the bottom.

SlideDeck's example gallery has both standard and custom styles. Of the standard layouts, Basecamp's product tour stands out the most though I'm not sold on it. In the custom layouts, CrazyEgg's marketing deck is the best and it's laid out very logically with "tabs" stacked vertically on the left and the main content presented on the right.

So is SlideDeck (or anything similar) a good alternative to a carousel or does it work only in certain cases and only with extensive customization?

Improve this question

5 Answers 5

Reset to default
7

Horizontal accordions have one advantage over carousels in that they do provide a complete overview of available content, whereas carousels by design only hint at additional content. Accordions provide overarching structure, carousels focus on item level details.

If your content has a meta-structure and is not simply a collection of items then use a horizontal accordion.

In your example the items form into a meta-structure with a sequence of introduction, details, and thru to call to action.

1 what is a slidedeck?
2 unique features
3 pro support
4 get started

If however you just had a collection of lolcats, in no particular order, then a carousel would be the better choice.

Improve this answer
2

I work with the SlideDeck team, so I thought I'd chime in. SlideDeck actually allows you to turn off the vertical spines, if you're looking to go for a more traditional carousel appearance - one of the skins that comes with it allows you to do this.

In terms of customization, it's really only limited to your skill and comfort with HTML/CSS/jQuery.

Improve this answer
1

First of all, SlideDeck is a carousel (that includes options for navigation ans sub-slides). With its extra features, SlideDeck creates a way to tell a story, the same way you might give a powerpoint presentation, in a linear fashion: it has a beginning, middle, and end. So, anytime you want to get a specific story across, in which each slide is connected to the rest but also stands on its own, SlideDeck is a good choice.

Standard carousels don't give the user as much insight into what each slide is, so navigation is essentially a blind process. If you have random, assorted, or miscellaneous slides of photos or content, standard carousels do just fine.

From the company website:

We stumbled into the [SlideDeck] concept when trying to simplify our own message and process. We use SlideDeck to share ideas, processes and products in a clear and simple way.

and

SlideDeck was designed to replace the web’s current model of text heavy services pages, unclear product tours and confusing process diagrams with a fun, quick and beautiful way to interact with websites.

Improve this answer
0

Whilst horizontal accordions are not a common pattern, users will probably understand them so long as their content is discoverable and (unobtrusive) transitions or animations make clear what's going on. Be sure to use hover states on tab controllers and make sure your implementation can still provide content to non-Javascript clients like text browsers and search engines.

Be aware, though, that horizontal accordions typically limit vertical space - I'm sure you can imagine how long tabs wouldn't just look strange, but encounter issues as soon as any of their title / link text falls above or below the fold. Some content doesn't like to be vertically constrained (like ordered lists of items which use top-to-bottom relationships to communicate hierarchy), so this could be a concern - I don't know what content your client is using.

I'd also be concerned about how horizontal accordions perform with a large number of items. Users like to read content in an F-shaped pattern whilst scanning the left margin, and my instinct is that users perform poorly at parsing multi-item rows. That means an accordion with many items could be problematic in user testing. I'm also not sure how you could indicate sub-tabs in this design - in vertical tabs, we can rely on indentation, but that won't really work here (especially as tab titles tend to be top-aligned).

Generally speaking, though, if you feel a normal carousel would work just fine (there's a small number of items, so they're all immediately discoverable), I'd stick with that just because navigation is more physically convenient (requires less mouse accuracy) and the pattern is more common by quite a degree.

Improve this answer
0

Think about what a horizontal accordion widget offers above a carousel.

  • The ability to skip between panels in non-consecutive manner.
  • The ability to label panels, so an indication of content is given before selection

If either of these features is useful to you, then consider it instead of a carousel.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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