Carousel
Rotating content in one space, which performs poorly for anything the user needs to see.
Definition
A carousel cycles through content items in a fixed region. Auto-advancing carousels have consistently poor engagement beyond the first slide and introduce several accessibility problems.
Mixed evidence. Real research exists, but findings conflict, effect sizes are small, or the jump from the lab to interface design is contested.
If you must build one
- Do not auto-advance. If you do, provide a visible pause control and stop on hover and focus.
- Show that more content exists by letting the next item peek in from the edge.
- Provide visible previous and next controls with accessible names, plus keyboard support.
- Make each item reachable by keyboard and expose position, such as 'item 3 of 8'.
- Prefer a horizontally scrollable list with scroll-snap over a slide-swapping carousel. It is simpler, works with native scrolling, and is accessible by default.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Why this works
The reasoning this entry rests on.
- Banner BlindnessPsychology
Rotating promotional content is the canonical case of a region people learn to ignore.
Principles behind this
The reasoning this solution is an application of.
- Selective AttentionPsychology
- ClosureUI foundation
- ImageryUI foundation
- MotionUI foundation
Often used with
These usually appear in the same screen or the same decision.