There have been some interesting findings published recently about how users interact with a carousel (or slider) on a website home page.
You know the thing, nice big pictures that slip past on the screen that allow multiple images to make use of the same space on one page, quite often with some form of animation.
They can look really good and are very popular.
However, there are some things to bear in mind to make sure that the carousel achieves all it can and doesn’t put users off your site.
Things to do:
- Have 3 to 5 slides as users are generally unlikely to look at more.
- Ensure that your most important slides appear first in the list. Users are unlikely to spend long on a homepage so you need to grab their attention.
- Make sure you add pause on mouse hover this stops the user accidentally clicking as the next slide trundles along sending them to the wrong page. Also think about disabling auto rotate on mobile, as users cannot “hover” over a slide on mobile.
- Stop auto rotating the slides if the user clicks on the slider nav as they probably want to take a good look at something.
- Have clear navigation so the user knows how many slides there are and which one they are on.
- Mobile - make sure you support ‘swipe’ too, even if you have traditional controls for the carousel, users like to have swipe on touch screens.
Things to avoid:
- Don’t make the slide the only link to an important page (like a sale for example)
- Don’t auto rotate too fast – give the user long enough to read a heading
- Mobile - don’t use big desktop carousel images, make sure the mobile slides are optimized for mobile devices, users won't thank you for sucking up their bandwidth whilst you load lots of pretty pictures.
If you want to know more, check out all the research on Smashing Magazine.