Carousels are the bane of a developers life, so much time can be wasted getting them to work. This is be even more challenging when it comes to responsive sites where the carousel needs to handle a variety of different states. Carousels have also proven to be an ineffective medium for delivering a message with low click through rates. Only 1% of the audience clicked a feature and of those, 89% of users clicked the feature that was in the first position.

So far we have said that they are a pain to implement and that they are highly ineffective but I am sure many of you are still being told ‘we need a carousel’ so at very least we need to ensure we get it right, with this in mind I thought I would pen some thoughts on how you can provide the best user experience when building a carousel into your site. This article includes both suggestions on how the user experience of the carousel should work and how these can be implemented.

There are several important elements to building a good experience from your carousel they are:

The design – how it looks and feels

Providing an accessible experience

Your Carousel Design

The user experience can be greatly influenced by the design of a carousel. The design can vary significantly however they all aim to achieve the same effect of squeezing several highlighted pieces of content into a single block that changes automatically and/or when the user interacts with it.

Positioning your arrows

If your carousel has arrows for navigation it is important to ensure that they are positioned correctly. The general rule for positioning your arrows is that they help the user understand which piece of content they are controlling.

Example 1

This first example consists of a carousel of several images along side some static text. The arrows are positioned to left and right of the image to signify to your users that the image will change when you click the arrows. The text in this example should not change as this would be confusing to the user due to where the arrows are placed.

Example 2

With this second example the text is related to the image and will change when the image changes so we need to show this to the user by putting the arrow on the outside. As you will notice the arrows are positioned in relation to all the content that will change not just the image.

Example 3

The third example moves the arrows to the center of the carousel, while not that common this is a perfectly good choice. The benefit of this style is that the user does not need to move their mouse from one side of the carousel to the other to navigate between content however this style will not suit all carousels.

Pager

At this point we are not saying whether you should or shouldn’t have a pager (see further down where we discuss this) but assuming you do opt to have pager it important that it is easy to spot and highlights the current active page.

Example 1

Example 1 is your standard horizontal pager along the bottom of the carousel. This shows that their are 3 items and that the first item is selected.

Example 2

So aside from a standard carousel pager we can instead have thumbnails to offer a sneak preview of what that item is, the below image is an example of this but you will notice I made the images particularly small. This was intentional to allow me to demonstrate that if the images are to small they become unrecognisable and then no longer serve their purpose. It is also important that the preview images are located in a way so that they do not obscure the rest of the carousel, had these images been bigger it would have made sense for the preview images to site below the main content rather than on top of it.

Provide accessibility

Your typical user will be controlling your carousel with a mouse so if you are already following the rules I have already laid out you are already doing pretty good however if we want to provide a positive experience to everyone we need to ensure we cater for all our users including those who may be disabled in some way.

Disabilities that could effect how someone interacts with your carousel includes:

People using screen readers

People with low vision

People only using keyboards (although not limited to only people using a screen reader)

People with cognitive disabilities

People with reading and learning disabilities

There are several ways in which we can ensure these users get a positive experience simply by following the WCAG guidelines. The most relevant principle of the WCAG guidelines for a carousel is principle 2 which consists of

Keyboard Accessible: Make all functionality available from a keyboard.

Enough Time: Provide users enough time to read and use content.

Navigable: Provide ways to help users navigate, find content, and determine where they are.

We should now look at how we can tackle each of these items of principle 2 individually.

Keyboard Accessible

There are multiple approaches we could take when making the carousel keyboard accessible.

The first approach is to simply add global method for when the user presses the right and left keys. When the keys are pressed the carousel will go backwards and forwards. While the advantage of this approach is that the user does not have had to give the carousel focus to interact with the carousel this is also its downfall as it means that even if they are not meaning to interact the carousel is being controlled.

The second approach is to allow the user to control the carousel with the arrow keys when they have focused on the carousel. This is my preferred approach as it means that the user has shown intent to interact with the carousel. To achieve this we first need to set tabindex=”0″ on the main carousel element and then set an focus and blur events that enable/disable the keyboard support.

Enough Time

This is only really relevant to carousels that can automatically rotate throughout the content. For a carousel that auto rotates to be accessible you need to ensure that the user has enough time to digest the content, this is particularly important for carousels that contain text along side imagery. The problem with this is what might be enough time for one person to read the content may not be enough time for someone else.

A common solution is to offer the users a play and pause control that allows them to pause the carousel while they read the content. Alternatively you could offer your users even greater control by making the speed that the items rotate flexible (similarly to how some computer games offer speed control, imagine cheetah mode from Sim City for your carousel).

Navigable

Earlier in the post we mentioned how we can include both arrows and a pager to help the user navigate through the content of the carousel however we didn’t really look into the requirement to have either. WCAG states that we should provide ways to help users navigate, find content, and determine where they are. In relation to a carousel this means we need to let our users move next and previous, the most identifiable way of doing this would be to include arrows. To enable users to determine where they are we should include a pager.

Other areas not covered by WCAG

Additionally we may also want to consider how we can enhance the experience of our carousel on a touch screen (such as a mobile device). One way to do this is to allow the user to swipe between elements of the carousel, swiping between content is a generally accepted paradigm which means it will be natural for your users to want to swipe the content.

Summary

With carousels there is a lot we could cover in relation to the general user experience but I have tried to cover the main areas here. The most important part is to ensure that the user knows what content they are controlling when they are interacting with the carousel. Please feel free to make comments on this article below.

Further Reading

When writing this article I have referred to the following sources

Web Content Accessibility Guidelines (WCAG) 2.0 –

http://www.w3.org/TR/2008/REC-WCAG20-20081211/

Are you looking for your next role? I work as an Lead Engineer at RVU where we are currently looking for Full Stack software engineers based in our London office. Find out more

Please enable JavaScript to view the comments powered by Disqus.