web-dev-qa-db-ja.com

コンテンツが多いWebサイトでのタブとスクロール

コンテンツが多いウェブサイトを持っています。特定のページには、ユーザーに提示される多くのデータがあります。

2つのオプションがあります。

フルスクロール

適切な見出しと区切りで適切にグループ化されたデータを提示するだけです。

長所

  • より高い可視性
  • 非表示になっているデータはありません
  • ユーザーは最近スクロールする傾向があります

短所

  • 不確実性-ユーザーはそこにあるデータ量を知らないため。
  • データ量が非常に多くなり、スクロールが退屈で面倒な場合があります
  • 特定のデータを見つけるのが難しい(修正-別のサブナビゲーションを提供する必要があります。これは別のオーバーヘッドであり、スペースを占有します)

タブ

グループ化されたデータをタブの形式で提示する

長所

  • 確実性-ユーザーはそこにあるデータの量を知る
  • スクロールする必要はありません。すべてのデータは最大で2つ折りに収めることができます。
  • 適切なグループ化と階層-1つの特定のデータグループを簡単に見つけることができます

短所

  • 内容がタブ内に隠れている可能性があります(事前知識のないユーザーはタブをスキップできます)

データが多いウェブサイトの場合、どちらが優れたUX原則ですか?

このトピックについて行われた研究はありますか? A/Bテスト結果はありますか?有用な洞察をいただければ幸いです。

3
Sooraj

データ集約型のWebサイトの場合、どちらが優れたUX原則ですか?それはユースケースに依存します...

タブ

モジュールタブUIパターンの主な目的は、ユーザーが関連データのグループを1つずつ表示できるようにすることです。これにより、デザイナーはこの情報のグループをコンパクトにモジュール化して、貴重な画面のスペースを節約できます。このセクションでは、モジュールタブが必要な場合について説明します。 - Smashing Magazineから

全巻

セクション間のコンテンツが関連していて、最終消費者が前後に移動して相互参照する必要がある場合は、全スクロールがより望ましいでしょう。

例:機能と仕様(車またはコンピュータ用) Porsche Features and Specs

4
Igorek

データが大量にある場合、両方のメソッドを使用したくないのはなぜですか?

Facebookは、ドキュメントでこれを非常にうまく行っています。

側面のリンクをクリックして、コンテンツにスクロールできます。これにより、必要な可視性と確実性が得られます。

以下に示すFacebookの例:

Tab and scroll - Facebook

4
Daan