I'm working on a new site for a company. We are working on a new concept for them, using horizontal and vertical scrolling. We know that the users that interact with the sites are advanced users so a little of complexity in the navigation is not an issue. I wonder what are the cons (and pros) of having horizontal scrolling. What are your thoughts of mixing vertical scrolling (to go between different sections of the sites) and horizontal scrolling (to navigate through the content of one section of the site).
I think you've already identified the advantage of mixing vertical and horizontal scrolling: the possibility for more natural navigation across two axes. We are seeing this more in touch-based interfaces, where an interface consists of a vertically scrolling list of horizontally scrolling lists. Vertical scrolling through the main list navigates through categories, where horizontal scrolling through each individual list navigates content within the category. This interaction style works on a touch-based device because the actions required for vertical and horizontal scrolling are nearly equivalent, simply tap and drag.
The disadvantage is that this does not translate to a more traditional web experience. On the web, the user is likely interacting with the site using a cursor controlled by a mouse, touchpad, or other mouse-like device. This exhibits the following characteristics:
Jakob Nielsen argues against horizontal scrolling (still actual):.
Personally I think it's a bad idea to use horizontal scrolling for non-touch devices. You may use some kind of switchers (like next/previous category buttons) and animation to emulate horizontal scrolling, but modern input devices (with few exceptions, like Apple's Magic Pad, etc) still doesn't provide a good experience with horizontal scrolling unfortunately.
Scrolling on two axes massively harms "full search discovery":
Use case: I dimly remember there was a treasure map on this page, but where?
"Scrolling down down down" is pure muscle memory. "Scroll right until you can go no further, then scroll down exactly one page, scroll left until you can go no further, then scroll down exactly one page, repeat" is not.
I'd also wager a guess that in general, making a mental map in one dimension might be easier - you need to remember roughly "before or after", instead of, say, "a little to the left and far to the top".
That argument is reversed though if there is a natural topology (say, exploring a map of Europe). This is actually the main use case for 2D navigation.
Horizontal vs. Vertical: I recently realized that scrolling horizontally on a touch interface might me a more natural movement (unverified epiphany), whereas scrolling vertically matches mouse input better.
Scrolling vertically works better for text reflow: fitting text to the available width and extending to the bottom.
OTOH if you have elements with a fixed size, on a landscape display less items are cut off by the rim if you scroll horizontally.
If the users of the site will spend a considerable time reading content (enough to span multiple columns, over multiple pages), then you may be interested in this paper presented at the WWW2009 conference:
The abstract (with added emphasis as it may pertain to your question):
I know that this paper is dedicated to a very specialised case, mainly focused on text, but I hope you find it useful. There may be other studies that are more focused on the intersection of scrolling-behaviour and navigation design that I am not aware of at this time.
One example (if you'll excuse the reference to an iPad app) that utilizes both vertical and horizontal scrolling is the New Yorker magazine app. At the time of writing, the reader swipes/scrolls horizontally to move between articles/sections, and swipes/scrolls vertically to read more about the current article/content. It felt 'odd' at first, but you quickly become accustomed to it. Again, this is an example of a text-heavy application (magazine).