Have the attitude changed the last ten years on horizontal scrolling on web sites?

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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

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.

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 7

I think horizontal scrolling makes sense for viewing websites on tablets, but it's really frustrating on desktop browsers, maybe someone needs to make a mouse that has two scroll wheels one that scrolls vertically and one that scrolls horizontally, that might make it ok, but as it is mostly common that people only have one mouse wheel, horizontal scrolling is a terrible user experience I don't even bother using it on websites to view content, if someone has hidden content behind horizonal scroll then it's not worth seeing in my opinion.