Scrollable rows

It works like this:

  1. The user sees 2 or 3 rows of rectangles containing text and possibly images.

  2. Each row is scrollable by itself independently of the others.

  3. When the user stops scrolling the row items automatically align to the left of the screen.

Use when

This pattern is often used in home screens of news applications, where each row represents a category. Each item in the row is then an article. A row can contain up to 20 articles or even more. Because the screen can be scrolled up, more rows can be applied on the homescreen.

In some cases it is also used as main navigation in an application. The main idea behind the pattern is that you want to show items from multiple categories. At the same time the row items are large so you can easily select them.

You can combine the use of horizontal rows with a contextual navigation on the article page. If your app only contains a single category, you can use a carousel instead. An other way of letting the user switch between categories of sections the mode selector.

The Good

  • Gives an overview of multiple items across at least 2 categories.
  • Leads to a grid layout which maximizes the number of items you can fit on one screen

Add Good

The Bad

  • Because of the grid-like layout any text will easily wrap over multiple lines, making it harder to scan/read.
  • Can be visually unattractive when many items are packed on one screen.

    Add Bad

    Examples

    Pulse

    1 News reader app Pulse shows horizontal rows on its homescreen. Each row contains articles from a different news provider. The first article in the row is presented on the left side of the screen.

    2 The user can scroll horizontally through each row independently. Here the top row is being scrolled to the left. The spot where the user touches his finger is selected.

    3 When the user releases the row, it snaps into the position of the grid.

    BBC News

    1 BBC News also contains horizontal rows with content items. Each row in this app corresponds to a news section.

    2 When the user scrolls to the left over the top row, the content items slide through the screen.

    3 When the row is released, it snaps onto the grid.
    Martijn van Welie
    Creative Lead/User Experience Manager at Philips Design
    http://www.welie.com/
    Published on: December 8, 2011

    2 Responses to Scrollable rows

    1. Vish says:

      Really helpful.

    2. Guru says:

      Very nice article… Thanks

    Leave a comment