What are the pros and cons of mixing horizontal scrolling with vertical scrolling?

Question

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

Answer 1

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:

• The web does not natively support "click and drag" type scrolling, nor does a cursor afford this type of interaction. You can implement it for your site, but it's unexpected behaviour. This also disables selection and highlighting, which may frustrate users.
• The devices controlling the cursor often have vertical scrolling mechanisms built into them, scrollwheels on mouses and multitouch or special areas of touchpads are examples. This makes vertical scrolling considerably easier with these devices. However, similar mechanisms for horizontal scrolling are considerably rarer. This makes horizontal scrolling inherently more difficult than vertical scrolling, forcing the user to resort to using the scrollbars.

Answer 2

Jakob Nielsen argues against horizontal scrolling (still actual):.

We know from user testing that users hate horizontal scrolling and always comment negatively when they encounter it. Customer satisfaction is surely reason enough to avoid horizontal scrolling. There are two other reasons as well:

• On the Web, users expect vertical scrolling. As with all standard design elements, it's better to meet user expectations than to deviate.
• When pages feature both vertical and horizontal scrolling, users have to move their viewport in two dimensions, which makes it hard to cover the entire space. For people with poor spatial visualization skills, it's especially challenging to plan movements along two axes across an invisible plane. (Typically, users score lower than designers on spatial reasoning and visualization tests.) In contrast, one-dimensional scrolling is a simple way to move across content without advance planning: you just keep moving down.

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.

Answer 3

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 all through one axis is fairly simple, and I can skim over everything quickly. Having a window to a larger surface I have to plot out an algorithm and have to focus my attention on executing this, slowing me down considerably. (It might be relevant that every such algorithm requires mental state.)

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

Answer 4

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:

Scrolling Behaviour with Single- and Multi-column Layout

The abstract (with added emphasis as it may pertain to your question):

The standard layout model used by web browsers is to lay text out in a vertical scroll using a single column. The horizontal-scroll layout model--in which text is laid out in columns whose height is set to that of the browser window and the viewer scrolls horizontally - seems well-suited to multi-column layout on electronic devices. We describe a study that examines how people read and, in particular, the strategies they use for scrolling with these two models when reading large textual documents on a standard computer monitor. We compare usability of the models and evaluate both user preferences and the effect of the model on performance. Also interesting is the description of the browser and its user interface which we used for the study.

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