How to handle pagination in lists that autoupdate

Question

My current project is a running system that I've been tasked with improving.

The user task is monitoring and adding information, when for example somebody calls on the phone with news. There are several users updating/monitoring information at once, and therefore frequent autoupdate makes perfect sence.

BUT - and here's the catch - the information is structured in several lists, making it necessary to have some kind of pagination on each list. The lists are show in panels arranged to the left and right of a central section. Each panel can be collapsed to show only a headline or expanded to show first page of the list. See http://share.axure.com/2S3G3J/

Right now the autoupdate resets the pagination. This means that if a user has moved to page 2 of a specific list when autoupdate occurs, the list refreshes, and the user is moved to the first page. This offcourse leads to much frustration, but right now I'm uncertain how to avoid it.

My ideas are

1. Make autoupdate stay on the selected page and letting new items pushed onto the page get animated in. The items at the bottom that now should belong on the next page either stays and be marked graphically somehow, or pushed off the page in an animation
2. Disable autoupdate for the list, when the user has turned to one of the next pages - but when does autoupdate then resume?
3. Change pagination for "show more" thus letting the length of the list grow.

It is possible I will be allowed to conduct a small scale user test, but this might not be.

So which solutions would you propose for this issue and why?

Answer 1

So the part which isnt clear to me is whether we need to ensure that the latest items which are pushed in are pushed in to the top of the list.So assuming I go in with that assumption

1. Assuming one of your lists gets new information, provide them with an alert (perhaps like how gmail does with its indication of a new email in an email thread or how stack overflow indicates a new answer when you are typing in an answer) and allow users the option of opting to view the information.This will prevent the case of information disappearing from the page and also provides the user with the flexibility to choose what he wants to do.If the user agrees to view the new information then push down the current articles on that page down or maybe on to the next page but don't reset to the first page since that would a confusion about the state of the system and a disconnect between what the user was doing and what just happened

2. An alternative option (and I am not sure applicable it is) is to provide a new list exclusively for new content which gets updated as it comes ? This way you dont need to worry about the news content getting reset or the pagination changing and you have a constant view of the news "ticker"

3. I am not sure how you are implementing this application but would it be possible to extend the length of the list by having it in an infinite iframe by using a scrollbar,now I know a scrollbar isnt excellent usability but if well implemented ,it can actually represent a lot of information.You could combine the first option of providing alerts about new news articles and then inserting them at the top of the list with this choice or just use a different highlighting or color code to distinguish a new news article

Answer 2

As a user and developer of an application with a similar interface (multiple auto-updating lists on a "dashboard"), I prefer to have the UI function like a single-screen application, without full-page refreshes, and new items animate onto/off of the lists.

In my case, the lists are work lists that are supposed to be dealt with in a first-come, first-served fashion with the users still being able to pull a newer item to the top of the list, so pagination isn't really an issue. To that end, my lists are "infinite", adding new items to their bottom until the list length is roughly 2x the screen height, and then the list elements are not actually created but just held in an off-screen data structure. This allows scrolling a ways down within each list and allowing the users to "load more".

While being significantly more work from an implementation stand point, the major benefit is that the various portions of the screen can all be updated as needed and things can flex much more than a full-page refresh allows. (which, incidentally, simplifies the client-side application logic).

The addition of item movement off of the lists when the items are completed (either by the current user or by other users) provides a nice sense of accomplishment and adds a game-like effect that a more static paged list doesn't provide.

On the flip side, when items come in to an empty or a short list, there is a very clear indication of new work to be done. Since my application functions as a dashboard, having a clear visual indicator (motion and color) is important.

The final benefit of having a "one-page-app" is that it's fairly easy to manipulate the multiple lists display into a single-list display if that sort of dashboard is needed.

So, while I've gone into a bit more detail about my application that was probably needed, I hope my experiences and insights help inform your decision.