Gravitywell - Don't be a slave to the slider

Don't be a slave to the slider

Posted by Laura Nevo on 2nd October 2012

In the past years, we've seen a fast increase of these sliding images. Carousels, rotating banners, sliders, it designates these big banners, usually on top of the page, which automatically slide from one image to another.

MOAR information?!

Banner Too much informationWhen your website threatens to overload your users.

It can be very appealing to concentrate all the information about your company that you think is useful. However, it's a false solution. Don't be fooled, nobody reads all the slides you put on your banner anyway. Actually, sliding banners get easily ignored says this article. It makes perfect sense. The more information you give someone, the less he or she will remember it. We've all been students!

The solution might be to review the importance of each element in your page. You'll quickly see that news articles are not the most critical information... Or the pictures simply distract the user from the initial product presented.

If you're stuck, go back to the branding guidelines if you have any, or define what the main purpose of the page is and drop the rest. A lot of details can be explained in other parts of the website.

Don't be lazy

If a slider has such little benefit, why do we do it? It may come with a lack of creativity, or a lack of time to really make the right choice in terms of interface. In summary: "we don't know how to make the home page attractive and we don't have the time to research. So what about adding a massive slider on top of the page? It's less space to worry about and the imagery will lighten the amount of text. That's what everyone does!"

Adding a slider by default or by habit won't do you any good (see my previous point). I'd even say that one strong visual related to the product or the brand communicates more effectively than five half-related pictures.

Even if the banner is well done and effective, don't forget the rest of the content must also work and be well implemented. Don't fall into the trap of laziness. Don't rely on nice images to do all the work!

Banner AggregiftWhat a great example of one strong static image, telling you more about the function of the service than a thousand other in a slider.

Don't be cheesy

Banner Cheesy teamLet me introduce our team : Tom 42 year-old, Janice 57 and our intern John 16, all wearing their casual Friday clothes.

Sometimes, a company doesn't own any good pictures or is not willing to pay for a photographer. In this case, they can use royalty-free images (for example istockphotos). Although it can be a great alternative, it often ends by using cliches such as the typical smiling business man, the trustful handshake or the happy family.

Of course, it seems appealing to show handsome and successful men, women and cute children. Unfortunately, the main problem is the lack of transparency. After about twenty years of Internet, we adapted our browsing behaviour and we can perfectly see the difference between real and stock imagery. On the same principle as ad blindness, the cheesy and cliche visuals will at best be ignored, and at worst be considered as a fraud.

Moral of the story : be relevant with your choices, be less annoying!

Banner Envy Labs
Why not consider drawing, illustration or simply words instead of stock pictures?

Don't postpone

Imagery is essential during the design process. Too often, the choice is left just before the launch of the website. So far from the design step, it increases the risk of loosing focus of what you were trying to express. Looking for images can become a huge difficulty and end by using "gap-fillers". Worse, it's common to leave the choice to the client, especially if he or she has the control over the website through a CMS.

If you think anyone can choose effective imagery for a website, either you put too much responsibility on the client's shoulders, either you devalue the skills of the designer.

Blame the CMS!

Some cases are more difficult than others though. What if the designer doesn't have the control over the sliding banner? It's common for a client to require a feature allowing him or her to update images and text (latest events, featured articles or products changing). After all, that's the main reason why the use of a CMS has become so popular over the past years. It also means that we lose control of the project when handing it to the client.

Of course, you can try to convince the client to get a contract with the designer for any new needed material. This way, the designer doesn't see all his nice branding slaughtered and keep getting work from the client in a healthy relationship. But what if the client refuses? Don't panic, there are solutions!

Creating detailed guidelines takes time but it's essential to allow other parties to handle the website without ruining the initial work. It's also about educating the client as much as you can on design. The web community will be grateful!

If none of this is possible or realistic, you can implement jQuery plugins in your CMS which will automatically give a vintage colour, crop, blur your pictures, and more! Just check the effects you use are compatible with the technology used by your audience!

Banner VintageJS While the first image looks like a crappy bin and extinguisher, VintageJS allows you to tell your users "ah do you remember all the good memories we had with this bin? Like the time we set it on fire...".

You're doing it right

Like everything else, it's not to say that sliding banners should be stopped and sent into the hell of the web, between tables and animated gifs (after all, even gifs were reborn)! There are some excellent websites using sliders or alternatives to their benefit.

Banner Lapka

LAPKA Instead of using a sliding banner to crush information, Lapka present the different modules of their products by scrolling down. They went even further by only keeping the most useful information and images and getting rid of everything else.

Banner Noe Interactive

NOE INTERACTIVE Their sliding banner not only present each of their product, but the blurred background image recreate an atmosphere related to the topic.

Banner Spokes

SPOKES Like Lapka, Spokes are organising their page around images and content at the same time, constantly referring to each other.

Banner Paper Mill

THE PAPER MILL The Paper Mill's sliders brings us to the comfortable atmosphere of their bar restaurant through their beautiful and same tone pictures. In the internal pages, we can even expand the banner to see them better.

Banner Conspiracy

CONSPIRACY An interactive approach which allows you to compose yourself the design of the shoe.

Banner Matthew Williams

MATTHEW WILLIAMS The traditional sliding banner is very useful when need to push strong images. It's still a common and appropriate  feature for a portfolio.

Banner Cybertronical

CYBERTRONICAL This slider proposes additional details through the three images below changing at the same time.

Banner Marie Catribs

MARIE CATRIBS A sliding banner can be a wonderful feature in the food industry if you have great and tasty pictures taken by a photographer.

Banner Le Pain Quotidien

LE PAIN QUOTIDIEN Instead of using a slider, Le Pain Quotidien randomly shows an image when you reload the page. It can be a great solution to more than one visual without distracting the user with sliding elements.

Image credit :