
An exhibition of carousels, all in one screen: vertical, horizontal, with thumbnails, and a content slider. Not many people connect anything relevant with carousels since most of the time the content hidden in the carousel is either irrelevant or promotional - or annoying and distracting. It’s common to see people noticing them, just to make sure they can dismiss them during the entire session. In fact, it’s almost as if some users were allergic towards carousels.

That’s a very fair question, and quite frequently the answer will be: not really. Replace Progress Dots With A Horizontal Slider.The article is slightly lengthier as expected, so tighten up your seat belts - it’s going to be quite a journey. What should we keep in mind if we do need to design a carousel? How do we create a better carousel experience that helps people, rather than frustrates them? And how do we avoid common accessibility and usability failures that carousels usually entail? That’s exactly what this article is all about. A wonderful illustration by Jacky Gilbertson ( Large preview) Carousels come in various sizes and flavors. They often make a quite lavish appearance in image galleries and news items, on landing pages and on corporate websites - and especially for onboarding, testimonials, and product highlights. Yet somehow carousels still manage to find their way to websites and applications. Add to it small progress dots with tiny tap areas, barely visible labels and a bit of parallax, and you have a quite troublesome design pattern in your hands. They have plenty of accessibility issues, they often exhibit low click-through rates, can be very disruptive when auto-advancing and people frequently scroll past through them.

You can find more examples in “Smart Interface Design Patterns”, a 8h-video course with 100s of hand-picked examples, curated by Vitaly.Ĭarousels don’t have a good reputation, and rightfully so.
PARALLAX MENU SECTION INDICATOR SERIES
In this series of articles, we highlight design patterns and techniques to design better interfaces.
