A Carousel is a type of website module that rotates content in a similar manner as a slide show either by user command or timed transitions. These modules have many uses when displaying web content and vary in complexity. Some frequent applications of carousels are featuring blog posts, displaying product/service specifications and benefits or displaying portfolio images. Choosing to add a carousel to a website can create more interactive experiences while reducing vertical scrolling and extra mouse gestures. Designers and online marketers should be conscious of how and when to use carousels for delivering web content to achieve best results.

Other names for a carousel: Content Rotator, Content Slider, Media Block, Image Slidshow, Slideshow, Slider

2. Navigation elements of a carousel

The simplest types of carousels are automated, meaning that content rotates in a timed sequence without the user’s interaction. Other interface features such as toggle elements, labels and thumbnails can be added to the automated sequence to achieve more manual controls. If these manual user controls are added, timed transitions can be eliminated and still maintain a carousel’s purpose of displaying multiple pieces of content in a confined space. Combinations of of labels, two toggle elements and using thumbnails or icons are all considerations when making a more usable carousel but should be applied in moderation to avoid complicated navigating for users.

A. Labels

B. Toggle Elements

C. Tab-Style Navigation

D. Thumbnails & Icons

3. How does it impact online content strategies?

The rise of carousel implementation on the web has had a substantial impact on how users view and interact with online content. Although this type of module is a staple on the Internet, especially on “web 2.0″ websites, there is little research behind the effectiveness of choosing this method. There are hundreds of scenarios for when carousels are appropriate and just as many for when they are inappropriate. Here are four general types of carousel environments for content.

Types of Carousel Content Environments:

Adjacency:

When users want to preview relevant and related content, a carousel can allow users to easily flip through similar products and images while being contained within the same category or collection. Many e-commerce websites use this approach so that users can preview cross-sells, next-sells, targeted product promotions and recommended tuning. See examples 1.1 and 1.2 for appropriate use content in the Adjacency model.

Example 1.1

Example 1.2

Progress & Funnels:

If a website is selling a product or service and there is a main conversion goal or “call-to-action” (CTA) such as a free trial or sign-up, carousels can be a great way to move users through attributes and benefits in a controlled presentation-like environment. To avoid an abundance of parallel traffic on a commerce website and to persuade users to move forward, carousels can be an effective way to bring users to a desired outcome. See examples 2.1 and 2.2 for appropriate use content in the Progress & Funnels model.

Example 2.1

Example 2.2

Informational:

When your content is informational and less sales-driven, tabbed category carousels can provide different content previews. These are often used to present multiple pieces of information while using the benefits of a slideshow environment. The largest difference between this approach from Progress & Funnel carousels is it does not include a “call-to-action.” See example 3.1 to view an Informational model.

Example 3.1

Mixed Promotions:

This type of carousel displays unrelated promotions to jumpstart users to a specific area of a website. These are the most common type of carousel application and is often executed by advertisers. Most often, this type of approach is used on websites that have a wide variety of categories or sections to choose from and a certain area is promoted. See examples 4.1 and 4.2 for practical applications of the Mixed Promo model.

Example 4.1

Example 4.2

4. Considerations, Cautions & Limitations

A carousel is one of many tactics for displaying content in a more understandable, usable and effective way and using them should not driven by their aesthetic and clickable appeal alone. There are cautions, considerations and limitations that should be made before employing a carousel within a website design. Content, User Experience, Analytics & Tracking and Technical disciplines are all areas that should be reviewed carefully before using this type of a web module. Below, you will find a few considerations and questions to think about before rolling out a carousel module.

Purpose

What is this carousel trying to achieve? This simple question is critical in aligning content, user experience and technical options around a common goal. Carousels are not always the best way for presenting content and choosing whether or not to use them should be grounded in questioning its purpose and goals.

Content Composition

What content will be included within the carousel environment and what is the hierarchy of information? In larger projects these types of issues are handled by Information Architects and Content Strategists, but for small teams or small business owners, it is just as important to consider the makeup and organization of content. After deciding on a purpose, it is helpful to consider the appropriate type of carousel by determining the content environment.

For example, if related or similar products are being presented, using an adjacency environment model can help users compare and preview different offerings. Additionally, ask yourself questions such as: what product details need to be listed? Will there be a subtitle, “learn more” button, expanding box or description area? What types of other products will be listed in surrounding slides and how should we determine which slide appears first, last?

If you don’t have software for prototyping and testing, just mockup your designs on index cards and explore different content hierarchies and slide sequences. In its most basic form, a carousel is just a slideshow presentation. Asking some of these questions and testing compositions can help you find the best carousel content arrangement.

