スティッキーメニューのユーザビリティ調査によりウェブサイトのナビゲーションが 22% 高速化

概要: ナビゲーションは Web サイトの最も重要な要素の 1 つですが、デザインで使用するのは困難です。 「スティッキーナビゲーション」を使用すると、Web サイトのナビゲーションが約 22% 高速化されます。これは、CSS と JavaScript (または JQuery) のテクニックを通じて実現できます。しかし、モバイルデバイスとの互換性やデザインの制限など、いくつかの欠点もあります。

SirsiDynix の UX/UI デザイナー Hyrum Denney 氏は、Smashing Magazine に「スティッキー メニューはナビゲートが速い」という記事を掲載し、「スティッキー メニュー」に関するユーザビリティ調査の結果や、実装テクニック、関連する課題について紹介しました。 CSDNがまとめた記事の内容は以下のとおりです。

ほとんどのデザイナーは、ナビゲーションが Web サイトの最も重要な要素の 1 つであることに同意するでしょう。それでも、現在のナビゲーションは必ずしも使いやすいとは限りません。通常、ユーザーはナビゲーション メニューにアクセスするために Web サイトの上部までスクロールする必要があります。最近、私は「スティッキー メニュー」によって Web サイトのナビゲーションが高速化されるかどうかを調査していました。これに関してユーザビリティ調査を実施しました。以下では、この研究の結果と、実装された技術および関連する課題の一部を紹介します。

図1

スティッキーナビゲーションの定義

スティッキー (または固定) ナビゲーションは、Web サイト上の特定の位置に固定されたメニューです。ユーザーがページをスクロールしても、ナビゲーションは消えません。つまり、ユーザーはページをスクロールせずに、Web サイトのどこからでもナビゲーションにアクセスできます。スティッキーナビゲーションは、フッターやソーシャルメディアボタンなどのあらゆるメニューに適用できますが、一般的にはウェブサイトのナビゲーションに使用されます。図 2 は、モバイル デバイス上の標準ナビゲーションとスティッキー ナビゲーションの違いを示しています。

図2

ユーザビリティ研究

背景

この調査のために、ほぼ同一のテスト Web サイトを 2 つ作成しました。唯一の違いは、一方には標準ナビゲーションがあり、もう一方にはスティッキーナビゲーションがあることです。最初のウェブサイトでは、40 人の参加者に制限時間内に 5 つのタスクを完了するよう求められました。次に、別の Web サイトに移動して 5 つの異なるタスクを完了します。両方のサイトはデスクトップ コンピューターでテストされ、ユーザーには最後まで 2 つのサイトの違いは通知されませんでした。テストが完了した後、データの分析を通じて 2 つの興味深い結論に達しました。

1. スティッキーメニューによりナビゲーションが22%高速化

調査データによれば、参加者はページの上部までスクロールしなくても必要なものをすぐに見つけることができたそうです。 22% はそれほど大きなデータではないと思われるかもしれませんが、訪問者に大きな影響を与える可能性があります。データによると、スティッキーナビゲーションにより、訪問者は 5 分ごとに 36 秒を節約できます。もちろん、ユーザー エクスペリエンスを強化する場合、ユーザーをページに長く滞在させることはメリットの 1 つにすぎません。ユーザーは、制限なくサイトを詳細に探索し、必要なものを見つけることができる必要があります。

2. 参加者の100%が固定メニューを好むが、その理由は分からない

テストの最後に、私は常にユーザーに 2 つのサイトの違いに気づいたかどうかを尋ねます。しかし、誰にも分かりません。その変化は非常にわずかだったので、全員が互いのタスクを完了することに集中していたため、誰も気づきませんでした。どちらのウェブサイトの方が使いやすいと感じたかを尋ねたところ、参加者は次のように答えました。 40 人の参加者全員が、固定ナビゲーションを備えた Web サイトの方が使いやすい (より速く使用できる) と感じました。多くの人が「2 つの Web サイトの違いはわかりませんが、固定ナビゲーションをクリックすることで時間を節約できると思います」とコメントしました。このようなコメントは、ユーザーが固定ナビゲーションを全面的に支持していることを示しています。

デスクトップソフトウェアのトップナビゲーション

Word で文書を入力しているときに、単語を太字にしたり余白を広げたりしたいときには、毎回最初のページまでスクロールして設定しなければならないと想像してください。考えただけでも憂鬱になりませんか？ほとんどのデスクトップ ソフトウェアには、何をしているときでもアクセスできる完全なナビゲーション メニューが常に用意されています。 Web ブラウザもこのようになるべきです。ブラウザのアドレス バーにアクセスするために Web サイトの上部までスクロールしなければならないのはばかげています。

優れたケース共有

最近では、Facebook や Google+ もスティッキーナビゲーションを採用しています。米国で最もアクセス数の多い 25 の Web サイトのうち、現在スティッキー ナビゲーションを使用しているのはわずか 16% です。これを実現している素晴らしいサイトをいくつか紹介します。

フィジーソフトウェア

これは、上部に配置された水平固定ナビゲーションの優れた例です。ユーザーはウェブサイトを快適に使用できます。

図3

ウェブアプリ

このサイトのナビゲーションは垂直で左側に配置されており、Google+ のナビゲーションに似ています。唯一の欠点は、画面の高さが 560 ピクセル未満の場合、メニューの下の部分にアクセスできなくなることです。これは、ネットブックでサイトをテストしたときに発見した問題です。

図4

より良いアプリを作る

MakeBetterApps これはもう一つの素晴らしい例です。ナビゲーションは少し透明なので、その下のコンテンツがぼんやりと見え、いい感じです。

図5

