web-dev-qa-db-ja.com

テーブル内のアクション(アイコン)

私はアプリケーションの再設計に取り組んでおり、テーブルアクションをどこに配置するか(行の左側、右側、サブメニューの有無など)がわかりません。最もユーザーフレンドリーなオプションとなるように定義してください。 (下の画像をご覧ください-フルサイズ)。

UX Doubts

ハンバーガーメニューの詳細:

Submenu options

この場合、どのオプションが最適ですか?

5
Thiago A. Klein

いくつかのこと:

  1. ユーザーはアクションを決定する前に情報をスキャンするため、追加のアクションは右側に進む必要があります。 (オプション2または3ではありません)
  2. ハンバーガーメニューのコンセプトが気に入っています。利用できるオプションがかなりあるので、アイコンを変更して、「アクション」と言ってすべてのオプションを含めるか、「...」で表示されていることを示します。追加オプション。 (それ自体のハンバーガーメニューは、表示されているものとは別のものであることを意味します)
  3. テーブルにそれのためのスペースがあり、オプションを5または6のようなものに制限できる場合は、アクションをアイコンとして直接テーブルにリストすることもできますが、それぞれにカーソルを合わせるとツールチップを追加して、ユーザーはクリックする前に、それぞれが何をするかを100%確信しています。
  4. 複数選択に関しては、オプション5のビューが気に入ったので、ユーザーは選択したアイテムに対してアクションを使用できることがわかります。
5
Andrea D

右側に

これには非常に簡単な説明があります。適用するアクションはオブジェクトに基づいています。したがって、例のような西洋言語では、左から右に読むのが自然です。オブジェクトの前にアクションがある場合...何を処理しますか? まだ、操作するオブジェクトが見つかりませんでした!

しかしながら

あなたの質問には2つの追加の懸念があります

  • チェックボックス:今あるように、左側にあるはずです
  • ドロップダウン:ドロップダウンに何があるかを定義することは非常に重要です。 これらがオブジェクト自体に影響を与えるアクションであり、3を超える場合おそらくドロップダウンのみを使用する必要があり、すべてのアクションがその中に含まれる必要があります。

ただし、ドロップダウンに含まれるアクションが特定のオブジェクトに関連していない場合は、そこにあるべきではありませんであり、別のオプションを試す必要があります。

厳密にはドロップダウンとは関係ありませんが、ガイドラインの良い例は Material Floating Action Button です。これは、同じ原則がケースに適用されるためです。

次のような軽微で破壊的なアクションには、フローティングアクションボタンを使用しないでください。

Archive or Trash
Nonspecific actions
Alerts or errors
Limited tasks like cutting text
Controls that should be in a toolbar, like volume control or changing a font color

および enter image description here

しないでください。

関連のない、または紛らわしいアクションは含めないでください。

最終的には

test、test、test

2
Devin

オプション4は良さそうです。ハンバーガーアイコンは、次の2つのアイコンに置き換えることができます。 enter image description here

1
NPN

それぞれのアプローチには利点があります。私はハンバーガーメニューにあまり自信がありません。それとは別に、各スタイルには特定の利点があります。

右側のアイコン

  • アクションを実行する前にほとんどのグリッド列のスキャンが必要な場合に使用します
  • 列の数が少なく、テーブルで水平スクロールがない場合に一般的に良い
  • アクションが必要になるたびに、山への移動を検討してください。
  • また、ユーザーの注意は左側の列で最も高くなります。
  • 右側のカラムを凍結することはできません。これは非常に珍しいUXです。
  • 最良の例は、Outlookのデフォルトのビューです。

左側のアイコン

  • 複数のアイテムに対してクイックアクションが必要であり、マウスの移動量は少なくなるはずです。
  • 列の数はそれほど重要ではないので、多くてもかまいません。
  • 左のアクション列を固定して、右に水平スクロールを適用できます。
  • 複数選択のチェックボックスはアクション列から離しておきます。

外での行動

  • 複数選択する場合に最適です。
  • トレードオフは、各アクションのマウスの移動です。

それぞれのアプローチには長所と短所があります。ユースケースがどのバケットに適合するかを決定する必要があります。私はさまざまなプロジェクトに取り組み、3つすべて(明らかに一緒ではない)を使用しており、それらはケースごとに理にかなっています。

1
Sol