web-dev-qa-db-ja.com

アクションボタンは個別にするか、単一のツールバーの一部にする必要がありますか？

これは、前の質問からのフォローアップ質問managing taxonomy hierarchies UI pattern です。

質問：リスト内のアイテムに、作成/編集/削除アクションを実行するアクションボタンがある場合、各アクションボタンを個別の要素として表示するのが良いですか、それとも単一のツールバーにグループ化するべきですか？

個別の要素

enter image description here

単一のツールバー

enter image description here

toolbaradmin
11
Charles Wesley

個別のボタン。

ボタンを組み合わせると、ボタン間の関係が作成されますが、それはそれほど重要ではありません。要素内にボタンを個別に配置すると、ボタンとアイテムの関係を確立する作業がより適切になります。これはより重要です。

さらに、ターゲットサイズが大きくなります。 フィッツの法則 など。

12
Jimmy Breck-McKye

見た目が良いという理由だけでボタンをグループ化することをお勧めしますが、1つ注意点があります。上/下矢印を削除できますか？

これはリストアイテムを並べ替えるためのものであると想定していますが、今の時代、ユーザーはリストアイテムをドラッグすることを期待しています。項目を3行下に移動する必要があるとは、下矢印アイコンをクリックする、マウスを移動する（矢印のアイコンが項目と共に移動するため）、もう一度クリックするなどのことです。

更新：ジミーはドラッグアンドドロップのアフォーダンスの欠如について良い点を挙げています。これは、3本の水平線を追加することで対処できます。これは、ほとんどのユーザーが認識するアフォーダンスです。デザイナーは、ユーザーが3行をクリックするとすぐにフィードバックを提供することで、UIをさらに改善できます。輪郭を描くか、選択色を変更します。つまり、ユーザーが実際にアイテムをドラッグするまで待機しません。

enter image description here

6
Hisham

@Jimmyは使いやすさの面で正しい-フィッツの法則の観点から、ボタンを分離することは確かにはるかに好ましいです。

ただし、視覚的および認知的負荷の観点から、ツールバーにグループ化する方が良い場合があります。自分のスケッチから、それらを分離すると視覚ノイズがどの程度追加されるかを確認できます。1つの背景とXアイコンの代わりに、Xの背景とボタン間の空白のX-1ストリップが表示されます。また、ツールバーの1つの要素ではなく、X要素が画面上にあるように感じます。

3
Vitaly Mijiritsky

多くの人が間違いなく関連するフィットの法則を参照していますが、より適用可能な法則は Gestlat Principles of Proximity であり、「知覚は互いに物理的に似ている刺激を見るのに役立ちます」同じオブジェクトの一部として、異なるオブジェクトの一部として異なる刺激。」

特定の例では、リストアイテムとそれらの独立したアクション間のグループ化を表示したいのですが、アクションのみのグループ化を表示する必要はないと思います。実際、彼らが共有する唯一の品質は、それらがすべてアクションであることです。リスト項目の近くに表示されることがより重要です。これは、すでに達成済みです。

0
Josiah Tullis

私はそれを混ぜます：一緒に属するものをグループ化します。

最初の例では、提供されたアクションの概要を取得することは困難です（区別が困難です）。

2番目の例は、ボタンが互いに近くなり、クリック領域が小さくなるため、使いにくい場合があります。しかし、どのようなアクションが可能かはすぐにわかります。

私は以下の行動を想定しています：

  • アイテムを上に移動
  • アイテムを下に移動
  • 新しいアイテムを追加します（現在のアイテムの子として？）
  • アイテムを編集
  • アイテムを削除

編集と削除のボタンをアイテム名のすぐ隣にインラインで表示します（目を引くボタンの背景色なしで、これらのアクションが移動/追加よりもまれにしか使用されない場合）。

次に、2番目の例で行ったように、2つの移動ボタンをグループ化しますが、その間に空白を入れます。次に、移動ボタンの横に個別に追加ボタンを表示します（移動ボタンの間に使用されているものよりも空白が多くなります）。

したがって、次のようになります。

Test
  test ✍ ✖                             [↑ ↓]   [+]
    test
    child
0
unor