リストアイテムを並べ替えるためのユーザーインターフェイス
Webアプリケーションの一部としてアイテムのリストがあります。問題は、ユーザーがリスト内のアイテムの順序をどのように操作できるかです（リストの並べ替え順序ではありません）。一般的な方法は、矢印ボタンを使用してアイテムを上下に移動することです。もう1つの方法は、ドラッグアンドドロップです。
しかし、リストを並べ替えるためのユーザーインターフェイスの他の方法はありますか？
（あなたが言及したもの以外に）他に2つのソート方法があります。どちらがかなりうまく機能するかを見てきました。
クリックして移動
Gallery Webフォトアルバムのアイテムの注文に使用される方法は、写真の注文に非常にうまく機能し、クリック可能な要素の並べ替えられたグループとして表すことができるすべてのセットにも同様に機能するはずです。
- アイテムのリストをクリック可能な要素として提示します。
- 要素をクリックすると、その要素が「選択」され、選択されていることを示すために強調表示されます。
- 別のアイテムをクリックすると、選択したアイテムがクリックしたアイテムの直前の位置に移動します。
- すべてのアイテムが目的の順序になるまで繰り返します。
- アイテムを最後に移動するためのダミーアイテムがリストの最後に表示されます。
これは、必要な器用さが少なく、アイテムを「ドロップ」する場所を決定するときにマウスボタンを押し続ける必要がないため、ドラッグアンドドロップよりも少し使いやすいです。
このメソッドは簡単に拡張して、複数のアイテムを（Shiftキーを押しながらクリックするなどして）選択できるようにし、同じ方法で新しい位置に配置することができます。
注文番号を提供する
Netflixと私が使用したいくつかの内部アプリで使用されます。これは、ユーザーが数値の順序を正確に把握している場合に最適に機能します（内部アプリで指示ステップのリストを操作するときに使用されます）。
- アイテムのリストを1行に1つずつ提示します。
- 注文番号が表示されている各アイテムの横に、1から始まるテキスト入力ボックスを提供します。
- ユーザーは、必要に応じてテキストフィールドの注文番号を変更します。
- 複数のアイテムに同じ注文番号が付けられている場合、それらは隣り合って配置されます。
- ユーザーが再配置されたリストを表示するためにページ全体を送信する必要がないように、JavaScriptで並べ替えを「適用」するボタンを提供します。これにより、段階的に作業するのが簡単になります。
編集：ドラッグアンドドロップに関するいくつかの追加の考え。以前にこれらを使用したことがあるかどうかはわかりませんが、ドラッグアンドドロップをより寛容で使いやすくすることができるいくつかのことがあります。
- ドロップしたときにアイテムが表示される領域を強調表示します。たとえば、アイテムがドロップされた場合に挿入される2つの既存のアイテムの間に目立つ水平線を表示します。
- 一般的な「ドラッグ」カーソルを使用するのではなく、ドラッグ可能なアイテムをゴースト化して、何が移動されているかが明確になるようにします。これは、ドラッグされているアイテムが透明に重ねて表示されている場合でも判読できる場合に最適に機能します。
- ドラッグ可能なオブジェクトをドロップできるターゲット領域が十分に大きいことを確認してください。より広い領域は、必要な調整に問題がある人々に役立つ可能性があります。
ドラッグアンドドロップは、技術者以外の人にとっては直感に反する可能性があることがわかりました。動作する上下矢印を調べましたが、上下にクリックし続ける必要があり、トラフィックが多くなるため、面倒な場合もあります。
私たちが調査したもう1つのパラダイムは、[移動]ボタンです。これにより、リスト内の各アイテムをクリックすると、[アイテムの移動]ボタンが表示され、リスト内の各アイテムの前後に新しいボタンが追加され、アイテムを任意の場所に移動できます。
これは、リスト内の各アイテムが多くのスペースを必要とする場合にうまく機能します。各リストアイテムが単一の行しかない場合、インターフェイスが乱雑になる可能性があります。私たちの場合、各アイテムは半ダース以上のテキストでした。また、各アイテムの前後にアイテムを追加するボタンがあり、挿入できます。
Survey Monkeyもこのパラダイムを使用しており、私たちの活動の一部に影響を与えています。
いくつかの考え-実装ではなくアイデアについて非常に重要ですが...
1-上矢印と下矢印の両方とドラッグアンドドロップを提供し、どちらが人気があるか、どのタイプのユーザーがどのタイプを使用しているかなどを監視し、データが得られたらそこから調整します
2-ランダムに順序を生成する「ランダム」ボタンを追加します-役に立たない可能性があり、アプリによっては楽しい可能性があります
3-各アイテムの横に「表示順序」フィールドを追加し、ユーザーがそれを操作できるようにします（ただし、変更されたときに残りの番号を自動更新するコードがあることを確認してください）これは非常に可能性があると思います紛らわしいですが、一部のユーザーにとってはうまくいくかもしれません
4-ドラッグアンドドロップの代わりに、ユーザーに新しいリストにドラッグしてもらいます
5-非常に単純なバージョンの場合は、[お気に入り]チェックボックスをオンにしてから、リストに最初にお気に入りを表示するようにします（アルファベット順など）。
6-グループを作成する-アイテムにグループ番号を割り当てると、すべてのグループ番号が最初に表示され、次にグループ2などが表示されます。
このランダムなとりとめが役に立ったことを願っています、もし私がもっと何かを考えたら、私は戻ってきます...
jQuery UI Sortables の例を使用して、ドラッグアンドドロップを試すことができます。技術者以外のユーザーや新しいユーザーにわかりやすくするために、ハンドルや矢印などの視覚的な手がかりを使用し、ホバーのツールチップを使用して要素のドラッグを提案することができます。
ジェスチャーを示すアニメーションGIFを提供することもできます。
ユーザーがこれを行う方法を学ぶとすぐに、リストを注文する最も簡単な方法だと思います。
もう1つの方法は、すべてのアイテムの横に小さなテキスト入力を提供して、ユーザーが自分で番号順を入力できるようにすることです。次に、ボタンをクリックして一度に並べ替えます。 （これは、NetflixキューやLivejournalリンクなど、アイテムの順序を保存するサイトでのみ使用されています。）
1）Click to Moveのバリエーションでは、ユーザーがアイテムを移動するスロットを選択し、元のアイテムをクリックして移動する別のターゲットリストを作成します。
たとえば、次の図では、ユーザーはすでに「E」を並べ替えリストの先頭に配置しており、次の選択肢としてスロット3を選択しています。次のステップは、古いリストから新しいリストのスロット3に入れるアイテムを選択することです。 （アスタリスクの行は、スロット3が強調表示または選択されていることを示すための微妙な試みです。）
old new
----- -----
| A | | E |
| D | | |
| C | |*****|
| | | |
| B | | |
----- -----
newリストの項目をクリックすると、その項目が選択され、oldリストの元のスロットが強調表示されます。これがターゲットになります。アイテムをもう一度クリックすると、元のスロットに戻ります。
newリストには、選択可能な領域があることを示す何らかのインジケーターも表示する必要があります。スロットに目立たない（不透明度の低い）番号付きボタンやその他の有益なアフォーダンスがあります。
2）別のアプローチは、ユーザーが元の位置と目的の位置の間に線を引くことができるようにすることです。
どの方法を選択しても、プロセスはおしゃべりである必要はありません。これをすべてクライアント側で実行できなかった理由はありません（サーバーに変更を保存してコミットするオプションがあります）。
ヘッダーをクリックして並べ替えるのはとても人気があります。おそらく、実際のリストのviewの並べ替えとしてのみ考慮されます。
コピー/貼り付けスタイルの機能を実装しますか？これは、リストからアイテムを取り出してから別のアイテムを選択し、[貼り付け]またはCTRL + Vをクリックできることを意味します。これは非常に直感的で、大きなリストを簡単に操作できます。
複数選択を簡単に実装して、隣接するアイテムの大きなブロックを移動できます。
ネットワークトラフィックは少なくなります（1つまたは2つの要求のみ）。
「貼り付け」が一貫していることを確認する必要があります。つまり貼り付けalwaysは、選択したアイテムの上に挿入します。
より多くのインスピレーションを得るために Checkvist を見てください。
私は実際にiphone/iTouchがアプリケーションアイコンを動かすときにこれを本当にうまくやっていると思います。
まだご覧になっていない場合は、こちらをご覧ください： http://www.youtube.com/watch?v=qnXoGnUU6uI
「揺れ」アイコンは、何かが移動可能/ドラッグ可能であることを示す非常に優れた視覚的手がかりです。
したがって、このアプローチをドラッグドロップで提案します。アイテムをクリックして押し続けると、アイテムが「移動可能モード」になる可能性があります。これは、アイテムが揺れることで示されます（または視覚的な合図をコーディングしやすくなります）。その後、ドラッグアンドドロップは通常の方法で機能します。
もちろん、これをJavaScriptで実装するのは困難です...
また、もう1つ考えるべきことがあります。ほとんどの人は、ユーザビリティと学習可能性を混同するという間違いを犯しています。このアプリのユーザーが誰であるかを考えてください（彼らはそれを定期的に使用して使用方法を教えられますか、それとも頻繁に使用せずに使用方法を教えられない公開Webユーザーですか）-それはあなたに異なる答えを与えるかもしれません解決策はどうあるべきか。
矢印キーを使用して上下に移動することもできます。
私は「ここに選択を移動する」ことを考えていました：
- チェックボックスですべての項目を選択できるようにする
- すべてのアイテムに「選択したものをここに移動」を意味するボタンまたはアイコンを付けます
- 「選択したものをここに移動」をクリックすると、選択したすべてのアイテムが既存の順序でこのアイテムに移動します
ここでのエッジケースは、アイテムをリストのいずれかの端に移動する必要がある場合です。これを解決する1つの方法は、選択したすべてのアイテムをターゲットの前に移動し、最後に特別なボタン/アイコンを予約して選択をそこに移動することです。
私にとっては、リスト要素のドラッグアンドドロップを所定の場所（つまり、リスト自体の内部）で実行するのが最善の方法です。
リストがどのように表示されるかをユーザーにすぐに知らせることができるだけでなく（リストは目の前で再編成されます）、移動メカニズムをユーザーが理解するのも非常に簡単です。そしてこれは、ユーザーに最短の移動回数でリストを注文させる最も簡単な方法です。
ちなみに、リストが少数の要素より長くなる可能性があることを予測し、DnDメソッドと一緒に、リストを順序付けする非同期の方法を提供できます。ユーザーが注文番号を各エントリに関連付けることができるようにしてから、[注文」ボタン。ユーザーの入力をスマートかつ正しい方法で処理することで、より長いリストの編集が高速化される可能性があります。
リストのサイズに関係なく、アイテムの順序を指定できる最も簡単な方法は次のとおりです。
1）ユーザーがリスト/グリッドアイテムの順序を設定したい場合は、「並べ替え」ボタンをクリックします。
2）これにより、任意のリストまたはグリッドで使用できる並べ替えダイアログが開きます。
3）ダイアログでは、左側のリストにすべてのアイテムが現在の順序で表示されます。右側に空のリストがあります。
4）ユーザーは、左側のリストの項目を希望の順序でクリックします。アイテムをクリックすると、左側のリストから削除され、右側のリストの次の位置に配置されます。最悪の場合、すべてのアイテムに新しい注文が必要な再注文では、これにより、N回のクリックでN個のアイテムのリストを注文できます。
5）その後、ユーザーは新しい注文を適用するか、キャンセルすることができます。順序を適用すると、データの「表示順序」フィールドが右側のリストのアイテムの最終順序に設定されます。左側のリストが空の場合にのみ[適用]ボタンを有効にするかどうかを決定できます。
6）注文ダイアログでは、次のコントロールも使用できます。
a）すべてのアイテムを左側のリストから右側のリストに移動して、順序を維持するためのボタン
b）左側のリストを元の順序で再読み込みし、右側のリストをクリアして最初からやり直すボタン。
c）右側のリストをアルファベット順に（またはキーフィールドが何であるかに応じて日付または数値で）ソートするためのボタン
d）右側のリストにドラッグアンドドロップ機能を使用して、アイテムを手動で順番にドラッグします。
e）右側のリストのインデックス番号列。編集すると、アイテムがその位置に移動します。
これは、すべての世界で最高のものを提供します。移動する必要のあるアイテムが少ない巨大なリストがある場合は、すべてのアイテムを移動してから、必要な場所にいくつかのアイテムをドラッグするか、目的のインデックスを入力します。完全に並べ替える必要のある小さなリストがある場合は、目的の順序でアイテムをクリックするだけです。等々。
私はこのアプローチを長年使用しており、非常に効果的です。
GoogleがSearchWikiに対して行うのと同じように、[上へ]ボタンと[削除]ボタンを表示できます。ほとんどの人は今それで少なくともいくらかの経験を持っています。ほとんどの人は自分の選択を「アップ」することだけを気にします。彼らが物事を嫌い、それを反対票を投じたい場合は、上記の「削除」ボタンを使用してリストから削除する方が簡単です。
要素にカーソルを合わせると、オーバーレイを表示できます。このオーバーレイには、4つの矢印（n/e/s/w）が表示され、それに応じて要素をクリックして移動できます。
Facebookやpicasawebの写真グループ化機能など、グリッド全体でアイテムを並べ替えようとしている場合は、それを処理する唯一の方法です。
それぞれにアイテムのリストがある3つの列がある場合、アイテムのいずれかをクリックすると、アイテムが左または右に移動し、中央の列に左または右のオプションが表示される可能性があります。そのための一般的な機能を使用して、ドラッグアンドドロップまたはソートを許可することもできます。