Creating Carousel User Interfaces the Right Way
Carousels, or image/content sliders, are perhaps the most common UI feature on websites these days, and for good reason. They’re useful, look good, and do the job of display multiple content pieces in a single space on a web page.
Feature area carousels, which are arguably the most common carousel UI type, usually bear the following characteristics, as highlighted by usability experts, the Nielsen Norman Group;
- Found at the top section of the homepage
- Occupies major real estate on the “above fold” section
- Multiple pieces of content appear in the same area, with content pieces displayed one at a time
- Shows a function or feature that there are multiple pieces of featured content in the carousel, usually at the bottom of the main content piece
- Often features images and text within each frame sequence
What Makes a Carousel so Useful?
Carousels are massively popular in web design because they allow multiple pieces of content to be displayed without occupying more than one area of homepage real estate. This helps placate any potential conflict between content vying for prominence. Moreover, because carousels are situated at the top of the page, users are more likely to see and interact with them right away.
Carousels, however, are not perfect. Because of how ubiquitous they are many users have also adapted to the presence of these interfaces, immediately scrolling past the large images or failing to see all the content pieces being alternately displayed.
Another problem with carousels is that designers often use these interfaces to display a set of images with the goal of giving users a complete idea of what an organization does. However, many users fail to see the big picture, catching a glimpse of just one image, which can give an inaccurate impression, especially when said image is outrageous or seemingly farfetched that its context is lost to the viewer.
An alternative to carousels are “hero” static images, which go back to the early days of the Internet. If you want to stick to your guns however, here are some tips we at Enform live by.
The Less Frames the Better
The Nielsen Norman Group suggests using no more than 5 frames within a carousel. When you think about the growing impatience of today’s web users, this actually makes sense. For mobile users especially, swiping through multiple frames can be taxing, and identifying which frames you’ve already seen can be difficult once the frame number exceeds the 5 threshold.
Clear Text and Images
The crisper text and images look, the more likely users will interact with them. Avoid using small text and small images, which will only infuriate mobile users. At the same time, high-density images take too long to load and look bad when compressed into a small smartphone screen.
Incorporate Navigation Controls Within the Carousel
Another rule of thumb is ensuring that controls to navigate between frames are actually in the carousel, not below it or separated by a fold. It’s generally a good idea to enable scrolling right by clicking/tapping on the right side of the frame, and scrolling by hitting the left side.