Horizontal scrolling – Page indicators

It works like this:

  1. The user views an item

  2. The user swipes to the left/right

  3. The next article is shown

  4. The page indicators are updated to show the new state.

Use when

This is great for new applications where the users simply want to move to the next article. It is nearly identical to a carousel but then without the next/previous items being visible.

The Good

  • The quickest way to move through a list of items.
  • No need for a next/previous button.

Add Good

The Bad

  • Although you don’t need a next/previous button you now need to show some sort of progress indicator.
  • if there are too many scroll items then having too many indicators at the bottom (more than a line) messes the UI experience (AK)

Add Bad

Examples

BBC news

1 When the user has selected an article to read in the BBC news app, at the top of the screen a page indicator shows which one it is in the serie of articles.

2 The user swipes to the left and the screen moves along with the finger.

3 The second article slides into the screen. The page indicator at the bottom shows that the second dot is highlighted.

CNN

1 CNN shows the same pattern as BBC. An article is selected, and the corresponding indicator is highlighted.

2 Swiping to the next article makes the second dot in the indicator selected.
Martijn van Welie
Creative Lead/User Experience Manager at Philips Design
http://www.welie.com/
Published on: January 7, 2013

10 Responses to Horizontal scrolling – Page indicators

  1. Raja Krishna says:

    This is the best of all..

  2. PJ says:

    How can we implement this? can you give some starting point. i need it in my project urgently.

  3. Eng. Waleed says:

    Thank you . but you should add a source code !!!! c’mon guys for god sake its its an open source

  4. Allan says:

    Your feature is very interesting and useful, can you please provide the source code to use it again ?

  5. write-your-sources says:

    Welcome all you lazy “give me source” Indian guys. Learn to write or look for other job…

  6. Livia says:

    What a shame “write-your-sources”!
    If you want to reinvent the wheel, it’s all your problem. But we want to build a CAR with the wheel already invented. You should care your own business and let us do our job. Let the mimimi to your parents.

  7. A says:

    You dont have any right to say anything to INDIAN
    go …. yourself

  8. Code says:

    Why share this if you aint willing to share how you did it??

  9. Matt says:

    This is not a source code repository you indians! This is a patterns website! Go flood Stackoverflow with your “give me the code or I’ll send Ganesha to kill your first born” questions.

  10. RandomPerson says:

    I’m sorry, but this site is nearly useless for developers without actual implementation aka source code.

Leave a comment