Carousels/Slideshows and User Controls

~ 3 min read

To place multiple pieces of information, motion graphics, or images into a single block of web space, carousels–otherwise known as slideshows–do the trick. Organizations benefit and users can choose where to spend their time. Often the slides, which are teasers, contain links to detailed content.

Here’s an example from Atlassian Help/documentation.

Slideshows are everywhere. You can find them on news sites, corporate About and sales pages as well as in Help documentation. (Since I live in the world of Help, this is where my interest and the context for this post lies.)

Here’s a slideshow that shows only the mandatory steps the complex assignment creation wizard in MyLab. As you can see, after the first image, each slide contains an animated gif with a link to the page where instructors can get all the details. The first slide contains a static image so that users scrolling down the page won’t be distracted.

Best Practices

• The Nielsen Norman Group offers these and others–I quote:
  • Use 5, or fewer, frames: Users don’t like to click too frequently.
  • Make sure that the user controls are located within and not outside of, or below the fold.
  • Give users total control instead of automatically rotating through the slides: While Nielson Norman offers tips for auto forwarding, our user testing found that users prefer to control slideshows. For example, at Landmark (a school renowned for its work with students who have language-based learning disabilities such as Dyslexia and related learning challenges) we learned that non-stop motion negatively affects folks with ADHD.
• Medium writer Maria Diodati advises creators to put your most important content on your first slide.

What about accessibility?

Quoted from w3org

• Users must be able to pause carousel movement because it can be too fast or distracting, making text hard to read.
• All functionality, including navigating between carousel items, must be operable by keyboard.
• Changes to carousel items must be communicated to all users, including screen reader users.

What we found in our accessibility testing

A slide with no action should be placed first and carousels should not automatically move. Many users are distracted by constant motion (including those with ADHD. Users prefer to have full control.

Users who rely on keyboard navigation jump from link to link on a page as they tab. For this reason, the only navigable slides in a carousel are those containing links. In my thumbnail example above, the first two slides aren’t discoverable for users that tab through a page. The second two slides with links work well.

We haven’t implemented focus, but there are options with Chrome and adding code.

How I borrowed analytics to increase click-throughs

Daniel Fitek’s Boston, Spring 2019 UXPA presentation Beyond Google Analytics—Using Event-Based Tracking for UX and Product Decisions turned out to be fascinating! Who’d have thought about creating, much less tracking, click-through analytics? And for 4 different types of slideshows? (The following image from Mr. Fitek’s presentation is used with permission.)

While slideshow dots might be the most common user controls for carousels, thumbnail images more than double the rate of carousel click-throughs. (I immediately changed my dots to thumbnails.)

The Nielsen Norman Group weighs into this discussion by noting that thumbnail images need to represent the content of the frame and look different from each other. Dots, they add, don’t work well on mobile devices: They’re small and rarely noticed. 

Finally

While you can use slideshows everywhere and anywhere: Do not!

Sure, they look flashy and fun, but if the information they contain isn’t important and useful, users will skip right past. Put your most important information on the first slide and include a link on every slide so that keyboard users can access each slide.