ロドルフ・セレスタン

Rodolphe Celestin の固定ナビゲーションはサイトの上部に広がっていますが、ページを下にスクロールすると、ナビゲーションのデザインが微妙に変化します。このようにデザインを簡素化することは、一貫性を維持する限り、良い手法です。同時に、このウェブサイトのデザイナーは、現在人気のデザイン手法も採用しました。ウェブサイト全体は 1 ページのみで、ナビゲーション上のリンクはアンカー ポイントであり、クリックするとページの対応する位置にジャンプできます。これらにより、サイトは快適に使用できるようになります。

図6

ライアン・シェルフ

Ryan Scherf サイトのナビゲーションは垂直になっており、アイコンのみで構成されています。その革新性は素晴らしいです。

図7

ウェブデザイナーウォール

Web Designer Wall このサイトの垂直固定ナビゲーションは、メニューに項目が 4 つしかないため、うまく機能します。ブログを書くのに最適です。

図8

スティッキーメニューは最も人気のあるナビゲーション形式ではありませんが、スティッキーメニューを使用する Web サイトが増えています。

今すぐデザインを始めましょう

iFrameを避ける

iFrame は固定ナビゲーションを実装する簡単な方法のように思えるかもしれませんが、使用は避けてください。 iFrame は、特にクロスブラウザ互換性、セキュリティ、検索エンジン最適化の問題など、多くの問題を引き起こす可能性があるためです。 iFrame は適切な位置にありますが、HTML レイアウトの主要な部分として使用すべきではありません。

CS

CSS を使用してトップナビゲーションを実装するのは良い方法です。これは最も直接的、軽量、かつ最速の方法です。注意すべき点は、position、margin-top、z-index の 3 つです。メニューの位置を「固定」に設定すると、メニューがページの残りの部分と一緒にスクロールしなくなります。ナビゲーションが水平の場合、margin プロパティを設定する必要はありません。最後に、水平ナビゲーションの場合は、z-index プロパティを使用して、ナビゲーションが常に他の要素の上に配置されるようにします。スクロールすると、追加のコンテンツがナビゲーションの下に表示されます。

詳細については、W3C の Web サイトを参照してください。

JQuery と JavaScript

図9: このシンプルで洗練されたトップナビゲーションバーはJavaScriptで実装されています

jQuery または JavaScript を好む場合は、次の方法を試すことができます。

● スクロール

● シンプルでスマートなスティッキーナビゲーションバー

● jQuery ウェイポイント

● スティッキーメニューバー

スティッキーナビゲーションのデメリット

図10

設計上の制限

スティッキーナビゲーションを採用するには、チームが諦めたくないデザイン上の選択肢をいくつか諦める必要があるかもしれません。たとえば、水平方向の固定ナビゲーションは、ページの上部、他の要素の上に配置されます。実装は簡単ですが、必ずしもユーザーが必要としているものではありません。

気が散ったり中断されたりしやすい

注意しないと、垂直ナビゲーションが邪魔になる可能性があります。一部の固定要素は、ユーザーがスクロールするにつれて遅れる場合があります。また、他の固定要素は高すぎる (または幅が広すぎる) ため、コンテンツへのアクセスに影響する場合があります。ナビゲーションは、コンテンツから注意を奪うことなく簡単にアクセスできる必要があります。

モバイルデバイスとの互換性

上記の CSS および JavaScript 実装方法は、一部のモバイル デバイス ブラウザーではサポートされていません。 Luke Wroblewski 氏の記事「モバイルの整理」では、モバイル デバイスでナビゲーションを作成するときに留意すべき重要な原則がいくつか紹介されています。レスポンシブ デザイン手法では、画面サイズに基づいてナビゲーションを調整するためのソリューションもいくつか提供されます。

各デバイスのサポートを理解する。これらの互換性の問題を事前に知っておくと、より多くの時間を節約できます。 「いつ使用できますか?」の記事では、デスクトップ ブラウザーとモバイル ブラウザーでの CSS プロパティ「position:fixed」のサポートについて紹介しています。 Brad Frost もこれについてテストと分析を行い、ビデオで素晴らしい洞察を提供しています。

結論は

デザイナーや開発者として、なぜユーザーにナビゲーションを見つけるためにページを上下にスクロールさせる必要があるのでしょうか? これはデスクトップ ソフトウェアではもはや問題ではなく、スティッキー メニューの利点を示すデータもあります。米国では、最もアクセス数の多い上位 25 の Web サイトのうち 84% が、ナビゲーションを上部に固定することでユーザーのナビゲーションを高速化できます。

もちろん、スティッキーナビゲーションは、特にリソースが限られている場合など、あらゆる状況に適しているわけではありません。スティッキーナビゲーションを使用する場合は、サイトの使いやすさと全体的なユーザーエクスペリエンスを慎重に考慮する必要があります。

著者について:

Hyrum Denney は、Web デザインと開発を専門としています。現在、SirsiDynix で UX/UI デザイナーとして働いています。彼は自身のUXスタジオを設立し、eコマース業界でウェブオペレーションスーパーバイザーとして働いていました。私は新しい知識を学ぶことに熱心で、ユーザーエクスペリエンスデザインとウェブサイトを使用するユーザーの心理学に特に興味を持っています。

オリジナルリンク: スティッキーメニューはナビゲートが速い

スティッキーメニューのユーザビリティ調査により、ウェブサイトのナビゲーションが 22% 高速化されることが判明

キーワード: スティッキー、メニュー、利用可能、セックスリサーチ、使用可能、ウェブサイト、ナビゲーション、22%、要約、ウェブマスター、ウェブサイトのプロモーション、収益化