Great web design is all about adapting and adopting new practices based on your research. You need to be able to analyse the way that users engage with and interact with your website, to understand how effective your current web design is. And you should use this information to spur your research into different practices and techniques. One adaptation that websites often flick between is the hero image, and the hero slider, depending on website performance. So what is the hero slider? And how can you use it? Well, here at Pumpkin Web Design Manchester, we are Manchester’s leading web design experts. As a result, we have produced this guide to using a hero slider on your landing page.
What is a hero slider?
A hero slider takes your standard hero image to the next level, by scrolling between 2 or 3 images. So if you have different selling points, that are all equally important, you can use one hero slider per selling point. And set them to automatically scroll between the three options. You can also allow visitors control over the constant scrolling, with directional buttons. So if they miss something, they can easily go back and read it again.
Sliding carousels, slideshow galleries, or hero sliders, were generally replaced in 2014 by the standard hero image. That’s because there were a number of criticisms aimed at sliding images. These criticisms included:
- Being too distracting- sliding images at the top of the screen can be distracting for visitors, and it can prevent them from following your website in the order you would prefer.
- Not enough interaction- to stop the sliding images being distracting, some companies increased the time between scrolling. But this led to a strong decrease in the amount of visitors seeing the second or third images, and so they simply weren’t interacting with them at all.
- Being too slow to load- the JavaScript involved in creating these could seriously slow down the loading time of the website.
However, in current times, the hero image has become overused. To the point where users tend to not pay much attention to it anymore. A hero slider can inject some interest and enthusiasm back into your web design. And with certain rules, you can avoid these old criticisms.
Using a hero slider on your landing page
A hero slider used as the above the fold content on your landing page can be incredibly beneficial. Just remember these important rules:
- Give users enough time to read the content, before scrolling onto the next slide. But not too much time that they dont realize there is a next slide. The Google Store uses a hero slider, set to auto-play, with around 4 seconds between slides. And this works incredibly well.
- Let users have control of the slider. If you add buttons to help users control which slide is shown, they are less likely to miss out on slides, and will find it easier to recap information that might have moved. This will add to a more positive user experience.
- Stick to images, and not text. This is because text can be difficult to read in time, before the image changes. By using only a header, a call to action button, and a quality image, you can focus your users attention, and they will be less likely to miss out. Take a look at Samsung’s hero slider for more ideas.
For more information, or professional web design support, get in touch with the experts today, here at Pumpkin Web Design Manchester.