Friday, November 7, 2008

Carousel Usability

Here are some carousel usability guidelines I'm documenting for a work project. The guidelines are based on usability tests I've recently observed. I've tried to find examples out there on the web to illustrate key points.

- On initial page load, display some carousel movement like Apple to draw attention to fact that there's more content available.
- If using arrows, include them on both sides of the carousel even if one is initially disabled. The visibility of the two arrows will help users recognize the component as a carousel.
- If one arrow is initially disabled, make sure it appears that way by graying it out, while making the active arrow "pop".
- Highlight arrows and the carousel thumbnails on rollover to help communicate that they're clickable.
- Make arrows large enough to be easily noticed and clicked on. High button/background contrast also helps.
- Make the carousel images large enough so users can get a sense of what they represent.
- Consider rotating the featured content like PopPhoto.com, but give users control by also offering pause, previous and next options.
- Use clickable text or image links to represent content within the carousel rather than inexplicit numbers or icons that don't tell users much of anything.
- Consider displaying the number of items within the carousel like GameDaily.com to help users understand when they've viewed them all.
- Consider small circles to indicate how many individual items or sets of items are in the carousel; let this be an alternative way to navigate by making the circles clickable.
- Load the carousel on the page before the user's screensaver kicks in -- if you get my drift :)

No comments: