Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Often cited usability guru Jakob Nielsen wrote the article “Top Ten Web-Design Mistakes in 2002” and placed on no 3 Horizontal Scrolling as a Web Design mistake with the motivation:

Users hate scrolling left to right. Vertical scrolling seems to be okay, maybe because it's much more common.

Web pages that require horizontal scrolling in standard-sized windows, such as 800x600 pixels, are particularly annoying. For some reason, many websites seem to be optimized for 805-pixel-wide browser windows, even though this resolution is pretty rare and the extra five pixels offer little relative to the annoyance of horizontal scrolling (and the space consumed by the horizontal scrollbar).

Even though the mentioned screen size and preferred web page width is a historical retrospect and not valid on todays’ screen width or web site width, the essence of it could still be valid. I’ve made web sites (SharePoint) wider than 1900 pixel and as an effect the web site scrolls horizontally. It still annoys me, but I’ve been wrong before.

The other view of the horizontal scrolling would be Web Designer Ledgers article “40 of the Best Horizontal Scrolling Web Sites” where they take discuss the possible issues of usability like this:

But What About Usability?

Let’s face it. Usability is an extremely important part of web design and horizontal websites are not very user friendly– yet. However usability is not the most important part of the equation. Those who elevate usability above all often minimize the “design” part of web design. Yes, you can design a very stylized and usable website, but where’s the futuristic and imaginative thinking within a vertical rectangle? The future is a horizontal rectangle. Let’s not forget that there was a time on the internet when the JPEG was not welcomed in web design, because it caused slower loading times. Technology advanced, designers created and users adapted. One day, the same will happen with horizontal websites.

Usability aside, horizontal websites are here to stay. Here’s a look at some of the most inspiring, cutting edge, in-your-face-and-not-going-anywhere horizontal sites.

So here we are, caught in the middle again between history and convention telling us not to scroll horizontal – and the future where horizontal scrolling is here whether we like it or not. Am I just an old fart who doesn’t catch up with the trends? Or have the attitude changed the last ten years on horizontal scrolling on web sites?

share|improve this question
3  
Build a mouse with a horizontal scroller on it. Ship that mouse with every single PC sold from now on so that everyone then has this mouse. Then start producing horizontal-scrolling sites / apps. My point being that it's possibly hardware-related as to whether horizontal scrolling gets taken-up more. –  JonW Dec 15 '12 at 17:38
    
@JonW while I mostly agree, some browsers support middle mouse button / scroll wheel -click to show a two-dimensional "glider" control that mimics scrolling in either direction by moving the mouse. This is usable with any three-button mouse (a restriction, sure, but less of a restriction than a "horizontal" scrollwheel) and independent of the scroll wheel per se, even though I agree that the real scrolling is a major enforcer of the vertical scrolling approach. –  kontur Dec 15 '12 at 23:20
    
@kontur really I'm referring to the Microsoft mouse with the physical scroller; it just exists now and is so simply usable just by being there that it takes no training, instructions or guidence - people just use it to scroll. Sure, laptops allow horizontal scrolling and websites include it too, but without the physical hardware influence pushing you in the direction of horizontal scrolling its just left as another feature that people have to stumble upon and discover to use. –  JonW Dec 15 '12 at 23:33
    
I think the mouse WAS the major barrier to horizontal scrolling, but I think it no longer is. Increasingly, browsing for leisure happens on tablets and mobiles. –  slawrence10 Dec 16 '12 at 0:19
    
Smashing magazine just linked to this kaikkonendesign.fi/columns, maybe CSS3 columns will be a catalyst for horizontal scrolling on the web –  slawrence10 Jan 10 '13 at 14:55

6 Answers 6

up vote 6 down vote accepted

In my view, horizontal scrolling as such is even less accepted today.

With responsiveness on the rise (RWD & A List Apart article from 2010), pages with regular horizontal scrolling appear to have "flawed designs" that force the browser to show horizontal scrollbars. This is even less acceptable as it was 5 to 10 years ago.

In addition to that, horizontal scrolling seems even more out of place especially as the web design community has adopted to views that horizontal scrolling provides a bad user experience. Using it today seems like a designer intentionally goes against convention, comparable to using web technologies like iframes or framesets that have in their own respect "matured" to being a major no-no.

However, there is also developments that refresh the appoach to horizontal scrolling. With RIA´s hainvg grown in importance over the last 5 to 10 years, there are types of websites that work more as interactive animations and thus can defy some of the old stigmas when it comes to horizontal scrolling. What is important to notice with those is that horizontal scrolling is rarely used "as is" by browser convention, but some sort of effect or animation navigation is coupled with it. (See for instance examples of parallax scrolling, where the visual animation effect has given justification to bring back horizontal scrolling as part of a well designed user experience.)

The other example of horizontal "scrolling", if you so will, concerns the latest developments in mobile user interface design, where operating systems and applications alike picked up horizontal scrolling between whole different views to leverage limited screen space. The side swipe as user interaction model brought back horizontal scrolling, of sorts.

All in all, I think there has been a limited scope rivival to horizontal scrolling by adapting to news contexts and usage scenarios. Plain old browser horizontal scrolling suffers from the same problematic it always did: Standard mouses still mostly feature only a vertical scrollwheel. Together with the fact that users have been reading long webpages vertically, there are only very specific scenarios that efficiently use horizontal scrolling and provide a positive user experience.

share|improve this answer
    
Boom, you're wrong Benny. I like this answer too, and there is more than one argument for your say. Good one +1 –  Benny Skogberg MCSA Dec 15 '12 at 21:58
1  
I find this answer hard to digest when we look at the likes of Windows 8 –  slawrence10 Dec 28 '12 at 20:44
    
There's a big difference between scrolling content sideways, and leveraging and space wider than one screen for applications and operating systems - both of which I think the answer mentions. Might as well mention OS spaces that allow you to have whole desktop views next to each other - still that is not purely "scrolling" per se. –  kontur Dec 28 '12 at 22:30

Attitudes have changed mainly because of:

  1. Horizontal Scroll on Tablet
  2. Ability of the mouse to scroll more easily through advanced coding
  3. Increased importance of Chinese language websites

ONE: Tablets have broken the barrier so it doesn't seem strange anymore. Consider image carrousels that are featured on websites or any type of slider. The user has to click to move left or right rather than scrolling, but this is a bridge on the web and certainly shows the direction toward horizontal scrolling.

TWO: The issue becomes a bit more sticky on PC because of the mouse, but there are ways to code it so the vertical scroller scrolls horizontally: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

THREE: I think the attitudes might also change because of new(ish) CSS coding that allows for Han-based Languages (Chinese) to be coded vertically instead of horizontally.
http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/ If you read right-to-left or left-to-right then you'll have a need to scroll down to get more information, but languages that are read top-to-bottom require horizontal scrolling. I'm not an expert on Chinese language websites, but my guess is that this will become an increasingly important factor in the future.

share|improve this answer
    
+1 for a Superb answer. This really answers my question! –  Benny Skogberg MCSA Dec 15 '12 at 21:53
    
In regards to your second point. Changing the direction of the scroll from what users expect from their scroll wheel is a terrible idea. If my scroll wheel goes up and down, the page should move up and down when i scroll. The website shouldn't decide how to interpret my scrolling. The Mighty Mouse and Magic Mouse handle scrolling in horizontal really well but no other mouse i've owned has. Agree with your other points though :) –  slaterjohn Jun 6 at 15:47

It boils down to the User, the Task and the Environment. In the past when horizontal scrolling was "bad practice" the conditions were this:

Environment - A browser on a PC or laptop. Scrolling via a trackpad or a mouse.

It's really awkward scrolling with a mouse horizontally. As we all know.

Now this is changing rapidly because the environment of "scrolling" is changing rapidly:

  • Mobile phones and tablets with touch screen make Horizontal swiping extremely simply
  • The introduction of Windows 8 sees the "home computer" evolving, we are seeing monitors with touch screen capabilities.

Using touch gestures for scrolling horizontally is not difficult, in fact it feels natural. So we are seeing a shift where things that make sense to scroll left-or right, actually do.

An example is the Facebook App: when viewing your news feed you scroll down, but within the news feed there is content that deserves more space. So for example if someone has uploaded four images into an album you can scroll horizontally within the news feed to see the different images. You can then continue vertical scrolling to see more of the news feed.

Another example is native use of horizontal scrolling within operating systems. This takes huge promenence in the new "Metro" design of Windows 8. You all see it for browsing photos on iOS.

A further change of environment is an advance in browser capability. Now its very easy to scroll a person to the left or right with Jquery, so you can do it with a click rahter than using the mouse with a dreaded horizontal scroll bar. A great example of a big organisation using supplementary horizontal scrolling in this way (clearly pushing functionality in the tablet market) is the BBC's homepage: www.bbc.co.uk

The BBC homepage uses the extended horizontal to display content

Today users come from almost every demographic from toddlers to the elderly, from the poorest to the richest, from the most undeveloped countries to the most highly developed. So it really does depends on your primary market: who are your user base? If it's generally older people on computers, then horizontal scrolling is still going against the normally convention for websites and its hard to move right with a mouse, so it wouldn't be appropriate. If all your users are in their twenties using a tablet, then why not include some horizontal scrolling in your design if it allows some extra features above the fold?

I think the general concensus is this:

  • Don't use it as your primary navigation unless a small site (such as a portfolio)
  • Use it within the realm of progressive enhancement to enhance interaction on the website for people you know will be using touch screens (such as the Facebook App example)
  • Check: Who are your users, what devices are they using to access your site? BEFORE implementing these kind of features.

To conclude, I think its safe to say that for websites, any horizontal scrolling should be supplementary to the vertical scrolling of the site. This is exactly what homepage sliders do, slide to the right...they just mask off the rectangular banner area.

share|improve this answer
    
+1 I agree with your conclusion. –  Benny Skogberg MCSA Dec 15 '12 at 22:04
    
Also...We all know that words are best read in small fixed width columns. Because in the past horizontal scrolling was awkward on the web, the simple answer was one really long column. But look at newspaper broadsheets: at certain points they break the column and start a new column to the right. I think over time we could well see a shift into a more fluent layout alike to a newspaper or magazine, on the web. Ultimately though newspapers remain portrait, and its efficient to have a good length before breaking to a new column. I think for this reason the vertical should always be dominant. –  slawrence10 Dec 16 '12 at 0:13
    
Also @benny-skogberg, check out the BBC homepage I have now linked in my answer. While you could argue "it's not scrolling", it is very much using the extended horizontal to display content. Clearly pushing towards a more mobile market. –  slawrence10 Dec 16 '12 at 0:20

Looking at the first few sites on the list of the Best Horizontal sites brings up a few patterns that I think help define the state of this kind of site.

http://album.alexflueras.ro/ has the content layout in a horizontal manner, but scrolling up and down on the mouse slides the content left and right. This sort of setup doesn't take extra time to get accustomed to and can in many cases work. If the user has to either manually grab the scroll bar to flow through the content (or use key combinations like shift-scrolling) then it would likely be much more annoying.

http://www.bartleboglehegarty.com/#/europe actually requires grabbing the site to move (or using the custom horizontal scroll bar at the top). This took me awhile to figure out and wasn't a pleasant surprise when it was realized, so I would have a hard time saying this is a good substitute for a normal navigation.

http://carrotcreative.com/#!/ and http://www.charliegentle.co.uk/ scroll the content in from left to right, but don't actually require the user to do any sort of special navigating to accomplish it. Clicking links slides content in and out, which, not affecting the navigibility, doesn't seem to be a detriment. Though it might be hard to call them "horizontal scrolling sites."

http://www.clholloway.co.za/ is the same as the first site, having the content move horizontally but allowing veritcal scrolling to handle the navigation. And it works.

I could keep going, but it seems like there are ways to make it not a usability problem, as long as it is handled correctly.

share|improve this answer

For what it's worth, Windows 8 does a nice (not perfect) job of manipulating the vertical scroll wheel to scroll horizontal on the desktop. it's not as bad, but then again there's not real content on the screen, just app icons.

There is also a difference between horizontal scrolling and horizontal paging. Having to scroll continuously does not make for a good UI, be it horizontal or vertical. I believe the concept of vertical scrolling came about because (at least in the US) we read from the top of the page to the bottom, so naturally moving the content we're currently viewing to the top of the page to continue this process came about. I can see at least one site mentioned on the link the OP referenced of top 40 horizontal scrolling sites where paging is employed. I believe that would probably be better for horizontal sites, as scrolling will disrupt the natural process of the eyes moving down while viewing left to right, as they would now have to move down, left to right, and more left while scrolling the page, if that makes sense. In an attempt to make things easier, the user may just scroll over an entire page before attempting to view the rest of the content, that's what I would do. Now we're making the user work harder to view our content, and that's not good. The designer can implement proper paging horizontally to mitigate this problem.

share|improve this answer
    
+1 I agree on the Win8 Reference. It's OK, not bad, not good. :-) –  Benny Skogberg MCSA Jun 6 at 20:55

I'd say that horizontal scrolling in and of it self isn't the problem.

To me the scrolling annoyance comes from having to scroll horizontally when the content is organized vertically, or having to scroll vertically when the content is organized horizontally.

For example a text page on which you scroll down to see all the content, that requires you to scroll left and right as well because it doesn't ensure that the lines of text fit within the view port. That would be an annoyance even if you can scroll far enough to one side to be able to read a column without scrolling, but then lose the navigation and/or other parts of the page. Similarly with for example a photo gallery which is organized horizontally, it would be an annoyance if you had to scroll vertically to see the full extent of the photo.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.