Carousel Design Pattern

By Christian CrumlishJanuary 15th, 2008

3-D carousel wireframe imageAs the end of last year was winding up I spent some time tinkering with the open pattern library, in order to clear the way for our latest pattern release, Carousel. One reason why I needed to do this tinkering is that the Carousel pattern contains a few new fields in its data model. These are primarily elements that we have been including lately in our internal patterns that I wanted to find a way to promote to the public library.

But first, a little bit about the pattern. Folks inside and outside of Yahoo! have been asking us for a carousel patterns since before I got here (and you all want carousel code from YUI too — we hear you). It’s been possible to make a carousel using the Slide Transition pattern and associated YUI code, as Bill Scott demonstrated quite some time ago, but the detailed do’s and don’ts of effective carousels were still left up to the individual developers.

The Carousel Pattern page on the Pattern Library siteInternally here at Yahoo! we had a several partial carousel guidelines (carousels are used extensively across the network, especially in the Media Group sites) but no consistent standard. This past summer a large number of user experience designers carried on a week-long discussion — sharing experience and insights — and hashed out the major issues involved with carousel design. After that I gathered a group of interested designers and developers and started shaping those comments into a sketchy pattern draft.

Lucas Pettinati, a designer on the YDN team who also works closely with YUI, devoted a lot of time to sorting out the subtle details and possible variations on the basic carousel theme with me, and also cooked up some basic wireframe diagrams to help illustrate the possibilities. The draft pattern made its way through several review cycles and finally emerged ready to publish near the end of last year.

Why so much effort? It’s a good question. It’s certainly possible to describe a carousel in pattern format in a lot fewer words than we did. Both Patterns in Interaction Design and UI-patterns.com manage to describe carousels in fairly simple terms (the latter even uses a Yahoo! carousel as its sensitizing example).

We felt that there were more subtle issues at work here than simply queuing up a bunch of images and allowing them to scroll into a viewport. You’ll be the judge of whether we were right, and as always we welcome feedback on the pattern.

One last note about the pattern format: I’ve added a new field, Special Cases, to the pattern format. We’ve used it internally for some time and I’m not sure why we haven’t used it in the open library. In the past that material sometimes made it into the solution or rationale or was left out. As with Vote to Promote I’ve also included a Pattern Gallery and have now made that a standard element in the pattern model.

Finally, I’ve added a few new headings to the links along the gutter of the pattern description: Other Examples, Wireframe Templates, and Similar Patterns in Other Libraries. Other Examples are examples from around the Web, outside of the Yahoo! network. Wireframe templates are downloadable stencils (currently in Omnigraffle and Visio XML format) that designers can use to create and position their carousels. Similar Patterns in Other Libraries are, well… need I explain?

Inside Yahoo! our designers always want stencils to work with just as our developers always want code. We are working on producing wireframe templates for all of our patterns, starting with the new ones. You’ll notice that we don’t yet have YUI code for the carousel pattern but as soon as we do I will of course add a link to it from the pattern entry.

So I spent the holidays tinkering with the JSON and PHP files that build the library and adding in the new fields without breaking all the old patterns. (OK, I broke them but then I fixed them but that’s what staging servers are for, right?) Now that the new year has rolled around I realized I had stealth-released the carousel pattern when I should really be shouting about the newest pattern to the rafters. A lot of people have worked hard on this and I’m proud of the result. I hope you find it useful. Let us know what you think.

7 Comments

  1. Hi
    Do you see the carousel pattern as a more detailed or elaborate version of the slide transition?
    I can’t see the fundamental difference between the two.

  2. Great, question, Morten!

    As I see it, the Slide Transition pattern is an kind of animation used in a variety of different interactions.

    The Carousel is an elaboration, yes. More of a molecule than an atom.

    Carousels typically employ this Slide animation for bringing images into and out of the viewport (or “stage”), but a carousel may just as well use other forms of animation (as in some of the 3-D variations) or even, conceivably no animation at all.

    It *is* confusing, I admit, especially given that the sensitizing example for the Slide pattern is a carousel.

  3. Very interesting. We are much in need of good design patterns in the coding world. As a new user to YUI, I would be interested to see some guides applying the YUI framework to implement the design patterns set forth by Yahoo.

  4. Mike WS Stone said:
    February 1, 2008 at 12:20 pm

    I have just read the design pattern article and I have noticed an omission in the section on scrolling. To whit, there is no mention of random access to the off-screen content.
    I have an image gallery on one site made with Bill Scott’s Carousel and I decided to use the YUI slider widget as part of the controller. The slider allows one to click anywhere on the background to snap the thumb to that point. Doing that with Carousel as it stands (using the JavaScript Load method, at least) would result in the images not animating to the right place in the display area or the area being entirely blank if the distance between the thumb’s current position and the click is large enough. I investigated, found the problem, devised a quick fix and have informed Bill. All his examples assumed sequential movement through the data set and so he would not have encountered the problem, so I think random access should get a mention in a comprehensive pattern to help make developers aware of it.

  5. I discriminate between slide animation and carrousel by remembering the circular form as is shown in the 3d example. This is emphasized by the sequential access to the images, if you ask me. In practice, slide and carrousel can be of the same visual appearance. Or did I misunderstand?

    A nice example of a 3d carrousel can be seen on Amazon.co.uk nowadays by the way.

  6. Mike, I’m not sure I understand the scenario you’re describing (random access to off-screen content). Can you point me to the example you mentioned? If I can get my head around it, I’d like to see if the carousel pattern (and in-the-works YUI code related to it) can accommodate your use case.

    Reinier, I think your distinction between slide animation and carousel are pretty good, although I imaging a slide show could conceivably be circular and thus infinite.

    Got a link for 3D UK Amazon carousel?