web-dev-qa-db-ja.com

コンテンツ+サイドバーの1つまたは2つのスクロールバー?

私はウェブサイトのデザインに取り組んでおり、サイドバーをページのコンテンツとは独立してスクロールさせるか、1つのスクロールバーだけで両方のdivを制御するかを決定しようとしています。決定を導くためにどのような原則を使用すべきですか?ユーザーがメインコンテンツをスクロールしている間、サイドバーのコンテンツを固定したままにしたい状況はどれですか。

1つのスクロールバー

  • ユーザーはページのどこにいるか知っている
  • サイドバーのコンテンツは他のコンテンツと同じ位置にとどまります
  • ページ上の任意の場所でマウスを保持すると、バーがスクロールします
  • 大多数のWebサイトは1つのスクロールバーのみを使用します-ユーザーの期待に適合します
  • ページの中央に醜いスクロールバーがなくても固定幅のサイトを持つことができます

2つのスクロールバー

  • メインコンテンツの閲覧中にサイドバーで情報を表示できます。これは、メインコンテンツが4000pxを超える長さである場合、またはスクロールバーとメインコンテンツバーの両方に同時に情報が必要な場合に便利です。
  • サイドバーには、ページの左側全体、またはメインコンテンツの重要性を減らす固定ヘッダー、サイドバーとメインコンテンツの両方の垂直方向の高さが必要です
  • コンテンツをスクロールするには、サイドバー内にマウスを配置する必要があります
  • ここで同じ会社からの異なる決定の2つの例は、固定幅の1つのスクロールバーサイトであるGoogle Codeと2つのスクロールバーを持つGoogle Readerです。 Googleリーダーでは、コンテンツが動的に生成されるため、スクロールバーが必要だと思います。

私はこれであなたの助けに感謝します-特にあなたがどちらかの方法に傾いたデータを私に指摘することができたなら。

11
Kevin Burke

質問で列挙しなかったオプションは、フローティングサイドバーでコンテンツをスクロールするオプションだと思います(その位置は常にコンテンツの端ではなくウィンドウの端からの固定距離です)。

両方の列をスクロールする必要があるかどうかを慎重に検討します。ハイライト表示した場合、メインコンテンツとサイドバーの間のユーザー切り替えコンテキストは、ページ上の場所を失う必要があります(メインコンテンツの下部までスクロールし、サイドバーの上部付近にアクセスする必要がある場合)または独立してスクロールするフレームを把握する必要があり、スクロールアクションを取得する列を選択するには、マウスをさらに動かす必要があります。

開発しているアプリケーションのスコープがわからない場合、最初の推奨事項は、サイドバーのコンテンツをウィンドウの高さ未満に制限することです。さらにスペースが必要な場合は、サイドバーにタブを使用するか、サイドバー内に水平方向にページ分割されたセクションを配置できます。

3
Brendan Berg

私はスクロールを避け、サイドバーのナビゲートを別の方法で解決しようとします。たとえば、ページ分割とサイドバーのajaxのような変更を行います。

alt text

1
Lode

あなたはすでに各タイプの長所と短所を知っているようですので、あまり追加はありません。先ほど述べたように、一部のサイトでは2つのスクロールバーが必要ですが、ほとんどのサイトでは1つ必要です。

私はあなたが言及した2つの間のクロスである別のアイデアを追加します。静的に配置されたサイドバー(css、position:fixed)を作成しても、サイドバーはそのままですが、スクロールバーは1つだけです。これはユーザーの混乱を少し少なくし、サイドバーのコンテンツがページよりも短い場合に適しています。

0
Sruly