アイテムの長いリストを並べ替える最良の方法
現在、リスト内のアイテムの並べ替えに取り組んでいます。ただし、注意が必要なのは、最大100個のアイテムを再注文できるようにする必要があることです。私はいくつかの解決策を考えていますが、おそらく20以上の項目に取り組むと、デザインは壊れます。これはユーザーにとって非常に悪い体験につながります。アイテムの長いリストの再注文を許可する方法についてのあなたの考えとアイデアを得たいと思います。
私が考えたいくつかの解決策：
オプション1：ドラッグアンドドロップでアイテムを並べ替えます
ご覧のとおり、アイテムを100番目までドラッグするのは難しいでしょう。スクロールも面倒です。ドラッグアンドドロップを使用するためのより良い方法についての考えを共有できればすばらしいと思います。
オプション2：アイテムを並べ替えるための矢印ボタンの上下
上下の矢印をクリックすると、ここで並べ替えが機能します。ただし、ここでの問題は、項目98を項目2に移動する場合など、離れすぎている項目を並べ替える場合です。
これを解決する簡単な解決策は、ページ付けを使用することです。この場合、ページごとに一度に10アイテムしか表示されません。ただし、並べ替えはその中で発生します。したがって、他のページからアイテムを並べ替えるときに問題があります。
オプション3：ドロップダウンを使用してアイテムの位置を選択します
あなたの解決策を聞いて非常にうれしいでしょう。ありがとう！
更新：何のためにあるのか不思議に思うかもしれないので、この長いアイテムのリストを並べ替えるユースケースにコンテキストを追加したいと思います。これは、質問のリストが長いアンケートに使用します。ドラッグアンドドロップはユーザーのペルソナに最適ではない可能性があるため、いくつかのオプションと代替案を検討しています。解決策と提案を共有してくれた皆さんに感謝します。
先に進む前に、（質問の中で）ユースケースについてもう少し説明したいと思うかもしれません...なぜ100エントリを手動でソートする必要があるのか、詳細を知りたいと思います。
ユーザーが100アイテムを手動で並べ替えることができるページを設計する要件を取得した場合、戻って要件を質問します。つまり、「アイテムAは本当にランク94にあるのか、それともランク95にあるのか」という質問をするユーザーにどのくらいの負荷をかけますか。たぶんあなたは属性に基づいて自動ソートを使用することができます、多分本当の要件はお気に入りとしてベスト5を選ぶことです...
要件が実際に100アイテムを手動で並べ替えることである5％未満の確率の場合、
- それらが常に完全に表示されていることを確認してください（ユーザーのために新しいモニターを購入する必要があることを意味するかもしれません;-)ページを個別に並べ替えて後でマージすることは、古いコンピューターソートアルゴリズム（マージソート）ですが、好意から外れていると思いますアルゴリズムについてもです。
- 多くのパーソナライズ可能な列を追加します。私は、ユーザーが上位にランク付けされるべき100の決定を行うことができるようにするために、アイテムに関する多くのコンテキスト情報（属性）が必要になると思います。
- 並べ替えには、できるだけ多くの方法を追加できます。長距離移動の場合、ユーザーは「上へ」および「下へ」の機能と、新しい位置を入力する可能性が必要になります（ドロップダウンボックスは使用しないでください。同様にユーザーをダウンさせます;数値入力フィールドを使用してください）ユーザーがターゲットとして入力する数値を識別できるように、アイテムごとのランクを必ず含めてください。もちろん、短距離移動の場合は、「ワンアップ」と「ワンダウン」も必要です。ドラッグアンドドロップはミッドレンジの動きのいいところです。
- キーボードアクセスを提供します。これは「5％の使用例」（つまり、非常にまれ）だと思うので、ユーザーがコンピュータを多用していると思います。これらのユーザーは、まだキーボードサポートを好みます。さらに、アイテムを移動すると、アイテムを2回上に移動する必要がある場合にマウスを追従させる必要があります。キーの位置は変わりません。
- リストの視覚的表現を非常に安定させます。ユーザーが何らかの方法でシーケンスを変更した場合は、変更されたアイテムのプレゼンテーションのみを変更します。同じ位置に再表示されていても、表全体を再表示しないでください。ちらつき（またはさらに悪いことに、トップに戻る）はユーザーの方向を乱し、リスト内での位置を失います。
私は（残念ながら）ユーザーがフォームのフィールドを並べ替えられるようにする必要がありました...それらのフォームのいくつかは途方もなく長くなることがあります。このシナリオでは、リスト全体を並べ替えるのではなく、単一のフィールドまたは連続するフィールドのグループを新しい場所に時々移動するように最適化する必要がありました。
役立ついくつかのアプローチがあります。
- 短距離での並べ替えのための標準のドラッグ/ドロップ。
- カットおよび後貼り付けまたは前貼り付け他のフィールドへの機能。これは、GUIに慣れているユーザーにとってはより直感的でした。これは、代わりに前/後へ移動...、または移動のマークおよびここに移動にすることができます。
- 各フィールドに、ユーザーが表示および操作できるインデックスを割り当てます。インデックス間のギャップは10（10、20、30など）。より技術的なユーザーは、25などの値を入力して20〜30の間に配置することにより、これをショートカットとして使用できます（順序が変更されるたびにインデックスが再生成されます）。
- 各レベルの要素の数を減らすために、可能な限りフィールドの論理グループを作成することをユーザーに奨励します。 カットと内部に貼り付けの機能がここで役立ちました。
Netflixにはこれに関する多くの経験があります。DVDサービスにまだサブスクライブしているユーザーは、キューを並べ替えることができる必要があるためです。彼らは何度もアプローチを変えてきました。それは問題が実際には難しい問題であることを教えてくれます。現在のアプローチに関するいくつかのポイント：
- リストに何かを追加すると、最後から始まりますが、最初に移動するオプションが表示されます。
- エントリを上下にドラッグできます。
- ドラッグハンドルをクリックすると、小さなボックスがポップアップし、リスト内の移動先の番号を入力できます。 （これは、数値を選択するための長いプルダウンよりも望ましいと思います。）
- 一度に1行ずつ上下に移動するボタンはありません。
したがって、それらは複数のアプローチを提供します。長いリストでの大きな移動が一般的であると思われる場合は、移動する行の移動先インデックスをユーザーに入力させるよりもよい方法はありません。
長いリストの並べ替えはそれほど珍しいことではありません。私がそれに遭遇する最も一般的なケースは、音楽のプレイリストです。
私の推奨は、上記のすべてです。
並べ替える必要があるアイテムがたくさんある場合は、ツールを使ってたくさんの支援を提供する必要があります。
短いリストまたはアイテムを互いに近くに再配置する必要がある場合は、ドラッグアンドドロップのサポートを提供する必要があります。特定のユーザーはこれにアクセスできないため、またキーボードコントロールからアクセスできる並べ替えボタンを提供する必要があることに注意してください。
「並べ替え」ボタンと「並べ替え」ボタンが必要ですが、"上に移動"ボタンと"下に移動"ボタンがあると便利です。
そして、それがすべて終わったら、特定のアイテムを特定の位置に移動できるようにすることも役立ちます。
これは通常、「並べ替え」ボタンと「並べ替え」ボタンの間に数値フィールドを提供することで行われます。
---- /\
---- Item Name [##]
---- \/
特定の状況で役立つその他の並べ替え機能：
- 偶発的なドラッグアンドドロップを防ぐためにオンにする必要がある並べ替えモード
- 並べ替えを簡単にプログラム可能なディメンション（アルファベット順、日付など）にリセットするためのクイックアクセスの並べ替えボタン
- ドラッグアンドドロップによるグループ選択により、多くのアイテムを1つの単位として並べ替えることができます（簡単な例として、Chromeのブラウザーのタブで
Ctrl+Clickを使用してこれを行うことができます）
Virtualnobiが優れた答えで述べているように、ユーザーが本当にリスト全体を手動でソートする必要があるかどうかを判断する必要があります。
ただし、そうする場合は、 プレミアリーグファンタジードラフトのWebサイト で使用されている例を示します。これはファンタジーサッカーゲームであり、ユーザーはプレーヤーを保存して後で紹介し、手動で注文を並べ替えることができます。考慮すべき主なこと：
- 常にすべてのアイテムを表示します（ページングは非常に扱いにくいので、スクロールすることをお勧めします）
- たくさんのオプションを提供する
- 自動並べ替え（現在のメトリックに基づく;これにより、ユーザーは大まかな見積もりをすばやく取得できます）
- フィルタリングオプション
プレミアリーグファンタジードラフトを指摘するのは、フィルタリング中に並べ替えができるためであり、すばらしい実装だと思います。
例えば：
最初のリスト：
「MID」（ミッドフィールダー）のみを表示するようにフィルタリング：
この時点でも完全なリストの順序は表示されますが（優先度）、ユーザーはこのフィルターされたリストを並べ替えて、リスト全体に影響を与えることができます。
たとえば、ユーザーはSnodgrassをこのリストの4番目（全体で7番目）からこのリストの2番目に移動できます。これにより、全体で4番目になります。
それは確かに厳しい要件です。誰かが手動で100アイテムをソートする必要があると仮定すると、私はそれをユーザーのためのゲームにすることを好みます。子供が数字を昇順に並べるためのこのパズルのおもちゃを見たことがありますか。私の提案はそれをそのようなものにすることです。
- 画面領域を4つの部分に分割します。各部分は、画面上で25アイテム=> 100アイテムを同時に保持できます。常に完全なデータをユーザーに提供して、手動で並べ替えます。
- ドラッグアンドドロップ機能を提供します。100回を超えるクリックよりも簡単にタスクを実行できます。
- 並べ替えを一度で行う必要がありますか？つまり、ユーザーは戻って、自分が残した場所から開始できますか？繰り返しの多いゲームでも退屈なので、できれば状態を保存しておくと便利です。その場合、10アイテムほどポイントを獲得することは良い戦略でしょう。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
このアプローチには、ユーザーがどれだけ完了したかを確認できるという利点があります。
この状況でうまくいく可能性のあるもの（人々に多数のアイテムのランキングを作成させる）は kitten wars -スタイルの手段であり、ユーザーはすべてのアイテムのペアを表示して、 2つのうちどちらが高いランクを取得するかを選択します。これを実装するためのコードがそこにあります。ユーザーに表示するペアを選択し、十分な数のペアが評価された後、完全な100アイテムのランキングをそれらの応答に基づいて計算できます。ユーザーは一度に2つの項目を比較するだけでよいので、楽しく簡単です。
申し分なく、私のアプローチは他の人によってカバーされていないと思います：
「つまり、これは質問のリストが長いアンケートに使用します。」したがって、ユーザーがどちらの答えがより重要であると考えるかを比較検討する必要があります。私が考えることができる同様のことは、私の国（オランダ）のすべての選挙について頻繁に使用される投票ヘルパーです。その中で、「核エネルギーは風力エネルギーよりも優れている」「防衛はヘルスケアよりも多くのお金を稼ぐべきだ」という質問に答え、それらのうちどれがより重要であるかを割り当てます。実装は異なります。
したがって、ユースケースがこのようなものである場合、アイテムの正確なスポット（100のうち）はそれほど重要ではなく、2つの質問を重要度で比較するのは簡単です。そうする。 質問を続ける "ランクが高くなる、質問XAまたは質問XB？"、簡単に回答可能、アイテムに十分な順序を設定できるようになるまでおそらくすべてのアイテムの正確なランキングを知る必要がないので、上位25が何であるかを理解した後で停止し、質問するだけです。それらを並べ替えます。または、ユーザーが必要なときにいつでもユーザーを停止させて、不完全なデータを処理することもできます。データがないよりはましだ。
完全な注文のショットを撮る前に、少なくとも100の質問をする必要がありますが、それらはsimpleの質問です。それ以外の場合は、「質問XAに必要なランクは何ですか？XB？XC？」の形式を除いて、100の質問にも回答する必要があります。これらはhardです。他の99と比較したこのアイテムの重要性の概要を知る必要があるためです。
正確な順序が依然として非常に重要である場合、少なくともこれらの回答からかなりソートされたリストを作成できます（たとえば、50ペアを比較してから、すべての勝者と敗者のペアを比較して、上位25％を把握します（両方のマッチで「勝った」）と、100回の比較で下位25％（失った）です）。次に、それをユーザーに見せて最後の仕上げを行います。ほとんどのアイテムはあまり移動する必要はありません。