テーブル内で、テーブルアイテムに複数のアクションを提供するにはどうすればよいですか？

Question

ユーザーがスクロールして特定のアクションを実行する必要があるテーブルがあります。アクションは、「削除」、「フラグ」、「送信」などですが、下のモックアップでは、アクション1、2などです。

現在の考えは、テーブルの右側に「アクションパネル」を配置することです。行が強調表示されると、オプションにアクセスできるようになります。

テーブルの外部にあるUI要素を使用せずにこれらのアクションを表示する他の潜在的な方法は何ですか？

私はコンテキストホバーリンク（以下の最後のモックアップ）の使用を検討していますが、これはインターフェイスのこの部分の主要なアクションを実行するためのツールではなく、ナビゲーションツールのように感じられます。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

Answer 1

アクションをインラインで表示してみませんか？

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

これは、アクションがデータ内の各行に影響を与え、あまりに切断されていないように見えるようにするのに役立ちます。

また、一括アクションがある場合の解決策は次のとおりです。

編集：

1. REMOVEは、上記のように一括アクションで処理できます。
2. FLAGは左側のアイコンにすることができます。
3. SEND TOは、アコーディオンフローで処理できます。

wordpressはテーブル内でインラインを処理します。アコーディオンオプションを使用して、行ごとに詳細オプションを展開および表示します。

ユーザーが何度も使用する機能に関しては、これらのソリューションは非常に効率的であると思います。

Answer 2

取ることのできる別のアプローチは、開始した場所の変形です。可能なすべてのアクションを表示したままにしますが、ユーザーの選択に基づいて有効または無効にします。それらが真のラジオ選択である場合は、別の選択肢を追加してからアクションを実行するボタンを追加するのではなく、ボタン自体をボタンにしてください。

これにより、一括アクションと単一行ベースのアクションの両方が可能になります。ユーザーは、多くの項目を選択してテーブルをスクロールでき、アクションパネルで選択した項目数を追加することもできます。その後、ユーザーは、ビジネスルールとこれらのオブジェクトの目的の結果の両方によって有効になるアクションボタンをクリックするだけです。

これにより、視覚的な混乱もなくなり、ユーザーは選択した内容に基づいて、実行できるアクションを常に把握できます。また、どのビジネスルールがそのボタンを無効にしたかを説明するために、無効にされたアクションのツールヒントがある場合もあります。

Answer 3

古い一般的なアプローチは、ボタンバーを使用することです（ご存知のように、ツールバーとリボンバーの前のものです）。

使いやすさの観点から、アイテムからのマウスの動きを目的のアクションに減らしたいと考えています。このため、いくつかの拡張機能が提供されています（確かに、すべてトレードオフがあります）。

• インラインボタン行のクリック時にのみ表示されます（「表示」の使用例が多く、「実行」の使用例が少ない表で推奨されます）。下の画像を参照してください
• インラインボタンは常に表示されます：提案されたソリューション。これは問題なく、非常にベースの「行う」ユースケースで使用できます。このために垂直方向のスペースを最大80％増やす必要があると考えてください。
• アクションの個別の列：アクションの数によって異なります。通常、アイコンはスペースを節約するために使用されますが、それでもなお、通常はテーブルの最も重要な部分である水平スペースを予約する必要があります。

一般的なコンセンサスは、スクリーンリーダーがアクションボタンを認識せず、そこで何ができるかが明確でないため、テーブルのアクションボタンではmouse-overを使用しないことです。私の個人的な見解は、ユースケースがそれほど重要でない場合でもそれほど悪くはありませんが、とにかくスペースを予約する必要があるため、混乱が少ないことを除いて大きなメリットはありません。