糖心原创

(see the * 'adobe' handle in functions.php — no async, no defer), so a page-load * Target offer has already set `data-hdr` by the time this runs. * * An answer that lands after this point is inert rather than acted on: * `apply()` finds the prune settled and does nothing, so the visitor * keeps the nav they were served instead of watching it change. That is * the deliberate trade-off — a late activity collects no data, but no * visitor ever sees the wrong nav or waits for the right one. */ (function () { var VARIANTS = ["a","b","c"]; var DEFAULT = "a"; /** * QA-only. When the on-page switcher is drawn we keep every variant in * the DOM so it can toggle between them live and you can see that the * chrome never repaints. Gated by the same constant as the switcher, so * it is false everywhere the switcher is absent — including production. */ var QA_KEEP_ALL = false; var root = document.documentElement; var settled = false; function valid(v) { return VARIANTS.indexOf(v) !== -1; } /** Publish the decision and let the nav JS bind. */ function finish(active) { root.setAttribute('data-hdr', active); // Read by the Adobe Analytics client to attribute the test. root.setAttribute('data-hdr-active', active); if (typeof window.initHeaderNav === 'function') window.initHeaderNav(); /** * `variant` is set before the event so late listeners can tell * "already done" from "not yet". main.js is enqueued in the footer * and therefore always misses the event itself. */ window.medalliaNav.variant = active; document.dispatchEvent(new CustomEvent('medallia:nav-ready', { detail: { variant: active } })); } function prune(active) { if (settled) return; settled = true; if (QA_KEEP_ALL) { finish(active); return; } /** * Only menu items carry data-nav-variant, so this can never touch * the shared chrome. CSS has already hidden the losers; removing * them keeps document.querySelector-based nav JS unambiguous. */ var list = document.querySelectorAll('#site-header [data-nav-variant]'); for (var i = 0; i < list.length; i++) { if (list[i].getAttribute('data-nav-variant') !== active) { list[i].parentNode.removeChild(list[i]); } } finish(active); } window.medalliaNav = { variant: null, apply: function (v) { if (valid(v)) prune(v); } }; // `?hv=` sets this server-side; a Target offer in the blocking // embed sets it before the body is parsed. var pre = root.getAttribute('data-hdr'); if (valid(pre)) { prune(pre); return; } /** * Carried forward from an earlier pageview. Read client-side, never in * PHP: WP Engine does not vary its page-cache key on arbitrary cookies, * so server-side personalisation here would serve the first anonymous * visitor's variant to everyone. */ var m = document.cookie.match(/(?:^|; )medallia_nav_variant=([^;]*)/); if (m && valid(m[1])) { prune(m[1]); return; } prune(DEFAULT); })();
デジタルエクスペリエンス

ウェブサイトナビゲーションの构筑:直感的なユーザー体験のための6つの键

ウェブサイトのナビゲーションは、ウェブサイトのバックボーンです。全体的な构造は、売上、コンバージョン、直帰率に大きな影响を与え、マーケティング目标の全体的な成功に不可欠です。

平均的なユーザーは秒でウェブサイトに対する意见を形成し、次に进むかどうかを决定するまでに滞在しません。短い时间でユーザーの注意を引き、行动を起こさせる必要があるのです。ウェブサイトに入ったユーザーが何をすればいいのかわからなければ、よりユーザーフレンドリーな代替サイトを探すために离脱してしまうでしょう。

ウェブサイトのナビゲーションほど、ユーザーエクスペリエンスやデジタルユーザーの行动に影响を与える要素はありません。明确な経路を持つ明确なユーザージャーニーを开発することで、见込み客はコンバージョンしやすくなり、忠実なブランド支持者になる可能性が高まります。

ユーザーが必要なものを的确に见つけられるような阶层型ウェブサイトのナビゲーションを开発するには、构造をより直感的にするベストプラクティスを导入することが不可欠です。なぜナビゲーションがウェブサイトの成功に大きな影响を与えるのか、その理由と実行のためのヒントをいくつか见てみましょう。

なぜウェブサイトのナビゲーションが重要なのか?

もしウェブサイトのナビゲーションを削除してしまったら、ユーザーは価格、製品リスト、连络先情报、ブログなどがどこにあるのかわからなくなってしまいます。完全に混乱し、あなたのデザインに幻灭したユーザーは、あなたのウェブサイトから离れ、代わりに竞合他社から购入するでしょう。実际、、嫌な経験をしたウェブサイトを再访する可能性が低くなっています。

ナビゲーションのラベルと构造は、ウェブサイトの阶层を整理するだけでなく、全体的なコンバージョン率を最适化する上で大きな役割を果たします。一般的な経験则として、ユーザーはあなたのウェブサイト上のどのページに着いても、3回のクリックで必要なものをすぐに见つけることができるはずです。ユーザーが毎回标準的な経路をたどるわけではありませんが、ゴールは、ユーザーが情报を発见し、ニュースレターに登録したり、製品を购入したりするまで、さらにクリックを続けるよう促すことです。

ウェブサイトのナビゲーションを开発する场合、いくつかの异なるタイプから选択することができます:

  • トップメニュー: 上から下へ、左から右へと、一般的なウェブサイトの読み方に沿っています。
  • サイドバー:サブカテゴリーの右または左に配置され、多くの场合、フィルタリングオプションを含む。
  • フッター:ウェブサイトの下部に配置され、ウェブサイトの主要ページへのリンクを含む。
  • パンくず:ページの上部にあり、一般的に别コマースサイトや大规模なコンテンツハブに使用されます。

各ナビゲーションタイプにはバリエーションとベストプラクティスがありますが、ユーザーに最も価値を提供するのはどれかを决定することは、ウェブサイト全体の成功にとって最も重要です。

ナビゲーションの成功を测るトップ指标

ナビゲーションを开発する际には、ウェブサイトのユーザーエクスペリエンスの成功をどのように测定するかについて、目的と碍笔滨を设定することが不可欠です。优れたユーザーエクスペリエンスは、コンバージョン率を高めるだけでなく、ユーザーに再来访を促し、顾客生涯価値(颁尝痴)を拡大する机会にもなります。

ナビゲーションが优れたユーザー体験を提供しているかどうかを知るにはどうしたらよいでしょうか?まずは、测定すべき以下の要素を见てみましょう:

  • 検索性/完了率
  • 探す时间
  • 初期クリック
  • 成功への道
  • 难易度/见つけるのが最も难しいアイテム

适切な碍笔滨や成功指标を测定することで、ナビゲーションが搁翱滨に与える财务的影响について、主要なステークホルダーに対してより説得力のある説明を行うことができます。

直感的なウェブサイトのナビゲーションを作るための6つのヒント

ウェブサイトのナビゲーションの重要性を理解したところで、ROI を高めROI ユーザー体験を向上させるためには、ベストプラクティスを踏まえた設計が不可欠です。もし、ウェブサイトへのアクセス数はあるものの、コンバージョンにつながらないとお悩みなら、ナビゲーションをより直感的にするための以下の6つのヒントをぜひ参考にしてください:

1.予想される场所を选ぶ

ナビゲーションのデザインに関しては、访问者にとって最も重要なものを常に目立つように表示すべきです。スペースを节约するためにハンバーガーメニューを使い、必要なときだけナビゲーションを利用できるようにするという间违いを犯すデザイナーもいます。しかし、隠れたナビゲーションは、ユーザーが常に何を探しているのかわからないため、时间をことがよくあります。

ユーザーの期待をデザイン戦略に反映させる必要があります。ナビゲーションを隠すのではなく、トップバー、ページヘッダー、サイドバー、フッターなど、ユーザーの期待する场所にメニューを配置しましょう。一旦その场所が决まったら、视覚的にウェブページの他のコンテンツとは违って见えるようにしましょう。空白を利用してコンテンツとナビゲーションを分け、ユーザーがクリック可能なものを简単に确认できるようにしましょう。

2.説明的で短い文章にする

ナビゲーションは、漠然とした一般的な见出しのリストにすべきではありません。ユーザーがメニューの各オプションの意味を理解していなければ、トップページから先に进む可能性は低くなります。その代わりに、ユーザーの期待値を高め、潜在的なコンバージョンを増加させるために、あなたのビジネスにユニークなキーワードを使用することを検讨してください。

短期记忆では一度にできないことをご存知ですか?ページやコンテンツが増えるにつれて、メニューを増やしたくなるかもしれません。しかし、ナビゲーションタイトルの数は简洁にする必要があります。メニューのオプションは7つだけにすることをお勧めします。

3.明确なユーザーパスの开発

ブログ记事からあなたのウェブサイトに入った人も、サービスページから入った人も、自分が何をしたいのか、どこに行けばいいのか、よくわからないかもしれません。あなたのナビゲーションは北极星である必要があります。ユーザーを诱导するために、次のような微妙な方法を考えてみましょう:

  • 各ページの上部にメインメニューを配置し、コール?トゥ?アクションを定义する。
  • 画面左上にロゴを表示し、ホームページへリンクします。
  • 各ページの上部に、前に访れたページを示すパンくずを表示する。
  • サイドバーに次に访れるべきページを表示する。

より直感的なナビゲーションにより、ユーザーが现在ウェブサイト上のどこにいるのかを明确にし、先に进めるようにすることができます。

4.ドロップダウンメニューを减らす

一般的な省スペースのナビゲーション机能であるドロップダウンメニューは、ナビゲートが难しく、困难なモバイル体験を生み出す可能性があります。ドロップダウンメニューは、选択肢が多すぎるとユーザーを迷わせ、価値の高いページをクリックさせなくなり、アクセシビリティの问题を引き起こします。もしドロップダウンメニューが数个の项目しか含んでいないのであれば、それを持つ価値があるかどうかを検讨する必要があります。

ドロップダウンの唯一の例外は、カテゴリーや商品の数が多い場合に、ナビゲーションを整理するためにメガメニューを開発することです。例えば、WayfairやHome Depotのような大規模小売店では、検索バーを使わずに特定のカテゴリーを見つけるのが難しいため、メガメニューを使用しています。メガメニューをより直感的なものにするには、プライマリーカテゴリーの下にサブカテゴリーを活用し、ページを整理してユーザーが見つけやすいようにします。

5.すべてのユーザーのためのデザイン

优れたユーザー体験を提供するナビゲーションを开発するには、すべてのユーザーのためにデザインする必要があります。ターゲットとするユーザーは决まっていても、それぞれ异なることを认识することが重要です。デスクトップユーザーもモバイルユーザーも、技术に精通した个人も高齢者も、特定のニーズを持つ障害者ユーザーもいます。実际、世界には视覚的な障害や违いを持つ以上います。

ナビゲーションを成功させるためには、起こりうるすべてのユーザーの课题を特定し、その解决策を开発する必要があります。ナビゲーションをより利用しやすくするために、以下のソリューションを追加することを検讨してください:

  • ナビゲーションまたはサブナビゲーションを终了する齿を开発する。
  • フォントサイズを大きくする
  • 色のコントラストを高めて読みやすくする
  • 画像には补濒迟テキストを、动画にはキャプションを含める

アクセシビリティを念头に置いて开発することで、すべての潜在顾客にとってより良いユーザー体験を生み出すことができ、コンバージョン率の向上につながる可能性があります。

6.モバイルテスト

スマートフォンからインターネットにアクセスしている现在、ナビゲーションはあらゆるモバイルデバイスのサイズで正しく表示されなければなりません。ショッピングから地元のピザレストランの検索まで、あらゆる场面でスマートフォンを利用する人が増えている今、消费者の需要に応えるには、直感的なウェブサイトのナビゲーションが100%モバイルフレンドリーである必要があります。

テストの际には、ナビゲーションラベルが読みやすく、フォントサイズが大きいことを确认してください。アクセシビリティの基準を満たすには、16辫虫のフォントサイズを使用するのが一般的です。また、ナビゲーション?オプションは、物理的なサイズとターゲット?タッチで简単にクリックできる必要があります。

强力なナビゲーションで记忆に残るユーザー体験を开発する

ナビゲーションはかつてないほど重要です。竞争の激しいデジタル环境で、消费者が利用できる选択肢が増える中、ナビゲーションは、解决策を探しているユーザーに适切な答えを提供する必要があります。强力なナビゲーションは、ユーザーを正しいページに导くだけでなく、コンバージョンや将来のウェブサイト访问につながる可能性も高くなります。

直感的なナビゲーションを开発する际には、以下のヒントを考虑してください:

  • ユーザーが见つけやすい、予测しやすい场所を选ぶ
  • カテゴリー?オプションは短く、説明的にする
  • ユーザーをコンバージョンに导く明确な道筋を作る
  • ドロップダウンメニューを削除し、クリックの回数を减らす。
  • すべてのユーザーにアクセシビリティを提供するデザイン
  • すべてのモバイルデバイスでナビゲーションをテスト

『Digital Experience Analytics必須ツール』をダウンロードして、各ツールがデジタルエクスペリエンス戦略においてどのような役割を果たすのか、またそれらを最大限に活用して実用的なインサイト最大限に引き出す方法をご确认ください。