by anthony on 08/02/11 at 4:25 pm
A carousel isn’t just a device you’ll find at the airport or amusement park. It’s also a widget that’s found on websites. Designers use them to display visual items in a way that’s quick for users to browse. Designers use them a lot, but making them usable is a different story. There are five big usability mistakes designers make when they design carousels. Are you making these mistakes on your carousel?
1. Auto-sliding after the user has already taken control
Just like how a news ticker automatically slides headlines across the TV screen, carousels can automatically slide visual items across a page. This technique is commonly used on home pages to engage users with featured content. However, the problem is that sometimes the default auto-sliding won’t stop after the user has taken control of it. When users are browsing through the items in a carousel, the auto-sliding should stop and switch to manual sliding so that users can browse at their own pace. It’s quite annoying to have the carousel automatically move to the next item when the user is trying to view the previous one.
2. Displaying new items in a row one at a time
When a carousel displays multiple items in a row, users have the benefit to browse the items in batches. However, sometimes when the user clicks to view the next batch of items, the new items show up one at a time. Displaying new items one by one can take the user a lot of time and clicks to get through. It’s more efficient to display new items row by row. This way users can view more at a time with less clicking.
3. Showing item progress in a confusing way
Since a carousel can only show a limited number of items at a time, it’s important for users to see where they are in their viewing progress. Users can get confused if you show your item progress in a non-intuitive way. This happens when designers point out the number of items shown out of the total number of items. Showing users the range of items they’re looking at with the total number of items in the carousel is a lot of unnecessary information for the user process. Instead, what the user really needs to know is how many item rows they have left to view. You can show this in a simpler way by pointing out the number of the rows in the carousel and which row the user is on. This approach is more intuitive for users to understand.
4. Infinite sliding
It’s not only important for users to know where they are in a carousel, but it’s also important for them to know when the carousel ends. A carousel that infinitely slides is one that loops back to the first item without telling users the carousel has ended. This can cause users to unintentionally view the same items over again. Add a constraint to your carousel by disabling the arrow when the carousel has gotten to the last item.
5. Tiny click targets
There’s no debate that tiny targets are harder to click. If the arrows on your carousel are smaller than the size of the mouse cursor, you have a problem. Make the target of your arrows larger and easier to click by placing them on the surface of a button. This gives users a larger click area so that they can use the arrows without accurately click on the arrow. The size increase also makes the arrows easier to see.
Avoid the Common Carousel Mistakes
Now that you’re aware of the five big usability mistakes on carousels, make sure they’re not found on yours. Carousels should make viewing content quick and easy for users. The way your carousel slides, shows progress and its arrow sizes are all important factors that make up a good carousel. Keep these factors in mind when you’re designing your next carousel so that your users can slide without a usability headache.