8

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?

Improve this question
3
  • Are the updates new items or changes to the current items?
    – Ben Brocka
    Jan 23, 2012 at 20:46
  • Both. The updates can be removal from the list (but not necessarily deletion), changes in information, changes in state or additions. You should think of the list as a queue of things that need to be taken care of next.
    – Chris Butler
    Jan 23, 2012 at 21:29
  • In that case you will need to mark updated items (e.g. in yellow) too. P.S. Upvote helpful answers and at some point mark most helpful answer as correct answer.
    – Danny Varod
    Jan 23, 2012 at 22:23

5 Answers 5

Reset to default
4

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):

Google Docs

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:

StackExchange Action

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:

Amazon Cart

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!

Improve this answer
4

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".

enter image description here

Improve this 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).

Improve this answer
2
  • Great answer. One issue: the list is sorted based on other attributes of an item, not the creation time. Should I just insert it inline as appropriate (in a slightly different color like you say)? Or maybe have a different section below and mark it with a flag to the left or right ('new item here')?
    – Chris Butler
    Jan 23, 2012 at 20:55
  • Don't insert inline without user approval (e.g. point 2) - the user could look away and then back and not understand where the line he was reading moved to. Instead append at end of list (or page of list).
    – Danny Varod
    Jan 23, 2012 at 20:58
1

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

enter image description here

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

Improve this answer
1

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.

Improve this answer

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.