アコーディオンとタブ
UXの観点から見たアコーディオンとタブの違いは何ですか？
これはSOのこのスレッドからの再投稿です： https://stackoverflow.com/questions/5690589/difference-between-accordion-and-tabs
（アコーディオンは通常垂直でタブは水平ですが、両方が反対の向きにあると想像できます）
今のところ、アコーディオンはタッチスクリーンデバイスに適しているようです。
良い質問！
- タブの高さは無制限で、タブは複数の画面にまたがることができますが、アコーディオンは1つの画面に収まる必要があります。もちろん、これは技術的な制限ではありませんが、視野の外に広がるアコーディオンを作成するのはひどい考えです。それは、次の「バー」をクリックするために下にスクロールする必要があるためです。上に展開してから、上にスクロールして表示します。
- タブはさまざまなサイズにできる（私はそれが悪い習慣だと思います-それらが異なるサイズに気付かないほど大きくない限り-しかし、それらは可能です）、そしてアコーディオン要素は同じサイズにバインドされます。さまざまな要素に合わせてサイズを変更するアコーディオンを作成することもできますが、そのような人々はむちゃくちゃにすべきだと思います（編集：本当にうまくいかない限り、大丈夫です）。
- タブを使用すると、ナビゲーションの手段が互いに非常に近くなり、常に同じ場所にとどまります。あなたはそれらを迅速に通過することができます。アコーディオンでは、クリックするたびにナビゲーショントリガーの位置を変更し、コントロールの反対側に移動します。
編集
4-アコーディオンはより「体験的」です。スライド間の遷移を簡単にアニメーション化でき、楽しく、理にかなっています。タブ間のアニメーション化された遷移は非常にまれであり、「従来のタブ」（実際のタブラベルが上部にあるタブ）で行われることはありません。通常は、画像がお互いを置き換えるだけであり、アコーディオンで得られるクールなスライド効果ではありません。
5-マウスオーバーでアコーディオンをトリガーできます。タブではそれはできません。
6-マウスオーバーオプションの結果として、アコーディオンはそれ自体でナビゲーションの手段になることができ（マウスオーバーで表示し、クリックしてナビゲートする）、タブにはほとんど常にコンテンツが表示されます。
7-アコーディオンを使用すると、各要素のコンテンツの一部をデフォルトの状態で表示でき、一部のコンテンツが常に表示されていることを確認できます。タブを使用すると、各スライドのラベルだけが常に表示されます。
このサイトのアコーディオン は、これらのポイントの多くを示しています-その動作を調べて、タブでそれを実行できない方法を確認してください。
アコーディオン
これで何の問題が解決しますか？
アイテムが多すぎて限られたスペースに収まらない場合、またはアイテムの数が一度に表示されてユーザーを圧倒する場合、問題は、ユーザーがすべてのアイテムに消化可能なチャンクでアクセスできるようにする方法です。スクロールが必要な場合、ユーザーが希望するコンテキストまたはページ位置からユーザーを削除できます。
このパターンを使用するタイミング
オプションの数が多く、スペースが制限されており、項目のリストを論理的にグループ化して、サイズがほぼ同じサイズの小さなチャンクにすることができます。
ソリューションは何ですか？
2層のオプションセットを提示します。
- トップレベルは、カテゴリまたはグループです。
- 2次レベルは、各グループに分類されるオプションのリストです。
アコーディオンは通常、折りたたみ可能なパネルのスタックとして階層化されており（階層ツリーの外観ではありません）、最上位のカテゴリ項目がラベルとして使用されています。カテゴリラベルは、全幅のハンドルとして機能するか、一貫した展開/折りたたみアイコンが表示されます。アコーディオンの初期表示では、デフォルトで1つのパネルが開いていることがあります。
このパターンを使用する理由
アコーディオン要素を使用する主な理由は、大量のオプションを限られたスペースに圧縮することです。
ナビゲーションタブ
これで何の問題が解決しますか？
ユーザーはサイト内を移動してコンテンツと機能を見つけ、サイト内の現在の場所を明確に示す必要があります。
このパターンを使用するタイミング
- 3-10のカテゴリタイトルがあります。
- カテゴリタイトルは比較的短く、予測可能です。
- カテゴリーの数は頻繁に変わる可能性は低いです。
- コンテンツにはページの幅全体が必要です。別のアプローチは、左バーのナビゲーションを使用することです
- カテゴリは単一のサイトに属しています。
- サイトで最高レベルのナビゲーションオプションを表す必要があります。
- 利用可能なオプションのセットでユーザーの現在の場所を示す必要があります。 8.ページ内のコンテンツのサブセクションではなく、ページ全体を変更する必要があります。
- 最高レベルのナビゲーションを制御する方法が必要です。
このパターンを使用する理由
タブはコンテキストを提供します。それらは、情報の本体内のユーザーの位置を視覚的に示す機能を提供します。
タブは実際のメタファーに基づいて構築されています。選択された状態は、セット内の他のフォルダーの前にあるフォルダーのファイルフォルダータブのメタファーで強化されます。
タブはナビゲーションを提供します。それらはサイトをナビゲートする機能を提供します。
すべての情報は https://developer.yahoo.com/ypatterns/ から取得されます。詳細を確認または理解したい場合は、実績のあるUIパターンライブラリを調べることをお勧めします。しかし、彼らは教義ではありません。
タブは、データが含まれていることを明確に示しますが、アコーディオン（特に、非常にスタイルが設定されているもの）は、情報の一部または装飾テキストなどのように見えます。何か。
参照：ユーザーおよびWebデザイナーとしての自己経験。
タブとアコーディオンの主な違いは、どちらも本質的にコンテナであり、人々が大量のコンテンツを整理してアクセスできるようにするためです。ツリーやマップとは異なり、それらにはより深いレベルの編成と階層はありません（それらを注文したり、他のコンテナー内でグループ化したりしない限り）。
Interaction：タブは、通常アニメーション化されているアコーディオンと比較して、一般的に遷移が速くなります。
Position：タブラベルは操作の影響を受けませんが、アコーディオンを展開すると一部のラベルが画面上で移動します
Display：タブは一度に1つのタブのコンテンツのみを表示できますが、アコーディオンは複数の開いているセクションを表示するように構成できます
ユーザーの見方と情報の操作に応じて、タブまたはアコーディオンのいずれかを使用して、コンテンツをユーザーに最適な方法で提示することができます。