Product Slider

User Goal

I want to easily find the latest deals or featured products before exploring different products or categories.

Solution

Live ExampleBuy Now
Product Slider example

Why This Pattern Works

  • Clear labels indicate how many and what products are available
  • Big touch areas ensure easier and faster interaction
  • Fully responsive and optimised solutions for different device sizes
  • Touch-enabled for better interaction
  • Clear plain text and buttons allow for optimal readability and device breakpoints
  • No auto-rotation increase accessibility and decrease chances of causing banner blindness.
Read the in-depth article

Research Studies

product slider example on amazon

"One of the big problems with marketing banner carousel design right now is that the controls are not obvious.

Amazon’s carousel, shown above definitely sidesteps this issue by providing overt carousel controls."

Read more on Amazon's product slider
cerebral palsy user using a carousel

"A user with cerebral palsy is demonstrating how he can't get to carousel items fast enough before it advances." Brad Frost

"There is a chance that mobile users interact with carousels more than desktop users.

This could be due to the ease of interaction with swiping or controls relative to the smaller control target sizes with a mouse. It could also be a more natural pattern for mobile devices."

Read more on mobile carousel use

"Moving UI elements usually reduce accessibility, particularly for users with motor skill issues who have difficulty clicking something before it's taken away.

Most important, because it moves, users automatically assume that it might be an advertisement, which makes them more likely to ignore it."

Read more on auto rotation

1.07%

of visitors clicked through features on an image carousel. 89.1% of these clicked on the first feature only.

Read more on this research study
product slider heatmap example

Here's a heatmap of the product slider on this website.

Due to the context of the website, the data might not be that helpful, but it does give a sense of interaction between featured products.

Email me if you have more data

"It's very obvious on the number of sections here. It's also very obvious what you will find in each section. And that obviousness can have an impact on engagement."

See more on 'obviousness' by LukeW
piechart showing proportion of unique interactions

"Our data shows that the thumbnail controls were the most popular way to interact with the carousel. In fact, they were almost twice as popular as each of the other interaction methods and more popular than arrow and swipe interactions combined."

Read more on SmashingMag's research
Want to know more? See the full list of articles

Did I Miss Something?

Want me to add a research study I missed? Send me the link below and I'll check it out.
Thanks for your link! I will check out.
Oops! Something went wrong while submitting the form

Don't Miss Out

Get an email when I add new UI patterns & research…

Shooters! We're not quite sure what happened, but something went wrong while submitting this form...
HomeAll UI PatternsAbout@steynviljoen