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.

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

share|improve this question
1  
when you mean vertical scrolling, you mean scrolling down a complete page or are you talking within an iframe ? –  Mervin Johnsingh Nov 16 '12 at 1:52

4 Answers 4

up vote 8 down vote accepted

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.

share|improve this answer
    
I've added in some detail from the Nielsen article you reference. If you're going to link elsewhere to provide some additional information then it's recommended that you provide some information from that link so that your answer isn't just a link of elsewhere, but is actually an answer. (Plus there is always the risk of link-rot too). –  JonW Nov 21 '12 at 8:52

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.
share|improve this answer
    
I like your points about the hardware and their vertical scrolling mechanism. Could be an (or the one most annoying) issue using Win8, because there, horizontal scrolling is default behaviour in the Metro gui. –  FrankL Nov 20 '12 at 9:35
    
I've actually implemented web browser click and drag scrolling that does not disable selection and highlighting. See Utterscroll. I agree that using the scrollbars for horizontal scrolling is not good. –  KajMagnus Jan 13 '13 at 8:59

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.

share|improve this answer

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

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.