User Experience

The user experience design brings carousel content to life through interactive elements and graphics. Timing, carousel navigation elements and button placement are just a few of the areas that contribute to the carousel user experience. There are important considerations and cautions when exploring these elements in any carousel design.

Timing. If the carousel uses timed transitions, how much time will be spent on each slide? If slides are timed, it is important that users have an opportunity to read and process the content within each slide. An example of poorly planned transition timing is the Forbes carousel pointed out by Paul Kafasis in his blog. In this example, the slides transition to a new slide before most users have had time to read the copy.

One way to get around the pitfalls of timed slide transitions is to make a carousel both manual and automatic. Some ways of doing this are by implementing manual navigation elements such as right and left toggle buttons, slide indicators or tabs that allow the user to pause a slide show and view content relevant to the user.

There are a lot of navigation options when structuring a carousel’s user experience but many of the best designs have a balance of necessary navigation elements. Making a navigable carousel while not overloading users with options is key. Be mindful of how many navigation elements are included in a carousel design and use them in moderation.

Many great articles and resources currently exist on design and technical development of web content carousels. This insight was not intended to cover the area of design or development in depth, but if you would like more information or inspiration, please feel free to contact Martin Ashal, Austin O’Brion or visit the following links:

“Slideshows in Web Design and When to Use Them” by Matt Cronin

“Five Attractive Content Sliders with Featured list Layout” by Kevin Liew

Analytics & Tracking for Individual Content

If you are using a standard analytics platform, tracking will occur naturally through the placement of links within a page. However, one of largest advantages of a carousel, grouping multiple pieces of content within a fixed space, can be an analytic nightmare if content decision making is heavily metrics-based. By default, most carousels do not include event tracking or separate slide views. For example, If slide A, B and C are rotating through a carousel by user control under default analytic settings, they might never know how many times users are clicking to view slide B before clicking through to a deeper page.

When event tracking is critical in content decision making, there are ways to monitor how users are interacting with carousels. With many carousels being in prominent page positions, they usually attract a lot of visitor interaction. Tracking these interactions can offer important insights for optimizing your web content. Here are a few ways to track carousel events:

“Deep Linking”: Using hash tags (#), you can modify the url so that it jumps to a specific slide when sharing links. This approach allows google analytics and other tracking tools to view slide traffic as a separate page. This approach also works if you are using any expanding features within your carousel.

Tagging within Analytics Tools: If you are not interested in tracking carousel traffic as a separate page, Google Analytics and other tools can use tag features which allow you to track individual functions.

Javascript Event Tracking: By assigning a page filename to a specific Javascript event, you can log event occurrences through a variety of analytics systems. If you are using Google Analytics, click here to learn more about Javascript Event Tracking.

This insight was written by Austin O’Brion, Director of Strategic Development at Martin Ashal.

One of the harshest reviews came from Information Architects Inc (iA), a highly respected user experience, information architecture, and strategy firm located in Japan and Switzterland. At Martin Ashal we read and reference their literature often when designing our own solutions. Their review of the Wired application is well supported and almost lays a constructive road map for Wired to improve the current application for future releases.

iA discusses the use of two column design, “non screen” fonts, mixing fonts, unnecessary design ornaments and page ad integration. The one verse two column argument is exceptional and is reinforced with a diagram highlighting user confusion on almost every page of the WIRED app.

Read the full review by Information Architects.

While we agree with many of the criticisms in the article, iA’s view is limited to the initial launch and focuses solely on the user experience, not the broader marketing strategy. WIRED did produce and sell over 24,000 applications before many publishers released an iPad application, and WIRED executives have emphasized that additional features and improvements will be rolled out in coming months.

We think WIRED did a great job in being first to market with a somewhat “interactive” iPad app. They sold thousands of apps, generated enormous hype and may have even gained a few new customers. Similar to technology gadgets, future issues of the app will continue to improve just enough to keep us buying the next issue.

This insight was written by Marshal McNiven, Director of Strategic Engagement at Martin Ashal.

The full article is available on AdAge.com

“Are we taking full advantage of the tablet here? Or just just making another iPhone app?” – Memoria

Key topics include:

• Slide or scroll
• Explore the large multitouch-screen capabilities
• Don’t forget to exploit photography and video
• Orientation change can be delightful

Read the full article on AdAge.com

HUGE is digital strategy  powerhouse serving some of the largest brands including Ikea, CNN, Jet Blue and Pepsi.

This update was written by Marshal McNiven, Director of Strategic Engagement at Martin Ashal.