Slider design has become a massively popular practice in the world of web design. Besides saving space, it can be a great visual means of content presentation. Here are some tips on how to create great sliders for your clients' websites.
What is a Slider/Carousel?
In web design, sliders (a.k.a. carousels) as we know them today entered the world of websites around 2012.
Sliders are basically a design element on a website’s homepage (rarely seen on internal pages) which are used for presenting some featured content in a limited space. They are basically a few images which start rotating and showing different images and text after a certain period of time – like on a children’s carousel or merry-go-round, which is why they are also called galleries and slideshows.
Other names for a slider include: carousel, rotating banner, and image slider, even though many designers oppose to them being called ‘sliders’ in the first place.
Though very popular on the web, some designers actually do not really like them – they consider them esthetically unappealing and there are even some tests which proved that users miss content delivered via carousels. “Few interact with them,” Adam Fellowes concludes. However, this may be a matter of personal taste and subjective feeling, so it would be best to focus on how to design sliders in the best possible way rather than spending time and letters on writing negatively about them.
Good Sides and Bad Sides of Sliders/Carousels
Obviously, the biggest asset carousels hold is that they do wonders in small spaces. For example, if you redesigned your website but have three or more services or products to highlight, you can add them to a carousel.
However, sliders may seem like ads and their moving nature just contributes to this feeling to people who see them for the first time. Therefore, instead of leaving a positive impact on users, sliders can seem negative, causing the users to ignore them.
The speed can also be problematic – if the images move too fast, the users will not be able to read them on time, and likewise – if they are too slow, the users will be bored and move on.
5 Best Practices for Designing a Slide
1. No autoplay
This problem is major: when you hit autoplay, your users can no longer control it, which further means that they can miss important information if it goes too fast, or get annoyed by it being too slow. By giving them the chance to manipulate the slider – via clicking on a preferred slide – you allow them to do with it what they want, and when they want it.
2. KISS (keep it super simple)
The key thing with sliders is the content they present. The content – meaning words – has to be designed so as to be in line with the graphic behind it and perfectly concise and legible (after all, legibility is very important in design).
This basically means that you need to keep it super simple (a.k.a. KISS) and follow rule #1.
Never turn on autoplay and you will give your readers just enough time they need to read the text according to their own rhythm.
3. Give control
Naturally, rules #1 and #2 are in connection with the following: giving the reader the power to control the slides. This comes naturally from looking things differently: from their own perspective. It is THEIR interface, and it is better not to risk and make slides move either too fast or too slow.
Instead, giving the users intuitive cues such as arrows (to click or advance to another slide) or dots which show the position of the slide are just about the perfect solutions for this problem.
4. No duplicate H1 tags
Today, it is essential that designers know the basics of SEO. This means knowing the page elements that can influence SEO immensely (and even cost your client a penalty from Google).
One such basic SEO principle proclaims that there must not be more than one H1 tags on a web page. So, if you have a slider with, say, five images – make sure not to put H1 tags on each of them. This tag is usually reserved for the title tag.
Since such practice is banned, you can use H2 or H3 tags to highlight the content on your slider instead. If you are not sure how to do this, our SEO experts can help you with that.
5. Touch-friendliness
Even though today many sites are designed mobile-first and responsive design is a simple prerequisite, when it comes to sliders, many seem to forget about touch-friendliness. Just allow your users to swipe images on the carousel – this will make it far easier to manipulate the slides rather than tapping the dots or arrows.
Do you have any recommendations for slider design from your design experience? We would love to hear personal examples, so do tell.
