Carousel
Ran Berkovich

Carousels, Swipers, Sliders, and Usability

What’s the difference between a carousel, a swiper and a slider? The terms are used interchangeably, but I would argue, there’s a semantic difference. A definition:

Carousels are circular. They start over once you reach the last item.

Swipers are linear. You can swipe back and forth, but once you reach the last item, you can’t swipe any further.

Sliders are input elements (e.g. volume controls), and thus entirely different UI components.

Use Carousels/Swipers Sparingly

However, carousels/swipers in UI design are mostly internal shut up candy. They enable content managers to satisfy stakeholders by telling them "your content is located on position 6 in the carousel”.

In reality, research, including my own, suggests users rarely engage with content hidden behind the swipe. Instead, consider replacing the carousel with a static element, maybe including a queue, that updates the content either randomly or within a given time frame.

Nielsen Norman Group wrote an article on carousel usability back in 2013:
nngroup.com/articles/designing

Although that’s an old one, results seem to apply on mobile devices as well:
nngroup.com/articles/mobile-ca

This article was updated on 24 February 2023

Morten Bech

👋 Hi! I am a frontend web developer, designer, sparetime illustrator, librarian, husband, and father of two. 🤖 I work with frontend web development, UI design, and sometimes web graphics at a local TV station in the western part of Denmark, called TV MIDTVEST. 🛠️ Tools of the trade: VueJS, Nuxt, Tailwind, HTML, CSS, SCSS, JavaScript, Photoshop, Illustrator, Adobe XD, etc.

Comments