We Need to go Back to a Vertical Web

Horizontal sliders is 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 piece of work is 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. Theres plenty to take from and it’s not a hassle to the user if you use plenty of it (unless the user have a ThinkPad with that strange red button by the keys and the miniscule 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 in to 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 absolutley 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).

In this day and age of simple design and progressive reduction, we should remove all content (text, images, video) that we don’t need and we should show all the content we do need. We shouldn’t hide it behind a click. You basically build HTML by placing things under each other. If you want to hide things outside of the browser width, you have to use all sorts of other things like Javascript to make that happen (this may or may not be a lie from my part, but I’m writing it anyway to build my argument further).

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.

If you found this post valuable I’d really appreciate it if you could hit the Recommend button — Thanks!