it-mure.jp.net

リスト内のアイテムを注文するためのUIデザイン

リスト(上/下ボタンのあるテーブル)でアイテムを注文するために使用するコンポーネント/ UIの設計は何ですか?

6
padis

アイテムのドラッグアンドドロップは、おそらくほとんどのUIに最適です。残念ながら、この機能を発見可能にすることは困難です。各アイテムに近い「グラバー」エリアが役立ちます。ドラッグアンドドロップの優れた並べ替えUIでは、ドラッグ中の視覚的なフィードバックと、アイテムをEdgeにドラッグしたときの自動スクロールが必要です。

move upおよびmove downボタン、ドラッグ&ドロップに加えて。普遍的かつ即座に認識される「グラバー」アイコン/スタイルはありません。使用頻度の低いインターフェイスの場合、やや不格好なボタンの使用に費やす時間は、ユーザーがより効率的なドラッグアンドドロップ機能を発見する時間よりも短い場合があります。

さらに、ドラッグアンドドロップを使用すると、多くの微妙な詳細があり、正しく行われないとユーザーに不満を感じます(自動スクロールなど)。ボタンは頻繁に使用する場合は非効率的ですが、明白で使いやすく、コーディングがはるかに簡単です。

5
dbkk

ドラッグアンドドロップは、リストを直接クリックすると効果がある「直接操作」とは異なり、リストに別のボタンやその他のアクションを実行する「間接操作」と見なすことができます。

リストの内容によっては、どちらも適切な場合があります。

何をするにせよ、賢明なアドバイス Jakob Nielsenによるアプリケーション設計の間違いトップ1

ドラッグアンドドロップデザインは、何かがドラッグできるか、またはどこにドロップできるかが明らかでない場合、最悪の違反者になることがよくあります。 (または、ドラッグまたはドロップするとどうなりますか。)対照的に、通常、単純なチェックボックスとコマンドボタンを使用すると、何をクリックできるかが非常にわかりやすくなります。

したがって、リストに直接操作機能を提供する場合は、次のような視覚的な手がかりを提供します。

  1. 「掴みやすさ」を示唆する視覚的な「グラバー」領域(一連の点または線)
  2. カーソルの変更
  3. あなたが動くにつれてフィードバック。 このデモ を参照してください。ただし、私のポイント(1)がサポートされていないため、これらのリストがソート可能であることは明らかではありません。
4
Julian H

要素の直接操作がおそらく今好まれていることに同意します。

37 Signalsは傲慢な面があるという非難にもかかわらず、Basecampは非常に使いやすいアプリケーションです。そのアプリ内のほとんどすべてのリストでは、ドラッグアンドドロップで要素を並べ替えることができます。

まず、上隅にあるテキストリンクをクリックして、並べ替えモードに切り替える必要があります。次に、クリックしてホールドし、操作してアイテムを移動する「掴みやすさ」を明確に示す小さな画像があります。添付資料参照。

alt text

2
jameswanless

上/下ボタンは問題ありませんが、データを直接操作する傾向があります。つまり、アイテムをクリックして(またはタップして)移動できます。顕著な例は、Netflixキューです。これは、リストで複数のアイテムを選択する場合でも機能します。

0
Hisham

私の好みは、マウスオーバー時に表示される明確なドラッグセレクターでドラッグアンドドロップを使用することです。このアプリケーションでは、上向きの二重の上下矢印を使用して、アイテムを並べ替えることができることを示しています。

カーソルを変更するだけで、テクノロジーに詳しい人には十分ですが、汎用アプリの場合は、もっとわかりやすいものが必要です。

0
Sam