Webサイトがスクロール時にヘッダーの表示を切り替えるのはなぜですか？
一部のWebサイトには、ユーザーが下にスクロールすると非表示になる（通常はかなり小さい）ヘッダーがあります。
私が理解できなかったのは、上にスクロールすると再び表示される理由です。時々私は少し上にスクロールしてページのコンテンツを少し上に読みたいのですが、それは本当に迷惑になります。 ここ は例です。
なぜこれが行われるのですか？これを実装することで達成しようとしているWebデザイナーは何ですか？本当に迷惑なようです。
上にスクロールしているときにナビゲーションメニューが表示されるのはなぜですか？
コンテンツ重視のサイトおよびページでは、ユーザーはエンゲージメントがある場合、下にスクロールすることを期待します。ユーザーが下にスクロールせずに上にスクロールしている場合、「従事していないユーザー」として受け入れられます。エンゲージメントのための他のオプションを提供することは、この動作の主な目標です。
同じパターンがモバイルサファリアプリでも見られます。ユーザーが上にスクロールすると、他の機能が表示されます。ユーザーが下にスクロールしている場合、要素は非表示の形式に変わり、領域が増加します。
- この動作により、要素が非表示になり、エンゲージメントがあるときに注意散漫要素が減少します
- この動作により、エンゲージメントがない/少ない場合にオプションを増やすために要素が表示されます
モバイル重視の設計
これは スクロールアップバー と呼ばれることもあり、モバイル中心のデザインの製品です。これは、常に画面に表示される固定ナビゲーションバーと、ページの上部にのみ配置されるフローナビゲーションバーとの妥協点です。固定ナビゲーションバーには、小さなモバイル画面のかなりの部分を占めるという欠点がありますが、フローナビゲーションバーには、かなり短いページでも多くのスクロールが必要になるという欠点があります。
デスクトップでは、これらはどちらも大きな問題ではありません。固定ナビゲーションバーはビューポートのより小さな部分を占め、マウスコントロールの精度が高いため、より小さくすることができます。また、ページの上部に戻るまでの時間がはるかに短くなります。これは、ページが短く、スクロールが少なくてすむため、およびユーザーがスクロールバーを使用してシェブロンをドラッグすることにより、ページの上部にすばやくスクロールできるためです。 。
これは、いわゆる「ハンバーガーメニュー」に代わるものでもあります。これは、ユーザーが押すことを期待されているボタンの後ろにナビゲーション要素を非表示にします。ボタンの背後にあるオプションを非表示にすると、それらが見つけにくくなり、多くの場合、オプションの使用が少なくなります。 （ただし、人々はそれに慣れてきているため、以前よりも優れています。）
ページの上部にナビゲーションオプションを表示し、上にスクロールしてオプションを再度表示するなどの自然なアクションを活用することで、ナビゲーションオプションがより見つけやすくなり、より多くの使用が可能になります。
なぜ上にスクロールするのですか？
ナビゲーションバーが上にスクロールして表示される理由は2つあります。1つ目は、上にスクロールしているユーザーが、下にスクロールしているよりもページを操作していない可能性が高いことです。 2つ目は、それが自然なアクションであることです。ユーザーがページを開いたときに、これらのナビゲーションオプションが表示されたため、自然にページの最上部までスクロールして戻り、アクセスしようとします。
他の理由で上にスクロールしている人は、もう少し上にスクロールするだけで、読み続けると自然に再び下にスクロールし始め、ナビゲーションバーがページから押し戻されるという考え方です。
ただし、ここのコメントに示されているように、これは多くの場合これらのユーザーを困らせます。これに対処するための私の推奨は2つあります。まず、ユーザーが少し上にスクロールするまでナビゲーションを表示させないでください。次に、ユーザーのスクロール速度と反応が異なることに注目してください。モバイルでの高速スクロールまたはフリックはページの上部に戻ろうとする可能性が高く、低速スクロールはコンテンツを調整するだけである可能性が高くなります。
また、個人的には、デスクトップでモバイルデザインを靴べらしようとしないことをお勧めします。ビューポートの幅を確認する以外に、ユーザーがデスクトップ上にある（またはタッチコントロールがない）ことを検出する方法があります。ユーザーがデスクトップを使用している場合は、固定ナビゲーションバーにフォールバックし、マウスでの使用に適したサイズを維持します。
他の人がこれを行うので、他の理由がないので、多くの人がこれを行います。
彼らの意図する理由は、どこかで読んだヘッダーを最小限に抑えながら、コンテンツに最大のスペースを与えるためかもしれません。私はあなたにも同意します。上にスクロールしたときにヘッダーが展開されるのは面倒です。コンテンツを隠さずに、それを行う前にトップに到達するまで待っていても、気になりませんが、これを行う人はほとんどいません。
この機能の背後にある意図は、ユーザーの想定された意図をサポートすることです。
- ユーザーが下にスクロールしている場合、ユーザーはコンテンツを読んでいる必要があります。ヘッダーを邪魔にならないようにして、ユーザーを支援してください。
- 上にスクロールしている場合は、読み終えて、ページの上部にあるナビゲーションに戻ろうとしています。ヘッダーを表示して、手助けしてください。
それが理想です。これが問題になるのは、UIがユーザーの意図を推測しようとする試みが失敗し、ユーザーが少し上にスクロールして前の行を読み直したときの方法にヘッダーを押し込んだ場合です。
多くの場合、これは単に不適切な実装の問題です。上向きのスクロールイベントでヘッダーをトリガーして表示に戻すのは簡単です。多くのサイト（リンク先の例を含む）は最低限のことを行い、それを1日と呼びます。
muchより良い実装は、ユーザーがかなりの距離上にスクロールするまで待機します-ヘッダーを元に戻す前に、ユーザーがページの上部に向かう意向を明確に示すまでに十分な距離です-見る。 （ユーザーがトリガーの前にページの先頭に到達するほど長くはありませんが！）これはロケット科学の難題ではありませんが、単純な方法よりもはるかに複雑です。そして、それが試みられたとしても、特定のコンテンツの長さなどのために、適切な期間に調整することにはいくつかの判断が必要です。これらすべてには、時間、注意、ユーザーテスト、設計チームとコードチーム間の良好なコミュニケーションなどが必要です。これらのすべては、それが頻繁に適切に行われず、ベアボーンの劣った方法が一般的にはるかに一般的であるということになります。
まあ、ユーザーはナビゲーションメニューを常に表示して、ユーザーがページをすばやく切り替えられるようにしたいと考えています。デザイナーは、ページビューとサイト滞在時間の増加を目指しています。それが彼らがスティッキーヘッダーを置く理由です。
ただし、 1 A/Bテスト の結果はそれほど印象的ではなかったことがわかりました。タブレット、デスクトップ、およびモバイルデバイスでのページビューが11％増加しただけで、大きな改善はありませんでした。
例のウェブサイトでは、トップバーが大きすぎてメインコンテンツが非表示になっているため、デザイナーが悪いことをしたと指定しています。
この特定のケースでは、次の2つの理由で設計に欠陥があります。
敏感すぎる。マウスホイールを1ステップ踏むだけで、ヘッダー全体が押し込まれます。他の人が言ったように、ヘッダーを表示するには、特定のしきい値/速度制限が必要です。
ヘッダーは不必要に巨大です。あなたはあなたが今どこにいるのか知っているので、ロゴは完全に不必要です。ヘッダーが1行のバーのみの場合、ユーザーはヘッダーの必要なすべてのコンテンツを取得します。
これらの2つのポイントを組み合わせると、上にスクロールすると、すべての状況でビューポートの上部が上に移動するため、上に移動をトリガーする両方のタイプの要望に対応します（より多くのコンテンツを表示し、ヘッダーを表示します）。
実際（私が個人的な経験を共有できる場合）、本当に気が散るのは、ページの一部を覆うという事実よりも、ヘッダーの「ジャンプ」です。これは、ヘッダーの表示と非表示の両方で発生します。
さて、ナビゲーションを非表示にする必要があると判断した場合（何らかの理由で）、ナビゲーションを再度表示する方法を見つける必要があると思います。このデザイナーは、複数のスクロールダウンでナビゲーションを非表示にすることを選択します。そして、上にスクロールすると再び表示するのが理にかなっているように思えます。しかし、それは確かにより良くできたかもしれない。ある種のナビゲーションを上部に残しつつ、それを小さくしたい。そして、おそらくマウスの動きを使用して、ナビゲーションの拡張を再度トリガーします。しかし、はい、これはそれを行うための完璧な方法ではありません。
コンテンツ重視、エンゲージメント、ユーザーエクスペリエンスを改善するためのUXデザインのようなものです。
- ユーザーが下にスクロールしているとき、彼らは読書についてです。
- ユーザーが上にスクロールしているとき、彼らは読書についてではありません。
これはbehaviourの方が話をしやすく、一部のサイトでは上にスクロールするときに追加のオプションが表示されることもあります（medium.comの投稿ページを確認してください）。
現在私は間違いなくこのように設計されているプロジェクトに取り組んでいます。すべてのインターフェイスを非表示にして、読み取り時にコンテンツのみを表示し、上にスクロールすると追加のオプションを表示します（ナビゲーション、見出し、共有ボタン、コメント、ソーシャルリンクなど）。 。等）
他に誰も言及していないのは、画面の動きを出口の動きとして解釈したときにサイトが使用していた「退場する前に待って」ポップアップ構造を思い出させることです。この関連性は私にとって非常に否定的ですが、私は、可能な場合はそのようなポップアップサイトを採用するか、単に回避することを想定しています。