Best practices for scrolling and navigation on touch interfaces: horizontal vs vertical

Question

It's well known that on traditional (mouse/keyboard) interfaces horizontal scrolling goes against user expectations, however in touch devices the matter is not so clear.

Are there any best practices, focused on touch interfaces, to decide whether to use horizontal scrolling or vertical scrolling? Are there any case studies about it?

How can you hint and teach the user which is the navigation style of your app, ie. the way to interact with it? and which ones are the most efficient? (eg. Apple uses pagination dots on the bottom of the home screen but Windows uses the "Panorama", showing a small piece of the following screen)

Does the size/type of device (phone vs tablet) matter for this aspect? For example, even if it's not strictly scrolling, the Flipboard app for iPad uses horizontal pagination or gestures while the iPhone app uses vertical ones.

Answer 1

In western cultures horizontal (left to right) progression is built into us from the childhood, think about the way we read and the way we flip the magazine/books.

Also thumb movement is important. In the study by Microsoft: Thumb Motor Performance Varies by Movement Orientation, Direction, and Device Size during Single-Handed Mobile Phone Use (PDF file) they found out that horizontal / 45 degree angle is faster and easier if user uses the phone with one hand.

Answer 2

Don't know that it is/could be a best practice, but I woulnd't diffenrentiate by device, but by device-orientation. Whether it is an iPad or an iPhone, it would feel more natural to me to have vertical scrolling in a portrait orientation and horizontal scrolling in a landscape orientation.

My phone has horizontal scrolling in its photo gallery regardless of orientation and it is somewhat cumbersome as there isn't all that much screen real estate for the swipes...

Answer 3

Although screen size may directly affect the way user interacts with the device, I think it's more important to understand two major types of data representation:

1. Continuos scrolling of (possibly infinite) data
2. Page flipping of data split into several chunks which may (or may not) be related to each other

The idea behind this separation is that continuous data is more granular and could be shown using smaller portions. At other hand, paged data consist of larger blocks of information and may switch you to the completely new context replacing all the data on the screen.

For the continuous data it's common (for the languages which has row over column writing priority, i.e. left to right and then top to bottom) to be scrolled up/down, and switching between chunks of data (even if chunks itself may not fit into the vertical space) is usually done with swiping/paging.

I intentionally use term 'data' instead of 'text' or 'images' (or whatever) because it's more about logical structure and not about any particular type of data (you may treat text as a continuous data or split it into pages, for example).

There are a lot of exceptions from this rule (for example, paging could be done with vertical swiping) but the generic idea is as described above.

Regarding visual marks of horizontal scrolling availability.

Dots, like virtual tabs (see TweetDeck iPhone app for example) good for the limited number of screens, and "Panorama" otherwise could be used for infinite paging (but require more design work to not distract user from the data represented on the current screen).