Carousel Design Pattern

By YUI TeamJanuary 15, 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 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.