web-dev-qa-db-ja.com

行ごとのアクションのテーブル

Webアプリのページの1つには、通常、ユーザーごとに数十行のテーブルがあり、ページの幅のほとんど(5〜8列)を占めています。

各行で、ユーザーは3つの可能なアクションを実行できます。

ユーザーがこれらのアクションを実行できるようにするための推奨される方法は何ですか?いくつかのオプションを検討しました:

  1. 各行の左側にある3つの小さなアクションボタン 1
  2. 各行の右側にある3つの小さなアクションボタン
  3. 3つのアクションでドロップダウン
  4. 他のアプローチ?

テーブル行での反復アクションを回避する方法は? に関するすばらしい議論で他の質問を見ましたが、この場合、それらを配置する適切な場所にもっと興味があります。

ありがとう!

オプション1のイラスト

Option 1 Illustration

22
Yoel

各行の左側にある3つの小さなアクションボタン

LTR言語では、ユーザーが最初に行を(左から)調べてから、アクションを実行することを決定すると想定できます。

したがって、ボタンを左側に配置することはやや逆の流れです。

各行の右側にある3つの小さなアクションボタン

長所:

  • ボタンは簡単にアクセスできます。これは、ユーザーがこれらのアクションの多くを実行する場合に重要です(テーブルの主な目的は、ユーザーがレコードを操作できるようにすることです)。

短所:

  • エラーの可能性(近接する小さなボタン)。
  • 小さなボタンにはアイコンがあり、2次の意味を持っています。
  • ドロップダウンよりもスペースを使用します。
  • スケーラブルではありません-配置できるボタンの数には制限があります。
  • もっと視覚的なノイズ

3つのアクションでドロップダウン

短所:

  • 追加のクリックが必要です。

長所:

  • ドロップダウンでは、アイコンよりも明確なテキストを使用できます。
  • 視覚ノイズが少ない。ユーザーには、必要なときにのみアクションが表示されます。
  • スペースを取らない
  • 簡単にscaleでき、何十ものアクションを実行できます。

他のアプローチ?

少なくとも視覚的なノイズ/スペースの問題に対処するために、これらのアクションはホバーでのみ表示できます(このようなデザインはタッチデバイスでは機能しません)。 Googleの受信トレイのように:

Screenshot of Google's Inbox

最終的に

結局のところ、これらのアクションが使用される頻度に要約されます。一部のシステムでは、ユーザーは各レコードに対してアクションを実行する必要があります。これは、ドロップダウンの余分なクリックにより効率が低下する可能性があることを意味します。しかし、アクションがあまり一般的でないシステムでは、ドロップダウンは優れたソリューションです-視覚的なノイズを減らし、スペースを節約します。

26
Izhaki

順序に関しては、データ行の(ユーザーの関連付けに関する)主要な識別子は、常にで、左から右の言語です。ローカリゼーション。

各アイテムに一意のIDがある場合、ユーザー自身がそのアイテムに主に関連付けるもの、または一般的にユーザーがアイテムをソート/検索する主な機能ではない場合、これは適切でない場合があります。デフォルトの列配置は、コンテキストからではなく、ユーザーからアプローチする必要があります。

@Xabreの回答は、スキャンと認識に関連する詳細/ソース記事を提供します。

コントロールの配置と形式の観点から、画面の一部を繰り返しコントロール(特にスクロール時)で塗りつぶすことによって作成される視覚的な負荷と、これらのコントロールを使用する速度、およびコントロールが十分に明確であることを確認することの間には、常に難問があります。彼らが混乱を引き起こさないという彼らの行動識別において。

インラインコントロールは、制限されているスペースに収まるように、小さくしたり、シンプルなアイコンで作成したりすることがよくあります。これは、アプリケーションに不慣れな人にとって、発見しやすさにとって問題となる可能性があります。目的が自明で、他の同様のアプリケーションとグローバルに比較的一貫しているアイコンを使用したと感じた場合でも、.

ドロップダウンまたはアコーディオンは、このデータセットに関連するタスクが1度に1回だけ実行される可能性が高い場合、ここで大きな成功を収めることができます。リストビュー。その時点での主な時間要因は、操作する正しい行を見つける(検索する)可能性が高く、コントロールを開くためにクリックする必要があることによる時間のわずかな損失は問題ではない可能性があります。

考慮すべきもう1つの強力なオプション(実際には、リンクした質問に対して選択された回答です)は、各行を選択可能にし、一連の操作コントロールを使用することです画面/ペインの上部または下部にあり、選択したすべての行で関連するアクションを実行します。これを行う場合は、適切な選択解除(場合によってはすべて選択)コントロールを提供してください。

現在のビューコンテキストを変更しないすべてのアクションをデータセットペインのtopに配置することをお勧めします。次のデータのセットで撮影。これにより、ファイルツリービューアなど、アクションが多い同様のリストコントロールの使い慣れたパラダイムとコントロールの整合性も維持されます。

Windows Explorer Example

