This problem stems from the problem area Screen space in general in the main problem area Utilizing screen space.

Background

Horizontal scrolling is usually worse than vertical scrolling. One of the reasons for this is that information on the same line usually is closer connected than information on different lines. This means that the user looses more context information when scrolling horizontally than vertically.

Problem

Using a selection and projection analogy, avoiding or handling horizontal scrolling (especially for lists) is often a question of projection, i.e. which attributes that are to be shown and in which sequence. If the projection is wrong (compared to the user’s need), horizontal scrolling is often needed.

Horizontal scrolling should be avoided in all UIs, but is probably worse on mobile devices than on larger displays, partly because the amount of context information is larger when the screen is larger. Also, on a larger screen, it is usually possible to make the window larger to decrease the need for horizontal scrolling. And even worse, because the screen is smaller, the need for horizontal scrolling occurs more often.

Solutions approaches

One solution is to optimizing the sequence and size of the attributes shown.

Looking specially at avoiding horizontal scrolling, changing the layout may solve this without using any of the packing solutions. This will usually increase the need for vertical scrolling.

Changing the screen orientation (see the design pattern below) may be considered being a fairly simple way of changing the layout of a UI, which in many cases will not cause any layout changes at all. In other cases it may cause a need for moving or regrouping some fields. This is an example of what we call a simple redesign – usually restricted to changing the layout of a given set of fields. This is an inexpensive solution to the problem of horizontal scrolling, but may not be sufficient in some cases, either because the UI becomes too cluttered or requires very much vertical scrolling to avoid the horizontal one.

A slightly more radical solution is to perform a minor redisign of the UI. By this we mean to do more than just a layout change, but keeping the style (usually forms based). In the case of a forms-based UI this typically implies changing the controls that are used in the UI to more space conservative ones or to use controls that may replace a number of other controls. A medium redesign may also imply redesigning which information that is to be presented in which window (often resulting in a larger number of windows). This is also a fairly inexpensive solution (depending on the degree of changes), which may work in more cases than just a simple redesign.

The most radical solution is to perform a major redesign of the UI. By this we mean to change the style of the UI, e.g. from a forms based UI to one using a more visual metaphor. This is usually more difficult and may be much more expensive than a simple or medium redesign, but may also result in a much more user friendly solution. Such changes may not only reduce the need for horizontal scrolling in a single window, it may reduce the total number of windows in the application.

Design pattern
Change the screen orientation

If this is an option on the platform, it will by default reduce the need for horizontal (and increase the need for vertical) scrolling, as illustrated in fig. 1. An important choice if this solution is used is whether the user should be given the opportunity to switch between landscape and portrait, or if only landscape should be available. The first choice imposes a number of new problems. The latter choice is easier to realize, but offers less flexibility for the user, and may reduce which devices/versions of the operating system that may be used to run the application.

Fig. 1 Changing screen orientation to reduce horizontal scrolling