web-dev-qa-db-ja.com

省略記号ボタンはテーブル行の左側または右側で機能しますか?

ここでの問題は、この表の省略記号ボタンが左側に配置されていることです。私はこのパターンを継承しましたが、それが正しいか、実用的か、それとも正常かはわかりません。私が見た他のことから、省略記号を右に置くという慣習が最も一般的です。考え?

enter image description here

3
bobbyo23

用語

Luke Wrebowski このメニュー選択をミートボールメニューと呼びます。

enter image description here

ボタンは楕円(•••)のようには見えないことに注意してください。それらは正方形のドットに似ています(■■■)。私はこれを修正して、以前にこのパターンを見たユーザーがすぐにそれを取得できるようにします。

配置

コントロールの配置をどのように考えるかに関するいくつかのアイデアについては、この question を参照してください。しかし、簡単な答えは、行を読んでいるユーザーがそれを見つけると期待する場所に配置することです。私は、あなたがそうであるように、このメニューを右に揃えて見たいと強く思っています。まず、ActionコントロールとMenuコントロールをグループ化して、データをコントロールから分離します。次に、左から右への読み取りに合わせて調整されるため、ユーザーは行のデータを読み取った後にコントロールにアクセスできます。

反例として、以下は Deezer 音楽ストリーミングサービスのWebアプリからのデータテーブルです。各行には、ミートボールメニューを含む4つのコントロールがあり、それらは行の側面だけでなく行内にも配置されます。私はこのUIを毎日使用していますが、うまくいくと思います。

enter image description here

3
Andre Dickson

省略記号(またはアンドレが言ったようにミートボール)は右側にあるべきであり、これについての説明があります。誰かが言ったようではありません「ミートボールをメニューアイコンとして使用しましょう」 、しかしそれは既知の慣習からのレガシーUIです。

以下の画像をご覧ください。

enter image description here

enter image description here

enter image description here

enter image description here

パターンに気づきましたか?念のため:追加のアクションがあるアクションには、...Ellipsisがあります。アイコンではなく本物。

Ellipsis から

省略記号は、一部のプログラミング言語で演算子として使用されます。正確な意味は言語によって異なりますが、通常は複数の項目を処理する何かが含まれます

したがって、他の省略記号と同様に、関連付けられた要素の右側に配置されます。これは、親を表示する前に、関連付けられた子アクションのセットを表示できないためです、それは単に意味がありません!

同様に、アイコンを使用する場合は、その要素に関連付けられたアクションがあることを意味するため、アイコンは右側にある必要があります。

上記のすべてのことが言われていますが、アイコンの配置がこのUIの最大の問題であるかどうかはわかりません。これについて考えてみてください。複数のアイテムを同時に削除したいですか? メニューを開いて[削除]を選択し、それを確認して、次の項目からやり直すのは非常に悪いUXなので、そのアイコンをチェックボックスに置き換えて、アンドレの例のように、可能な場合は常にグローバルアクション、次にアイテムの右側に省略記号を付けます。

また、アクションが数個以下の場合は、行ごとにアイコンを繰り返します。たとえば、編集アイコンだけで十分だと思います。どこに配置しても、省略記号よりも明確です。

2
Devin