ここでは、Google Inboxがかなり強力な例を示しています。複数選択モードでは、アクションを実行するために、4つの主要なコントロールと省略記号のドロップダウンメニューが上部に表示されます。選択セット全体:

Google Inbox with multiple rows selected and related controls exposed

Googleは左側に行を選択するためのチェックボックスを配置していますが、その均一性、サイズの小ささ、その他の視覚的影響の少ないことは、左側の列を下にスキャンして目的のメールタイトルを探すのが非常に簡単であることを意味します。それらのシンプルで反復的な性質は、ディストラクタとしての検索タスクで過度に競合することなく、視覚的および精神的に簡単に減衰させるのに役立ちます。

ユーザーが行自体を直接クリック/タッチして行を選択して行を選択することもできます(上記のWindowsエクスプローラーの例を参照)。ただし、この対話モードが利用可能であることをユーザーに明確に伝え、ビューのコンテキストの変更や移動につながらないこと。利用可能なインタラクションで自明であるので、私は通常、これよりもチェックボックスコントロールを好みます。通常のアイテムのリストであるように見える複数選択で(明確に自己ではなく) -含まれる複数選択コントロール)は、チェックボックスコントロールのようなものを使用するのではありません。

両方のパターンを組み合わせて、ホバーや展開などの個別のコントロールを公開することができます(たとえば、Googleの受信トレイでメールを「開く」と、ホバーにのみ表示されるのではなく、コントロールが常に表示されるようにします)。 別の方法として複数の項目(行)を選択して、コマンドのトップバーからそれらを操作できます。 混乱を避けるために、これらのモードがお互いをブロックすることが重要です:そうでない場合、ユーザーは、個々の行のコントロールを使用したときに何が起こるか疑問に思われる可能性があります。複数の行が選択されています。

これは特に、美的選択と使いやすさの懸念の間の適切な妥協点となります。操作の交互および/または複数のモダリティは、使いやすさの点で両刃の剣になる可能性があります。タスクを実行するためのより多くのオプションを提供すると、タスクを使用する人々からのさまざまなアプローチに柔軟性が提供されますが、混乱、特にユーザー間の混乱も生じる可能性があります。個人的には、この場合、これらは両方とも、パラダイムと共有コンテキストの存在の点で、ほとんどの人が一緒に提示されたときに許容できるほど十分にグローバルな適合性を持っていると思いますが、覚えておく必要があります。

Google Inbox: opening an email exposes the related controls

注:これは、Google Inboxが全体的に素晴らしいUXであると主張しようとしているのではありませんが、この議論の適切な例を提供しています。右側にある各アイテムのコントロールの使用にも注意してください。

4
taswyn

それはそのテーブルの主な目的に依存すると思います。更新/削除の場合は最初に配置し、それ以外の場合は最後に配置します。ただし、ほとんどの場合、おそらく最初に、編集/削除するwhatを特定する必要があります。その場合、左側に配置すると混乱が生じるため、チェックボックスに置き換えて、代わりにインラインコントロールを右側に配置することをお勧めします。

また、アクションをインラインで配置する余地がある場合は、そこに配置するだけです。そうしないと、検出できず、認知負荷が増加します。多くのアクションがない限り、最もよく使用されるアクションをインラインに配置し、あまり使用されないアクション用のメニューボタンを追加します。

また、スキャン時間を短縮するために、関連データを1つの列にまとめることもできます(たとえば、「名」と「姓」の代わりに「名前」と言います)。ここでも、データを左から右へ最も役立つ順に並べます。

出典:

1
Xabre

アップロードした動画の表がある場合は、YouTubeと同じように(リンク先の質問の回答で同じ解決策が提案されています)提案します。各動画には、「削除」、「公開」、「編集」などのアクションがあります。

テーブルには、ビデオを選択できる列がもう1つあります(これは一般的なチェックボックスです)。一度に複数のアイテムを選択し、選択した各ビデオに対して同じアクションを実行できます。もちろん、「すべてを選択/選択解除」オプションもあります。

重要なのは(そして、私が正しく覚えていれば、YouTubeには欠けています)、ページの見出しを下にスクロールしても表の見出しが追従しないため、ビデオを選択して(たとえ1つでも)、上にスクロールする必要があります。アクションを実行する見出しに。ページではなく、常に画面の上部に配置したいと思います。

1
Voitcus

私はそれを非常にシンプルに保ちたいと思います。行のアクションは、レコードが2〜5個しかない場合にのみ問題ありません。ただし、ユーザーがレコードをスキャンまたは読み取り、編集、削除などのアクションを決定するため、アクションコントロール/ボタンは右側に配置する必要があります。しかし、長いデータテーブルの場合は、ユーザーがアクションを実行するレコードを選択して、アクションボタンをクリックするオプションを使用することをお勧めします。特に、アクションが複数の行を削除することである場合、これはうまく機能します。詳細については、次の画像を参照してください:(この例では、編集を同じ行に配置したいのですが、いくつかの技術的な問題のため、削除アクションボタンの横に配置する必要がありました。 enter image description here

1