Carousels and Sliders

tl;dr

Carousels and sliders present usability/accessibility issues, decrease page performance, and inhibit content discoverability. For these reasons, we advise against their use on UI Health Care websites.

Overview

Undoubtedly, during the past several years you have seen carousels on the internet. These once highly popular devices were thought to present users with an uncluttered way of viewing a variety of material; most often images with a small amount of text accompaniment.

We implemented carousels on the home pages of uichildrens.org and uihealthcare.org (now uihc.org.) Additionally, on uihealthcare.org carousels occupied the hero graphic region on landing pages for certain marketing campaigns and select services. We began phasing out sliders on our websites beginning in 2013.

Why did we use carousels in the first place?

In the early 2010s carousels were a web design fad that dominated the web. These devices provided a way to present material that appeared to be visually more dynamic than previous devices. Though their effect on usability was not well understood.

Politically speaking, there were many areas within our organization that were vying for exposure on the home page. The carousel seemed to be a viable solution to this issue and was well received within the organization. Everyone was happy, it seemed like a win-win scenario.

Performance, Compatibility, and Usability

It didn’t take long before our skepticism began to take hold. First, we noticed decreased performance on pages that used these devices. The cause was obvious, it was the images. Often images were ~100kb in size. Consistently, we were loading four to five of these on a page at a time. For a page that was < 200kb in size, before the carousel was added, four or five images could easily double or triple the page weight. Our internal networks were fast enough to handle this change with a fairly nominal increase in loading time. However, the story was different for external users.

Many users were accessing the internet with download speeds limited to 1.5mbps or slower. This change in page weight increased the loading time for those users from ~1.3 seconds to ~4.1 seconds. This also had an effect on how many people completed a site visit. With longer loading times, fewer people were willing to wait for the pages to load, leading to a decrease in traffic for specific pages. This problem was compounded for mobile device users who’s network access was significantly slower than 1.5mbps, particularly in rural areas.

Compatibility

Browser compatibility was another issue. Firefox, Chrome, and Safari were making a lot of improvements to their javascript and rendering engines. In some sense, things looked very promising, these browsers were becoming more efficient with better capabilities. However, a large portion of our audience both internally and externally were still using browsers with aged feature sets. We experimented with and implemented a number of potential solutions to help with overall performance, but none really fit the bill. We regularly saw issues with animation performance and loading times on older browsers resulting in a suboptimal experience.

Mobile devices accounted for a fairly low percentage of traffic to our sites, but this was steadily changing. These devices were severely underpowered compared to their desktop counterparts and offered a worse experience. Load time and animation performance on mobile devices was abysmal. Additionally, it did not help that uihealthcare.org was not yet a responsive design.

Usability

Our analytic data showed many of the items in the second or later position had very little traffic compared to lead items. We hypothesized users did not interact with these items because they were hidden. In essence, discoverability was an issue, even when the number of items in the carousel were indicated.

We experimented with auto-advancing the items in the carousel in an attempt to see if more users would get to the second or third options. In practice this didn’t work and created other issues. We received complaints from users stating that the movement was distracting.

Auto-advancing was also problematic for screen readers. The experience was erratic. If a user was reading an item further down the page, and the slide changed, the screen reader would jump back to the active slide and and begin reading its contents. The loss of context was extremely frustrating for some users. We disabled immediately upon learning this.

With that said, we weren’t the only ones to observe this behavior. There have been a number of very reputable sources whose usability studies report the same observations our data suggests.

Conclusion

The Web Center recommends against using carousels on our websites. While devices are becoming increasingly performant, the issues with usability, discoverability, and accessibility are more important considerations.

Additional Reading

Published by

Domsic, Robert T

Senior Application Developer

One thought on “Carousels and Sliders”

Leave a Reply

Your email address will not be published. Required fields are marked *