Posted by: Peter Andrease

Posted on: September 11, 2012 9:06 am


UI Design – Sliders, when to use them

Sliders can be a good way of showing multiple news stories while saving space but done incorrectly they can be an eyesore. Heavy animations or overuse of graphics can really make damage the rest of the content on the page.

Sliders have been around in web design for a long time, first it was flash animation sliders and then jquery sliders. Done right users will enjoy cycling through a slider to find a story. Done wrong a user will be overwhelmed with information and leave or find themselves clicked into a page they did not intend to be thus getting frustrated and eventually leaving.



  • Use a slider if you think you’re desperate to get more news near the top of the page and don’t want to lose space on the page.
  • Use a slider if you’ve got relevant information you think a user will want to cycle through, not just because everyone else is one.
  • Use a discreet transition, recommended is a fade or simple slide effect. Unless you are a selling your jquery or animation skills don’t overkill it.
  • Use pagination or arrows. It’s good to show the user how far they are through the slider, how many stories are left. Try to have numbered pagination if they’re stories or if they’re less text heavy then bullet points will suffice. Arrows can look nice too but I recommend using them when the slider is hovered over, if you’ve already got a click here button in the slider, pagination bullet points at the bottom and a left and right arrow the user has 3 calls to action in a small space. Try to keep in minimal.

3d Slider


  • Have too many irrelevant slides, users can get distracted easily.
  • Use blinking illustrations and flashing text when you’ve already got an animated banner – this is a headache for the user.
  • Use click here or read more buttons in your slider, use buttons to your advantage by helping let the user know what they’re clicking on. If they skimmed the story, suddenly seeing a read more is not going to help, but if it says watch video or view experiment then that’s more effective.
Peter Andrease

Peter Andrease

Peter heads up the entire web design team at our agency and enjoys delivering interesting posts that deal with brand new design tips, tricks and tools. As his strengths also lie in client training, Peter has also produced a huge number of tutorials on the subject of design, many of which can be found elsewhere on the site.

Tags: , ,