11

What's a good alternative for indicating that the user can swipe across the screen to get the next/previous item and/or showing the current position, considering that there are many pages (usually tens but sometimes upward of 100) -- so having a representation of all the pages wouldn't be possible.

Example of pagination on Android with page indicator visible

Showing the page number like "2 of 22" seems a bit dull. Would combining that with the circles method be good or would it just be confusing?

EDIT: Just to clarify things (for my particular problem) , this is the 3rd level in a hierarchy : First you get choose from a list of categories, then you choose an item from a list of items in that category, then you see the details for this item and can swipe left or right to remove the need of going back to the second list.

3
  • Seems to me that horizontal swiping may not be the best (primary) navigation mechanism for so many screens...
    – André
    Feb 20, 2013 at 16:31
  • Yea, no one will want to swipe through 100 screens to get to what they are looking for. But, if it's a need, I can't see if a better visual than 22/100 as text. Sometimes the simple label is the best option.
    – DA01
    Feb 20, 2013 at 16:33
  • @André I edited the question. It's not the main navigation mechanism. Feb 21, 2013 at 7:22

7 Answers 7

11

Amazon Kindle has solved this exact problem. On the bottom of the screen when you bring up the information about the book/document, it has a slider that shows percentage. It's continuous, so easily scalable, and uses percentages to keep from seeming overwhelming (yes 100 might seem like a lot, but when presented as a percentage, you see it as a fraction of a single whole, not as 100 different percent points). I say follow their lead! enter image description here

1
  • Based on your answer and @user25368 's answer, I will add my own answer Feb 21, 2013 at 7:36
6

From the Android Best Practices: Providing Descendant and Lateral Navigation:

Horizontal Paging (Swipe Views)

Another popular lateral navigation pattern is horizontal paging, also referred to as swipe views. This pattern applies best to collection-related sibling screens, such as a list of categories (world, business, technology, and health stories). Like tabs, this pattern also allows grouping screens in that the parent presents the contents of child screens embedded within its own layout.

Example horizontal paging navigation interface with relevant screen map excerpt

In a horizontal paging UI, a single child screen (referred to as a page here) is presented one at a time. Users are able to navigate to sibling screens by touching and dragging the screen horizontally in the direction of the desired adjacent page. This gestural interaction is often complemented by another UI element indicating the current page and available pages, to aid discoverability and provide more context to the user. This practice is especially necessary when using this pattern for lateral navigation of section-related sibling screens. Examples of such elements include tick marks, scrolling labels, and tabs.

Example paging companion UI elements

It's also best to avoid this pattern when child screens contain horizontal panning surfaces (such as maps), as these conflicting interactions may deter your screen's usability.

Additionally, for sibling-related screens, horizontal paging is most appropriate where there is some similarity in content type and when the number of siblings is relatively small. In these cases, this pattern can be used along with tabs above the content region to maximize the interface's intuitiveness. For collection-related screens, horizontal paging is most intuitive when there is a natural ordered relationship between screens, for example if each page represents consecutive calendar days. For infinite collections (again, calendar days), especially those with content in both directions, this paging mechanism can work quite well.

1
  • 2
    None of the three alternatives given (tabs, tickmarks, labels) look very scalable to me. At least, not to 100 pages.
    – André
    Feb 20, 2013 at 17:24
3

Recently I did some user testing of alternatives for circles for multiple pages on tablets. I did not test with as many pages but did test for numbers versus circles. Interestingly when there were numbers most people perceived the content to be much harder to read and gave up swiping after 3 or 4 views. They described it as heavy and wordy. The same content was tested with circles and people tended to explore much further so swiped more and perceived the content as less text heavy and the interface enjoyable and easier to use.

This was on tablets but I suspect you may get similar results if you tested the same thing on a phone. Therefore if you want users to explore more I would use circles rather than numbers. However in our case all pages were included in the line of dots and changed on each swipe to provide feedback and orientation to the user. In your case you have so many pages that this would not be possible so I am not sure the circle device would work.

1
  • Based on your answer and the one with the amazon kindle, I will add my own answer Feb 21, 2013 at 7:35
3

The indication can pe represented by numbers, where you show page numbers in a row like this:

24 25 26 27 28

2
  • 2
    Hello! Welcome to UX.SE! Can you elaborate on this a little bit? The most helpful answers not only give a solution but explain why the proposed solution is good (with reference links to studies to support the answer is even better!). Feb 20, 2013 at 17:31
  • It's a good suggestion, you only need to explain your reasoning more.
    – JohnGB
    Feb 21, 2013 at 3:20
1

I'm going to avoid answering your question, and focus on the real issue behind the question.

The horizontal swipe with circles as markers was designed for a small number of pages, and the iOS recommendation at least is to keep it to about 5 or below.

If you need to have a large number of pages which you navigate on a horizontal swipe, your problem is that you have the wrong type of navigation for your situation. No alternative to the circles will solve that.

What other navigation solution is best for you then depends on many other factors. If you ask a question with those factors, I will be happy to offer some suggestions.

1
0

I thought it will be better if I generate a UX file to explain you the way I feel this problem can be solved. There could be mainly 3 gestures(as shown in figure) which a user can use to browse through the pages:

  • Left swipe for next page
  • Right swipe for previous page
  • Left edge pull to access the thumbnail view of all the pages for better and faster search (probably a button also at the top)

I feel images are better than thousand words so kindly go through the following image for better understanding.

enter image description here

Also, I feel you can integrate the solution given in (for the main page)

Amazon Kindle has solved this exact problem. On the bottom of the screen when you bring up the information about the book/document, it has a slider that shows percentage.

0

Based on two of the other answer I asume that:

a) Circles (or other similar shapes) are an instant indicator that there is more than one page, and that you can swipe to get to another page. Also circles are preferred to numbers.

b) When there are a lot of page, some sort of progress bar is also well suited.

So I think a combination of these two would be well suited:

Have the normal circles page indicator and have the number of circles equal to the number of pages in cases where there are few pages to display (5 pages/items will have 5 circles with one circle standing out from the rest). In the case of more items than there can be circles displayed, have the maximum number of circles that can possibly be displayed and highlight one circle: For example for 100 items, items 1-10 would highlight the first circle, 11-20 would highlight the 2nd circle and so forth.

EDIT: Found a similar pattern on the Samsung Galaxy's Widgets page: Only shows 11 circles (note the odd number). The first page has the first circle highlighted, the second has the second one, etc. but the circle in the middle has a total of 9 pages in it.

Your Answer

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

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