Marcus
Be sure to check out Episode I first, unless you’re one of those people who thinks chronology is a non linear, non subjective point of view made of a big ball of wibbly wobbly timey wimey … stuff. In that case, go right on reading, you crazy Timelord, you.
Landing pages come in many shapes and sizes, but they all have one thing in common: they are meant to grab your attention right off the bat. Think the opening of any Star Wars film — the logo appears on screen with triumphant music. You’re totally invested in that quick moment. You want your website to have that kind of “oooh, I’m ready for something to happen” impact; your user should be engaged and eager to see what you’ve got for them.
One way to capture that attention on your website is with a slider. At its simplest, a slider is a slideshow that plays through a few frames that display images and information that you want the user to see. In many cases, these sliders run automatically, with no interaction from the user required (however, it is best to give them access to the controls for those that are impatient or curious).
Like all tools, however, sliders should be examined for effectiveness. Just because something is attention grabbing doesn’t mean that it’s the best solution.
Sliders: The Go to From Back In The Day
If you were to Google “best websites with sliders” you would get a smattering of top [insert number here] lists, many of which will have the same websites strewn across them. What you’ll notice upon a deeper dive is that most of these websites that have been labeled as being the best use of sliders actually don’t even use sliders anymore. In recent redesigns, the sliders are removed and replaced with a static “hero image” … or a group of images … or really anything else. Sliders seem to be on their way out, and there’s good cause for that.
A typical slider at the top of a landing page has three or more slides and is set to change to the next slide about every four to six seconds (trust me … I looked at about twenty different pages and counted!). That’s not a lot of time to grab someone’s attention and deliver a lot of information, which can lead to poorly designed slides. Either there’s too much information to digest in that few-second timespan, potentially leading to something that looks more like a banner ad — which most people typically avoid like the plague — or there’s just enough information but the slide changes too quickly, flipping through frames in a blur, leading the user to ignore them and search for their content some other way.
Users have an agenda, and so do you. They come to your website looking for something, and you want them to find it. The problem is, you have a lot of things you want to show them, and due to the short attention spans of most people, a quick slideshow seems to make the most sense: keep their eyes guessing and attract them like the pulsing of a firefly. The reality, however, is that just won’t work. Data from UX tests of various websites show that very few people actually click on the slides (around 1% of the time in many cases), or find that they go by too fast to be digested.
Adding to the problem with sliders is this: most pages with sliders are not responsive, meaning that they do not translate well to mobile screens. This results in images that appear pixelated or incorrectly cropped at different scales, or text that doesn’t move right or scale appropriately, effectively breaking the design. Nobody wants to see that, especially your users. Sliders are just terribly designed for the modern age of websites that need to fit in your pocket.
One technique that has replaced sliders is using a static two-column landing banner. Here you have text in one column, and an image in the other. The text describes your product or service, and the image is associated with that. Nothing moves, which gives the user time to read and move on at their own pace. The static landing banner comes with an additional bonus: it’s easy to make it responsive and scale the image and the text appropriately and independently. This has been shown to be effective, but it does limit your landing to one product/service before the user starts scrolling or clicking through menus, giving them more time to get distracted.
However, don’t lose hope! There is a solution! By combining this side-by-side method with a slider you can get the best of Bōwst worlds.*
Enter Pointy Slider from CodyHouse
Described as “a slideshow with sliding-in panels that unveil new, fixed background images”, Pointy Slider is a slider with frames composed of two separate slides that only change when the user clicks the slide they wish to see. When that happens, a new slide of text and a new image move into place over the other slide. This mimics the side-by-side design with the text in one column and an associated image in the other. The user is given full control, which removes those frustrating “wait, what, I was reading that, *sigh*, dammit” moments.
More importantly, Pointy Slider is responsive, making it work from your desktop to your phone with ease. The text is separate from the image, allowing it to reformat appropriately with different screens. Additionally, because it is built with mobile in mind, you can actually swipe between slides on your phone or tablet rather than tapping the page buttons. It works and it looks good (isn’t that how all web design should be?).
Pointy Slider isn’t the only option for a slider (ex: codrops fullscreen slit slider), but it is a well designed one that is user-friendly; it also serves as an example of the key concepts to consider when it comes to slider design and implementation:
-
Responsive First
-
User Control
-
Anchoring and Motion
-
Images and Text
Before you go diving in and adopting this new slider in the place of your current one, it’s important to understand whether or not a slider is necessary. As mentioned before, most of the pages that were recommended for their slider use actually removed them in redesigns.
Final thoughts
If you feel that a slider is necessary for your website, then make sure it is designed well. It should fit thematically with your page and your brand, it shouldn’t be distracting to users, and most of all, it needs to be responsive.
Resources:
http://shouldiuseacarousel.com/
https://codyhouse.co/gem/hero-slider/
https://codyhouse.co/gem/pointy-slider/
http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/
http://tympanus.net/Tutorials/RotatingImageSlider/
*See what I did there?
