AG-9: Carousel

The Carousel design pattern is used to show featured items in vertical list of items with pictures and descriptions, but, unfortunately, many mobile app implementations do not offer satisfying carousel experience.

In this pattern, the user is able to view several images of products across a row with horizontal swipe to navigate from one product to another. Typically, an arrow indicates the direction of the carousel and apart from the featured item, there are other items partially hidden.

The problem

The functionality of the Carousel is intuitive, however, it’s necessary to provide visual information regarding the direction of the carousel and also button alternatives for the swiping gesture.

The pattern works well on small devices because it uses the screen space efficiently, but there are some implementations and variations that have serious acessibility and usability problems.

20190124_010956
Here, we can see that the user can get lost, just because have no slider indicator.

The recommendations

• At the end of a carousel, it’s necessary to give the user the opportunity to see more results. A “See more” link can be added and redirect the user to a page, listing more products.

• Some implementations presents vertical scrolling that are not smooth. The scrolling of this pattern must regard the user with the option of fast and precise scrolling, without keeping the user stuck and limiting the user’s navigation.

• The implementation should always indicate the scrolling direction. Also, the carousel shall provide a unique starting point, presenting the far left item first.

• An infinite carousel makes the user tired and is not recommended. A good amount of items varies from 8 to 20 items. When the carousel is infinite or has too many items, the user feels bored or tired.

• A carousel does not replace any kind of list of items.

• It’s importante to maintain consistency in the item’s structure, so if one item has image and description, all items must have the same information. Also, the items must have meaningful images and descriptive texts in few words.

20190124_010227

And here is another correct way of representing a carousel:

Leave a Reply

Your email address will not be published. Required fields are marked *