web-dev-qa-db-ja.com

固定ヘッダー付きのWebサイトは、Web2.0 Webサイトのエンドユーザーに適していますか?

固定ヘッダーは、ユーザーが下にスクロールしても常にユーザーに表示されるヘッダーです。 CSSの固定位置を使用します。

今日では、GmailやFacebookなどの固定ヘッダーを使用する多くのWebサイトがあります。 Facebookにログインした後、下にスクロールしても、検索バーを含むヘッダーと上部にあるその他の機能が表示されます。同様の機能がGmailにはありますが、yahooメールにはありません。

固定ヘッダーの利点は、ユーザーが関数を使用する必要がある場合、非固定ヘッダーに必要なように、上にスクロールする必要なく簡単にヘッダーにジャンプできることです。ただし、より多くのコンテンツがある場合、ヘッダーが永続的な画面の不動産を占有するため、ユーザーはスペースを失う可能性があります。また、固定位置CSSの使用は簡単ではないため、正しく実装しないと、固定位置が原因​​でページが正しくレンダリングされない可能性があります。

Web2.0は、エンドユーザーとより多くのやり取りを行うWebサイトであり、ユーザーは画像を移動するなど、あらゆる種類のことを実行できます。

それでは、ユーザーはWeb2.0で固定ヘッダーと非固定ヘッダーのどちらを好みますか?

16
Akaren

スティッキーナビゲーションの使用をサポートするSmashing Magazineが発表した研究は次のとおりです。

http://uxdesign.smashingmagazine.com/2012/09/11/sticky-menus-are-quicker-to-navigate/

調査からの2つの重要なポイント:

  1. スティッキーメニューは22%速くナビゲートできます:調査のデータは、参加者がページの上部にスクロールする必要がないときに、探していたものをすばやく見つけることができたことを示しています。 22%はそれほど多くないように見えるかもしれませんが、訪問者に大きな影響を与える可能性があります。

  2. 理由を知らずに100%推奨される粘着性のあるメニュー:...次に、参加者に、いずれかのWebサイトの方が使いやすいと感じるかどうかを尋ねられました。 40人の参加者のうち6人は好みがありませんでしたが、好みがあった34人のうち100%が、スティッキーナビゲーションを備えたウェブサイトの方が使いやすかったり高速だったと述べています。 「ウェブサイトの違いがわからないが、最初のサイトをクリックする時間がずっと少ないように感じた」など、この行に沿って多くのコメントが寄せられました。

トニーの2番目の点にも同意しません。スティッキーナビゲーションが効果的である理由の1つは、いったんスクロールすると、サイトの別の場所に移動したくなったときに、簡単に別の場所に移動できることです。誰かの最初の選択肢が最後になるとは限りません。

無限スクロールと長いページ(以下のコメントを参照)の人気は、スティッキーナビゲーションの効果に貢献しています。

考慮すべきもう1つの非常に重要なことはモバイルです。スティッキーナビゲーションはモバイルサイトで非常に効果的です。これらのページは長くなる傾向があり、ナビゲーションにアクセスできるようにすることで、ナビゲーションに到達するためにユーザーが長時間スクロールして別の場所に移動する必要がなくなります。はい、それは画面上で貴重な領域を占有しますが、それはすべてのページでユーザーを孤立させるよりも優れています。

16
Jason King

固定ヘッダーで解決したい設計上の問題は、追加のページやツールにすばやく簡単にアクセスできるようにすることです。そのソリューションで得られるマイナスの効果は、コンテンツから貴重なピクセルを盗むことです。 15年前、誰もが自分のサイトにフレームを必要としていたとき、それが問題でした。これは、デスクトップベースのサイトでは大きな問題ではないかもしれませんが、モバイルデバイスではそうです。ユーザーがサイトに費やす時間の99%は、ナビゲーションではなくコンテンツとやり取りしています。

次のルールをお勧めします:

  • 固定ヘッダーを使用ヘッダーに主に含まれている場合toolsユーザーが頻繁に使用するツールであり、これらのツールが使用される場合属していない特定のコンテキストまたはa 特定のタスクフロー。ご指摘のとおり、TwitterとFacebookはこのルールの2つの良い例です。訪問者がFacebookを使用すると、下にスクロールしてすべてのステータス更新を確認できます。次に、独自のステータス更新を記述し、その目的でヘッダーを使用します。数分後、誰かがユーザーにメッセージを送信し、ヘッダーに通知が表示されます。これらすべてのイベントは任意の順序で発生する可能性があります。

  • 固定ヘッダーを使用しないヘッダーに主に含まれている場合グローバルメニュー互いに異なるオーディエンスとユーザータスクの情報を含む個別のサイトセクションにつながります。通常、人はサイト全体を自発的に閲覧したり、複数の非常に異なる目標を設定したりしません。したがって、他のメニューリンクにすぐにアクセスする必要はありません。その場合は、コンテンツのための余地を残しておくことをお勧めします。

無限スクロール効果を使用する場合は、何らかのトップに戻るリンクや「メニューを表示」リンクを追加するか、ヘッダーを追加することもできます。 Pocketや新しいSafari for iO7などの一部のモバイルアプリでは、ユーザーがrevealing header/footer when the user taps on画面。したがって、無限スクロールのシナリオでは、2つのルールの間のどこかで終わる可能性があります。

7
Tony Bolero

これらのサイトのほとんどに共通する重要な機能の1つは、無限スクロールを使用して、ユーザーが投稿したコンテンツの長いリストを表示することです。つまり、見出しが必要な場合、ユーザーは長い距離を進むことができます(ナビゲート、検索、通知の表示、または投稿モードへのジャンプ)。

ユーザーに上方向へのスクロールを強制するには、スクロールの追加の労力が必要ですが、現在のコンテキストも失われます。したがって、一般的にいつでもヘッダーバーを使用できるようにしておくと、スクロールの手間を省くことができます(ただし、これには代替ソリューションを使用できます)が、現在のコンテキストを維持することがヘッダーで提供される機能にとって重要である場合は特に重要です。

2
Pau Giner