web-dev-qa-db-ja.com

固定(位置)ナビゲーションバーの背後にある理由は何ですか?

レスポンシブデザインでは、ナビゲーションバーが固定位置になり、ナビゲーションバーがブラウザーのビューポートの上部(通常は、場合によっては下部)に固定されます。

私の意味がわかりませんか? Twitter Bootstrapのプロジェクトページ をご覧ください。上部に暗いナビゲーションバーがあります。下にスクロールします。ナビゲーションバーが消えないことがわかります。上部に貼られたままです。

ブートストラップだけではありません。最近、多くの大規模なWebサイトがレスポンシブデザインに切り替わり、それらのほとんど(90%など)がトップからトップへの固定ナビゲーションバーを組み込んでいます。いくつかの例は次のとおりです: MashableReadWriteTechCrunch (レスポンシブデザインではないが、まだ)など。

問題は、なぜですか?このUIの決定の背後にある理由は何ですか?メニューへの迅速なアクセスを提供すること以外に顕著な利点はありますか?

個人的に私はそれを非常に邪魔だと思います(デスクトップ/ラップトップでは-タッチデバイスではより自然です)。また、トップからトップに固定されたナビゲーションバーが直感的であるという研究はありますか?

17
its_me

@ icc97によって提供される回答以外に、固定ナビゲーションバーを使用すると、ユーザーは上にスクロールしなくてもすばやく別のページに切り替えることができます。

これは、ページのコンテンツが長い場合(無限スクロール、ブログ、記事など)、ユーザーがサイトの多くのページを閲覧する場合にのみ非常に役立ちます。 Facebook、Mashable、ReadWrite、TechCrunchは雑誌のブログであり、記事が長くなる場合があり、ほとんどのユーザーは1つの記事の後に読むのをやめません。

18
mauris

ほとんどすべてのデスクトップアプリケーションを使用している場合-メニューバーは常に表示されます。例えばMicrosoft WordでPage Downしても、ツールバーは上から消えません。

固定ナビゲーションバーはその機能を複製しています。

12
icc97

回答ではありませんが、固定ヘッダーのいくつかの欠点を指摘したいと思います(このような回答が行外の場合は、お知らせください)。

固定ヘッダーは、デバイス(Safari iPadおよびChrome iPad))ではやや問題があります。ページのセクションをズームすると、ヘッダーが固定されないか、半固定になることがあります。スクロールは異なりますが、ページの他の部分よりも動作率が高くなります。動作を予測するのは難しく、やや混乱します。固定サイドバーは、動作に応じて動作が不安定になり、ズームされたコンテンツがオーバーラップする可能性があります。それは受け入れられないかもしれません。

もう1つの問題は、固定ヘッダーページをページスクロールすると、有効なビューポートの高さがページの高さよりも小さいという事実を無視して、ページがページ全体の高さまでスクロールすることです。言い換えると、スクロールアップしすぎて、コンテンツを見逃さないために(固定ヘッダーの高さ分)下にスクロールする必要があります。

これらの問題に対処する実装方法はあるかもしれませんが、ほとんどの固定ヘッダーサイトはそれらに対処していません。

2
obelia

これはページ全体のサイズ設定に関係しているのではないかと思います。画面が大きくなるにつれて、コンテンツも大きくなります。そしてそれはより多くのスクロールを意味します。

ページコンテンツの幅を大きくすると、通常は高さも大きくなるため、ユーザーがナビゲーションリンクをクリックしようとしたときにスクロールが多くなります。

2つの例(MashableとReadWrite)はどちらも無限スクロールを利用しており、これにより長いページが生成される可能性があります。

最後に、固定ナビゲーションを使用することで、設計者はデスクトップおよびモバイルアプリケーション(どちらも固定ナビゲーション要素を持っている)のエクスペリエンスと同様のエクスペリエンスを作成しています。

1
Rob Farr

固定された位置により、ナビゲートが容易になります。ページの下部まで読んだ(スクロールした)後、再度上部にスクロールしなくても(固定ナビゲーションバーを使用して)別のページに移動できます。

この(StackExchange)サイトのモバイル(および非モバイル)バージョンには、修正されたナビゲーションバーがありません。 I guessこれは次の理由によるものです。

  • このページでは、ナビゲーション(ページ間)は比較的重要ではないか、不要です。たとえば、おそらく https://ux.stackexchange.com/questions に駐車して、特定の質問に移動し、「戻る」を使用して元の場所に戻ることを望んでいる可能性があります。
  • ページには多くのコンテンツ(たとえば、トピックごとに無制限の数の投稿があり、そのコンテンツは変化し続けるため)が頻繁に読み込まれるため、移動する機能を最大化するのではなく、このページ(つまりコンテンツ領域)の可読性を最大化します。他のページ
  • ページには経験豊富なユーザーがいます(Webサイトのレイアウトを知っている、ナビゲートできることを知っている、スクロールを恐れない)。これは例えばとは異なります。人々が不規則にまたは初めてアクセスする可能性のあるビジネスのWebサイト。その使いやすさ(特にナビゲーション)は、サイトにアクセスし、必要なものを見つけて購入し、二度と来ないナイーブユーザー向けに最適化する必要があります。

同じことが http://www.bbc.com/news および https://www.Amazon.fr/ およびWikipediaの記事にも当てはまるようです。

多くのWebサイト( http://Twitter.github.com/bootstrap/index.html OPで言及されているものを含む)は「ランディング」ページである可能性がありますが、彼らは実際にあなたを望んでいる/期待しています他のページに移動します。

別の違いは、ナビゲーションが主にコンテンツを使用して行われるかどうか(コンテンツ領域内のリンクをクリックすることにより、たとえば、StackExchange質問リストの特定のトピックをクリックすること)と、コンテンツが比較的静的で、ナビゲーションが主にナビゲーションバーを使用するかどうかです。したがって、この回答の最初の文を次のように言い換えます。「位置を固定するとナビゲートが簡単になりますnavbarを使用

最後に、サイトのすべてのページ、およびサイトのモバイルバージョンと非モバイルバージョンの両方で同じ戦略(つまり、固定または非固定)を選択することをお勧めします。

0
ChrisW