タブまたはアコーディオン（折りたたみ/展開）コンテンツセクション
可能性のある複製：
アコーディオンvsタブ
長いWebページのコンテンツを表示するのに最もユーザーフレンドリーなエクスペリエンスは何でしょうか？折りたたみおよび展開可能なコンテンツセクションとして表示します。またはタブ付きパネルとして。
または、ユーザーに両方から選択するオプションを与える必要がありますか？その場合、ページはデフォルトでいずれかの方法を使用するため、これがユーザーの注意を引くための最良の方法は何ですか。このページではCookieを使用して、最後に使用した方法を保存し、次回のアクセス時に同じ方法で情報を表示できます。
サイトは現在、折りたたみおよび展開可能なコンテンツセクションを実装しています。
http://fantasticvisions.net/artists/maura-holden/
現在のアコーディオン方式の背後にある考え方は、ユーザーがそれらを探索する傾向がより強くなるように、各セクションの小さなサンプルを表示することです。
一方、タブには1つのコンテンツパネルのみが表示され、残りは非表示になります。タブはおそらく、ある種の優先順位で編成できます。
タブとエキスパンダーの主な違いは、ユーザーが新しいコンテンツブロックを選択するとタブが古いコンテンツブロックを削除するので、エキスパンダーを使用すると、ユーザーが新しいコンテンツブロックを選択しても古いコンテンツブロックはデフォルトで表示されたままになります。したがって、ユーザーが1つの特定のコンテンツに集中していて、他のどのコンテンツブロックにも関心がない場合は、タブが優先されます。ユーザーが興味のある特定のコンテンツを見つけたら、他のタブに移動する理由はありません。関心のあるコンテンツを検索するときに、ユーザーが1つのタブでそれを見つけられない場合、次の候補タブに「自動的に」進むと、拒否されたコンテンツブロックが削除され、乱雑さとかさばりが軽減されます。
ユーザーが通常、代替コンテンツブロックの複数のコンテンツに関心がある場合は、複数のエキスパンダーが推奨されます。これは、ユーザーが頻繁に別のコンテンツブロックのコンテンツをレビューする場合に特に当てはまります。ユーザーは、関心のあるコンテンツを持つすべてのエキスパンダーを開き、参照または比較のために開いたままにすることができます。
タブとエキスパンダーは、ラジオボタンとチェックボックスの配列に似ています。
ユーザー調査では、ユーザーがサイトをどのように使用することを期待するかがわかりますが、自由形式の柔軟な調査を目的としているように思われるため、サンプルWebサイトはエキスパンダーを使用するのがおそらく最良だと思います。たとえば、ユーザーはアートワークで魅力的なアートを見ているので、イベントを見てアートを直接見る機会を探します。アーティストがイベントでセミナーを行っているのを見ていると、ユーザーは自分が学びたいと思うテクニックについてアートワークをもう一度見たいと思うかもしれません。
コンテンツブロックが非常に長い場合、タブが推奨されます。エキスパンダーのように一度に複数のページが表示されると、ページが長くなりすぎます（たとえば、新しいタブをクリックして古いコンテンツブロックを表示する方が、スクロールするよりも簡単です）それに戻るには長い）。ただし、その場合は、各コンテンツブロックを個別のページに配置し、従来のリンクを使用する方がよいでしょう。エキスパンダーは、エキスパンダー間またはエキスパンダーの下のコンテンツの絶対位置を混乱させる可能性もあります。そのため、そのようなコンテンツへの参照が多い場合は、タブがより適切になり、コンテンツが一貫したスクロール位置に留まる場合があります。
ユーザーにとって、タブではなくエキスパンダーを選択することはしません。これは不当な負担であり、正しい判断を下すためのトレードオフを知ることはほとんどありません。ユーザーが選択できるのは、デザイナーよりもよく知っている場合のみです。これは、デザインの選択では非常にまれです。
ほとんどのユーザーがすべてのコンテンツブロックを順番に処理することが予想される場合は、タブやエキスパンダーを使用しないでください。すべてのコンテンツを1つのページに配置するか、ブロックが長い場合は一連のリンクされたページに配置します。
私は間違いなく[もっと...]と呼ばれるボタンをクリックすることで折りたたみ可能な展開可能なコンテンツを使います。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
青は別の状態を表します：展開されたセクション
展開すると、ボタンの名前が[Less ...]に変わり、ユーザーが表示できるコンテンツが少なくなります。テキストは、行のない1つのセクションにする必要があります（わかりやすくするために、ここにのみ表示されます）。
新しいタブを開くよりも、可能であればコンテンツをまとめておく方が適切です。