Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

We used to have a table interface which showed 1-10 on load and had the pages listed all the way from 2, 3, 4, ... n.

We would like to re-design this interface to support scrolling of objects much similar to what Facebook or Twitter supports. What are the cons of moving to this model.

I feel we won't be able to select a page and navigate to that page if we put scrolling. Its not clear if we can sort on certain columns effectively.

How do we go about designing a suitable user interface?

share|improve this question
add comment

2 Answers

I recommend looking at this question Regular pagination vs. infinite scroll for additional inputs on what would be a good practice on when to use what. With regards to whether you should go for pagination or infinite scroll, that will depend on the type of content you have in your application.To quote the article Should you use infinite scroll instead of pagination to load more content?

Context matters

It also depends on the context of your design and how that content is delivered. As Marissa Mayer of Google explains, the content that is being displayed is a determining factor. Google Images uses infinite scroll because users are able to scan and process images much more quickly than text. Reading a search result takes much longer. This is the reason why their main search results still use the more traditional pagination technique.

ESPN is another example of use within context. Under their “News Feeds” for football teams, the “more” button is used to load more content only within that section of the page. Think of it as an iframe with no scroll bar. However, the main search results for ESPN still implement a traditional pagination technique

I also recommmend looking at this coding horror article for additional inputs on the cons of infinite scrolling

  • The scroll bar, the user's moral compass of "how much more is there?" doesn't work in endless pagination because it is effectively infinite. You'll need an alternate method of providing that crucial feedback, perhaps as a simple percent loaded text docked at the bottom of the page.
  • Endless pagination should not break deep linking. Even without the concept of a "page", users should be able to clearly and obviously link to any specific item in the list. Clicking the browser forward or back button should preserve the user's position in the endless scrolling stream, perhaps using pushState.
  • Pagination may be a bad user experience, but it's essential for web spiders. Don't neglect to accommodate web search engines with a traditional paging scheme, too, or perhaps a Sitemap.
  • Provide visible feedback when you're dynamically loading new items in the list, so the user can tell that new items are coming, and their browser isn't hung – and that they haven't reached the bottom yet.
  • Remember that the user won't be able to reach the footer (or the header) any more, because items keep appearing as they scroll down in the river of endless content. So either move to static headers and footers, or perhaps use the explicit "load more" button instead of loading new content automatically.

With regards to designing infinite scrolling, I recommend looking at this UX movement article Infinite Scrolling Best Practices

To summarize the article

Keep the navigation bar persistently visible When you scroll down a normal web page, the navigation bar gradually loses its visibility. However, with infinite scrolling it’s best to keep the navigation bar persistently visible.

Give users feedback when loading new content When new content is loading, users need a clear sign that the website is doing this. Letting users know when new content is loading allows them to prepare for a longer page and new content to display. The last thing you want is a confused or surprised user. Keep them informed by using a progress indicator to show that new content is loading and will soon appear on the page.

Show how much content has loaded and how much is left With infinite scrolling, users will inevitably load a lot of content on their page. Therefore, it’s a good idea to let users know how much content has loaded and how much is left. This helps users keep track of their progress, so that they can pick up where they left off if they decide come back.

Use a More button if you have a footer If your site has a footer and you’re going to use infinite scrolling, use a More button to load new content. New content won’t automatically load until the user clicks the More button. This way users can get to your footer easily without having to chase it down. Without the More button, users would only have a few seconds before the footer disappears off the page. This makes getting to the footer difficult. With a More button users, users would have control over content and the footer.

Bring users back to their previous spot when they click back When users click back they not only expect to land on their previous page, but their previous spot on the page. After endlessly scrolling through content, losing their spot on the page forces users to have to endlessly scroll through content they have already seen. This inconveniently gives users more work than they need

share|improve this answer
add comment

Pagination is always a pain. It usually lets you go to the previous/next page, select a page from a really short-range, or the last one/first one. Sometimes you can type in the page to go to, which is a great idea, and sometimes all the page numbers (say, from 1 to 79) are displayed, which adds a lot of clutter, but lets you navigate to any page in the same time, so there are pros and cons. You can think about using some of these.

Regarding infinite scroll, I don't like this approach very much, well maybe in some really current-content oriented systems, like Faacebook. it is hard to get to the older content easily. But you could use a real slider for navigation. I really like the slider in Time Machine. In fact, no slider is really infinite, but this attitude could be just ok for a lot of points to stop at. It could be done with a jQuery plug-in. Imagine a slider at the bottom of the page. Once you drag it, a tooltip appears, showing you on which page you will land upon dropping it. Then, once you do drop it, you go to that page. Does this make any sense for you?

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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