Best way to add items to a paginated list

Question

I have a long list of items sorted by date that is pageable. When a user adds an item it is shown and highlighted in the list. The problem I have is that the date entered affects where it ends up in the list. Most of the time it gets added to the top in plain view but it could end up on a different page than the user is currently on.

Would it be more confusing to take the user to that page or more confusing to keep them on their current page without seeing the new item they entered? Or is there a better way I haven't thought of?

Answer 1

You could display the new item below/above the currently displayed list, but separated so it's clear the item doesn't belong on this page.

 1. Make a to-do list       Today
 2. New year's resolution   Jan 1
 3. Join the gym            Jan 2
 4. Answer a UI.SE question Jan 2
^v^v^v^v^v^v^v^v^v^v^v^v^v^v^v^v^
17. Stop procrastinating    Apr 1 

Page [1] 2 3 4 5

Answer 2

My preference would be to scroll the list (or change the page, then scroll the list) to the location where the element was added if changing the sort order is not an option, however that takes the user away from the page he was looking at.

---

Otherwise, for something that notifies the user without taking him away from what he's doing, if you have pagination at the bottom, you could have a quick color flash on the page number where it was added.

Visual example: if you edit your message on StackExchange, your message has an orange flash when you are redirected back to the thread.

---

For example, it worked quite well recently in a tabbed interface where the user might be looking at a different page at the moment the item gets added to the page of results: the default case was to switch to the list of results and scroll to the location where it was added, then fade it in in order to make the user notice that it was created.

However, there was a case where switching the page was not allowed (because adding the item was part of a process where the added item was not what the user should be focused at), so instead, it flashes the background tab for the user to instinctively note the activity because no other animation is running at the same time, and that doesn't take him away from what he's doing.

---

Here's a quick jquery example (depending on the Color module):

jQuery.fn.flash = function(options_){
    var options = {
        backgroundColor: "#6AB5FF",
        textColor: "#FFFFFF",
        complete: false,
        duration: 1000,
        queue: true
    };
    jQuery.extend(options, options_);
    var obj = $(this).stop(true, true);
    var params = {
        queue: options.queue,
        backgroundColor: obj.css("background-color"),
        color: obj.css("color")
    };
    obj
     .css('background-color', options.backgroundColor)
     .css('color', options.textColor)
     .animate(params, options.duration, options.complete);
};

// Usage example
$("#page3").flash();

Answer 3

I would add a filter called "Last Added", supplementary to the date sorting filter.

In the adding step, I would make as default the "Last Added" filter, this keeping the highlighted item always at the top.

This filter makes it very easy for the user to follow the recent added entries, but keeps the advantages of others sorting methods in the analysis step.

Answer 4

I would show a popup (Item "foo" added here) above the number of the page where the new item got inserted.