The carousel is a popular UI component for displaying collections of content while saving vertical screen space. However, on mobile devices, users often fail to interact with carousels because the visual cues for swiping are unclear.
Pagination dots and arrow buttons are commonly used to indicate more content, but they have drawbacks. Dots are small and easy to overlook, while arrows suggest tapping rather than swiping and take up valuable horizontal space.
A more effective cue is to use bleeding edges - partially displaying items on the sides of the carousel. This teases users, piquing their curiosity to swipe and explore.
For the clearest indication, combine bleeding edges with pagination dots inside a bar. The bar enhances the visibility of the dots, while the edges encourage swiping and the dots communicate the number of remaining swipes.
On mobile, avoid using arrow buttons on carousels as they obstruct content and waste limited screen space. However, they work well on desktop where clicking is standard and space is ample.
To sum up, the key to engaging users with mobile carousels is providing obvious cues tailored to the device. Use enticing bleeding edges and prominent dots to invite swiping and convey the amount of content remaining. Neglecting these cues may cause your carefully curated carousel to go unnoticed.