web-dev-qa-db-ja.com

ページ付けされたリストにアイテムを追加する最良の方法

ページング可能な日付でソートされたアイテムの長いリストがあります。ユーザーがアイテムを追加すると、リストに表示され、強調表示されます。私が抱えている問題は、入力された日付がリストの最終的な場所に影響するということです。ほとんどの場合、プレーンビューの一番上に追加されますが、ユーザーが現在表示しているページとは異なるページになる可能性があります。

ユーザーをそのページに移動させるのはより混乱しますか、または、ユーザーが入力した新しいアイテムを表示せずに現在のページを表示し続けるのはより混乱しますか?それとも私が考えていないより良い方法がありますか?

17
Josh Johnson

現在表示されているリストの下/上に新しいアイテムを表示できますが、このアイテムがこのページに属していないことが明確になるように分離されています。

 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
11

私の好みは、ソート順の変更がオプションではない場合、要素を追加した場所にリストをスクロールする(またはページを変更してからリストをスクロールする)ことですが、これによりユーザーが離れてしまいます。彼が見ていたページから。


それ以外の場合は、ユーザーが何をしているかをユーザーに知らせずに通知するために、ページ下部にページネーションがある場合は、追加された場所にページ番号に速い色のフラッシュが表示される可能性があります。

視覚的な例:StackExchangeでメッセージを編集すると、スレッドにリダイレクトされたときに、メッセージにオレンジ色のフラッシュが表示されます。


たとえば、項目が結果のページに追加されたときにユーザーが別のページを表示している可能性があるタブ付きのインターフェースで最近うまく機能しました。デフォルトのケースでは、結果のリストに切り替えてスクロールして追加された場所。フェードインして、作成されたことをユーザーに通知します。

ただし、ページの切り替えが許可されない場合がありました(アイテムの追加が、追加されたアイテムがユーザーの焦点とは異なるプロセスの一部であったため)、代わりに、ユーザーが背景タブをフラッシュして他のアニメーションが同時に実行されていないので、本能的にアクティビティに注意してください。それによって、彼は彼がしていることから離れることはありません。


以下は、jqueryの簡単な例です(Colorモジュールによって異なります)。

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();
4
wildpeaks

ポップアップを表示します(Item "foo" added here)新しい項目が挿入されたページの番号の上。

1
thSoft

日付の並べ替えフィルターを補足する「最終追加日」というフィルターを追加します。

追加手順では、デフォルトで「最終追加」フィルターを作成します。これにより、強調表示されたアイテムが常に一番上に表示されます。

このフィルターを使用すると、ユーザーは最近追加されたエントリーを簡単に追跡できますが、分析ステップで他のソート方法の利点を維持できます。

1