web-dev-qa-db-ja.com

スティッキーヘッダーのユーザビリティ調査?

スティッキー(または固定)ヘッダーは、今日ではそれほど珍しくありません。カタログと検索機能に大きく依存している大規模なWebサイトの場合、ユーザーを支援するのに適しています。

私は現在そのようなウェブサイトをデザインしているので、ユーザーがそれらにどのように反応したかについて調査が行われたのかどうか疑問に思っていましたか?もちろん、それはすべて、それをどのように実装するか、およびユーザーベースの知識に依存しますが、調査に基づくパターン情報はありますか?一般的な落とし穴、ベストプラクティスなど?

17
vincent.io

また、画面の高さが心配な場合は、下にスクロールすると、メニューがフルサイズから小さいサイズに折りたたまれる可能性があります。次に、下向き矢印または他の方法でクリックまたはロールオーバーを知らせると、再びフルサイズに拡大されます

9
Earle

スティッキーヘッダーは新しい概念のように見えるかもしれませんが、フレームと(視覚的に)大きな違いはありません。

残念ながら、スティッキーヘッダーに関する直接的な調査はありません。うまくいけば、他の人が自分のユーザー調査からの洞察を共有できる...

ベストプラクティスとして、有用な場合(つまり、想起ではなく認識)に粘着性のある要素を含めます。例としてヴァンガードを参照してください: https://personal.vanguard.com/us/funds/vanguard/all?sort=name&sortorder=asc

画面の領域を使いすぎないように注意してください。ユーザーが下にスクロールしている場合は、コンテンツに興味がある可能性があります。ユーザーが下にスクロールするときにヘッダーのサイズを小さくするのが好きです。ロゴが大きい場合は、ユーザーがスクロールしてヘッダーを少し縮小するときに、小さいバージョンを使用できます。また、ユーザーがスペースバーまたはスクロールバーを使用している場合は、ページのスクロールが機能することを確認してください。これらのスクロール方法を使用する場合、通常、最後の1行または2行のテキストがページの上部に表示されます。

最も重要なベストプラクティスは、既に実行していることです。ヘッダーを有用で理解しやすいものにします。ヘッダーがそもそも役に立たない場合は、スティッキーヘッダーは煩わしいだけです。

スティッキー要素を使用して、ユーザーが下にスクロールしたときに左端または右端に表示されるCTA(行動を促すフレーズ)に注意を引くこともできます(ここでもコンテンツに干渉しないようにしてください)。お問い合わせ、ヘルプデスク、および「トップに戻る」リンクにスティッキーエレメ​​ントを使用することに成功しました。

7
Andrew

実際の調査データがないため、スティッキーヘッダーを調査しているときに見つけたいくつかのことを共有したいと思いました(これらのポイントのほとんどは、他の回答者からも指摘されています)。

  • ヘッダーは小さくしてください。ビューポートの最大部分はコンテンツ用に予約する必要があります。
  • 絶対に必要なものだけを入れてください(ロゴが本当に必要ですか?)。
  • ヘッダーがコンテンツ部分と十分に対照的であることを確認してください。スペースのみでこれを行うのははるかに困難です(通常、非粘着性の見出しでは機能します)。スティッキーヘッダーに暗い背景色を使用しても問題ありません。
  • スティッキーヘッダーは、電話などの小さな画面のデバイスでWebサイトを表示するときにほとんど機能しません(Webアプリケーションは別のものです)。
  • ユーザーが下にスクロールしてメニューが「スナップ」するときの派手なアニメーションを最小限に抑えます。これは、コンテンツへのフォーカスを妨げるだけで、ほとんど役に立ちません。
7
vincent.io

参照する調査がないことについては申し訳ありませんが、他の情報源があります。 Shawn Borsky 、プロのユーザーインターフェイスデザイナーと作成者は、次のようにスティッキーヘッダーにコメントしています。

ユーザーがフィードや記事などのスクロールコンテンツを読んでいるとき、トンネルのビジョンを取得してナビゲーションを無視するのは簡単です。彼らがコンテンツの消費を終了したり、そのトンネルから出たりするとき、あなたがコンテンツを読んでいるか、それに夢中になっていたために、サイトのメインアクションにアクセスできなくなるとイライラしたり、方向感覚を失ったりする可能性があります。

それはなぜあなたがそれを持つべきなのかという一つの良い説明だと思います。ただし、画面の高さは大きく異なるため、注意が必要です。ブラウザウィンドウのヘッダーとは別に、迷惑なツールバーや、お気に入りバーなどの他の組み込みのブラウザーバーを使用すると、実際のコンテンツ用のスペースが少なくなります。スティッキーヘッダーを実装する場合は、それを(実際のコンテンツからスペースを取りすぎないように)適度に小さくしますが、 フィッツの法則 のルールを実装するのに十分な高さにします。

実際には私はこのようにします:

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

6
Benny Skogberg

片頭痛になる。

私にとって、3つの問題があります。まず、ほとんどのスティッキーヘッダーは、ユーザーがスクロールを開始するとサイズが変化する大きなブロックで始まり、これが片頭痛を引き起こす可能性があります。第2に、ほとんどのスティッキーヘッダーは、スクロール要素と非スクロール要素の間のEdgeを画面の中央に近づけ、これにより目の疲れが増します。第3に、ソフトウェアによっては、スティッキーヘッダーがページアップとページダウンを壊す可能性があります。

スティッキーヘッダーが必要な場合は、ウィンドウの片側に狭いヘッダーを配置すると役立つと思います。

0
Marja Erwin