15

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)

Windows Panorama Style Interface pagination dots

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.

Improve this question
1
  • 2
    +1 for a great question. I think Microsoft have nailed the behavioral encouragement of the user with their panorama style interaction, by adopting this method they have made it very clear there is additional content and appeals to the users instincts. Those that use touch devices are already used to gestures, so this is a natural progression. An interesting point to note mind, is that now gestures are even included on the desktop. Swiping left or right within Safari or Chrome on OSX for example. Although here there is no indication of the feature.
    – Daniel Meade
    Nov 5, 2012 at 23:17

3 Answers 3

Reset to default
7

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.

Improve this answer
3
  • 1
    Really interesting research.
    – Marcos Ciarrocchi
    Nov 6, 2012 at 18:59
  • And you are right about the left to right heritage from books and magazines... but now I have other observations, books seem to be designed to balance the portability/usability of the form factor and the actual readability (width and height) (see scrollable parchments), so maybe the natural way, at least for text, is always scrolling, we just have an enormous heritage of "page flipping" that makes it almost more natural to be that way.
    – Marcos Ciarrocchi
    Nov 6, 2012 at 19:12
  • @mciarrocchi I completely agree with you. Maybe quite not to far in the future we will get rid of this heritage behaviour. But I'm 100% for vertical scroll(it's not scroll but almost a flip or a small animation) when its block of unrelated(today, top news, menu) information displayed on them.
    – Igor-G
    Nov 7, 2012 at 9:38
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...

Improve this answer
1
  • That's true, the device orientation certainly can be also an important issue to consider.
    – Marcos Ciarrocchi
    Nov 6, 2012 at 18:44
2

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.