{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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.

Examples, dammit

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):

Magic Realism

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’. 

Magic Realism

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.

Sarah Rhoads

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.

Sarah Rhoads

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). 

Sursly

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.

Sursly

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.

Synthetic

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.

Synthetic

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.”

Slideoo

Less of a horizontal site and more aligned to Flickr slideshows, which is the site’s raison d’etre. 

Slideoo

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.

Paolo Boccardi

Paulo’s site displays his fashion photography via a horizontal gallery display. This layout selection works very well for this kind of application.

Paulo Boccardi

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. 

Snohetta

This architecture practice uses the horizontal layout for news items, which works as a kind of timeline. 

Snohetta

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.

Contraband

This photo essay from photographer Jan Sochor uses a horizontal layout, unlike much of his other stories / pictures.

Contraband

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?  

Recommendations

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).

  1. Big, visible buttons (e.g. move forward / backward arrows that stand out)
  2. Labels (e.g. ‘Go’, or ‘Forward’, or even category labels)
  3. Intuitive controls (if I click that image will it open a page, or scroll forward?)
  4. Big on-page sliders (avoid fiddly brower sliders)
  5. Pagination icons, perhaps with thumbnails (‘jump to page 12’)
  6. Static controls (no speeding up or slowing down when you drag the mouse around a control)
  7. Do not kill the browser slider (when all else fails, don’t make me think... it's like removing the 'Back' button)
  8. 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)
  9. 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)
  10. Rollover effects are useful (let users know that a button - or image - is an active control)
Thoughts?
Chris Lake

Published 24 June, 2009 by Chris Lake

Chris Lake is CEO at EmpiricalProof, and former Director of Content at Econsultancy. Follow him on Twitter, Google+ or connect via Linkedin.

582 more posts from this author

Comments (12)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

David King

If people want to keep all the benefits of vertical scrolling (like the spacebar, page up / down, mouse scrollwheel) then you should have a read of my tutorial on how to solve this. It's pretty simple, the vertical scroll remains in place, but the scroll amount is "mapped" to the horizontal!

http://oopstudios.com/ask_me/007_making_usable_horizontal_scrolling/index.html

Fine article as ever, I've been following econsultancy on Twitter for ages but never seem to comment. Might start doing that actually!

about 7 years ago

Chris Lake

Chris Lake, CEO at Empirical Proof

Hey David,

I've been working on the assumption that there are some smart technical workarounds for this stuff so thanks for flagging up your article. Will check it out.

Thanks too for the good words.

c.

about 7 years ago

Avatar-blank-50x50

Web Designing India

Thank you very much for given this great post.........

about 7 years ago

Avatar-blank-50x50

daniel

Really great information on horizontal web design. David's tutorial is awesome. thanks

about 7 years ago

Avatar-blank-50x50

Alisa Rogers

A good collection. I would say that just use the one that you need, I think the author not really want you to use everything here, we all know that we have our own style, we use different tools to design those tools we are comfortable using. This is just a variety of tools that maybe one of these are your must-have-tools.

about 7 years ago

Avatar-blank-50x50

Smith

Thank you for sharing your Valuable information on horizontal web design.

about 7 years ago

Avatar-blank-50x50

Web Design Company India

Good Post. Thanks:)

about 7 years ago

Avatar-blank-50x50

nirenjan

hi! i like ur blog. Thanks for the sharing this website...

about 7 years ago

Avatar-blank-50x50

web development best practices

great stuff again, thanks so much for posting this. I will share with my Higher Ed colleagues who certainly will find this info useful :-) Continued success to you and your blog!

almost 7 years ago

Avatar-blank-50x50

Tor Clausen

So has anyone begun to see some templates with these point incorporated? I have a photo project and would love to present it in a horizontal way. There is a young chap that has made a wordpress theme that looks good...

http://wp.gregponchak.com/

Its very simple, but I haven't been able to  locate anything in affordable template form for this project.

Has anyone else seen some offerings?

Thanks David for your article. I only stumbled upon it now, and I had seen a few of those sites in my research.

Tor

over 6 years ago

Avatar-blank-50x50

Web design Witney

Its an interesting concept. Im not sure how it compares against research that has been undertaken that shows users prefer a site tobe vertical based over what you have been talking about. Im sure it horses for courses, and it goes without say the examples are stunning.

over 6 years ago

Avatar-blank-50x50

David

Really nice sites, but don;t you get annoyed by horizontal sites!

almost 6 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.