Horizontal sliders are bad for usability and conversion.
I recently came across a very nice looking portfolio called BetaKakaki that apart from beeing a little heavy on the parallax effect is a nice looking portfolio, and she looks like she’s talented. One thing struck me, though. When showcasing the work, we are presented with this grid of images…
… and then you press the little arrow to the right, a nice swiping animation shows you this screen. You can then go back and forth, clicking the little computers, checking out the work. But why? The downside is that some of the pieces of work are hidden from view. And the only gain is less vertical space.
This is far from the only horizontal slider on the web, a huge majority of websites have them in one form or other, but I will use this one example as a representative for them all.
Now if there is one thing we don’t need to save on websites, it is vertical space. There’s plenty to take from and it’s not a hassle to the user if you use plenty of it (unless the user has a ThinkPad with that strange red button by the keys and the minuscule scrolling area, but I’m going to go ahead and assume that no users of the web are management consultants, or in the off-chance that they are, have a mouse with a scroll wheel plugged into their laptop). And, yes, I know that on tablets and phones, horizontal scrolling is awesome, but only for apps IMHO and this article is about websites only.
What I’m trying to say is that all of the content on a website should be visible at all times. Users shouldn’t have to click to reveal content, only scroll. Remember when we did Flash-sites and all of them had a (+) button to reveal additional text? Oh how we laugh at those now, but this is the exact same thing.
But what about USAtoday, you say. Surely Fi can’t have done something that isn’t way ahead of everything else and absolutely perfect. Of course not, but the reason that the vertical navigation works for that website is that it’s a compliment to the main navigation. Instead of using the top navigation you can just switch between the different sections of the website via arrow-buttons (here is another great example of that).
Here’s what I propose: Scrolling is for navigation and clicking is for actions. And by navigation, I mean reading more content or deciding on what to click on, and by actions, I mean going to another part of the website or sending something somewhere.
Originally by : Nils Sköld from Medium.