web-dev-qa-db-ja.com

スクロールで消えたり再表示されたりするバーはどの程度使用できますか?

http://usabilitypost.com/2014/05/24/the-scroll-up-bar/ から:

現在人気が高まっているデザインパターンは、ページ上部の固定位置バーです。時々、バーは変わらないままです。下にスクロールすると、ヘッダーが細いバーに変形する場合があります。完全に新しいバーが表示される場合もあります。

これらのバーは便利な場合がありますが、垂直方向のスペースを占めるため、ブラウザウィンドウのサイズを選択することで、ユーザーが自分で選択した読み取りスペースが減少します。さらに、これらのバーに表示される情報は、実際のコンテンツの読み取りを支援するものではないため、バーはヘルプよりも煩わしいものになります。

この問題を解決する興味深い方法は、下にスクロールするときにバーを非表示にし、上にスクロールするときに表示することです。スペースが貴重なモバイルインターフェースでは、この手法はウェブブラウザコントロールなどのクロムを非表示にするために使用されますが、ウェブ上で使用するのにも適したパターンです。たとえば、Mediumは新しいナビゲーションバーを更新しました。下にスクロールするとバーが消えますが、上にスクロールするといつでも表示できます。

現在、HackerNewsで 大きな議論が続いています が、意見はたくさんあります。君たちはどう思う?

確かに、それらは 消える/クリックで再表示されるバーよりも優れています

15
Mark Boulder

これに対する簡単な答えは、次のとおりです。しかし、スティッキーバーと比較して、ピットバーは失敗しにくいです。

用語

  • 静的バー-ページの残りの部分と共にスクロールする(ナビゲーション)バーです。
  • スティッキーバー-ビューの上部にくっついて常に見えるバーです。 AKA固定バー(ブートストラップ用語)または絶対バー(CSS)。
  • ピットバー-ガレージにいるピットレーンのクルーを思い出しますが、必要に応じて(オンデマンドで)レーンに走ります。それは、「スクロール時に消える/再び現れる」バー、またはスクロールアップバーです。

ナビゲーションカテゴリ

非常に便利なナビゲーション分類は、(David FioritoとRichard Daltonです。一貫性のあるエンタープライズWebナビゲーションソリューションの作成):

  • Structural-プライマリナビゲーションとそのサブによって頻繁に提供される、サイト階層に基づくナビゲーション。
  • Associative-別のページへのコンテンツ内リンク。
  • tility-通常、サイトに関連するユーティリティを提供するグローバルナビゲーションオプションのみ。これらは通常(常に議論される人もいます)行き止まりナビゲーションの形式です(元の場所に戻る必要があります)。

またはグラフィック形式で:

An illustration showing the various navigation categories

情報探索行動

現在、サイトを使用している人々は、彼らが何を求めているかに基づいて異なる行動をするかもしれません。両極端は次のとおりです。

  • ピザ配達の少年(別名、完全一致)-高度なタスクと時間を重視し、これらの人々は既知の特定のものを検索し、主に自分のタスクに適した情報トリガーを探します。たとえば、黒のPapermateフレアMペンを購入したい人。
  • エクスプローラー-そこに何があるかを確認したいだけですが、特定のタスクは考えていません。 Facebookユーザーのかなりの人はそのような人です-通知なしで、彼らは時間をつぶすために何が起こるかを見るために調整します。

これはサイト自体にも関係しています。ニュースサイトにアクセスする人は、しばしば探検家です。ハードドライブをオンラインで購入する人々は、多くの場合、自分が何を望んでいるか(または少なくともおおまかに)を考えています。

明快な「連想」サイトはウィキペディアです。検索ボックスを省略した場合、ほとんどのeコマースサイトは適切なナビゲーション階層(つまり、「構造」)に依存します。

スティッキー(固定)ナビゲーション

階層を表示するかどうかに関係なく、スティッキーバーには多くの場合、主要なナビゲーションオプションが表示されます。サイトの性質と人々がそれをどのように使用するかによって、そもそもスティッキーナビゲーションがどれほどすばらしいかが決まります。

明らかに、それは人々が主要なナビゲーションに到達するために一番上までスクロールして戻る必要がないようにすることを意味しました。しかし、人々は実際にこのナビゲーションをかなり使用していると想定されています。

少し奇妙なことに、あなたが参照している記事はこれらを2つのニュースWebサイトで示していますが、典型的な動作はExplorerの動作です。したがって、間違いなく、これらのスティッキーナビゲーションはそれほど重要ではありません。

ピットバー

スティッキーバーには明らかに価格が伴います。モバイルデバイスでは特に重要です。

したがって、ピットバーのロジックは単純です。

  • 最初に私に会います-私がそこにいることを知っています。
  • 下にスクロールすると、(ほとんどのWebサイトのように)私は消えます。
  • しかし、ここに向かって上にスクロールすると、私が表示されるので、一番上までスクロールする必要はありません。
  • 私はあなたが私を必要としていると仮定していますが、必要でない場合は、少し上にスクロールしてからもう一度下にスクロールして、私を非表示にしてください。

ピットバーは、バーの必要性についてデザイナーが誤った仮定をした場合にも役立ちます。ユーザーは下にスクロールしてより多くのコンテンツを表示し、上にスクロールして以前のコンテンツを表示する頻度が低くなります。したがって、バーが少なくとも必要ない場合は、バーが必要な時間の半分未満である必要がありますが、スティッキーバーでは常にそこにあります。

私は認めます、それはかなり天才です。そして、もしAppleができれば、彼らはそれを特許化したであろうに違いない。

モーション価格

ただし、ピットバーには価格が付いています-モーション(またはアニメーション)は最も顕著な視覚的機能です。私たちの脳は、他の視覚的特徴(色、サイズなど)よりもそれに注意を向けています。したがって、アニメーションを使用して表示することにより、ユーザーの注意をバーに引き付けます。これは、ユーザーが必要とする場合は素晴らしいですが、必要でない場合はそれほど効果的ではありません。繰り返しになりますが、それはこのメニューがユーザーにとってどれほど有用であるかに戻ります。 chromeのモバイルバージョンでは、これは非常に重要ですが、他の一部のサイトでは、あまり役に立たない場合があります。

そうは言っても、脳はすぐに、無関係であるとわかった運動を無視することを学びます。そのため、風が吹いている草は無視します-そこに動きがあっても。

そのため、ピットバーの動きを無視することを学ぶには少し時間がかかりますが(無意識であったとしても、少し煩わしいかもしれません)、すぐにそのペナルティは忘却に向かって減少します。

こんにちは、どれくらい低いですか?

頭に浮かぶもう1つの変数は、静的ナビゲーションバーまでのスクロール時間です。

物理的な画面の高さの尺度として画面の高さ(SH)を使用すると、ページはモバイルデバイスの9SHにレンダリングされる可能性がありますが、一般的なデスクトップ画面では3SHのみです(幅が広いほど高さが低いことを意味します)。 。

私のiPhoneの弾道は、ジェスチャーあたりおよそ1SHです。しかし、トラックパッドを備えた私のデスクトップでは、単一のジェスチャーで非常に簡単に3SHに到達できます。

これは、デスクトップ環境でのスティッキーまたはピットバーの正当性をさらに疑問視します。

概要

そもそもスティッキーバーやピットバーを設置することの正当性は、サイトとユーザーによって異なります。

しかし、スティッキーとピットの間に、後者は双方にメリットのある適切なソリューションのように見えます。

16
Izhaki