web-dev-qa-db-ja.com

より使いやすく効果的なUIは、タブと折りたたみパネルのどちらですか。

折りたたみパネルに別の名前が付いているかどうかはわかりませんが、ロールアウトと呼ばれているのを見てきました。私はどちらか一方または両方を使用する多くのアプリケーションを使用しましたが、それぞれの有効性について話し、より速く、よりユーザーフレンドリーなリソースがあるかどうか疑問に思っていますか？

タブ：

enter image description here

折りたたみパネル：

enter image description here

または両方（赤いハイライトは無視してください。スクリーンショットは元々別の目的で使用されていました）：

enter image description here

gui-designtabsworkflowefficiencycollapsible-panels
5
Joan Venge

私は常にルールに従っています章はタブにあります。段落は折りたたみパネルにあります。

2つの階層がある場合、2つのレベルの広い方はタブで、もう1つは折りたたみパネル用です。

複雑なアプリケーションでは、3つ以上のレベルがあります。何をするにしても、同じUI部門を次の世代に実装しないでください。つまり、レベル1がタブである場合、レベル2（その直接の子）はタブではなく、何か別のものでなければなりません。最初のスクリーンショットがこの「ルール」に違反しているのがわかります。古き良きアウトラインを覚えておいてください：

I. Main Point 1
   A. Section 1
   B. Section 2
II. Main Point 2
   A. Section 1
   B. Section 2
      1. Part 1
      2. Part 2

それ以外の場合、同じUIによって実装される3つのレベルは次のようになります。

I. Main Point 1
   I. Section 1
   II. Section 2
II. Main Point 2
   I. Section 1
   II. Section 2
      I. Part 1
      II. Part 2

あなたはこれを望まない。

しかし、レベルが1つしかない場合はどうなりますか？どっちがいいですか？複数のパネルを展開/折りたたむことができる間、一度に表示できるタブコンテンツは1つだけであることに注意してください。

分類できる多くのプロパティを持つ1つのエンティティで作業しているときに、折りたたみパネルを使用する傾向があります。たとえば、（医療請求ソフトウェアで）患者を操作する場合、名前、住所、SSN、連絡先情報が1つのパネルの下に表示され、保険の補償範囲が別のパネルに表示されます。医療スタッフは、ほとんどの場合、すべてのパネルが開いていることを確認し、精神的疲労を感じているときにそれらを折りたたみます（コンテンツが少ないため）。

タブの場合は、「ユーザーが別のタブに情報を表示しなくても、あるタブで作業できますか？」という質問に「はい」と答える必要があります。 「いいえ」は、タブを使用しないことを意味します。 「はい」は可能なタブを意味しますが、他の多くのことを確認する必要があります。

5
Mickael Caruso

タブと折りたたみパネルはどちらも、コントロールをグループ化する方法です。どちらにも長所と短所があります。

タブの利点

  • 理解しやすく、発見しやすく、広く普及しているため、他の製品のユーザーに認識されやすい
  • いつでも1つのタブのコンテンツのみが表示され、コントロールの各グループを視覚的に分離するため、煩雑さが軽減されます

折りたたみパネルの利点

  • 複数のグループのコンテンツを同時に表示できます
  • ユーザーのニーズや利用可能な画面スペースに合わせて簡単にカスタマイズ可能
  • ドッキング機構と簡単に組み合わせることができます

要するに、ほとんどの初心者ユーザーは、タブでの作業が楽になります。乱雑さが少ないほど、気が散ることが少なくなります。エキスパートユーザーは、前述のコントロールに頻繁にアクセスする場合、カスタマイズの欠如やマウスクリックの増加を嫌います。これは、コントロールが変更ではなく状態を表示するためだけに使用される場合に特に当てはまります。折りたたみ可能なパネルでは何も必要としない一方で、タブではさまざまなコントロールを表示するためにマウスをクリックする必要があります。

これは、折りたたみ可能なパネル（およびドッキング可能なパネル）が、開発ツール（IDE）やハイエンドのグラフィックソフトウェアなどのエキスパートユーザー向けに設計された製品に多く見られ、繰り返し使用される可能性が非常に高いコントロールのグループに主に使用される理由を説明しています。組み合わせて。

何度も使用される可能性が低い製品の初心者ユーザーまたは領域向けに設計されたソフトウェア（プログラムの設定など）は、主にタブを使用します。

グループ化されたコントロールの階層がある場合、通常は階層レベルごとに異なるコントロールを使用することをお勧めします。そのため、タブ内のタブやグループボックス内のグループボックスは避けてください。最初の画像は、ネストされたタブの3つのレベル（ガイド->マルチ->煙）を示しています。これにより、どのコントロールがどのタブセレクターに依存しているかを判別するのが困難になります。

3
Hazzit

スクリーンショットに基づいて、折りたたみパネルとは、ドロップダウンまたはドロップリストを意味するものと思います。

NNGroupによるタブに関する調査記事は次のとおりです。 http://www.nngroup.com/articles/tabs-used-right/

概要：タブコントロールの13のデザインガイドラインはすべてYahoo Financeが順守していますが、使いやすさはAJAX過剰でカスタマイズが難しいために低下します。

NNGroupによるドロップダウンに関する調査記事は次のとおりです。 http://www.nngroup.com/articles/drop-down-menus-use-sparingly/

概要：ドロップダウンメニューは、多くの場合、その価値よりも問題が多く、Webデザイナーがいくつかの異なる目的で使用するため、混乱を招く可能性があります。また、メニューをスクロールすると、ユーザーがすべてのオプションを一目で確認できなくなると、使いやすさが低下します。

2
Chairman Meow

さまざまなパネルの設定の組み合わせが重要な場合、折りたたみパネルはより価値があります。

設定が完全​​に直交または独立している場合-つまり、あるグループの設定が別のグループの設定に影響しない場合-タブは問題ありません（設定のグループを表示/非表示にする他の方法も同様です）。

さまざまなグループの設定doが相互作用する場合、特に各グループの設定が他の多くのグループの設定に影響を与える場合、グループのさまざまな組み合わせを表示して操作できるため、折りたたみパネルの方がはるかに優れています。同時に、ユーザーの興味に応じて。

2
naught101

タブを使用するか、折りたたみパネルを使用するかは、ユーザーがソフトウェアをどのように使用するか、またはどのように使用するかにかかっています。可能性のあるワークフローを把握でき、機能をインテリジェントにグループ化できる場合は、タブと折りたたみパネルの適切に配置された組み合わせを使用して、使いやすさを最大化できます。

折りたたみパネルは、最大の生産性のためにインターフェースを設定するためにそれらを使用できる場合に最適です。私はそれらを常にLightroomで使用しています。写真を処理するさまざまな段階で、さまざまなツールを公開するので、必要としないものに目を通す必要がありません。

パネルをたくさん表示/非表示にすると、折りたたみパネルモデルが壊れます。各コントロールが画面上のどこにあるかについての私の認識マップは常に正しくないので、各セクションを積極的に調べて、必要なコントロールがどこにあるのかを把握する必要があります。モデルは、特定のパネルを折りたたんだままにすることができる明確なワークフローのニーズがある場合に最適に機能します。

ただし、ワークフローが特定のパターンに沿っていない可能性がある場合（次に、ワークフローの任意の時点で、さまざまなセクションからのコントロールが必要になる可能性があります）、タブをお勧めします—カテゴリコントロールの配置は予測可能なため、予測はできません。毎回必要なコントロールを探す必要があります。

結論として、インターフェースは対照的な領域です。

1
Drew Beck