Some people don’t care for rules when it comes to usability, and with good reason. Not all sites are equal, and more importantly, not all audiences are the same. What’s right for a 15 year old might be very wrong for a 70 year old.
Personally I believe in a hybrid approach, whereby some of the fundamentals of web design should be set in stone, and adhered to. After that, it’s a horses for courses approach, where recommendations trump rules, which are in any case there to be challenged. Apart from white text on a white background of course. That would be stupid.
One of those rules that I would have until very recently placed in my top 25 usability fundamentals would be to avoid horizontal scrolling, at all costs. However, there seems to be a growing trend towards horizontal web design.
What we’re talking about here isn’t so much a problem where web designers have opted for fixed width layouts that are too wide for most people’s screens, but where sites have been designed to specifically provide a horizontal experience for users.
Horizontal design can work well in a number of circumstances. I have seen this approach used best for gallery sites, portfolio sites and – occasionally – for ultra niche retailers.
The control issue
There is a problem with horizontal sites, and it's to do with navigation and movement. In the same way that we do not always use the vertical scroller to navigate vertical websites, we do not want to be limited to hovering over fiddly horizontal scrollbars to move through a horizontal website.
For vertical sites I use the spacebar (which acts as ‘page down’) and the arrow keys more than I use the vertical scrollbar. The latter works (poorly) for horizontal sites, but the spacebar is redundant. On top of these controls we use on-page navigation aids to move around websites, and we use the mouse scroller. There are also page up and page down buttons to factor in. And no doubt a bunch of others that I don't personally use.
So at this point it is worth remembering Steve Krug’s ‘Don’t Make Me Think’ mantra. I'm normally forced to think each time I visit a horizontal website. Before figuring out whether or not it is a good idea to reinvent the wheel it is worth considering whether or not you actually need a horizontal website. I mean, do you? Really? While I admire anybody who wants to step away from the flock, the user experience should not be compromised on the basis of simply wanting to do something different.
What can you do?
Many horizontal websites simply rely on the browser’s scroller. In my world this sucks. But what’s worse is to kill the browser’s scroller altogether (as many do), leaving the user to figure out exactly how to use a website. That sucks even more, especially when the navigation controls appear are also AWOL. We're all cognitive misers, remember, and we won't jump through too many hoops.
The key, it seems, is to provide the user with a range of navigation aids above (literally) and beyond the horizontal scroller. On-page navigation icons - such as arrows and large scrollers - are essential in order to provide a smooth user experience. There are other ways of helping a visitor move through a horizontal website, as we shall see. Some of these are more effective and intuitive than others.
So my recommendations focus on the kinds of controls that web designers can employ to improve the user experience on horizontal websites.
Let’s now look at some examples of horizontal sites that are aware that there’s more to life than the scroller, and check out the tools that they employ for navigation. Maybe you'll come to the same judgement as me, or maybe you won't! In any event, here are a few sites to investigate (screenshots provided, but visit the sites to see them for yourself):
The problem I have here is that despite the gallery-like nature of this website (which works very well, horizontally), I still don’t want to use the scroll bar at the foot of the browser to navigate through these ‘pages’.
Solution: Magic Realism allows the user to click on the image nearest the right margin of the page, to scroll along what is essentially a gallery wall. It's not especially intuitive, as web users often click on images to go to a page, or to see a bigger version of that image. But once you've done it once, it works well.
The starting point for this site is a blank page, forcing the visitor to figure out how to proceed. Note too that the browser scroll bar has been disabled. This is forcing the visitor to think, and to look around the page for clues.
Solution: This site employs a large scroller at the bottom left of the page, which moves along the width of the page as you move. It also employs a ‘Fast Forward’ navigation tool positioned at the top right of the page. Both of these are useful, but the positioning doesn’t quite work for me (I reckon they should be in the same place, at the foot of the page).
Tyler Fink’s website is much admired by web designers, some of whom have ‘borrowed’ it in its entirety. Tyler uses a horizontal layout for his site.
Solution: A ‘Go’ arrow helps the user to move through the site. The trouble I have in this case is that the Go button jumps around the page, and isn’t as prominent as it might be. I’m a huge fan of yellow highlighting, but there’s a lot of it on the page – the button could be stand out a little better. Thankfully Tyler’s site only has a few pages and it soon becomes apparent that anything shaded in yellow is a link.
Apparently a brand strategy firm, though you wouldn’t know it by the homepage or, for that matter, the ‘about’ page. In any event, here is one website that I’m filing under ‘too clever for its own good’. It breaks convention in a number of areas (how do I navigate back to the homepage?), and has opted for a horizontal layout.
Solution: There’s a horizontal scroller that I don’t want to use, but by accident I clicked on one of the horizontal coloured bars in the footer, and it randomly jumped to a horizontal page. Needs labelling if this is to work. As is, it seems confused and is not intuitive. In the words of Bob Dylan: “Lo and behold, lo and behold, lookin' for my lo and behold, get me outta here my dear man.”
Less of a horizontal site and more aligned to Flickr slideshows, which is the site’s raison d’etre.
Solution: Not immediately apparent, but hover over the left or right image and a [+] or [-] icon appears to help you scroll. Apply that thinking to a horizontal website and win. But why not use bigger icons? And is any reason to fade these buttons in and out, triggered by mouse activity (hovering over the image, in this case)? I think this would be far more usable if they were visible at all times.
Paulo’s site displays his fashion photography via a horizontal gallery display. This layout selection works very well for this kind of application.
Solution: Paulo also uses the Magic Realism navigation aid where clicking on the right image pulls moves it to the left, and pulls in some new ones. In addition there is a neat ‘page’ counter in the footer, which allows the visitor to jump directly to an image. If you rollover these footer links a thumbnail is displayed, which helps.
This architecture practice uses the horizontal layout for news items, which works as a kind of timeline.
Solution: The browser scroller has been entirely abandoned forcing the user to look for some other way of digesting Snohetta’s news. A large black arrow is displayed on the left and right images. This works well… unless the image also has a black background, in which case the arrow vanishes. The arrow turns white in the hover state.
This photo essay from photographer Jan Sochor uses a horizontal layout, unlike much of his other stories / pictures.
Solution: A red ‘play’ arrow positioned at the top left of the screen seems to be the way forward here, but upon clicking it three more buttons are revealed: ‘fast forward’, ‘rewind’, and ‘pause’. Why the play button doesn’t work is a mystery but it needs to be clicked simply to see the other active motion controls. The fast forward button acts as ‘play’. The positioning of the buttons leaves a little to be desired… why not simply place them underneath the pictures, and why not have them visible?
Here are my 10 recommendations for designers that use horizontal layouts. I have focused on controls, which seems to be the key area that needs to be improved. Please suggest some others, and be sure to flag up any other horizontal sites that provide a joyous user experience. And check out this post from Vandelay Design to see more horizontal websites (most of my examples come from that).
- Big, visible buttons (e.g. move forward / backward arrows that stand out)
- Labels (e.g. ‘Go’, or ‘Forward’, or even category labels)
- Intuitive controls (if I click that image will it open a page, or scroll forward?)
- Big on-page sliders (avoid fiddly brower sliders)
- Pagination icons, perhaps with thumbnails (‘jump to page 12’)
- Static controls (no speeding up or slowing down when you drag the mouse around a control)
- Do not kill the browser slider (when all else fails, don’t make me think... it's like removing the 'Back' button)
- Link to the homepage on every page (some of these sites don’t do this / have no fixed logo... always provide a link, e.g. in the footer)
- Take care over positioning (I reckon controls should be placed in the middle of the page, above the footer, and remain consistent across the site)
- Rollover effects are useful (let users know that a button - or image - is an active control)