Update list when a user is viewing the list without annoying them

Question

We have a list of items that the user will be interacting with frequently during sessions. Each session will last a minute or two and during that time they are changing state on items and updating them in other ways. At the same time other people could be updating the list elsewhere.

Is there a good way to show that we are updating the list? Or should we try to understand that they are using the list and avoid updating it until they aren't (detect inactivity)?

One anti-case is when using Netflix on Roku XR. It comes up when it has been asleep for a bit (in standby with the screensaver) and I wake it up to pick something to watch. It gives me about 5 seconds to scroll around before it wipes everything out and then refreshes the queue and other lists.

That 5 seconds is about enough time to pick something quickly, but then it just destroys the location I have so I have to find it again. Super annoying, but I understand it wants to give me the latest information.

The user could be interacting with the service via mouse/keyboard as well as a touch screen.

Thoughts on strategies for this?

Answer 1

There are a few different considerations here:

• Addition of new items
• Deletion of previously available items
• Changes to existing items

The exact nature of your app will have a lot of bearing on what the "right" approach is (and if you give us more information about the type of app and it's users, we can be more specific)... however...

Addition of New Items

The current design pattern for this seems to be to highlight the new item.

Most commonly, this is exhibited in social applications that support real-time updates. For instance, Facebook will highlight "just added" comments as they appear attached to a newsfeed story or on a wall -- comments that are new since last page load have a thin blue highlight on the left side.

Google Docs highlights new content as it is added (with a small "added by" indicator on the cursor):

Additionally, if the addition is relevant to the task at hand, you can notify users with a notification message or "toast", which is what StackExchange does when an answer is posted to a topic you're currently replying to:

Deletion of Previously Available Items

To maintain the user's context, it's really important that you don't remove already-seen things from a user's view without letting them know about it. I would recommend striking-out or graying the line that is no longer relevant, but keeping it on screen until the user refreshes the page.

Additionally, if it's relevant to the task at hand (for instance, if a user has selected an item that is no longer available), you'll want to let them know. Again, a notification can work well in this case, such as Amazon shows when the price of an item in your cart has changed, or an item in your cart is no longer available:

In the case of tabular data, it would also make sense to have a link on the notification to scroll back to the offending line.

Changes to Existing Items

Changes to existing items should be weighed carefully as to their importance to the user. For instance, if a table shows the quantity of an item available, and that quantity goes down by 1, you probably don't want to make a big production out of it - unless that change affect the user (e.g. they had added indicated that they wanted 2 of an item but now you only have 1 in stock).

Assuming, however, that a change will affect the user, you'll probably want to employ some combination of the methods outlined above to simultaneously highlight the new value, strike-through the old value, and notify the user IF the change is relevant to the task at hand.

Good luck!

Answer 2

Twitter and Facebook have a solution for this. Display a message above the list that "there are # new items" -- or, if this is going to mess up the list order, something like "there are changes to this list pending -- click here to reload".

Answer 3

1. Do not refresh entire list, just add changes to existing items...

   • Add new items to the end, color them in a different color (e.g. green for fresh --> new).
   • Turn deleted items to grey and/or striked out, do not remove them.
   • Mark updated items in some way (e.g. yellow or bold).

2. Consider letting users decide whether they want to see updates (in above form or refresh if not possible) by display a notification above and/or below list (like stackexchange does when another answer has been added to question that you are answering).

Answer 4

I agree with with what Danny had said ,go with an approach of adding new items to the list at the bottom of the list.Facebook does it pretty well with their friends part by the new loading button

However the main issue with this approach is that users often dont know how many more items are left and how long they will have to wait for the list to end. I would recommend a navigational aid which gives some information such as (displaying 250 of 2000 items) so that people know how far they have to go

Answer 5

I would combine @Felixander Weber's and @Danny Varod's answers.

In other words:

• Show a bar at the top of the list that there are updates (if you want including the number of new, changed and deleted items)

• When the bar is clicked, show the updates. Put and/or move them all to the top of the list. Dim deleted items, Highlight new items (different background color) and add some other marker to denote changed items.

• When showing the updates, change the bar to say "ok, I am done reviewing". When that is clicked, show all updates as normal items and move them back in their "rightful" position with regard to sort order.

This way the user is in control, won't miss updates that may be off-page (viewscreen), and can easily see what has been changed.