web-dev-qa-db-ja.com

静的(スティッキー)ナビゲーションバーを使用する場合

アマチュアWebデザイナーとして、この分野の理解を深めるためにWebサイトのデザインに細心の注意を払っていますが、一部のWebサイトは固定ナビゲーションバーを使用している一方で、他のWebサイトは非固定(SEなど)を使用していることに気付きました。それで、私は疑問に思っていました、なぜ彼らは別のオプションではなく1つのオプションを選択しているのですか?

とにかく、固定ナビゲーションバーを選択する根拠は何ですか?それはページの長さですか(長いページには「戻り点」が必要です)?あるいは、それはアプリケーションのタイプに基づいているのかもしれません(Webアプリはより見やすくするために粘着性のあるナビゲーションバーが必要ですapp-y)?それとも、それは単なるデザイナーの個人的な好みですか?

P.S .: SEチェーンやTwitter.comのように、スティッキーナビゲーションバーと非スティッキーナビゲーションバーの両方を使用しているWebサイトを見てきました。したがって、ここにはbadのデザインの選択肢はないと思います。

12
Abdulaziz

スティッキーナビゲーションを使用するかどうかの決定は、ユーザーの主要なアクティビティに基づく必要があります。ユーザーがナビゲーションをかなり使用する可能性が高い場合は、@ obeliaによって言及されているいくつかのトレードオフを受け入れることは理にかなっています。

たとえばSEの場合、主なアクティビティは質問を読んで回答することです。そのほとんどは、スクロールするページのコンテキスト内で発生します。つまり、質問を読んだり、コメント/回答を読んだり、コメントや回答を追加したりします。ケースには、ホームページへのリンク(追加の質問を表示するため)、検索(回答を見つけるため)、および質問をすることもできます。これらも主要なアクティビティである可能性があるためです。一方、ヘッダーの他のオプションは主要なアクティビティではない可能性があります。

4
rdellara

スティッキーバーには、常に表示されるという利点があります。常にビューポートの一部を占め、コンテンツの領域が少なくなるという欠点があります。これは大きなデスクトップ画面ではそれほど問題ではありませんが、小さな電話画面では問題が発生する可能性があります。

上部にある粘着性のあるバーのもう1つの欠点は、1ページ下に移動したときに、効果的なビューポートの減少が考慮されないため、表示ページの価値を超えて、実際には少しスクロールしすぎてしまうことです。 (縮小された)ビューポート上部の真上までのビューポート下部。これは、大きなスティッキーヘッダーによって悪化する問題です。おそらく、スティッキーヘッダーを持つほとんどのサイトには小さなヘッダーがあり、これは多くの場合許容できない独自の設計上の制約を示しています。

常にトレードオフがあります。

3
obelia

率直に言って、あなたが尋ねるべき質問は、粘着性のあるナビゲーションバーを使用しない場合です。

作業しているサイトまたはアプリに、ユーザーが頻繁に移動する複数のセクションがある場合(1ページのWebサイトでさえ頻繁に移動します)、ユーザーに永続的なショートカットを提供することは、使いやすさにとって間違いなく優れています。

はい、これはモバイルデバイスにも当てはまります。長いスクロールするページやコンテンツが豊富なアプリで混乱しやすくなります。

たとえば、この投稿の作成に使用しているAndroid電話には、OSに固定ナビゲーションが組み込まれています。古い電話には、ハードウェアに組み込まれたものがあり、目立つデザインになっています。 iPhoneの顔の特徴は、ホームボタンです。これは、ユーザーにとってナビゲーションの最大の目的地です。

ユーザーとして、私は1日中画面スペースを利用して、最も一般的なナビゲーションボタンを手元に置いておきます。

2
whusterj

彼らがあなたのコンテンツを不明瞭にしないとき、そして彼らが改善されたユーザビリティを提供するとき、彼らを使ってください。デスクトップに長いページ(大量のコンテンツ)があるサイトには、固定メニューが必要です。スクロールして戻るまでに時間がかかる場合があります。ただし、モバイルデバイスでは、勢いのあるタッチスクロールを使用すると、非常に速くトップに移動できます。完全に固定されたナビゲーションは携帯電話の苦痛であることがわかりました。最善の方法は、Android上のChromeのURLバーのように機能させることです。粘着性がありますが、下にスクロールすると非表示になります。少し上にスクロールすると(一番上に移動したい場合があることを示します)、スライドしてスライドします。粘着性と非粘着性を同時に備えているので、すばらしいと思います。 「ジャスト」の1人は、モバイルのスティッキーメニュー用にそれをコーディングする必要があります。

1