ウェブサイトのユーザー エクスペリエンス分析: ページ ナビゲーションの原則

有名なグリム童話では、ヘンゼルとグレーテルは継母が自分たちを深い森で迷わせようとしていることを知っていたので、帰り道にパンくずをまきました。月が昇るとパンくずは鳥に食べられてしまいましたが、今日のインターネットデザイナーはこの物語からインスピレーションを得て、鳥に食べられない固定の「パンくず」を設計しました。

図1: インターネット上のさまざまなパンくずリスト

ヘンゼルとグレーテルは森の中で家への道を見つけるために、パンくずを撒きます。これはナビゲーションの手段です。パンくずが鳥に食べられなければ、森のどこにいても、今いる場所から家への帰り道が分かります。インターネットの情報量が爆発的に増加している今日、インターネット デザイナーは、ユーザーが情報の海で迷子にならないようにし、ナビゲートする方法を提供するために、Web ページ上にさまざまな固定パンくずリスト (図 1 を参照) を設計しています。 Apple は、最高のユーザー エクスペリエンスを提供するデザイン会社として広く知られています。apple.com がユーザーのナビゲーション ニーズを完璧に満たす方法を見てみましょう。

ページナビゲーションの原則

図2: AppleのiTunesウェブサイトで導入された新機能のパンくずリスト

図 2 は、apple.com で新しい iTunes 機能を紹介するパンくずリストです。要素はノード ラベルと矢印の 2 つです。

ノード ラベル: Apple ロゴ、iTunes、新機能。ノード ラベルにはさまざまなスタイルがあり、what'new では太字スタイルが使用されます。各ノード ラベルは矢印で区切られます。矢印: 方向を指し示す記号です。

パンくずリストがナビゲーションのニーズを満たす方法は次のとおりです。

1. 最後のノード ラベルは、ユーザーに現在の場所を伝えます。2. パンくずリストは、左から右への現在の場所への固定パスをユーザーに伝えます。3. 現在のページのノード ラベルを除き、他のノード ラベルはクリック可能で、ユーザーは前のページに戻ることができます (元の開始点に戻ることもできます)。これら 3 つのポイントを押さえれば、ユーザーは Web サイトで迷うことがなくなります。

図3: iTunesの新機能を紹介するAppleのWebサイトページ

次に、パンくずリストが配置されているページの上から下まで、さまざまなナビゲーション方法の要素を分析して (図 3)、ページがパンくずリスト以外にどのようにナビゲーションのニーズを満たしているかを確認します。

1. まず、ナビゲーション メニュー バーのロゴは、ユーザーに Apple の Web サイトにいることを知らせます。ナビゲーションのメニュー カテゴリは、Web サイトの合計ディメンション数をユーザーに知らせます。メニューで選択された iTunes は、現在 iTunes メニュー ディメンションにいることをユーザーに知らせます。

2. 次は iTunes ページのナビゲーション バーです。大きなタイトル iTunes は、次のコンテンツがすべて iTunes に関するものであることをユーザーに伝えます。右側の iTunes ページ メニュー ナビゲーションは、iTunes ページのコンテンツ カテゴリをユーザーに伝えます。新着情報のさまざまな状態は、現在選択されているのがこのカテゴリであり、次のコンテンツがこのカテゴリの下にあることをユーザーに伝えます。

3. 最後に、このページのタイトルは「iTunes の新機能」です。つまり、現在のページのコンテンツは、このタイトルに従って完全にレイアウトされています。

上記のナビゲーション要素は、1. ユーザーの現在の場所 (現在のページ タイトル)、2. 現在のページへの固定パス (上から下へのナビゲーション パスのレイアウトと要素)、3. 前のページに戻る方法 (現在のページ タイトルを除く各ナビゲーション メニューはクリック可能) も明確に伝えます。ナビゲーションには、Apple Web サイトのメイン ナビゲーション、iTunes のカテゴリ ナビゲーション、新着コンテンツ ナビゲーションの 3 つのレベルがあります。ナビゲーションの各レベルには、ナビゲーション メニューと選択状態があります。図 3 →→ に示すように、各ナビゲーション レベルの開始点を矢印でリンクし、実際のパンくずリストとまったく同じページ パスを形成します。ユーザーがこのページにたどり着いた経緯を伝えます。

上記ページのパンくずスタイルの分析とページ自体のコンテンツ分析から、ページ全体のすべてのナビゲーション方法で伝えられ、説明される情報は一貫していることがわかります。そのため、ページナビゲーションの原則を次のようにまとめることができます。1. ユーザーに現在の場所を通知する。2. ユーザーに現在のページへの固定パスを通知する。3. ユーザーが前のページに戻れるようにする。

ページナビゲーションの原則ガイドデザイン

1. ページナビゲーションの原則に準拠したデザイン:

図4: Nestle.com

図5: Nestle.com

ナビゲーションの原則を使用して、nestle.com のナビゲーション デザインを調べました。このページでは、ページ タイトル「ベビーフード」、Web サイトのロゴ、セカンダリ ナビゲーション バーで選択された「ブランド」、左側の 3 次ナビゲーション バーで選択された「ベビーフード」を通じて、現在の位置がわかります。このページの固定パスは、ホームからブランド カテゴリを選択し、次にベビーフードを選択することです。また、ナビゲーション バーの各カテゴリをクリックすると、ユーザーは前のレベルに戻ることができます。このページには、ナビゲーションに必要なすべての情報伝達要素が揃っています。ページ内には →→ というページパスも明確に記載されています。図 4 は、パンくずリストのノード ラベル要素に基づいて、ページ内の同じ要素を検索します。これらの要素は、異なる状態の同じ情報の内容と区別するために、比較的明白なスタイルで選択されています。ナビゲーション レイアウトは、上から下への包含と包含される関係を形成します。図 5 は、選択されたこれらの要素を矢印で接続し、ページ内のページ パスを見つけます。

図6: amazon.com

図6はAmazonで閲覧したWebナビゲーションの検索結果ページを示しています。この図には、非表示のページ パスと実際のパンくずリストの両方が表示されています。パンくずリストの各ノードラベルは、ページの他のナビゲーション方法で選択され、上から下、外側から内側への包含と包含される関係を形成し、非表示のページパスを形成します。ここで使用されているナビゲーション方法は、以前のものとは異なります。ナビゲーション メニューを使用するだけでなく、ツリーのようなカスケード メニュー方式も使用します。現在のページではページ タイトルは使用されませんが、エンティティ ブレッドクラムの最後のレベルのノード ラベルの拡張スタイルが直接使用されます。このページは、さまざまな方法でユーザーのナビゲーション ニーズを満たします。

2. ページナビゲーションの原則に準拠したその他の新しいスタイル:

図7: ブーレイランド

図8: ジョン・ルイスのショッピングウェブサイト

図9: Wowheadのパンくずリスト

3. ページナビゲーションの原則に準拠していないデザイン:

図10: meilishuo.com

Meilishuo の雑誌コンテンツ ページには実際のパンくずリストがないため、Web サイトのロゴ、ナビゲーション バー、ページ タイトルなどの他のナビゲーション方法を探します。矢印が示すように、ページ パスの一部が欠落していることがわかります。ホームページからどのカテゴリーに行けばいいのかわからず、「マガジン」にたどり着きました。この方法では、ユーザーは雑誌の前のカテゴリを見つけることができず、前のレベルに戻ることもできません。このページのナビゲーション原則は満たされていないため、ユーザーはここで迷ってしまいます。主な問題は、メイン ナビゲーション バーが欠落しており、現在のコンテンツ カテゴリが選択されていないため、パスが壊れていることです。

まとめ

デザイナーの創造性は無限ですが、ユーザーのナビゲーションのニーズは一定です。ナビゲーション原則の要件を満たしていれば、どのようなスタイルでもユーザーのナビゲーションタスクを完了できます。より簡単な方法は、ページ要素内のページのページ パスを見つけることです。これは、ナビゲーションの原則を満たすことと同じです。このような原則と方法は、設計が標準を満たしているかどうかをテストするために使用でき、ナビゲーション方法の設計をガイドするためにも使用できます。

元のタイトル: ウェブサイトのユーザー エクスペリエンス分析: ページ ナビゲーションの原則

キーワード: ウェブサイト、ユーザー、エクスペリエンス スコア、ページ、ナビゲーション、有名、グリム、童話、物語、ウェブマスター、ウェブサイトのプロモーション、収益化